Divi Theme Builderの結果として、ウェブサイト作成の新時代が始まりました。 この新機能を使用すると、ページや記事にグローバルフッターを動的に追加できます。 ページや投稿にフッターを追加するには、 Diviのテーマビルダー（Diviテーマに含まれています）を使用するだけです。 ここで、この記事では、グローバルフッターを作成してWebサイトに追加する方法を説明します。 さらに、JSONファイルを無料でダウンロードできます。

プレビュー

始める前に、まずグローバルフッターがさまざまなサイズの画面でどのように表示されるかを見てみましょう。

設計手順

まず、WordPressダッシュボードにログインします。 Diviテーマオプションで、テーマビルダーに移動します。

そこでは、既存のグローバルフッターを使用するか、Diviライブラリを使用して最初から新しいフッターを作成するかを選択できます。 このレッスンではカスタムフッターを最初から作成するので、先に進んでオプション1を選択します。

素晴らしいウェブサイトを作成します

最高の無料ページビルダーElementor を使用

今すぐ始める

セクションNo1

BGカラー

今すぐクリエイティブになりましょう！ ページのセクションを開き、セクションの背景色を変更します。

• 背景色：#000000

間隔

次に、以下の値に従ってセクション間隔を更新します。

• トップマージン：6vw
• 左マージン：6vw
• 右マージン：6vw
• 左パディング：30px
• 右パディング：30px

国境

次のステップは、上下左右に境界線を追加することです。

• 左上：20px
• 右上：20px

ボックスシャドウ

ボックスシャドウもセクション設定に含める必要があります。

• ボックスシャドウブラーの強さ：rgba（0,0,0,0.18）
• 影の色：rgba（0,0,0,0.18）

新しい行を追加

次に、新しい1列の行をセクションに追加します。

新しいテキストモジュールを追加する

次に、テキストモジュールを追加し、そのモジュールにコピーを追加します。

H2テキスト設定

必要に応じて、モジュールの[デザイン]タブでH2テキスト設定を変更します。

• 見出し2フォント：ポピンズ
• 見出し2フォントの太さ：半太字
• 見出し2テキストの配置：中央
• 見出し2テキストの色：#ffffff
• 見出し2テキストサイズ：31px（デスクトップ）、24px（タブレット）、18px（電話）
• 見出し2行の高さ：1.6em

テキストモジュールのサイズ設定

モジュールには最大幅も必要です。

• 最大幅：700px

ボタンモジュールの追加

テキストモジュールのすぐ下に、ボタンモジュールを追加し、好きなコピーを入力します。

ボタンの配置

モジュールのデザインタブの中央にボタンの配置を変更します。

• ボタンの配置：中央

ボタンの設定

次に、ボタンのスタイルを設定しましょう。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：12px
• ボタンのテキストの色：#000000
• ボタンの背景色：#FFFFFF
• ボタンの境界線の幅：0px

• ボタンの境界線の半径：100px
• ボタンの文字間隔：1px
• ボタンフォント：ポピン
• ボタンのフォントの太さ：半太字
• ボタンのフォントスタイル：大文字

ボタンの間隔

カスタムパディングを追加する時が来ました。

• トップパディング：14px
• ボトムパディング：14px
• 左パディング：40px
• 右パディング：58px

セクション2

背景色

次の通常の章はここにあります！ セクションの背景色を白に選択します。

• 背景色：#ffffff

間隔

上下のクッションをすべて取り外します。

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

国境

このセクションには、境界半径も追加する必要があります。

• 左上：20px
• 右上：20px

ボックスシャドウ

次に、ボックスシャドウを追加して、セクションの編集を終了します。

• ボックスシャドウブラー強度：135px
• 影の色：rgba（0,0,0,0.18）

新しい行を追加

次の手順に従って、セクションに新しい行を追加できます。

行のサイズ設定

行設定を開き、モジュールを追加せずに行が画面全体を占めるようにします。

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

行間隔

上部と下部の行のパディングを削除します。

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

列の間隔

列の設定に移動し、さまざまな画面幅に特定のパディング値を追加します。

• トップパディング：100px（デスクトップ）、50px（タブレット&電話）
• 下部のパディング：100px（デスクトップ）、50px（タブレット&電話）
• 左パディング：50px
• 右パディング：50px

テキストモジュール1

モジュールの追加は今または決してありません！ 標準のテキストモジュールを列1に追加し、選択したものを入力します。

テキスト設定

必要に応じて、モジュールの[デザイン]タブのテキスト設定を変更します。

• テキストフォント：ポピン
• テキストフォントの太さ：太字
• テキストの色：#000000
• テキストサイズ：17px
• テキストの配置：中央

間隔

次のステップは、いくつかの固有の上部マージンと下部マージンを追加することです。

• トップマージン：10px
• 下マージン：30px

仕切りモジュールの可視性

[ディバイダーを表示]オプションがオンになっている場合は、テキストモジュールのすぐ下にディバイダーモジュールを追加できます。

• 仕切りを表示：はい

ライン

次に色を変更します。

• 線の色：#000000

サイジング

仕切りのサイズも変更できます。

• 幅：15%
• モジュールの配置：中央

テキストモジュール2

これで、テキストモジュールを列に追加できます。

リンク

このモジュールをポイントするページへのURLを含めます。

テキスト設定

[デザイン]タブで、テキスト設定を次のように調整します。

• テキストフォント：ポピン
• テキストフォントの太さ：軽い
• テキストの色：#777777
• テキストサイズ：15px
• テキストの配置：中央

間隔

また、ページの上部と下部にスペースを入れてください。

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

テキストモジュール2のクローン作成

列の2番目のテキストモジュールは、構築が完了した後、無制限に複製することができます（含めるクリック可能なフッターアイテムの数によって異なります）。

リンクを変更する

コピーごとに、モジュールのコンテンツとリンクを必ず更新してください。

カラムを2回クローンする

列とそのすべてのモジュールの作成が完了したら、列のクローンを2回作成できます。

列2BGの色の変化

列とそのすべてのモジュールの作成が完了したら、列のクローンを2回作成できます。

• 列2の背景色：#f9f9f9

新しい列を追加

次に、4番目の列を追加する必要があります。

背景色

新しい列の背景を色付けします。

• 背景色：#0fffc7

間隔

列のパディング値に加えて。

• トップパディング：70px
• ボトムパディング：70px
• 左パディング：50px
• 右パディング：50px

ソーシャルメディアアイコン

ソーシャルメディアフォローモジュールを列4に追加して、表を完成させます。

アラインメント

[デザイン]タブで、モジュールの位置を調整します。

• モジュールの配置：中央

アイコン

次に、アイコンの色を変更します。

• アイコンの色：#000000

メールモジュール

4列目にメールオプトインモジュールを挿入してから、タイトルと本文のコンテンツを削除してください。 次に、個人の電子メールアカウントをリンクします。 メールアカウントが追加されていない場合、ビルダーを終了するとモジュールは表示されません。

また、電子メールモジュールからBGを削除します。

フィールド設定

[デザイン]タブに移動し、フィールドに対して次の調整を行います。

• フィールドの背景色：rgba（0,0,0,0）
• フィールドテキストの色：#000000
• フィールドフォント：ポピン

• フィールドテキストサイズ：13px
• フィールド境界線幅：1px
• フィールドの境界線の色：#000000

ボタン

次に、ボタンのスタイルを変更します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：12px
• ボタンのテキストの色：#000000
• ボタンの背景色：#FFFFFF
• ボタンの境界線の幅：0px
• ボタンの境界線の半径：100px
• ボタンの文字間隔：1px
• ボタンフォント：ポピン
• ボタンのフォントの太さ：半太字
• ボタンのフォントスタイル：大文字
• トップパディング：15px
• ボトムパディング：15px

ダイナミックテキストモジュールを追加する

最後に、このデザインを完成させるためにテキストモジュールを追加する必要があります。 コンテンツボックスで、動的コンテンツオプションを選択します。 そこから次の変更を行います。

• 動的コンテンツ：現在の日付
• 以前：Copyright ©
• 後：| 全著作権所有
• 日付形式：カスタム
• カスタム日付形式：20年

テキスト設定

[デザイン]タブから、次の設定を変更します。

• テキストフォント：ポピン
• テキストの色：#000000
• テキストサイズ：16px

間隔

上マージンを追加すれば、モジュールの設定は完了です。

• トップマージン：50px

最終プレビュー

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

まとめ

このガイドでは、 Diviの新しいテーマビルダーを使用して見事なカスタムグローバルフッターを作成する方法を説明しました。 テーマビルダーとDiviの組み込みモジュールとデザインオプションの助けを借りて、数時間で美しいWebサイトを作成できます。 このチュートリアルを使用して、将来的にいくつかの素敵なDiviグローバルフッターを作成することが私たちの目標です。 以下のコメントセクションに質問やコメントを残してください！