DiviとACFを使用して動的ポートフォリオプロジェクトテンプレートを作成する方法

あなたのウェブサイトでポートフォリオアイテムを作成する方法を合理化する方法をお探しですか？ もしそうなら、あなたはこの投稿を気に入るはずです。 このチュートリアルでは、DiviのテーマビルダーとACFプラグインを使用して動的ポートフォリオプロジェクトテンプレートを作成する方法を示します。 ポートフォリオプロジェクトテンプレートを作成すると、テンプレート本体を一度設計して、将来追加するすべてのポートフォリオアイテムにも適用できるようになります。 私たちが作成したテンプレートデザインは、あらゆる種類のクリエイティブな職業にマッチしますが、それは氷山の一角にすぎません。 必要な数のフィールドを追加して、テンプレート内で使用できます。 再作成するデザインのJSONファイルも無料でダウンロードできます！

それを手に入れましょう。

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

デスクトップ

モバイル

ダイナミックポートフォリオプロジェクトテンプレートを無料でダウンロード

重要：ACFフィールドを設定し、テンプレートJSONファイルをテーマビルダーにアップロードした後、各モジュールに動的コンテンツを手動で追加する必要があります。

無料のダイナミックポートフォリオプロジェクトテンプレートを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

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

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

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

1.ACFのインストールとプロジェクトフィールドの設定

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

WordPressWebサイトに無料のAdvancedCustomFieldsプラグインをインストールすることから始めます。 インストール後、必ずアクティベートしてください。

フィールドグループを設定する

プラグインをインストールしてアクティブ化したら、カスタムフィールドの作成を開始します。 プラグイン設定に移動し、新しいフィールドグループを追加します。

フィールドグループの場所を変更します。 私たちはそれが私たちのプロジェクトにのみ表示されることを望んでいます。

• 投稿タイプ–等しい–プロジェクト

フィールドを追加

以下に記載されている項目ごとに新しいフィールドを追加して続行します。

• 問題
  • フィールドラベル：問題
  • フィールドタイプ：テキストエリア
• 解決
  • フィールドラベル：ソリューション
  • フィールドタイプ：テキストエリア
• お客様の声。
  • フィールドラベル：お客様の声
  • フィールドタイプ：テキスト
• 連絡窓口
  • フィールドラベル：担当者
  • フィールドタイプ：テキスト
• 担当者画像
  • フィールドラベル：担当者の画像
  • フィールドタイプ：画像
• 担当者役職
  • フィールドラベル：担当者の役職
  • フィールドタイプ：テキスト
• クライアントのロゴ
  • フィールドラベル：クライアントロゴ
  • フィールドタイプ：画像
• クライアントのウェブサイト
  • フィールドラベル：クライアントWebサイト
  • フィールドタイプ：URL
• プロジェクト期間
  • フィールドラベル：プロジェクト期間
  • フィールドタイプ：範囲
  • 追加：数週間

作成するプロジェクトテンプレートに応じて、必要な数のフィールドを自由に追加できることを知っておいてください。 この投稿のプレビューに表示された正確なデザインを再現するには、上記のすべてのフィールドが必要です。

2.新しいプロジェクトを作成します

ポートフォリオプロジェクトのタイトルと説明を追加する

フィールドグループとそのすべてのフィールドを設定したら、サンプルプロジェクトを作成します。 WordPressダッシュボードに移動し、新しいプロジェクトを追加して、タイトルと説明を入力します。

注目の画像をアップロードする

次に、選択した注目の画像をアップロードします。

すべてのカスタムフィールドに入力します

チュートリアルの最初の部分で追加したさまざまなカスタムフィールドをすべて入力して続行します。

3.新しいテンプレートを作成します

Diviテーマビルダーに移動して新しいテンプレートを作成する

テンプレートの作成を開始します。 Divi Theme Builderに移動し、新しいテンプレートを追加します。

オンを使用

テンプレートをすべてのプロジェクトに適用します。

• 使用場所：すべてのプロジェクト

4.テンプレート本体の作成を開始します

テンプレートのカスタムボディの作成を開始して続行します。

セクション＃1

背景色

テンプレートエディタ内に、セクションがあります。 そのセクションを開き、黒い背景色を追加します。

• 背景色：＃000000

間隔

次に、カスタムの上部と下部のパディングを追加します。

• トップパディング：250px
• ボトムパディング：250px

国境

左下と右下の境界線の半径も追加します。

• 左下：8vw
• 右下：8vw

行＃1を追加

カラム構造

次の列構造を使用して、セクションに最初の行を追加して続行します。

テキストモジュール＃1を列に追加

コンテンツを追加する

次に、テキストモジュールを追加し、コンテンツボックスにコンテンツを配置します。

• 本文：プロジェクト期間：

テキスト設定

モジュールの[デザイン]タブに移動し、次のようにテキスト設定を変更します。

• テキストフォント：Montserrat
• テキストの色：＃a0a0a0
• テキストサイズ：1.2rem

テキストモジュール＃2を列に追加

動的コンテンツ

列に別のテキストモジュールを追加し、プロジェクト期間の動的コンテンツを選択します。

• 動的コンテンツ：プロジェクト期間
• 後：数週間

テキスト設定

次に、モジュールのテキスト設定を変更します。

• テキストフォント：Lora
• テキストの色：#ffffff
• テキストサイズ：1.5rem

テキストモジュール＃3を列に追加

動的コンテンツ

別のテキストモジュールを追加し、投稿/アーカイブタイトルの動的コンテンツを選択します。

• 動的コンテンツ：投稿/アーカイブタイトル
• 前：<H1>
• 後：</ H1>

H1テキスト設定

モジュールのH1テキスト設定のスタイルを設定します。

• 見出しフォント：Montserrat
• 見出しのテキストの色：#ffffff
• 見出しのテキストサイズ：6rem（デスクトップ）、3rem（タブレットと電話）

間隔

上下の余白を追加して、モジュールの設定を完了します。

• トップマージン：100px
• 下マージン：100px

投稿コンテンツモジュールの追加

テキスト設定

この列で必要な次の最後のモジュールは、ポストコンテンツモジュールです。 これにより、プロジェクトの説明が表示されます。 モジュールのテキスト設定を次のように変更します。

• テキストフォント：Lora
• テキストの色：#ffffff
• テキストサイズ：1.5rem（デスクトップ）、0.9rem
• テキスト行の高さ：2em

行＃2を追加

カラム構造

次の列構造を使用して、セクションに別の行を追加します。

列1に画像モジュールを追加

動的コンテンツ

画像モジュールを列1に追加し、クライアントロゴの動的コンテンツを選択します。

• 動的コンテンツ：クライアントロゴ

列2にテキストモジュールを追加します

コンテンツを追加する

次に、テキストモジュールを列2に追加し、選択したコピーを入力します。

動的コンテンツをリンクする

リンク設定でクライアントWebサイトの動的コンテンツを選択して、モジュールをクライアントWebサイトにリンクします。

• 動的コンテンツ：クライアントWebサイト

テキスト設定

次に、モジュールのテキスト設定を変更します。

• テキストフォント：Montserrat
• テキストの色：#ffffff
• テキストサイズ：1.5rem
• テキスト行の高さ：1em

間隔

カスタムの下部パディングも追加します。

• ボトムパディング：50px

国境

そして、下の境界線を追加して、モジュールの設定を完了します。

• 下の境界線の幅：1px
• 下の境界線の色：＃ffc300

セクション＃2を追加

間隔

次のセクションに進みましょう！ デフォルトの上下のパディングをすべて削除します。

• トップパディング：0px
• ボトムパディング：0px

行を追加する

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

間隔

行設定を開き、デフォルトの上下のパディングをすべて削除します。

• トップパディング：0px
• ボトムパディング：0px

画像モジュールを列に追加

動的コンテンツ

この行に必要なモジュールは画像モジュールだけです。 画像をプロジェクトの注目画像に接続します。

• 動的コンテンツ：注目の画像

国境

左下と右下の境界線の半径も追加します。

• 左下：8vw
• 右下：8vw

セクション＃3を追加

間隔

カスタムの上部と下部のパディングを使用して、別の通常のセクションを追加します。

• トップパディング：250px
• ボトムパディング：250px

行＃1を追加

カラム構造

次の列構造を使用して、セクションに新しい行を追加します。

列1にテキストモジュールを追加

H2コンテンツを追加する

テキストモジュールを列1に追加し、選択したH2コンテンツを挿入します。

H2テキスト設定

H2テキスト設定を次のように変更します。

• 見出し2フォント：Montserrat
• 見出し2フォントの太さ：太字
• 見出し2テキストサイズ：2rem

列2にテキストモジュールを追加します

動的コンテンツ

2番目の列に移動し、テキストモジュールを追加して、問題のある動的コンテンツを使用します。

• 動的コンテンツ：問題

テキスト設定

次に、モジュールのテキスト設定を変更します。

• テキストフォント：Lora
• テキストサイズ：1.5rem（デスクトップ）、0.9vw（タブレットと電話）
• テキスト行の高さ：2em

クローン行

行が完成したら、先に進んで完全にクローンを作成します。

列1のテキストモジュールのコピーを変更します

重複する行の列1テキストモジュールのコピーを変更します。

列2のテキストモジュールの動的コンテンツを変更する

重複する行の列2のテキストモジュールの動的コンテンツも変更します。

• 動的コンテンツ：ソリューション

重複する行の列2にボタンモジュールを追加する

コピーを追加

重複する行の列2にボタンモジュールを追加して続行します。 選択したコピーをいくつか追加します。

ボタンの設定

モジュールの[デザイン]タブに移動し、ボタンの設定を次のように変更します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：1.5rem
• ボタンのテキストの色：＃000000
• ボタンの境界線半径：0px

• ボタンフォント：Montserrat

間隔

上マージンを追加して、モジュールの設定を完了します。

• トップマージン：100px

セクション4を追加

背景色

次の最後のセクションへ！ 黒の背景色を追加します。

• 背景色：＃000000

国境

左上と右上の境界線の半径もセクションに追加します。

• 左上：8vw
• 右上：8vw

行を追加する

カラム構造

次の列構造を使用して、セクションに新しい行を追加して続行します。

紹介文モジュールを列に追加

動的コンテンツ

行に紹介文モジュールを追加し、モジュール内のさまざまな要素の動的コンテンツを選択します。

• 著者：担当者
• 役職：担当者役職
• 本文：お客様の声
• 画像：担当者の画像

要素

次に引用アイコンを無効にします。

• 見積もりアイコンを表示：いいえ

背景色

次に、モジュールの背景色を黒に変更します。

• 背景色：＃000000

テキスト設定

モジュールのデザインタブに移動し、テキストの色を変更します。

• テキストの色：明るい

本文の設定

次に、本文の設定を変更します。

• ボディフォント：Montserrat
• 本文のサイズ：2rem（デスクトップ）、1.5rem（タブレットと電話）

著者のテキスト設定

著者のテキスト設定も変更します。

• 著者フォント：Lora
• 著者のテキストサイズ：1.4rem（デスクトップ）、0.9rem（タブレットと電話）

位置テキスト設定

それに応じて位置テキスト設定を変更して、モジュールの設定を完了します。

• 位置フォント：Lora
• 位置テキストの色：＃a8a8a8
• 位置テキストサイズ：1.4rem（デスクトップ）、0.9rem（タブレットと電話）

4.テーマビルダーの変更を保存して結果を表示する

テンプレートが完成したら、Divi Theme Builderの変更をすべて保存して、プロジェクトの結果を表示します。

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。

デスクトップ

モバイル

最終的な考え

この投稿では、Divi ThemeBuilderとACFプラグインを使用して美しいポートフォリオプロジェクトテンプレートを作成する方法を紹介しました。 これは、Webサイトでプロジェクトを表示する方法を合理化するための優れた方法です。 テンプレートをすべてのプロジェクトに割り当てると、追加する将来のポートフォリオアイテムに自動的に適用されます。 このデザインのテンプレートJSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。