当社の Beaver Builder プラグインは、テンプレートとモジュールを使用して完全な Web サイトを構築するのに役立ちます。 ただし、サイトをさらにカスタマイズしたい場合もあります。 Beaver Builder ショートコードを使用すると、モジュール、ヘッダー、フッター、およびサイドバー内に追加のコンテンツを追加できます。

この投稿では、Beaver Builder ショートコードを紹介し、それらをコンテンツに挿入する方法を示します。 また、Web サイトのデザインを向上させるいくつかの例についても説明します。 飛び込みましょう！

Beaver Builder ショートコードの紹介

以前に WordPress Web サイトで作業したことがある場合は、ショートコードに既に精通しているかもしれません。 これらは、サイトに機能を追加する小さなコード スニペットです。

コード エディターを使用してすべてを HTML で記述するのではなく、ページにショートコードを挿入するだけです。 これには、モジュール、行、列などの Beaver Builder 要素に対応するスラッグまたは ID があります。 投稿、ページ、またはレイアウト テンプレートにショートコードを使用することもできます。

この例では、保存された行を HTML モジュールに追加しています。

[保存] をクリックすると、Beaver Builder は自動的にショートコードを保存された行に変換します。

この記事の後半で、エディターでショートコードを追加する方法を紹介します。 ここでは、Beaver Builder ショートコードを使用する利点について説明しましょう。

ショートコードは、視覚要素をテキストベースの領域に追加するのに便利です。 たとえば、価格設定モジュールを作成し、ショートコードを使用して製品写真を追加できます。 この方法では、2 つの個別のモジュール (価格設定と写真) を組み合わせて使用​​する必要はありません。

ショートコードを使用すると、WordPress ブロック エディターを操作しながら Beaver Builder 要素をコンテンツに挿入することもできます。 これは、モジュール、行、または列を追加するために Beaver Builder エディターに切り替える必要がないことを意味します。

次のようなテキスト フィールドを使用して、任意の Beaver Builder モジュールにショートコードを追加できます。

• HTML
• 文章
• ヘッダ
• 叫ぶ
• アイコン
• タブ

ただし、ショートコードを追加しすぎるのは賢明ではないかもしれません。 これにより、サーバーがショートコードごとに CSS および Javascript ファイルを要求する必要があるため、読み込み時間が長くなる可能性があります。 1 ページあたり最大 2 つ使用することをお勧めします。

便利な Beaver Builder ショートコードの 5 つの例

Beaver Builder ショートコードには多くの使用例があります。 役立つ例をいくつか見てみましょう。

1.価格表のコールトゥアクションボタン

ランディング ページまたは販売ページに複数の製品オプションを含む価格表があるとします。 価格を一覧表示し、ページの下部にあるボタンでチェックアウトするように顧客に指示することができます. ただし、ユーザーはさらに下にスクロールする必要があるため、ユーザー エクスペリエンス (UX) が損なわれる可能性があります。

代わりに、顧客に製品の購入を促す CTA (Call to Action) ボタンを作成できます。 これはチェックアウト ページに直接リンクするため、顧客はそれ以上移動する必要がありません。 次に、ショートコードを使用してこのボタンを価格表に追加できます。

視覚的なブランドに合わせて CTA ボタンをカスタマイズすることを忘れないでください。

2. タブ内のお問い合わせフォーム

ビジネス サイトがある場合は、[概要] セクションにいくつかのタブを追加できます。 これにより、ユーザーはページを下にスクロールしなくても、会社について詳しく知ることができます。

また、潜在的な顧客が読み終わったらすぐにサービスについて連絡してほしいとしましょう。 ユーザーはすでにタブの切り替えに時間を費やしています。 彼らを別の場所に誘導することで、連絡を取るという決定を再考するために数秒余分に与えることができます.

代わりに、ショートコードを使用して、タブの 1 つに連絡先フォームを追加できます。

それはとても簡単です！ 顧客はページを離れることなくあなたに連絡できるようになりました。

3. テキスト ボックス内の画像

ページを作成するときに、画像とテキストを 1 つのモジュールに追加したい場合があります。 2 つの個別のモジュールを使用することもできますが、コンテンツが分割され、画像をテキストの中央に配置することはできません。

テキストと画像を組み合わせることは、オンライン ストアで商品を効果的に表示する方法です。 たとえば、価格設定ボックス モジュールに写真を追加して、さまざまな製品機能を紹介できます。

理論的には、この同じレイアウトを、異なるモジュールを互いに積み重ねてまとめることができます。 ただし、画像ショートコードを使用すると、デザイン プロセスを高速化できます。

4. ブロック エディター内の任意のモジュール

ブロック エディターで作業するときに、Beaver Builder ショートコードを使用することもできます。 これは、ブログ投稿を書いていて、記事にインタラクティブな要素を追加したい場合に特に便利です。

ブロック エディターを離れることなく、Beaver Builder モジュールをページに簡単にドロップできます。 ショートコード ブロックを挿入し、コードを内部に貼り付けるだけです。

投稿を公開すると、ショートコードによってコンテンツがフロント エンドに表示されます。

たとえば、Contact Form モジュールを挿入できます。 また、顧客をショップに誘導する行動を促すフレーズや、店舗の場所の埋め込み地図を追加することもできます。

5. The Date (Beaver Builder テーマのみ)

当社の Beaver Builder テーマには、カスタム Date ショートコードが付属しています。 これにより、ヘッダー、フッター、サイドバーなど、ページの任意の部分に現在の日付が表示されます。

このショートコードは、ニュース Web サイトを運営している場合に便利です。 次のショートコードのいずれかを使用して日付を追加できます。

フッターの著作権メッセージの横にこのショートコードを使用することもできます。 これにより、常に最新の状態に保つことができます。

Beaver Builder でショートコードを追加する方法 (2 ステップ)

Beaver Builder ショートコードがデザイン プロセスを高速化し、簡素化するいくつかのシナリオについて説明しました。 それでは、それらをサイトに追加する方法を見てみましょう。

ステップ 1: ショートコードを作成する

Web サイトでショートコードをすぐに利用できない。 ショートコードとして挿入する前に、まず Beaver Builder 要素を保存する必要があります。 これらの要素には次のものが含まれる場合があります。

• モジュール
• 行
• コラム
• テンプレート

たとえば、カスタムの Contact Form モジュールをデザインしたいとしましょう。 これを行うには、 Beaver Builder > Saved Modules > Add New に移動します。

次に、モジュールに名前を付け、そのタイプを選択するよう求められます。

[保存済みモジュールの追加] をクリックします。 次のページで、 Launch Beaver Builderを選択してエディターにアクセスします。 ここで、お問い合わせフォームを好みに合わせてカスタマイズできます。

準備ができたら、必ずモジュールを公開してください。 これで、保存済みモジュールページに表示されます。 Beaver Builder の最新バージョンを使用している場合は、自動生成されたショートコードを確認できます。

ShortCode列が表示されない場合は、コードを手動で作成する必要があります。 これを行うには、モジュールのスラッグが必要です。

モジュールの下にある [編集] ボタンをクリックすると、そのスラッグを表示できるはずです。 表示されない場合は、[画面オプション] メニューを開き、 Slugの横にあるボックスにチェックを入れます。

次のコードを使用して、このモジュールのショートコードを作成できます。

 [fl_builder_insert_layout slug="my-post-slug"]

「my-post-slug」を Beaver Builder モジュールのスラッグに置き換えることを忘れないでください。 この例では、次のようになります。

 [fl_builder_insert_layout slug="contact-form"]

これで、Beaver Builder モジュールのショートコードを作成する方法がわかりました。

ステップ 2: ショートコードをページに挿入する

最後のステップは、ショートコードをページに追加することです。 ほとんどの場合、このプロセスでは、モジュールのテキストフィールド内にスニペットを貼り付けます。

前の価格表の例を次に示します。 ご覧のとおり、機能 5のテキスト ボックスに CTA ボタンのショートコードを追加しました。

Beaver Builder はフロントエンド エディターを使用するため、保存したモジュールをすぐに確認できます。 場合によっては (HTML モジュールを使用する場合など)、ショートコードがビジュアル要素に変換される前に変更を保存する必要がある場合があります。

結論

Beaver Builder ショートコードを使用すると、保存したモジュール、行、列、またはレイアウトをページのさまざまな部分にすばやく追加できます。 それらを使用して、デザインプロセスをスピードアップし、美しい WordPress ページを作成できます.

要約すると、次の簡単な手順に従って Beaver Builder ショートコードを使用できます。

1. 要素 (モジュール、行、列、またはレイアウト) を保存し、そのショートコードまたはスラッグを探します。
2. ショートコードを Beaver Builder モジュール内のテキスト フィールドまたはブロック エディターのショートコード ブロックに挿入します。

サイトの魅力的なページの作成を開始する準備はできていますか? Beaver Builder の使いやすい機能の完全なリストをチェックしてください!

関連する質問

Beaver Builder はショートコードを使用しますか?

Beaver Builder は、モジュール、行、列、テンプレートなどの保存された要素のショートコードを提供します。 次に、これらのスニペットをテキストベースのフィールドおよびモジュールに追加できます。 これは、Beaver Builder フロントエンド エディターと WordPress ブロック エディターの両方で可能です。 さらに、ショートコードを使用すると、他のお気に入りのプラグインを Beaver Builder と一緒に使用できます。

ショートコードを使用するには Beaver Builder テーマが必要ですか?

ショートコードを使用するために公式の Beaver Builder テーマは必要ありません。 ページ ビルダー プラグインを使用して、ほとんどのテーマでページを作成し、ショートコードを追加できます。 ただし、Date ショートコードなどの一部のショートコードは、Beaver Builder テーマでのみ機能します。

Beaver Builder と Beaver Themer の違いは何ですか?

Beaver Builder は、モジュールとテンプレートを使用してページと投稿のコンテンツ領域を編集できるページ構築ツールです。 対照的に、Beaver Themer は、ヘッダー、フッター、サイドバーなど、通常はテーマによって制御されるサイトの領域を編集できるアドオン プラグインです。 このコンテンツには、テーマ テンプレート、テンプレート パーツ、投稿グリッドが含まれます。