Diviプラグインのハイライト–どこでもページビルダー

公開: 2017-05-25

Diviは、ドラッグアンドドロップモジュールを使用してページと投稿のレイアウトを作成できる、非常に使いやすいページビルダーです。それは使いやすさで人々はそれについてとても情熱的になり、彼らは彼らのウェブサイトのあらゆる可能な領域でそれを使いたいと思っています。そこで、今日のDiviプラグインハイライトで取り上げているサードパーティのプラグインが登場します。

Page Builder Everywhereは、通常は内部で機能しない領域にDiviBuilderを追加します。カスタム投稿タイプ、カテゴリページ、検索ページ、アーカイブページ、WooCommerce製品ページ、404ページなどでビルダーを使用できます。ヘッダー、フッター、サイドバーの作成にも使用できます。

テストのために、4つの投稿があるグリッドレイアウトで簡単なブログを作成しました。このレイアウトを拡張したいのですが、プラグインで行います。画像はUnsplash.comから取得されました。

Diviレイアウト

プラグインは事前に作成されたDiviレイアウトを使用するため、最初にそれらを作成する必要があります。ダッシュボードのDivi 、 Divi Libraryに移動し、[新規追加]を選択してレイアウトを作成します。モジュール、全幅モジュール、行、セクション、全幅セクション、特殊セクション、またはレイアウトを使用してレイアウトを作成できます。

どのオプションでも機能します。背景をより細かく制御し、複数のモジュールと列を追加できるようにするには、ライブラリでモジュールを作成するときにモジュールを選択するのではなく、行またはセクションを使用してレイアウトを作成します。これらの例では、主に行を使用しました。

ウィジェットエリア

プラグインはDiviに5つの新しいウィジェット領域を追加し、それらの場所にレイアウトを配置できるようにします。

ヘッダーの上
ヘッダーの下
フッター
上記のコンテンツ
以下のコンテンツ

必要なレイアウトを作成したら、 Divi Layoutウィジェットを表示する場所にドロップし、ドロップダウンボックスからレイアウトを選択します。レイアウトを作成していない場合は、[ Diviライブラリにレイアウトを追加]というラベルの付いたリンクをクリックすると、ライブラリに移動します。

条件付きロジック

ウィジェットを使用すると、条件付きロジックを使用できるため、レイアウトをいつ表示するかを決定できます。 メッセージ付きのヘッダーを選択し、[場所]をクリックしました。これにより条件付きロジックが表示されるため、表示するかどうかを選択したり、投稿タイプを選択したり、ドロップダウンボックスから結果を選択したりできます。必要な数の条件を追加できます。それらはORロジックを使用するため、IF This = That OR this = ThatOR…と表示されます。

たとえば、投稿の種類、ユーザー、特定のページ、分類法などに基づいてモジュールを表示できます。これは、ユーザーがログインしていない場合、またはWooCommerceのみにメッセージを表示するレイアウトを作成できることを意味します。製品ページ。多層ロジックを使用して、レイアウトを表示するタイミングを決定することもできます。カテゴリごとに異なるセクションを表示できます。 Webサイトのさまざまな部分に、独自のメニューを設定できます。

ユーザーがログインしていない場合にオプトインフォーム、メッセージ、または広告を表示する場合は、条件付きロジックが最適です。ログインしているユーザーには、フォーム、メッセージ、または広告は表示されません。これにより、売り込みを管理できます。その1回の使用だけで、プラグインを使用するのに十分なWebサイトに利益をもたらすことができます。可能性は無限大。

ページビルダーどこでも例

ある場所から別の場所に移動したい行の例を作成しました。ページのさまざまな領域でどのように表示されるかを見てみましょう。いくつか例を追加していきます。

ヘッダーの上

ヘッダーの上にどのように表示されるかを示すサンプル行を次に示します。新しい行とともにロゴが表示されることに注意してください。これは意図的なものであり、簡単に変更できます。

テキストモジュールを使用してレイアウトを作成し、フォントサイズ、色、およびパディングを調整しました。カスタムスタイルを設定しない限り、ヘッダーと同じ背景を使用してメニューの上にテキストを配置します。これには、読者をページ、投稿、製品などに移動できるボタンが含まれています。これは、ヘッダーの上にCTAを作成するための優れた方法です。

ヘッダーの下

ヘッダーの下で、行がメニューの下の領域に移動します。このコンテンツはヘッダーと一緒に残るため、ユーザーがスクロールしたときにヘッダーが画面に表示されたままの場合、この領域のコンテンツも画面に表示されたままになります。 ヘッダーの上と同じように、これは自分でスタイルを設定しない限り、ヘッダーの色を使用します。

これは2つのセクションを持つ行です。メッセージのテキストモジュールと、それに含まれるすべてのソーシャルネットワークの1つを備えたソーシャルメディアフォローモジュールです。行の背景を少しだけ目立たせるようにスタイリングしました。

もちろん、このスペースは、ニュースレターの登録フォーム、連絡先情報、営業時間、画像など、画面に残したいものすべてに使用できます。

上記のコンテンツ

この例では、DiviBuilderを使用していない通常のブログ投稿に配置しました。どの場所も通常の投稿やページで機能します。これは、Diviレイアウトを追加し、通常の投稿にモジュールを追加するための優れた方法です。 コンテンツの上はコンテンツと一緒にスクロールします。

以下のコンテンツ

これは、モジュールをコンテンツの下、フッターのすぐ上に配置します。自分でスタイリングしない限り、フッターのスタイリングが必要になります。コンテンツとともにスクロールするため、視差を使用している場合は、フッターから離れて表示されます。

フッター

フッター内の私のレイアウトを見てみましょう。フッターとは別にスタイルを設定でき、フッターと一緒にスクロールするため、視差を使用している場合はコンテンツとは一線を画します。

WooCommerce製品ページ

この例では、2つのレイアウトを追加しました。 1つ目は製品の上にあり、テキストモジュールとビデオモジュールが含まれています。

2番目のレイアウトは製品の下に配置され、テキストモジュールとショップモジュールが含まれます。

次に、2つのウィジェットをそれぞれの場所に配置し、ウィジェットでレイアウトを選択し、 Product投稿タイプを使用するページにのみレイアウトを表示するように条件を設定しました。

その結果、商品の上下にDiviレイアウトの商品ページが作成されます。

404ページ

404ページとして使用するレイアウトを作成しました。

次に、ウィジェットを配置し、レイアウトを選択して、 404ページにのみ表示する条件を選択しました。製品ページのウィジェットがまだ配置されていることに注意してください。条件は、私が彼らに望まない場所を彼らが見せないようにします。

これは、DiviBuilderを使用して404ページを作成するための優れた方法です。

ページビルダーどこでもカスタマイザー

PBEカスタマイザーと呼ばれる新しいカスタマイザーがフロントエンドのドロップダウンメニューとテーマカスタマイザーメニュー内に追加されます。次のセクションが含まれています。

メインヘッダー
ヘッダーの上
フッター

それぞれを見てみましょう。

メインヘッダー

もしヘッダ上のための例でわかるように、ロゴは、ヘッダと、ヘッダ上のセクションと重なっています。これをオーバーラップさせないようにし、[ヘッダーの上のロゴオーバーラップセクションを停止]を選択すると、ロゴを元の場所に残すことができます。

元のヘッダーを非表示にするには、[デフォルトのメインヘッダーを削除]を選択します。上記ヘッダ領域下の両方のためのメインヘッダ作業に備えています。

ヘッダーの上

ヘッダーの上では、リーダーがスクロールしたときにヘッダーの上にあるコンテンツを非表示にできます。

フッター

Hide Bottom Footerを選択すると、元のフッターがオフになります。この例では、モジュールのスタイルを設定しなかったため、モジュールの周りのスタイルを引き継ぎます。ここでは、背景画像の上に配置されています。

価格とドキュメント

Page BuilderEverywhereの価格は14ドルです。販売ページには、開始に役立つ手順とFAQが含まれています。

最終的な考え

Page Builder Everywhereは、使いやすいプラグインです。 Diviレイアウトを追加するための5つの新しい場所が提供され、さらに特定の投稿タイプ、カテゴリ、作成者、日付、分類法などに追加して、複数の条件を作成できます。ユーザーがログインしているかどうかに基づいて、それらを表示または非表示にすることもできます。プラグインはDivi Widget Builderと競合する可能性がありますが、Page Builder Everywhereを使用している場合は、そのプラグインは必要ありません。

我々はあなたから聞きたい。 Page Builder Everywhereを試しましたか？ 以下のコメントであなたの経験を教えてください！

Sentavio /shutterstock.com経由の注目の画像