Beaver Builder は、ページを実際の見た目のまま編集できるドラッグ＆ドロップ式のページビルダープラグインです。無料版（Beaver Builder Lite）でも、行と列でレイアウトを組み、見出し・テキスト・画像・ボタンなどを配置したページを作れます。この記事では、インストールと最初に確認しておく設定、ビルダー画面の基本操作、スマートフォン表示の調整、公開後に表示が崩れたときの確認ポイントまでを、初めて使う人向けに順に解説します。
Beaver Builderでできることと無料版・有料版の違い
Beaver Builder のページは「行（Row）」「列（Column）」「モジュール（Module）」の3層で組み立てます。行が横一列の帯、列がその中の区切り、モジュールが見出しや画像などの部品です。ブロックエディターのグループ・カラム・各ブロックの関係に近いと考えると理解しやすいでしょう。
無料版の Lite と有料版の主な違いは次のとおりです（2026年10月現在。プラン構成や料金は公式サイトで確認してください）。
- Lite（無料）: WordPress.org から入手できる。見出し・テキストエディター・画像・ボタン・HTML・動画など基本的なモジュールが使える
- 有料版: 問い合わせフォーム、スライダー、料金表、タブなどのモジュールや、レイアウトテンプレート、行やモジュールの保存・再利用などが加わる。年額制で、利用できるサイト数などでプランが分かれる
ヘッダー・フッター・アーカイブページまでビルダーで作りたい場合は、別売りのアドオン「Beaver Themer」が必要です。まず Lite で操作感を確かめ、足りない機能がはっきりしてから有料版を検討する進め方が、無駄がありません。
インストールと有効化
管理画面の「プラグイン」→「新規プラグインを追加」で「Beaver Builder」と検索し、「Beaver Builder Page Builder – Drag and Drop Website Builder」のような名前で表示される Lite 版をインストールして有効化します。WP-CLI が使える環境なら次の1行でも同じです。
wp plugin install beaver-builder-lite-version --activate有料版を購入した場合は、公式サイトのアカウントページから zip ファイルをダウンロードし、「プラグインを追加」→「プラグインのアップロード」から入れます。Lite と有料版は同時に有効化せず、有料版を入れたら Lite は無効化して削除します。
導入前に、本番サイトであればバックアップを取っておいてください。ページビルダーはテーマや他のプラグインと CSS・JavaScript が干渉することがあり、問題が出たときに元の状態へ戻せることが重要です。可能ならステージング環境で一度試してから本番に入れると安心です。
最初に確認しておく設定
有効化すると、管理画面の「設定」の中に「Beaver Builder」の項目が追加されます。いくつかタブがありますが、最初に見ておくべきなのは次の2つです。
ビルダーを使う投稿タイプ
「Post Types（投稿タイプ）」のタブで、Beaver Builder で編集できる投稿タイプを選びます。初期状態では固定ページのみが対象になっていることが多く、ブログ記事（投稿）でも使いたい場合はここでチェックを入れて保存します。
ここは「ビルダーで作る必要があるページだけに絞る」のが運用上のおすすめです。通常の記事はブロックエディターで書き、トップページや LP（ランディングページ）のようにデザインの自由度が必要なページだけを Beaver Builder で作ると、編集方法が混在せず、後から担当者が変わっても迷いにくくなります。
ツールとキャッシュ
「Tools（ツール）」のタブには、Beaver Builder が生成した CSS・JavaScript のキャッシュを削除するボタンなどがあります。Beaver Builder は、ページごとのレイアウト用ファイルをアップロードフォルダ内に生成して読み込む仕組みです。編集内容が公開画面に反映されない、表示が崩れたといったときに、まずこのキャッシュ削除を試すことになるので、場所を覚えておきます。
ページを作成してビルダーを起動する
- 「固定ページ」→「新規固定ページを追加」でページを作成し、タイトルを入力する
- 編集画面に表示される「Beaver Builder」を起動するボタン（「Launch Beaver Builder」など）をクリックする
- 公開側の画面に切り替わり、ページの見た目のまま編集できる状態になる
既存のページを編集するときは、公開画面の上部にある管理バーの「Beaver Builder」からも起動できます。
一度 Beaver Builder で編集したページは、以降はビルダー側の内容が表示に使われます。ブロックエディター側で本文を書き換えても公開画面には反映されないため、「このページはどちらで編集するのか」を決めておくことが大切です。
ビルダー画面の基本操作
行・列・モジュールを配置する
画面右上の「＋」ボタンを押すと、追加できる部品のパネルが開きます。ここから「行（Rows）」のレイアウト（1列、2列、3列など）をページ上にドラッグし、その中に「モジュール（Modules）」をドラッグして配置します。
列の幅は、列の境目をドラッグすると変えられます。モジュールは別の列へドラッグして移動でき、行ごと上下に並べ替えることもできます。最初は「行を置く→列数を決める→モジュールを入れる」の順番を守ると、配置に迷いません。
設定パネルで見た目を調整する
行・列・モジュールにマウスを重ねると、レンチのアイコン（設定）や複製、削除のボタンが表示されます。設定パネルは、モジュールの内容を入力するタブ、色や文字サイズなどを指定するスタイルのタブ、余白や表示条件を指定する詳細設定のタブに分かれています。
余白（マージン・パディング）を行・列・モジュールのどこに付けるかを決めておくと、後の修正が楽になります。たとえば「セクション間の余白は行に付け、モジュールには付けない」と決めておけば、余白を変えたいときに探す場所が1つで済みます。
スマートフォン表示を確認する
Beaver Builder には、パソコン・タブレット・スマートフォンの表示を切り替えて確認するプレビュー（レスポンシブ編集）があります。余白や文字サイズは端末ごとに別の値を指定できるので、スマートフォンで詰まって見える部分だけ値を小さくします。
詳細設定のタブにある表示条件を使うと、「パソコンでは表示し、スマートフォンでは隠す」といった指定もできます。ただし、隠した部品も HTML としては読み込まれるため、重い画像や動画をこの方法で出し分けると、スマートフォンの表示速度が落ちる点に注意してください。
保存と公開
編集が終わったら、画面右上の「完了（Done）」ボタンを押します。「公開」「下書き保存」「破棄」などの選択肢が表示されるので、目的に合わせて選びます。
- 公開: 編集内容をそのまま公開する
- 下書き保存: 公開中のページには反映せず、編集内容だけを保存する
- 破棄: 前回保存した状態から行った変更を取り消す
公開済みのページを大きく作り直すときは、下書き保存を使えば公開中の表示を崩さずに作業を進められます。過去の状態に戻したい場合に備えて、ビルダー内の履歴（リビジョン）機能も確認しておくと安心です。
表示がおかしいときの確認ポイント
公開画面の見た目が編集画面と違う、レイアウトが崩れるといった場合は、次の順で確認します。
- 「設定」→「Beaver Builder」のツールからキャッシュを削除する
- キャッシュ系プラグインやサーバーのキャッシュ、CDN のキャッシュを削除する
- CSS・JavaScript の結合や遅延読み込みを行う高速化プラグインの設定を一時的に止めて、表示が戻るかを見る
- テーマを一時的に標準テーマに切り替えて、テーマとの干渉かどうかを切り分ける
特に 3 は原因になりやすい項目です。高速化プラグインで JavaScript を遅延させると、ビルダーで作ったスライダーやタブが動かなくなることがあります。原因が分かったら、Beaver Builder のファイルだけを最適化の対象から除外する設定にします。
また、Beaver Builder を無効化すると、ビルダーで作ったデザインは表示されなくなります。将来ほかのページビルダーやブロックエディターに移行する可能性があるなら、ビルダーで作るページを必要なものに限っておくことが、移行の手間を減らすことにもつながります。
まとめ
- Beaver Builder は「行・列・モジュール」の3層でページを組み立てる。まず無料の Lite で操作を確かめ、必要な機能が見えてから有料版や Beaver Themer を検討する
- 有効化後は「設定」→「Beaver Builder」で使う投稿タイプを選び、ビルダーで作るページを絞って運用する
- ビルダーで編集したページはビルダー側の内容が表示に使われる。スマートフォン表示はレスポンシブ編集で端末ごとに調整する
- 表示が崩れたら、Beaver Builder のキャッシュ削除→キャッシュ系・高速化プラグインの確認→テーマの切り分けの順に確認する