Diviのテーマビルダーを使用して作成者ページテンプレートを作成する方法

著者ページは、以前はカスタマイズが困難でした。 Divi Theme Builderを使用すれば、それはもはや問題ではありません。 著者ページだけでなく、カテゴリページ、検索結果ページなどもパーソナライズできます。 この投稿では、Diviのテーマビルダーを使用して動的な作成者ページテンプレートを作成する方法を紹介します。

Divi Theme Builder内でこのレイアウトを再作成する場合、動的コンテンツを使用するため、作成者に固有のコンテンツを保持しながら、すべての作成者ページが一度に影響を受けます。 あなたがする必要があるのは、すべての作者が情報を更新したことを確認することだけです。 優れたGravatarイメージがない場合は、WPユーザーアバタープラグインをダウンロードして、より詳細に制御することをお勧めします。 テンプレートのJSONファイルも無料でダウンロードできます！

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

プレビュー

テーマビルダー内で作成者ページテンプレートの再作成を開始する前に、さまざまな画面サイズでの結果を見てみましょう。 テンプレートを作成している間、デザインはテンプレートエディタ内でわずかに異なって見えます。 2つのウィンドウを開くことをお勧めします。1つはテンプレートエディターを使用し、もう1つはライブプレビューを使用します。

デスクトップ

モバイル

歓迎著者ページを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

1.ユーザーを更新します

著者の画像を最適化する

WPユーザーアバタープラグインを追加する

WordPressに作成者が追加されると、システムは自動的にGravatar画像をプルします。 一部の作成者はGravatarアカウントを持っていないか、画像がサイトと一致しません。 WP User Avatar Pluginを使用すると、より詳細に制御できます。

完全な著者情報

次のすべての作成者情報が含まれていることを確認してください。

• 名前と姓
• 表示名
• 著者略歴
• 著者の画像

2.テーマビルダーでレイアウトを再作成します

テーマビルダーを開く

著者ページテンプレートを再作成する最初のステップは、テーマビルダーを開いて新しいテンプレートを追加することです。 [アーカイブページ]セクションで[すべての作成者ページ]を選択し、青い[テンプレートの作成]ボタンをクリックします。

カスタムボディを作成する

新しいテンプレートが作成されたら、「カスタムボディの追加」をクリックしてテンプレートエディタに入ります。

セクション1設定

間隔

レイアウトを作成する時が来ました！ テンプレートエディタ内に、セクションがあります。 セクションを開き、間隔の値を次のように変更します。

• トップパディング
  • デスクトップ：300px
  • タブレットと電話：50px
• ボトムパディング
  • デスクトップ：0px

国境

セクションにも下の境界線を追加します。

• ボーダースタイル：ボトムボーダー
• 幅：2px
• カラー：ブラック＃000000

行1を追加

カラム構造

次に、次の列構造を持つ行を追加します。

サイジング

行設定を開き、次のようにサイズを変更します。

• 幅
  • デスクトップ：1580px
  • タブレットと電話：自動
• 最大幅
  • デスクトップ：90％
  • タブレットと電話：80％

間隔

次に間隔設定を変更します。

• 左マージン：自動
• 右マージン：79px
• 右パディング：0px

カスタムCSS

最後になりましたが、行のメイン要素で2行のCSSコードを使用して、すべての列のコンテンツを整列させます。

• 主な要素
  • デスクトップ：ディスプレイ：フレックス; align-items：center;

display: flex;
align-items: center;

• • タブレットと電話：ディスプレイ：ブロック;

display: block;

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

コンテンツテキスト

列1のテキストモジュールから始めて、モジュールを追加します。正しい動的コンテンツをリンクします。

• 本文：動的コンテンツ–投稿者
• 前：<h1>
• 後：<h1>
• 名前の形式：姓名

見出しテキスト

次に、見出しテキストを次のようにスタイル設定します。

• 見出しレベル：H1
• フォント：Krona One
• 重量：太字
• スタイル：TT
• カラー：ブラック＃000000
• サイズ
  • デスクトップ：90px
  • タブレット：60px
  • 電話番号：50px

間隔

レスポンシブ間隔の値もいくつか追加します。

• 下マージン
  • デスクトップ：-43px
  • タブレット：-33px
  • 電話番号：-27px
• トップパディング：19px
• ボトムパディング：0px

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

コンテンツテキスト

別のテキストモジュールである次のモジュールに進みます。 著者のバイオダイナミックコンテンツを追加します。

• 本文：動的コンテンツ–著者の経歴

文章

次に、デザインタブでテキストのスタイルを設定します。

• フォント：Open Sans
• 重量：軽い
• カラー：ブラック＃000000
• サイズ
  • デスクトップ：16px
  • タブレット：15px
  • 電話番号：14px
• 文字間隔：1px

間隔

そして、トップマージンを追加してモジュール設定を完了します。

• トップマージン：100px

列2に画像モジュールを追加します

画像コンテンツ

列2に移動し、画像モジュールを追加します。 デフォルトのプレースホルダーを消去し、作成者のプロフィール写真の動的コンテンツを接続します。

• 画像：動的コンテンツ–作成者のプロフィール写真

サイジング

次に、画像のサイズ設定を調整します。

• 幅
  • デスクトップ：100％
  • タブレットと電話：50％

間隔

レスポンシブなボトムマージンも追加します。

• 下マージン
  • デスクトップとタブレット：-20％
  • 電話番号：-30％

国境

境界線の設定にいくつかの丸い角を追加して、モジュール設定を完了します。 これは、モジュールを円に変えるのに役立ちます。

• 丸みを帯びたコーナー：四隅すべて50vw
• スタイル：4面すべて
• 幅：2px
• カラー：ブラック＃000000

セクション2を追加

間隔

次に、別の通常のセクションを追加し、セクション設定を開いて、上部と下部のパディング値を変更します。

• 上下のパディング：300px

行2を追加

カラム構造

次に1列の行を追加します。

サイジング

行設定を開き、[デザイン]タブに移動して、サイズ設定にいくつかの変更を加えます。

• 幅：1580px
• 最大幅
  • デスクトップとタブレット：90％
  • 電話番号：95％
• 行の配置：中央

ブログモジュールを追加する

コンテンツ

このセクション/行で必要な唯一のモジュールはブログモジュールです。 [現在のページへの投稿]オプションが有効になっていることを確認してください。 これにより、問題の作成者による投稿のみが表示されるようになります。

• 現在のページへの投稿：はい

要素

要素セクションでは、次の要素をデザインに表示できるようにしています。

• 注目の画像
• 著者
• カテゴリ
• 抜粋
• ページ付け

レイアウト

次に[デザイン]タブに移動して、レイアウトを変更します。

• レイアウト：グリッド

タイトルテキスト

次に、それに応じてタイトルテキストのスタイルを設定します。

• 見出しレベル：H2
• フォント：Krona One
• スタイル：TT
• カラー：ブラック＃000000
• サイズ
  • デスクトップ：26px
  • タブレット：16px
  • 電話番号：18px
• 文字間隔：3px
• 線の高さ：1.3m

本文

本文の設定も変更しています。

• フォント：Open Sans
• 重量：軽い
• カラー：ブラック＃000000
• サイズ
  • デスクトップ：16px
  • タブレット：15px
  • 電話番号：14px
• 文字間隔：1px

メタテキス​​ト

次に、メタテキス​​トの設定にいくつかの変更を加えます。

• フォント：Open Sans
• スタイル：TT
• カラー：ブラック＃000000
• 文字間隔：2px

サイジング

さまざまな画面サイズでモジュールのサイズ設定を変更して続行します。

• 幅
  • デスクトップ：自動
  • タブレット：90％
  • 電話番号：80％

間隔

次に、上部のパディングを追加します。

• トップパディング
  • デスクトップ：60px
  • タブレットと電話：70px

国境

モジュールの境界線設定も変更します。

• グリッドレイアウトの境界線スタイル：左側
• 幅：1px
• 色：黒#oooooo

カスタムCSS

そして、モジュールのタイトルと本文に2行のCSSコードを追加して設計を完了します。

• タイトル：padding-bottom：50px;

padding-bottom: 50px;

• 本体：パディング-下部：50px;

padding-bottom: 50px;

プレビュー

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

デスクトップ

モバイル

おしまいです！

このチュートリアルでは、Diviのテーマビルダーを使用してカスタム作成者ページテンプレートを作成しました。 動的コンテンツとDiviの組み込みオプションを組み合わせて、最小限の作成者ページデザインを作成しました。 すべての著者は、姓名、著者の経歴、プロフィール写真を持っている必要があることに注意してください。 JSONファイルをダウンロードした場合は、Divi ThemeBuilderのメインエリアにインポートできます。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！