Divi 製品ハイライト: Divi Den Pro – レイアウト ライブラリ

Divi Den Pro – Layout Library は、Web サイトをより速く構築できるようにする、事前に設計された Divi 要素の大規模なライブラリを備えたサードパーティのプラグインです。 検索と並べ替えが可能な独自のユーザー インターフェイスが含まれており、レイアウトを簡単に見つけることができます。 この記事では、Divi Den Pro – レイアウト ライブラリを見て、それがあなたの Divi デザイン ツールボックスに適した製品かどうかを判断するのに役立ちます。

Divi Den Pro – レイアウトライブラリのインストール

Divi Den Pro – Layout Libraryのインストールは簡単でした。 プラグインのアップロードと同じように機能しますが、Divi 内で利用できるようにするには、Divi Marketplace アカウントにサインインする必要があります。 まず、インストールするには、次の場所に移動します。

1. プラグイン
2. 新しく追加する
3. プラグインのアップロード
4. ファイルを選ぶ
5. 今すぐインストール

次に、プラグインがインストールされたら、通常どおりアクティブ化すると、ダッシュボードに新しいメニューが追加されるのが表示されます。

1. プラグインを有効化する

レイアウトライブラリのコンテンツ

Divi Den Pro – レイアウト ライブラリには 2615 のライブラリ アイテムが付属しています。 これには、1988 のセクションとモジュール、631 のレイアウト、39 のメニュー、および 18 の完全な Web サイト デザインが含まれます。 すべてのアイテムは事前にスタイリングされています。 レイアウトはラベル付けされ、テストされ、さまざまな画面サイズに合わせて最適化されます。

Divi レイアウトでそれらを使用するには、いくつかの方法があります。 レイアウトは、Divi Den Pro DMメニューとDiviテーマビルダーにあります。 Divi Den Pro DM メニューは、それらを使用する最も簡単な方法です。 キーワードやカテゴリで検索し、Divi ライブラリにインポートできます。

ディビ電プロDMメニュー

WordPress ダッシュボードに Divi Den Pro DM という新しいメニュー項目が表示されます。 メニューには多くのリンクが含まれており、メニュー自体内のタブとしても見つかります。

レイアウトファインダー

最初のタブはレイアウト ファインダーです。 これには、左側にフィルターが表示され、右側に結果が表示される検索ボックスが含まれます。 また、タブも含まれているため、すべてのレイアウト、無料レイアウトのみ、またはプロ レイアウトのみを表示できます。 フィルターには、そのタイプのレイアウトの数が表示されます。 それらは、レイアウト、セクション、モジュール、カテゴリ、コレクション、Divi テーマ ビルダー、プラグイン テーマ ビルダーに分かれています。

結果領域にはレイアウトのサムネイルが表示されます。 レイアウトがコンテナよりも大きい場合、サムネイルはホバーするとスクロールします。 レイアウトを別のタブで表示したり、レイアウトを Divi ライブラリに保存したり、レイアウトを JSON ファイルとしてコンピューターにダウンロードしたりできます。

フィルターを選択するとフィルターが開き、オプションが表示されます。 コレクションを開いたところ、Divi Den のレイアウトの名前が表示されています。 1 つを選択すると、そのコレクション内のレイアウトが右側の領域に表示されます。

クリックしてレイアウトを表示すると、別のタブで Divi Den ページのデモが開きました。 このページには複数のレイアウト、セクションなどが表示されます。ホバー効果を表示するために、上部中央の画像の上にマウスを置きます。

最新

[最新] タブには、Divi Den ブログの最新の投稿が表示されます。 これは、レイアウト ライブラリの新機能を学ぶのに良い方法です。

チュートリアル

[チュートリアル] タブには、Divi Den Pro – Layout Library の使用方法を教えるすべてのチュートリアルが含まれています。 チュートリアルをクリックすると表示される埋め込みビデオが含まれているため、WordPress から離れることなく Divi Den ダッシュボードから直接学習できます。 これは使いやすさに役立つため、サポートが必要な場合はここで見つけることができます。

テーマビルダー

「テーマビルダー」タブでは、レイアウトが Divi テーマビルダーとプラグインテーマビルダーに分割されています。 コレクション、ページタイプなどが表示されます。これらはDiviテーマビルダーにも追加されます。 ここからテーマ ビルダーを起動することもできます。

プラグイン テーマ ビルダーには、テーマ カスタマイザーを開くリンクがあります。

テーマ カスタマイザーには、ページ、ブログ、およびグローバル設定用の 3 つの新しいカスタマイザー タブが追加されます。 これには、ポップアップ カスタマイザー、スティッキー バー、その他のアイコン、「トップに戻る」ボタン、近日公開ページ、テンプレートのカスタマイズなどの追加機能が含まれます。

カスタムCSSファイル

[カスタム CSS ファイル] タブには、コピーして変更できる Divi Den レイアウトからのカスタム CSS が提供されます。 いずれかをクリックすると、別のタブで CSS が開きます。 埋め込みビデオでは、カスタム CSS の使用方法を示しています。

高度

[詳細設定] タブには、[ホワイト ラベル] タブと [その他のオプション] タブが含まれます。 White Label を使用すると、ブランドに合わせてプラグインのブランドを変更できます。

[その他のオプション]タブを使用すると、Divi Builder要素内で[Divi Den Pro]タブを移動できます。 これはデフォルトで有効になっています。

Divi Builder の Divi Den Pro レイアウト ライブラリ

Divi Den Pro – レイアウト ライブラリのタブがモジュール モーダルに追加されます。

タブを選択するとメニューが開き、必要なレイアウトを選択できます。 レイアウトは JSON ファイルとしてダウンロードされるため、使用する場合はページや投稿にアップロードする必要があります。

Divi テーマビルダーの Divi Den Pro レイアウト ライブラリ

Divi Den Pro – Layout Library インターフェースも Divi Theme Builder 画面の下部に追加されます。 WordPress ダッシュボードと同じように機能します。

テーマ ビルダーでもページや投稿と同じように機能します。

Divi Den Pro レイアウト ライブラリの例

Divi Den Pro – レイアウト ライブラリ インターフェイスの使用方法を確認したので、いくつかの例を見てみましょう。 それぞれのタイプについていくつか見ていきます。

レイアウト

次に、いくつかのレイアウトを見ていきます。 これらを Divi テーマ ビルダーにロードします。 レイアウトを Divi ライブラリに保存すると、レイアウトで使用できるようになります。 それらを検索し、左側のカテゴリを選択します。

ショップランディングページ V3 Ragnar

これはショップ ランディング ページ V3 Ragnar の上部です。 これには、電子メール CTA を含むヒーロー セクションが含まれています。 ショップ セクションには注目の製品が表示され、カーソルを合わせると大きなテキストでメッセージをスクロールするアニメーション オーバーレイが含まれます。

これはショップ ランディング ページ V3 Ragnar の下部です。 特大の画像はショップ CTA を作成し、アニメーション ボタンが含まれます。 ユニークなブログ セクションでは、片面に表示されるテキストの後ろに注目の画像が表示されます。

採用ページ V1 ティナ

これは、採用ページ V1 Tina の上部です。 これには、タイトルが重なったヒーロー画像、吹き出し付きの紹介、および 2 列のテキストが含まれています。 これに続いて、オープンポジションのセクションがカードとして表示されます。

これは、採用ページ V1 Tina の下部です。 ホバー アニメーションを備えた宣伝文は情報を提供し、その後に履歴書や会社特典のセクションを送信するための CTA が表示されます。

昔のブログページ

この例は、Old Times ブログ ページの上部です。 これには、背景画像の上にメッセージを表示したヒーロー セクションと、ホバー アニメーションを備えたボタンが含まれています。 ブログ セクションには、左側に大きなアイキャッチ画像を含むブログ投稿が表示され、右側にサイドバーとして小さなアイキャッチ画像が含まれる投稿が表示されます。 黄色の線は、ブログ セクションとヒーロー セクションを区切ります。 すべてのブログ カードには傾斜アニメーションが含まれています。

これは、Old Times ブログ ページの下部です。 また、黄色の線で区切られており、3 列のブログ セクションが 2 つ、大きな電子メール フォーム、フッターが含まれています。

メニュー ページのレイアウト ジェイミー

これは、メニュー ページ レイアウトの上部です。ジェイミー。 これには、さまざまなフード メニュー カテゴリにリンクするアイコンを含むヒーロー セクションが含まれています。 ホバーアニメーションも含まれます。 これに続いて 2 列のフード メニューが表示され、左側に画像、右側に説明が表示されます。 食べ物はカテゴリーに分かれています。

メニュー ページのレイアウト ジェイミー

これは、メニュー ページ レイアウト Jamie の下半分です。 食事メニューの続きと、全幅の地図で連絡先情報が含まれています。

ショーリールのホームページのレイアウト

これは、Showreel ホームページ レイアウトの上部です。 ヒーロー セクションには、全画面の背景画像上に埋め込みビデオといくつかの宣伝文を再生するボタンが含まれています。 これに続いて、情報を表示する一連のタブが続きます。 アニメーション オーバーレイを含む大きな画像はサービスにリンクします。

これは、Showreel ホームページ レイアウトの下部です。 大きな画像が続き、傾斜したオーバーレイ アニメーションを備えたサービス用の画像の別のセクションが含まれています。 スタイル付きの数値カウンター、電子メール フォーム、フッターも含まれています。

ビジュアルプログレスバーページ フレディ

これはビジュアル プログレス バー ページ フレディです。 エレガントなレイアウトですが、私が表示したい主な要素は進行状況バーです。 これはレイアウトのヒーローセクションです。 メニューは画面の下部にあります。 スクロールすると、メニューが画面の上部に表示され、レイアウトの進行状況が表示されます。

この例のセクションはケーススタディです。 進行状況バーには、スクロールして通過したすべてのセクションが黄色で表示されます。 このセクションの画像には傾斜効果が含まれています。

セクション

Divi Den Pro – Layout LibraryセクションをDiviライブラリに保存している場合、Divi Den Pro DMタブがセクションモーダルに追加されます。

グレイテスト ヒッツ ミュージック モジュール フレディ

グレイテスト ヒッツ ミュージック モジュール フレディは、黒の背景と黄色のホバー効果を備えたスタイル付きのオーディオ プレーヤー セクションを提供します。

スタイリングギャラリーデモ

スタイリング ギャラリー デモでは、さまざまな境界線の形状と画像を分離するための色のブロックを備えた興味深い画像ギャラリーが提供されます。

リンタンプロセスグレース

スタイリング ギャラリー デモには手順のリストが記載されています。 これらは水平に配置され、整形された画像や色、ホバー効果が含まれます。

サンダーボルト製品フレディ

Thunderbolt 製品フレディは、一方の側に製品スライダーが表示され、もう一方の側にスタイル情報が表示される製品セクションです。

アルーラ タイムライン グレース

Alula Timeline Grace は、一方の側に画像、もう一方の側に情報を含む代替の垂直タイムラインを作成します。

モジュール

ダッシュボードの「モジュール」オプションにはボタンが表示されます。 私がダウンロードしたものをいくつか紹介します。

ダウンロードしたすべてのボタンを 1 つのページに追加しました。 各ボタンには、魅力的なホバー アニメーションが含まれています。

Divi Den Pro レイアウト ライブラリの購入場所

Divi Den Pro – レイアウト ライブラリは、Divi マーケットプレイスで 189 ドルで入手できます。 これには、ウェブサイトの無制限の使用、1 年間のサポートとアップデート、30 日間の返金保証が含まれます。

Divi Den Pro レイアウト ライブラリに関する最後の感想

以上が Divi Den Pro – レイアウト ライブラリの外観です。 このライブラリにはたくさんのレイアウトがあります。 ユーザーインターフェースはシンプルです。 レイアウトの検索、並べ替え、インポート、ダウンロードは直感的に行えます。 セクションとモジュールのリンクはダッシュボードよりも制限されていることがわかりました。レイアウトがライブラリにあると、[ライブラリから追加] オプションを選択することで使用できるようになります。 専門的にデザインされた数千のレイアウトを Divi ライブラリに追加することに興味がある場合は、Divi Den Pro – Layout Library を参照する価値があります。

我々はあなたから聞きたい。 Divi Den Pro – レイアウト ライブラリを試してみましたか? コメントでご意見をお聞かせください。