BeaverBuilderの実用的でよく使うモジュール
BeaverBuilderのモジュール
まずは、モジュールを挿入したいページを開き、画面上部の黒い管理バーの中から、Beaver Builderをクリックして起動します。Beaver Builderメニュー右端の「終了」の隣にある「＋」ボタンをクリックするとモジュールメニューが表示されます。どのモジュールも、挿入したい箇所へドラッグ＆ドロップするだけで簡単に使用することが可能です。
ボタン
テキストの前後にアイコンを設定したり、ホバーした時の背景とテキストの色まで設定することができます。リンク先のURLは、直接入力、もしくは選択ボタンよりサイト内をタイトル名で検索し指定ができます。また、外部リンクなど新しいウィンドウで開きたい場合は、URL下のチェックボックスにチェックを入れます。同画面でポップアップ表示される、ライトボックスも選択可能です。その場合は、HTMLか動画のURLを入力します。
見出し
h1~h6の見出しに使用します。それぞれのフォントのデフォルトは、Wordpressの管理画面の外観 > カスタマイズ > 一般設定（全体） > 見出し で設定されています。ボタンと同様、リンク先を指定することも可能です。
h1見出し
h2見出し
h3見出し
h4見出し
h5見出し
h6見出し
HTML
HTMLのソースコードをそのまま入力して使うことができます。BerverBuilderのモジュールで表現がしにくい場合などに使用します。
画像
既にメディアライブラリにアップロードしている画像、もしくはこのモジュールからもアップロードが可能です。
※SVG画像に関しては、「BeaverBuilderと相性の良いおすすめ定番プラグイン」の記事でご紹介したプラグイン「Safe SVG」を利用して、予めメディアライブラリにアップロードしてからでないと利用できません。
動画
メディアライブラリの場合は、基本的にアップロード方法は画像と同様ですが、動画ではMP4とWebMの両方を設定します。これらは動画データを圧縮する形式で、圧縮することで容量を下げ、インターネット経由でも再生できるようにします。（MP4とWebMへのファイルの変換方法に関しては、また後日記事でお伝えします。）
また、YouTubeの動画を埋め込みたい場合は、動画の種類 > 埋め込みを選択します。YouTube側でサイトに表示させたい動画を表示し、「共有」→「埋め込む」で、取得した<iframe>タグのコードを、コピー＆ペーストすればOKです。
動画の種類を「埋め込み」にすることで、YouTube動画の埋め込みをレスポンシブ表示にすることができます。HTMLモジュールに埋め込みコードを貼り付けてしまうと、レスポンシブ対応になりませんが、動画モジュールのこの設定で埋め込むと、縦横比が固定されたレスポンシブ動画を埋め込むことが可能になります。
アイコン
アイコンは、Font Awesome、Foundation Icons、WordPress Dashiconsの各種アイコンを手軽に使用することができます。アイコンの横に文字を入れることも可能です。
お客様の声
複数のコンテンツをスライダーの形で表示することができるものです。
コンテンツ内はテキストエディタと同様のものになります。
BeaverBuilderのマニュアルサイトです
BeaverBuilderの教科書は、Wordpressのページビルダープラグインである「BeaverBuilder」の使い方を、初めての方にも分かりやすく解説するするサイトです。
Wordpressのサイトは運用していて、基本的な使い方はわかるけど…
テーマのカスタマイズとか、PHPが関わってくると難しくて手が出ないなぁ...というあなたにぴったりな記事を書いています。
BeaverBuilderを使えば、難しい条件分岐やレスポンシブデザインだって、簡単にチャレンジできます！
メニュー
Wordpressの管理画面の外観 > メニュー で設定したメニュー名を選択します。
レスポンシブでToggleメニューに切り替えも可能です。
アコーディオン
選択した項目がその場で広がって詳細な内容を表示する形式のメニューのことで、よくある質問などで使いやすいモジュールです。
各アイテムのタイトルをラベルに、開いた時の内容をコンテンツに入力します。テキストカラーやフォントの設定は、まとめてスタイルのタブで一括設定できます。
タブ
コーディングすると手間がかかるタブも、こちらのモジュールを使用すれば簡単に表現できます。レスポンシブでは、自動的にアコーディオンの形になります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
