Diviプラグインのハイライト：Divi Widget Builder

公開: 2017-12-04

ウィジェット領域内にDiviモジュールとレイアウトを配置したいと思ったことはありませんか？サイドバーとフッターのDiviレイアウトを考えるだけで、自分のスキルレベルを超えたデザインの可能性についてのアイデアが得られます。面白いのは、スキルレベルに関係なく簡単にできることです。どのように？ Divi WidgetBuilderと呼ばれるサードパーティのプラグインを使用します。

Divi Widget Builderを使用すると、ウィジェット内のDiviライブラリに任意のDiviレイアウトを表示できます。これには、すべての機能と調整を含む、単一のモジュールと完全なページが含まれます。 DiviとExtraの両方で動作します。この記事では、Divi Widget Builderを見て、ウィジェット領域にDiviレイアウトを追加するのがいかに簡単かを見ていきます。

Divi Widget Builderは、発行元のWebサイトで購入できます。

Divi WidgetBuilderのインストールとアクティブ化

通常どおりプラグインをアップロードしてアクティブ化します。

プラグインをアクティブ化したら、ライセンスキーを入力する必要があります。ダッシュボードメニューのDivi 、 Divi Widget Builderに移動し、ライセンスキーを入力します。プラグインを使用するために必要な他のセットアップはありませんが、ウィジェット内で使用するにはDiviレイアウトが必要です。

ディビライブラリ

Divi WidgetBuilder内で任意のDiviレイアウトを使用できます。ページや投稿のようにレイアウトを作成することはお勧めしません。たとえば、3列または4列のグリッド（ブログ、プロジェクト、宣伝文など）は、サイドバーで奇妙に見えます。これは、単一の列にレイアウトを作成することで簡単に修正できます。つまり、サイドバーまたはフッター専用のレイアウトを作成します。

単一のモジュールはサイドバーでうまく機能します。例は次のとおりです。

マップ
お問い合わせフォーム
カウントダウンタイマー
バーカウンター
ボタン
ブログ
ログイン
ナンバーカウンター
人
お客様の声。

レイアウトを作成し、これらのモジュールを背景オーバーレイとともに使用し、それらを組み合わせて、いくつかの非常に興味深いウィジェットを作成します。空は限界です。

レイアウトの作成

ダッシュボードメニューのDivi 、 Divi Libraryに移動して、レイアウトを作成します。左上の[新規追加]を選択します。

レイアウトに名前を付け、ドロップダウンメニューからテンプレートタイプを選択します。下にスクロールすると、必要に応じてテンプレートのカテゴリを選択できます。次の画面で、カテゴリを選択したり、新しいカテゴリを追加したりする機会がもう1つあります。完了したら、[送信]をクリックします。

次に、通常どおりレイアウトを作成します。

Diviウィジェットビルダーウィジェット

DiviPBウィジェットと呼ばれる新しいウィジェットがウィジェットに追加されます。表示するには、ダッシュボードの[外観] 、[ウィジェット]に移動します。このウィジェットを任意のウィジェット領域（サイドバー、フッター、または作成したものを含む）にドロップします。ウィジェット内に表示するDiviライブラリアイテムを選択できるドロップダウンボックスがあります。

他に2つの選択肢があります。

ライブラリアイテムタイトルの表示–Webサイトのサイドバー内にレイアウトの名前を表示します。ウィジェットのタイトルのように機能します。名前を非表示にするには、チェックを外します。

ここにウィジェットとして使用するライブラリアイテムを追加します。その文の「ここ」という単語をクリックすると（私の文ではなく）、レイアウトを作成できるDiviライブラリに移動します。このリンクが含まれているのは、レイアウトを作成する場所の混乱を抑え、ライブラリにすばやくアクセスできるようにするためです。

選択したら、[保存]をクリックすると、DiviPBウィジェットを配置したウィジェットの場所に新しいレイアウトが適用されます。ウィジェットは、独自のカスタムウィジェット領域でも機能します。

Diviウィジェットビルダーの例

これが私が作り上げたいくつかのかなりの例です。それらは単純ですが、うまくいけば、それがどのように機能するかについてのアイデアをあなたに与えるでしょう。

地図

この例では、サイドバー付きのブログフィードを表示します。サイドバーは、左側にブログモジュールがある2 / 3Diviレイアウト内に追加されます。

この例では、単一のマップモジュールを使用しています。レイアウトの名前を含めました。マップモジュールのスタイルを設定していないので、周りに白いボックスがあります。これは簡単に調整できます。モジュールに変更を加えた場合、ページを更新すると、それらの変更がウィジェットに反映されます。

マップをDiviレイアウト内に配置するだけでもかまいませんが、サイドバーに配置すると、誰かが読んでいるブログ投稿に関係なく、マップが表示されます。これは、Diviレイアウトを使用しない標準のブログ投稿です。レイアウトを使用して、投稿ごとに新しいマップを作成し、新しいウィジェット領域を作成して、各投稿に個別に表示するマップを選択できます。

カウントダウンタイマー

このレイアウトでは、複数のカウントダウンタイマーモジュールを使用して単一のウィジェットを作成します。それぞれを個別にスタイリングしました。

モジュールには、ブログがカバーするリーグごとに1つずつ、次のゲームへのカウントダウンが表示されます。各カウントダウンタイマーは、リーグのロゴに固有の色を使用し、グラデーションを含みます。私は知っています–私はNHLと他のいくつかを除外しました。申し訳ありません。

ポストスライダー

これは、サイドバーに投稿スライダーを追加します。投稿スライダーの続きを読むボタン、ドットナビゲーション、矢印を含めました。また、通常のウィジェットを追加して、どのように収まるかを確認しました。

私について

これは、モジュールだけでなくページレイアウトを使用します。 Diviに付属のAboutMeレイアウトを使用して、（Diviライブラリで作成するのではなく）投稿からレイアウトを作成しました。すべてが1列になるようにレイアウトを変更し、ヘッダータイトルのフォントサイズを小さくしました。次に、レイアウトをライブラリに保存して、Divi WidgetBuilderで使用できるようにしました。

ページ自体は、CreativeAgencyと呼ばれるDiviBuilderのレイアウトです。左側のサイドバーを指定し、ウィジェットの[自己紹介]レイアウトを選択しました。

これは同じレイアウトですが、標準のWordPressサイドバーを表示する代わりに、特殊セクションを使用してレイアウトを再作成しました。これにより、ページの幅が広がり、ウィジェットをDivi全幅ヘッダーモジュールの下に配置できるため、標準のWordPressサイドバーよりもはるかに優れたデザインになります。

専門セクションでは、1行に3列を含めることができるため、4つではなく3つの宣伝文に減らし、サイドバーを左側の列に配置しました。私は専門セクション全幅を作り、全角左側のサイドバーから右上隅にあるディビポストSettings]の下の[ページレイアウトを変更しました。

お問い合わせフォーム

これは、DiviBuilderに付属のOurTeamレイアウトを使用しています。右側のサイドバーを使用しています。サイドバーに、お問い合わせフォームを表示するDivi WidgetBuilderと一緒にMonarchウィジェットを配置しました。

フッターウィジェットエリア

これは、フッター領域に3つのDivi WidgetBuilderウィジェットがあります。 3列のフッターレイアウトを選択し、連絡先フォームモジュール、個人モジュール、ブログスライダーモジュールを3つの領域に配置しました。これは、JasonChampagneの素晴らしいCodeSchoolレイアウトパックです。ブログ投稿の画像もこのレイアウトからのものです。 ETブログからレイアウトをダウンロードできます：Divi用の無料の息をのむような学習管理（LMS）レイアウトパックをダウンロードしてください。

このフッターは、投稿として作成した2つの異なるレイアウトを使用しています。どちらにも背景画像があります。左側のウィジェットは、いくつかのテキストモジュール、ソーシャルフォローモジュール、および仕切りモジュールを使用します。ソーシャルボタンの下のメニュー項目はクリック可能なリンクです。また、オーバーレイを使用して背景画像を暗くします。右側のウィジェットはお問い合わせフォームモジュールです。

ExtraでDiviWidgetBuilderを使用する

これは、Extraを使用したチームのレイアウトと同じです。私はもともと、モジュールのデフォルト設定を使用して連絡フォームを作成していました。背景をブレンドしたかったので、背景を透明にしました。また、ボタンのテキストの色を変更して、暗い背景に表示されるようにしました。

ライセンスとドキュメント

利用可能なライセンスは4つあります。

単一サイト$ 7.00
3サイト$ 19.00
無制限のサイト$ 39.00
生涯$ 89.00

1年間のサポートと自動更新が含まれます。ドキュメントは発行元のWebサイトで提供されています。

最終的な考え

Divi WidgetBuilderはシンプルで使いやすいです。作業は、ウィジェットビルダーを使用するのではなく、Diviレイアウトを構築することから始まります。ウィジェットビルダー内でレイアウトを選択するのは簡単ではありません。必要なウィジェット領域にウィジェットビルダーウィジェットをいくつでも配置できるため、DiviやExtraのデザインの可能性が広がります。

プラグインの開発者のWebサイトで実際の動作の例をいくつか見てみたいと思います。いくつかの創造的なユースケースを見ると、それを使用して最大限に活用する方法についてのアイデアが購入者に与えられます。ウィジェット領域内にDiviレイアウトとモジュールを配置することに興味がある場合は、Divi WidgetBuilderが探しているプラグインである可能性があります。

我々はあなたから聞きたい。 Divi Widget Builderを試しましたか？ コメントであなたがそれについてどう思うか教えてください。

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