Diviのテーマビルダーでカスタムフッターを作成する方法
公開: 2019-10-26Divi Theme Builderは新しい時代を迎え、ウェブサイトのデザイン方法を変えます。 この機能の最も重要な部分の1つは、ページと投稿にグローバルフッターを動的に追加できることです。 フッターをデザインしたら、Diviのテーマビルダーを使用して、必要な種類のページや投稿に自動的に追加できます。 このチュートリアルでは、グローバルフッターを作成してWebサイトに追加するプロセスを段階的に説明します。 テンプレートJSONファイルも無料でダウンロードできます！
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズにわたるグローバルフッターのデザインを簡単に見てみましょう。
デスクトップ
モバイル
カスタムグローバルフッターを無料でダウンロード
無料のカスタムグローバルフッターを入手するには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
私たちのYoutubeチャンネルを購読する
1.Diviのテーマビルダーに移動します
まず、Diviテーマオプションのテーマビルダーに移動します。
2.グローバルフッターを追加および構築する
そこで、Diviライブラリからグローバルフッターを追加するか、最初から作成を開始できます。 このチュートリアルでは、カスタムフッターを最初から作成するので、先に進んで最初のオプションを選択します。
セクション＃1を追加
背景色
作成を開始する時が来ました！ ページにあるセクションを開き、セクションの背景色を変更します。
- 背景色：＃000000
間隔
次に、セクションの間隔設定を変更します。
- トップマージン：6vw
- 左マージン：6vw
- 右マージン：6vw
- 左パディング：30px
- 右パディング：30px
国境
次に、左上と右上の境界線を追加します。
- 左上：20px
- 右上：20px
ボックスシャドウ
セクション設定にもボックスシャドウを含めます。
- ボックスシャドウブラーの強さ：rgba（0,0,0,0.18）
- 影の色：rgba（0,0,0,0.18）
セクションに新しい行を追加
カラム構造
次の列構造を使用して、セクションに行を追加して続行します。
列にテキストモジュールを追加
H2コンテンツを追加する
H2コンテンツを含むテキストモジュールを追加します。
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
Dividerモジュールを列に追加
可視性
テキストモジュールのすぐ下にディバイダーモジュールを追加し、[ディバイダーを表示]オプションが有効になっていることを確認します。
- 仕切りを表示：はい
ライン
線の色を黒に変更します。
- 線の色：＃000000
サイジング
仕切りのサイズ設定も変更します。
- 幅：15％
- モジュールの配置：中央
テキストモジュール＃2を列に追加
コンテンツを追加する
列に別のテキストモジュールを追加して続行します。
リンクを追加
このモジュールが参照するページへのリンクを追加します。
テキスト設定
次に、[デザイン]タブに移動し、次のようにテキスト設定を変更します。
- テキストフォント：ポピンズ
- テキストフォントの太さ：軽い
- テキストの色：＃777777
- テキストサイズ：15px
- テキストの配置：中央
間隔
上下の余白も追加します。
- トップマージン：10px
- 下マージン：10px
クローンテキストモジュール＃2必要なだけ
列の2番目のテキストモジュールを完了すると、必要な回数だけクローンを作成できます（含めるクリック可能なフッターアイテムの数によって異なります）。
コンテンツとリンクを変更する
複製ごとにモジュールの内容とリンクを変更してください。
列全体を2回クローンします
列とそのモジュールを完了したら、列全体を2回複製できます。
列2の背景色
次に、列2の設定を開き、背景色を変更します。
- 列2の背景色：＃f9f9f9
コンテンツとリンクを変更する
重複する各列のすべてのコンテンツとリンクを必ず変更してください。
新しい列を追加
次に、行に4番目の列を追加します。
背景色
新しい列の背景色を変更します。
- 背景色：＃0fffc7
間隔
列のパディング値とともに。
- トップパディング：70px
- ボトムパディング：70px
- 左パディング：50px
- 右パディング：50px
ソーシャルメディアフォローモジュールを列4に追加
ソーシャルネットワークを追加する
ソーシャルメディアフォローモジュールを列4に追加して続行します。
ソーシャルネットワークスタイルをリセットする
追加する各ソーシャルネットワークのアイテムスタイルをリセットします。
配置
次に、[デザイン]タブに移動し、モジュールの配置を変更します。
- モジュールの配置：中央
アイコン設定
アイコンの色も変更します。
- アイコンの色：＃000000
Eメールオプチンモジュールを列4に追加
コンテンツを削除する
続けて、Eメールオプチンモジュールを列4に追加し、タイトルと本文のコンテンツを削除します。
メールアカウント
次にメールアカウントを追加します。 メールアカウントを追加しないと、ビルダーを終了するとモジュールは表示されません。
背景色を削除する
モジュールの背景色を削除して続行します。
- 背景色を使用する：いいえ
フィールド設定
[デザイン]タブに移動し、次のようにフィールド設定を変更します。
- フィールド背景色：rgba（0,0,0,0）
- フィールドテキストの色：＃000000
- フィールドフォント：ポピンズ
- フィールドテキストサイズ：13px
- フィールドの境界線の幅：1px
- フィールドの境界線の色：＃000000
ボタンの設定
モジュールのボタンもスタイル設定します。
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストサイズ：12px
- ボタンのテキストの色：＃000000
- ボタンの背景色：#FFFFFF
- ボタンの境界線の幅：0px
- ボタンの境界線半径：100px
- ボタンの文字間隔：1px
- ボタンフォント：ポピン
- ボタンのフォントの太さ：半太字
- ボタンのフォントスタイル：大文字
- トップパディング：15px
- ボトムパディング：15px
ダイナミックテキストモジュールを列4に追加
動的コンテンツ
この設計を完了するために必要な次の最後のモジュールは、テキストモジュールです。 コンテンツボックスで動的コンテンツオプションを有効にします。
次に、[現在の日付]オプションを選択します。
- 動的コンテンツ：現在の日付
そして、動的コンテンツの設定を次のように変更します。
- 以前：著作権＆copy;
- 後：| 全著作権所有
- 日付形式：カスタム
- カスタム日付形式：20年
テキスト設定
次に、[デザイン]タブに移動し、それに応じてテキスト設定を変更します。
- テキストフォント：ポピンズ
- テキストの色：＃000000
- テキストサイズ：16px
間隔
上マージンを追加してモジュールの設定を完了すると、完了です。
- トップマージン：50px
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
このチュートリアルでは、Diviの新しいテーマビルダーを使用して美しいカスタムグローバルフッターを簡単に作成できることを示しました。 テーマビルダーとDiviの組み込みモジュールおよびデザインオプションは、多くの時間を節約し、すぐに魅力的なWebサイトを作成するのに役立ちます。 このチュートリアルが、今後のDiviプロジェクトの美しいグローバルフッターを作成するきっかけになることを願っています。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。