Divi 5のループビルダーでポートフォリオグリッドを構築する方法

ポートフォリオグリッドは、作業を紹介するためのシンプルで効果的な方法です。 Divi 5のループビルダーを使用すると、再利用可能なカードレイアウトを設計し、コンテンツから視覚的なビルダーに直接自動入力することができます。

単一目的のモジュールとは異なり、ループビルダーでは、任意のDIVI要素を使用したり、投稿またはカスタム投稿タイプのクエリを設定したり、グローバルスタイルを継承するレスポンシブグリッドを出力できます。このチュートリアルでは、プロジェクトのカスタム投稿タイプを使用して、ポートフォリオグリッドを段階的に構築します。

Divi 5のループビルダーの理解

Divi 5のループビルダーは、動的でループするコンテンツレイアウトを簡単に作成できる新機能です。ブログやポートフォリオモジュールとは異なり、ループビルダーを使用すると、Divi要素を簡単にループして投稿、用語、またはユーザーを表示できます。これは、WordPressサイトのコンテンツを自動的に入力する単一のテンプレートを構築できることを意味します。

Loop Builderは、カスタムポストタイプ（CPTS）、WooCommerce製品、Advanced Custom Fields（ACF）など、さまざまなコンテンツタイプをサポートしているため、ポートフォリオを正確に表示できるようにします。

ループビルダーの重要な利点

堅牢なカスタマイズオプションのおかげで、ループビルダーはポートフォリオグリッドの作成に最適です。傑出した機能は次のとおりです。

• カスタムループテンプレートを設計する柔軟性：ループビルダーを使用すると、事前定義されたレイアウトに限定されません。任意のDIVIモジュールを使用して、各ポートフォリオアイテムの一意のテンプレートを設計できます。
• カスタマイズ可能なクエリ：ループビルダーを使用すると、グリッドにどのコンテンツが表示されるかを微調整できます。カテゴリ、ポストタイプ、またはカスタムフィールドごとにフィルタリングして、目的のアイテムのみをお好みの順序で表示します。
• 動的なコンテンツ統合：プロジェクトタイトル、特集画像、説明、またはカスタムメタデータなどの動的コンテンツデータをシームレスに引き込み、各ポートフォリオアイテムを魅力的にします。

これらの機能により、Divi 5のループビルダーは、完全にカスタマイズ可能でナビゲートしやすい洗練されたプロフェッショナルポートフォリオを作成するための理想的なツールになります。

ループビルダーを使用してポートフォリオを構築します

Diviの組み込みプロジェクトカスタムポストタイプ（CPT）を使用して、ループビルダーでポートフォリオを作成します。 CPTプロジェクトは、ポートフォリオスタイルのコンテンツを紹介するように設計されており、レイアウトに理想的な選択肢となっています。 Diviはポートフォリオモジュールを提供していますが、Loop Builderを使用します。これは、一意のポートフォリオを作成するための無制限のオプションを提供するためです。

ページに新しい行を追加することから始めます。このために、 3列のレイアウトを使用します。

最初の列に見出しモジュールを追加します。

タイトルを入力するか、divi aiを使用して生成します。

[デザイン]タブに移動し、見出しフォントのインターを選択し、見出しフォントの重量のライトを選択し、見出しテキストサイズを2EMに設定し、 1.3EMの見出し線の高さを割り当てます。

それでは、ループを構築しましょう。行の2番目の列に移動します。

[ループ]タブを見つけ、展開し、ループ要素のトグルを有効にします。

次に、クエリタイプを選択します。このチュートリアルでは、Diviの組み込みCPT、プロジェクトを使用します。投稿タイプで、プロジェクトを選択します。すべてのプロジェクトを紹介したいので、そのまますべてを残します。

[設定]、ページごとの投稿、および[オフセットの投稿]で注文を選択できます。最初の列には見出しモジュールが含まれているため、ページごとの投稿を8に設定します。そうすれば、出力は3列の行全体になります。

私たちのループがすべての列を積み重ねようとしていることに気付くでしょう。これを修正するには、行の設定に移動する必要があります。 3列の行に移動し、 [デザイン]タブをクリックし、レイアウト設定を見つけます。

[レイアウト設定]タブを展開します。レイアウトラップ設定を見つけて、ラップを選択します。これにより、ループを3列に戻します。

ループ列のスタイリング

ループの設定が整ったので、列をスタイリングする時が来ました。ここで選択したスタイル設定は、ループ内の残りの列に影響します。 3列の行で、2番目の列をクリックして[デザイン]タブをクリックします。ボーダードロップダウンに移動し、列に15pxのボーダー半径を割り当てます。ボーダースタイルの下で、 1pxの境界線幅を追加し、 ＃000000を境界色として使用します。

ループにコンテンツを追加します

列のスタイルが割り当てられた状態で、ループにコンテンツの追加を開始できます。クリックして画像モジュールを2番目の列に追加します。追加されると、ループ内の各列には画像プレースホルダーが表示されます。

Divi 5の動的なコンテンツパワーを使用して、プロジェクトの注目画像を引き込みます。画像の上にホバリングしてアイコンを表示します。動的なコンテンツアイコンをクリックして続行します。

オプションが表示されるときに、ループ機能の画像を選択します。

ループは、各プロジェクトの特集画像をポートフォリオループに直接配置します。

次に、注目画像の下の2番目の列に見出しモジュールを追加します。これはプロジェクトタイトルに使用されます。上記の手順を繰り返して、タイトルを追加します。ただし、今回はループ投稿タイトルを選択してください。

[デザイン]タブで、見出しレベルのH3 、見出しフォントのINTER 、ヘディングテキストアライメントの中心、テキストサイズの見出しで20pxを選択します。

最後に、各プロジェクトにリンクするボタンを追加します。投稿タイトルの下にある2番目の列にボタンモジュールを追加します。 [ボタン]リンクURLの[動的なコンテンツ]アイコンをクリックし、 [ループリンク]を選択します。

[デザイン]タブに切り替えて、アラインメントを中央に設定します。

ボタンのドロップダウン設定を展開し、ボタンにカスタムスタイルを使用できるようにします。次の設計設定を入力します。

• ボタンの背景： ＃000000
• ボタンボーダー半径： 15px
• ボタンの境界幅： 0px
• ボタンフォント：インター
• ボタンテキストの色： #ffffff
• ボタンテキストサイズ： 16px
• マージン： 15pxボトム
• パディング：上部と下部15px、左＆右35px

それでおしまい！ご覧のとおり、Divi 5でループを作成することは簡単なプロセスです。

ループビルダーでスタイルを変更します

ループのスタイルを編集することは、ループ自体を作成するのと同じくらい簡単です。ループの光から暗いテーマに交換したいとしましょう。デザインの変更を作成するには、数秒しかかかりません。セクションの背景色を変更してから、数回クリックして個々のループ要素に変更を加えることができます。

ループアイテムを個別に編集する必要はありません。それらはすべて接続されているため、モジュールを1回編集するだけで、Divi 5はループ内のすべてのモジュールで更新されたスタイルを自動的に適用します。

プロジェクトの抜粋、公開日、コメントカウント、著者のバイオ、カスタムフィールドなど、ループにモジュールを追加できます。

ループ内のアイテムの周りのスペースを締めたい場合は、行と列の設定の垂直ギャップを調整できます。これにより、Divi 5のFlexboxレイアウトシステムを使用して、各行と個々のモジュール間のスペースの量を制御し、ループの外観を完成させることができます。

ポートフォリオループのテストと改良

ポートフォリオを構築したら、それをテストして、すべてが意図したとおりに機能するようにします。視覚ビルダーの上部バーにあるプレビューリンクを使用して、フロントエンドのグリッドをプレビューすることから始めます。

各プロジェクトのタイトル、特集画像、抜粋、およびループリンクがプロジェクトCPTから正しく引っ張っていることを確認します。プレースホルダーが表示される壊れた要素でないことを確認してください。

Visual Builderに戻って、Divi 5のカスタマイズ可能なレスポンシブブレークポイントを使用して、レイアウトが適切に適応することを確認してください。デフォルトでは、Divi 5には、デスクトップ、タブレット、電話用の3つのブレークポイントを提供していますが、視覚ビルダーの上部バーの中央にあるEllipsisメニューをクリックすると、最大7つのブレークポイントを提供できます。

各ブレークポイントをナビゲートし、レイアウトを確認し、必要に応じて調整を行います。

レイアウトをモバイルフレンドリーにするために、Divi 5の変更列構造設定を使用して、小さなデバイスに表示される列の数を変更できます。

ベストプラクティスとヒント

Divi 5とループビルダーを最大限に活用するために、ポートフォリオを構築する際に従うべきいくつかのベストプラクティスを次に示します。

1.設計変数との設計の一貫性を確保します

Divi 5の設計変数機能を使用すると、ポートフォリオページ全体で一貫したタイポグラフィ、色、間隔を定義できます。ビジュアルビルダーでは、すべてのポートフォリオアイテムが均一に見えるように、フォント、色、パディング/マージンのグローバル変数を設定します。変数を作成するには、Visual Builderの左側のメニューの変数マネージャーアイコンをクリックします。

そこから、グローバルフォント、色などを割り当てることができ、ポートフォリオページだけでなく、ウェブサイト全体でデザインが一貫していることを確認できます。

2。アクセシビリティを考慮してください

アクセシビリティにより、障害のあるユーザーを含むすべてのユーザーが、あなたの仕事をナビゲートして楽しむことができます。メディアギャラリーにアップロードするときは、画像の代替テキストを追加してください。これにより、読者が視覚障害のあるユーザーにコンテンツを伝えることができます。

また、視覚障害のあるユーザーの読みやすさを確保するために、十分なコントラスト比で色を選択することも良いことです。

3。テンプレートを保存して再利用します

ループビルダーテンプレートを完成させた後、ポートフォリオセクションを右クリックしてライブラリに保存を選択して、Diviライブラリに保存します。簡単に参照できるように、説明的な名前を付けてください。これにより、ゼロから再構築することなく、他のページのテンプレートを再利用できます。

他のWebサイトでテンプレートを使用するには、 Diviクラウドに保存して、ワンクリックで他のWebプロジェクトにインポートできます。

テンプレートを保存すると、ワークフローが合理化され、将来のプロジェクトのためにプロのポートフォリオグリッドをすばやく展開できるようにします。

ファイルをダウンロードします

無料でダウンロードしてください

Divi Newsletterに参加してください。究極のDiviランディングページレイアウトパックのコピーに加えて、他の驚くべき無料のDiviリソース、ヒント、トリックを大量にメールで送信します。フォローすると、すぐにDiviマスターになります。既にサブスクライブされている場合は、以下のメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

サブスクライブに成功しました。メールアドレスを確認してサブスクリプションを確認し、無料の毎週のDiviレイアウトパックにアクセスしてください！

Divi 5のループビルダーを今すぐお試しください

Divi 5のループビルダーを使用すると、動的なポートフォリオグリッドを簡単に作成でき、スタイルと効率で作業を紹介できます。組み込みプロジェクトCPTとループビルダーの強力な機能を活用することにより、プロジェクトのコンテンツを動的に引き込む柔軟で完全にカスタマイズ可能なグリッドを作成できます。その柔軟性により、任意のDIVIモジュールを使用して一意のレイアウトを設計し、特定のプロジェクトを表示するためのクエリを設定し、あらゆるデバイスに輝くレスポンシブグリッドを作成できます。

ポートフォリオを実現する準備はできていますか？ Divi 5の最新のパブリックアルファリリースに飛び込み、ポートフォリオレイアウトを実験します。あなたがプロジェクトを紹介するフリーランサーであろうと、クライアントの仕事を強調するビジネスであろうと、ループビルダーを使用すると、プロフェッショナルでダイナミックなディスプレイを簡単に作成できます。