投稿カテゴリメニューウィジェットをDiviグローバルフッターに追加する方法

Diviのテーマビルダー内でカスタムフッターを作成する場合、フッターアイテムを追加する方法はいくつかあります。 適切なリンクを使用してテキストモジュール内にページフッターアイテムを追加するモジュールベースのフッターを選択することもできますが、Diviのサイドバーモジュールを使用してデザインにさまざまなフッターウィジェットを追加し、Diviの組み込みを使用してスタイルを設定することもできます。オプション。 今日のチュートリアルでは、2番目のオプションを実行する方法を示します。 具体的には、投稿カテゴリメニューウィジェットをフッターに追加する方法を説明します。 私たちが使用しているデザインスタイルは、Food Recipes LayoutPackと完全に一致しています。 まず、さまざまな投稿カテゴリをWebサイトに追加します。 次に、WordPress内にフッターメニューを作成します。 次に、ウィジェットを作成します。最後に、Diviテーマビルダー内のカスタムビルドのDiviフッターにウィジェットを追加します。 JSONファイルも無料でダウンロードできます！

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

プレビュー

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

デスクトップ

モバイル

グローバルフッターテンプレートを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

1.Webサイトの投稿カテゴリを設定します

投稿カテゴリに移動

このチュートリアルの最初の部分では、カスタムフッターメニューに追加する前に、すべての投稿カテゴリが設定されていることを確認します。 これを行うには、WordPressバックエンド内の投稿カテゴリに移動します。

選択したポストカテゴリ構造を設定する

まだ行っていない場合は、フッターに含めるさまざまな投稿カテゴリをすべて設定します。 このチュートリアルでは、カスタムフッターに3つの異なる投稿カテゴリメニューウィジェットを含めるため、投稿カテゴリの3つの異なるグループが必要になります。

2.いくつかのカテゴリのWordPressメニューを作成します

メニューに移動

次に、投稿カテゴリのグループごとに個別のメニューを作成します。 WordPressWebサイトの外観設定内のメニューに移動します。

最初のフッターメニューを作成する

最初のフッターメニューを追加し、わかりやすい名前を付けます。

• メニュー名：フッターメニュー＃1

投稿カテゴリを追加

この新しいメニューに投稿カテゴリの最初のグループを追加します。

他の投稿カテゴリの2番目と3番目のフッターメニューを作成する

他の2つの投稿カテゴリグループについても同じことを行います。

• メニュー名：フッターメニュー＃2

• メニュー名：フッターメニュー＃3

3.フッターウィジェットを作成します

ウィジェットに移動

投稿カテゴリと投稿カテゴリメニューが配置されたので、フッター領域ウィジェット内に配置できます。 これを行うには、WordPressバックエンドのウィジェットに移動します。

フッターメニュー＃1をフッターエリア＃1に追加します

そこで、最初のナビゲーションメニューウィジェットをフッターエリア＃1に追加します。 ナビゲーションメニュー内で、このチュートリアルの前の部分で作成した最初のフッターメニューを選択します。

フッターメニュー＃2をフッターエリア＃2に追加します

2番目の投稿カテゴリメニューを2番目のフッター領域に配置します。

フッターメニュー＃3をフッターエリア＃3に追加します

そして、3番目のフッター領域の3番目のフッターメニュー。

フッターエリア＃4に最近の投稿を追加する

4番目のフッター領域に追加する最後のウィジェットは、最近の投稿ウィジェットです。 このウィジェットは、最近の5件の投稿をリンクとして動的に表示します。

3.Diviテーマビルダー内にグローバルフッターを構築する

Diviテーマビルダーに移動して、フッターテンプレートの作成を開始します

投稿カテゴリ、投稿カテゴリメニュー、ウィジェットが配置されたので、Diviに切り替えましょう。 Divi Theme Builderに移動して、グローバルフッターまたはカスタムフッターの作成を開始します。

セクション設定

背景色

フッターテンプレートに入ると、セクションが表示されます。 そのセクションを開き、背景色を追加します。 このデザイン全体で使用しているスタイルは、Food Recipes Layout Packと完全に一致していますが、このアプローチは、選択したあらゆる種類のデザインで機能します。

• 背景色：＃ff7864

背景画像

次に背景画像を追加します。 このチュートリアルとまったく同じものを使用する場合は、このチュートリアルの最初にダウンロードできるフォルダーにあります。

• 背景画像サイズ：フィット

間隔

セクションの[デザイン]タブに移動し、次にデフォルトの上下のパディングをすべて削除します。

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

行＃1を追加

カラム構造

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

グラデーションの背景

モジュールをまだ追加せずに、行設定を開き、グラデーションの背景を適用します。

• 色1：rgba（10,10,10,0.05）
• 色2：rgba（10,10,10,0.18）

サイジング

行のデザインタブに移動し、次のようにサイズ設定を変更します。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 列の高さを等しくする：はい
• 最大幅：1680px

間隔

次に、デフォルトの上下のパディングをすべて削除します。

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

列1の設定

間隔

次に、列1の設定を開き、[デザイン]タブにカスタムのパディング値を追加します。

• トップパディング：5％
• ボトムパディング：5％
• 左パディング：5％
• 右パディング：5％

国境

デスクトップでも右の境界線を使用しています。

• 右ボーダー幅：
  • デスクトップ：2px
  • タブレットと電話：0px
• 右の境界線の色：＃ff7864

列2の設定

間隔

次に、列2の設定を開き、次のパディング値を適用します。

• トップパディング：5％
• ボトムパディング：5％
• 左パディング：5％
• 右パディング：5％

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

ロゴをアップロード

1列目の画像モジュールから始めて、モジュールを追加します。選択したロゴをアップロードし、好きなようにスタイルを設定します。

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

H2コンテンツを追加する

2番目の列では、説明的なH2コンテンツを含むテキストモジュールを追加しています。

H2テキスト設定

[デザイン]タブに移動し、それに応じてH2テキスト設定を変更します。

• 見出し2フォント：鵜ガラモンド
• 見出し2フォントの太さ：中
• 見出し2のテキストの色：#ffffff
• 見出し2テキストサイズ：
  • デスクトップとタブレット：40px
  • 電話番号：35px
• 見出し2行の高さ：1.3em

行＃2を追加

カラム構造

次の行に進みます。 この行には、すべてのウィジェットを配置します。 次の列構造を選択します。

背景色

モジュールをまだ追加せずに、行設定を開いて背景色を適用します。

• 背景色：rgba（10,10,10,0.05）

サイジング

[デザイン]タブに移動し、次のようにサイズ設定を変更します。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 列の高さを等しくする：はい
• 最大幅：1680px

間隔

デフォルトの上下のパディングもすべて削除します。

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

すべての列間隔

次に、列を個別に開き、次のパディング値を各列に適用します。

• トップパディング：5％
• ボトムパディング：5％
• 左パディング：5％
• 右パディング：5％

列1の境界線

次に、列1に境界線を追加します。

• 右ボーダー幅：
  • デスクトップとタブレット：2px
  • 電話番号：0px
• 右の境界線の色：＃ff7864

列2の境界線

2番目の列には、同じ境界線を使用していますが、レスポンシブ値がいくつか異なります。

• 右ボーダー幅：
  • デスクトップ：2px
  • 携帯電話とタブレット：0px
• 右の境界線の色：＃ff7864

列3の境界線

最後になりましたが、3番目の列にも右の境界線を追加します。

• 右ボーダー幅：
  • デスクトップとタブレット：2px
  • 電話番号：0px
• 右の境界線の色：＃ff7864

サイドバーモジュールを列1に追加

投稿カテゴリメニューウィジェットを追加する時が来ました！ そのために、Diviの組み込みサイドバーモジュールを使用します。 行の最初の列に1つ追加します。

フッターエリア＃1を選択します

最初のフッター領域を選択します。 これは、私たちが作成した最初の投稿カテゴリメニューにリンクされています。

• ウィジェットエリア：フッターエリア＃1

レイアウト

モジュールの[デザイン]タブに移動し、境界線セパレーターを無効にします。

• ボーダーセパレーターを表示：いいえ

本文の設定

本文の設定も変更してください。

• ボディフォント：Montserrat
• ボディフォントの太さ：中
• 本文の色：#ffffff
• 本文サイズ：13px

間隔

そして、間隔設定に上部と下部のパディングを追加して、モジュール設定を完了します。

• トップパディング：5％
• ボトムパディング：5％

サイドバーモジュールのクローンを2回作成し、2列目と3列目に複製を配置します

最初のサイドバーモジュールが完成したら、それを2回クローンして、複製を列2と3に配置できます。

フッターエリアの変更

複製ごとにウィジェット領域を変更して、作成したさまざまな投稿カテゴリメニューを表示します。

• ウィジェットエリア：フッターエリア＃2

• ウィジェットエリア：フッターエリア＃3

サイドバーモジュールを列4に追加

最後の列に、新しいサイドバーモジュールを追加します。

フッターエリア＃4を選択します

このモジュールでは、最近の投稿を含む、作成した4番目のフッター領域を選択します。

• ウィジェットエリア：フッターエリア＃4

タイトルテキスト設定

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

• タイトルフォント：鵜ガラモンド
• タイトルテキストの色：#ffffff
• タイトルテキストサイズ：30px

本文の設定

本文の設定にも変更を加えます。

• ボディフォント：Montserrat
• ボディフォントの太さ：中
• 本文の色：#dddddd
• 本文サイズ：13px

間隔

そして、モジュールの間隔設定にカスタムの上部と下部のパディングを追加して、モジュール設定とこのチュートリアルを完了します。 それでおしまい！ Webサイトで結果を表示する前に、Divi ThemeBuilderの変更をすべて保存してください。

• トップパディング：5％
• ボトムパディング：5％

プレビュー

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

デスクトップ

モバイル

最終的な考え

このチュートリアルでは、DiviテーマビルダーをWordPressフッターウィジェットおよびDiviサイドバーモジュールと組み合わせる方法を示しました。 具体的には、投稿カテゴリメニューウィジェットをグローバルフッターに追加して、訪問者のナビゲーションの旅を簡単にする方法を示しました。 このアプローチは、WordPressバックエンド内にフッターメニューとウィジェットを保持しながら、Diviの組み込みオプションを使用してフッターアイテムのスタイルを設定するのに役立ちます。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

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