Beaver Builder WordPress プラグインガイドとレビュー

ページビルダーはここしばらく WordPress コミュニティの話題になっています。これらのツールは長い間人気がありましたが、新しいブロックエディターの導入により、多くの人がそれらのツールが依然としてどの程度関連性があるのか疑問に思っています。

ブロックエディターは興味深い新機能ですが、カスタムページや投稿のデザインに関しては、ページビルダープラグインに勝るものはありません。 Beaver Builder WordPress プラグインは、この種のツールが提供する利点の完璧な例であり、使いやすく、驚くほど強力です。

この記事では、Beaver Builder について詳しく見ていきます。その主な機能と価格について説明し、実際にどのように機能するかを示します。これにより、これがあなたの Web サイトにとって適切なページビルダーソリューションであるかどうかを自分で判断できます。

Beaver Build WordPress ページビルダーの新しく改良され更新されたガイドに早速入ってみましょう!

WordPress ページビルダーが必要な理由

このプラットフォームを初めて使用する場合を除き、おそらくクラシック WordPress エディターに精通しているでしょう。

これは機能していても、常に必要最小限のシステムでした。テキスト、メディアなど、ほぼすべてのコンテンツが 1 つのフィールドに追加されました。独自のレイアウトを作成したり、優れた機能を追加したりすることは可能ですが、多くの場合、コーディングのノウハウや追加のプラグインが必要でした。

しかし最近、WordPress 開発者は、Gutenberg を搭載した新しいバージョンのエディタをリリースしました。

この変化は長い間続いていましたが、特に新しいものでもありません。ブロックエディターは、ページビルダーの合理化されたバージョンであり、WordPress ユーザーの間でしばらくの間人気のあるソリューションです。

WordPress ページビルダーはそれぞれ異なりますが、基本的なレベルでは、ほぼすべて同じ基本概念に基づいています。これらは、事前に構築された要素の選択を提供し、それらの要素からコンテンツを構築できるようにします。目標は、デザインやコーディングの経験がなくても、独自のレイアウトや機能を備えたコンテンツをより簡単かつ直感的に構築できるようにすることです。

ただし、ブロックエディターは非常に限定された機能であることに注意してください。投稿やページをより視覚的な方法でデザインできますが、提供されるブロックのライブラリは小さく、複雑なレイアウトはほとんどサポートされていません。このため、この投稿の残りの部分で説明するプラグインなど、他のページビルダーオプションを検討する価値は依然としてあります。

ビーバービルダーの基本

Beaver Builder は、世の中で最も人気のあるページビルダープラグインの 1 つですが、それには十分な理由があります。初心者でも簡単に手に取ることができますが、幅広いオプションで遊ぶことができます。基本的には、他のページビルダーと同様に、投稿やページを作成するためのドラッグアンドドロップシステムです。ただし、多くの追加機能も提供します。

このプラグインの主な機能には次のようなものがあります。

基本的なオプション (テキストモジュールや画像モジュールなど) からより高度な機能 (Call To Action、マップ、ギャラリーモジュールなど) に至るまで、コンテンツ「モジュール」の大規模なライブラリ。
ページ、投稿、カスタム投稿タイプを視覚的に構築し、変更をすぐに確認できるカスタム編集インターフェイス。
複雑な複数列のレイアウトを作成し、サイズや間隔などを調整する機能。
必要に応じて変更できる、設計プロセスを開始できる事前に構築されたセクションとページテンプレート。
後で使用できるように独自のテンプレートを作成して保存するオプション。
より上級のユーザー向けに、カスタム HTML と独自の CSS クラスを追加するためのオプション。

もちろん、これらすべての機能にはコストがかかります。無料で利用できる Beaver Builder Lite バージョンもありますが、これにはいくつかの基本モジュールしか提供されておらず、テンプレートやインポート/エクスポートオプションなどの多くのコア機能は含まれていません。ただし、ライトバージョンは、このページビルダーをテスト実行して、その動作が気に入るかどうかを確認するのに役立ちます。

Beaver Builder を本格的に使用する予定がある場合は、完全なパッケージにアクセスできるプレミアムライセンスを購入することをお勧めします。これらは、無制限の Web サイトで使用できる $99 から始まり、1 年間のサポートが付いています。

この特定のツールには先行投資が必要です。ただし、初期費用は時間を節約し、長期的にはより効果的なウェブサイトを作成できるため、予算内であれば悪くない取引です。

Beaver Builder を始める方法

Web サイトに新しいプラグインを採用するかどうか迷っている場合、最善の方法は、そのプラグインについてできる限りのことを学ぶことです。ページビルダーに関しては、その外観、仕組み、提供されるオプションが含まれます。

これを念頭に置いて、Beaver Builder を手に取り、それを使用して投稿やページを作成することがどのようなものかを見てみましょう。当然のことながら、最初に行う必要があるのは、プラグインをインストールしてアクティブ化することです。

さらに、プレミアムバージョン (このチュートリアルで使用します) を購入した場合は、ライセンスキーをアクティブ化する必要があります。その後、すぐに仕事に取り掛かることができます。

ステップ 1: Beaver Builder エディターにアクセスする

プラグインをインストールすると、ダッシュボードに新しい Beaver Builder タブが表示されます。たとえば、独自のテンプレートを作成した場合など、カスタムコンテンツはここに保存されます。

Beaver Builder > Add New に移動して、ページビルダーを使用してコンテンツを作成することもできます。または、[ページ] > [新規追加] (または投稿やカスタム投稿タイプの場合は同等の機能) に移動することもできます。新しいオプションが表示されます。

これは、デフォルトの WordPress エディターまたはページビルダーのいずれかでコンテンツを作成できることを意味します。 Beaver Builder の起動ボタンをクリックしてみましょう。

ご覧のとおり、まったく新しいインターフェイスが表示されます。ここでは、コンテンツを作成し、それがページ上でどのように表示されるかを正確に確認できます。

ステップ 2: 開始テンプレートを選択する

必要がない場合は、テンプレートを使用する必要がないことに注意してください。好きなモジュールを追加して、ページと投稿を完全にゼロから構築できます。ただし、最も簡単な学習方法はテンプレートから始めることです。これをここで説明します。

エディターの右側にあるメニューで、上部にある [テンプレート] タブを選択すると、多くのオプションが表示されます。テンプレートをクリックするか、ページにドラッグするだけで、完全版が表示されます。

これにより、プレースホルダーのテキストと画像とともに開始レイアウトが提供されます。幸いなことに、ここにあるすべての要素は自由に置き換えたり変更したりできるため、Web サイトに独自のものを作成できます。

ステップ 3: 個々のモジュールを編集する

Beaver Builder エディターの個々の要素は、自己完結型のモジュールです。意味を確認するには、開始テンプレートのテキスト、画像、または機能の上にカーソルを置きます。青い枠で囲まれたモジュールが表示され、それをクリックすると新しいメニューが表示されます。

これはそのモジュールの設定ボックスです。これには、選択したコンテンツのすべてのカスタマイズオプションが含まれています。したがって、正確に何が含まれるかは、作業しているコンテンツの種類によって異なります。

たとえば、写真モジュールを使用すると、使用するファイルを変更したり、キャプションやリンクを追加したりできます。 [スタイル] タブに切り替えて、画像の配置や境界線などを変更することもできます。

ほとんどのモジュールには詳細タブもあり、余白を調整したり、特定の種類のデバイスでのみ表示したり、カスタム HTML を追加したりできます。

ご覧のとおり、Beaver Builder モジュールのカスタマイズは簡単です。各タイプのモジュールが提供するオプションに慣れるには少し経験が必要ですが、一度慣れてしまえば、すぐに独自のコンテンツを追加できるようになります。

ステップ 4: コンテンツの構成とレイアウトをカスタマイズする

個々のモジュールに変更を加えるだけでなく、ページ全体をカスタマイズすることもできます。これを行う方法の 1 つは、モジュールを追加および削除することです。モジュールを追加するには、エディターのメインメニューからモジュールを選択し、ページ上の所定の位置にドラッグするだけです。

一方、モジュールの上にカーソルを置くと表示されるX をクリックすると、モジュールを削除できます。モジュールを上下または左右にドラッグして、自由に再配置することもできます。

さらに、ページ全体のレイアウトを変更することもできます。この動作例を確認するには、モジュールの上にカーソルを置き、[列の編集] > [列の設定] をクリックします。

ここでは、特定の列のすべてのモジュールに関連するオプションを見つけることができます。たとえば、列の背景色や間隔を変更したり、枠線を追加したりすることもできます。

次に、ページの背景の上にカーソルを置き、右上隅にある [行設定] を選択します。

同様のメニューが表示されますが、今回はオプションがモジュールの関連する行に適用されます。行を固定幅または全幅に設定したり、色をカスタマイズしたり、列で使用できるのと同じ変更を行うことができます。

最後に、エディタのメインメニューを再度選択し、行タブに移動します。

ここでページに新しい行と列を追加し、レイアウトを大幅に変更できます。さらに、ページや投稿を最初から作成する場合は、最初にここにアクセスします。最初にコンテンツのレイアウトを決定してから、好きな場所にモジュールを追加できます。

ステップ 5: ページビルダーの機能セットを拡張する (オプション)

Beaver Builder には他にも多くの機能やオプションがあることは注目に値します。ここではほんの表面をなぞっただけです。ただし、開始するために理解する必要がある主要な機能については説明しました。その後、実践的なアプローチがコツを学ぶ最良の方法です。

ただし、結論をまとめる前に、この特定のページビルダーをさらに活用できる方法がいくつかあることを指摘しておく必要があります。まず、公式の Beaver Builder テーマがあり、上位 2 つのライセンス層で無料で入手できます。

Beaver Builder は、好きなテーマで使用できます。ただし、これはページビルダーと並行して機能するように最初から構築されています。これは、さまざまな種類やスタイルの Web サイトを形作ることができる基本的なフレームワークを提供します。

オプションのアドオンである Beaver Themer もあります。

この追加プラグインを使用すると、サイトのヘッダーとフッター、アーカイブページ、404 および検索ページなどで Beaver Builder のドラッグアンドドロップページビルダーを使用することもできます。これにより、同じシステムを使用して Web サイトのほぼ全体をデザインできるようになります。

147 ドルという価格はすべての予算に収まるわけではないかもしれませんが、収益化を目指す Web サイトや、複数のサイトで作業する開発者やデザイナーにとっては便利な追加です。

Web サイト用のページビルダーを選択することは、大きな決断となります。将来的にコンテンツの作成方法やデザイン方法を変更すると、互換性の問題が発生する可能性があるため、長期的に使い続けることがわかっているツールから始めるのが最善です。

幸いなことに、Beaver Builder は初心者と上級ユーザーの両方にとって確実なオプションです。さらに、上で見てきたように、始めるのは簡単です。

Beaver Builder を使用したことがありますか?その経験はどうでしたか?以下のコメントセクションで私たちと共有してください！

Beaver Builder WordPress プラグイン ガイドとレビュー