Diviを使用してグローバルフッターで連絡先の詳細をインタラクティブに強調表示する方法

フッターはページデザインの下部に表示されますが、作成するWebサイトの非常に重要な部分です。 人々はフッターの概念に慣れており、アクセスする各Webサイトでそれを期待しています。 Diviのテーマビルダーを使用すると、任意のフッターデザインを作成できますが、独自のアプローチを探している場合は、このチュートリアルを気に入るはずです。 今日は、フッターの最初の部分に表示される連絡先の詳細をインタラクティブに強調表示する方法を紹介します。 JSONファイルも無料でダウンロードできます！

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

プレビュー

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

デスクトップ

モバイル

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

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

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

無料でダウンロード

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

ダウンロード

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

1.新しいフッターテンプレートを作成します

Divi Theme Builderに移動し、新しいグローバルフッターまたはカスタムフッターを追加します

WordPressWebサイトのバックエンドにあるDiviThemeBuilderにアクセスすることから始めます。 そこで、新しいグローバルフッターまたはカスタムフッターを追加します。

ゼロから構築を開始

フッターテンプレートの作成を最初から開始します。

2.フッターデザインを構築する

セクション設定

背景色

テンプレートエディタに入ると、セクションがすでに存在していることがわかります。 セクション設定を開き、背景色を適用します。

• 背景色：＃e8e8e8

行＃1を追加

カラム構造

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

サイジング

モジュールをまだ追加せずに、行設定を開き、次のようにサイズ設定を変更します。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 幅：90％
• 最大幅：2580px

間隔

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

• ボトムパディング：1％

列のメイン要素CSS

次に、列1の設定を開き、[詳細設定]タブに移動して、CSSコードの次のレスポンシブ行を列のメイン要素に適用します。

デスクトップ：

display: flex;
flex-direction: row;

タブレットと電話：

display: block;

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

レスポンシブコンテンツ

最初のテキストモジュールから始めて、モジュールを追加します。 選択したレスポンシブコンテンツをいくつか追加します。 ホバーオプションがそれほど明確ではないタブレットとモバイルの電話番号を必ず含めてください。

コンテンツにカーソルを合わせる

次にホバーコンテンツを変更します。

背景色

次に、背景色を適用します。

• 背景色：#ffffff

背景色にカーソルを合わせる

ホバー時に背景色を変更します。

• ホバーの背景色：＃00ff88

H3テキスト設定

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

• 見出し3フォント：Oswald
• 見出し3フォントの太さ：太字
• 見出し3フォントスタイル：大文字と下線
• 見出し3テキストの配置：中央
• 見出し3テキストの色：＃000000
• 見出し3テキストサイズ：
  • デスクトップ：2.5vw
  • タブレット：4.5vw
  • 電話：5.5vw

サイジング

次に幅が「100％」であることを確認します。

• 幅：100％

間隔

次に、次のレスポンシブ間隔の値を適用します。

• 下マージン：
  • デスクトップ：/
  • タブレットと電話：1％
• 右マージン：
  • デスクトップ：1％
  • タブレットと電話：0％
• トップパディング：10vh
• ボトムパディング：10vh

主な要素CSS

次のCSSコード行もモジュールに適用します。

flex: 1;
position: relative !important;
transition: flex 800ms !important;

メイン要素のCSSにカーソルを合わせる

そして、ホバーのメイン要素のCSSflexプロパティを変更します。

flex: 3;

テキストモジュールを2回複製する

最初のモジュールを完了したら、再利用するために2回クローンを作成できます。 重複するモジュールが自動的に隣り合って表示されます。

テキストモジュール＃2を変更する

コンテンツの変更とコンテンツのホバー

最初の複製テキストモジュールを開き、レスポンシブコンテンツとホバーコンテンツを変更します。

間隔を変更する

このモジュールの右マージンも削除します。

テキストモジュール＃3を変更する

コンテンツの変更とコンテンツのホバー

次に、3番目のテキストモジュールの設定を開き、コピーを変更します。

間隔を変更する

間隔設定で右マージンを削除し、代わりに左マージンを追加します。

• 左マージン：
  • デスクトップ：1％
  • タブレットと電話：0％

行＃2を追加

カラム構造

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

背景色

行設定を開き、次の背景色を適用します。

• 背景色：＃141414

サイジング

行の[デザイン]タブに移動し、それに応じてサイズ設定を変更します。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 幅：90％
• 最大幅：2580px

間隔

行の間隔設定も変更します。

• トップパディング：
  • デスクトップ：100px
  • タブレットと電話：50px
• ボトムパディング：
  • デスクトップ：100px
  • タブレットと電話：50px
• 左パディング：
  • デスクトップ：8％
  • タブレットと電話：10％
• 右パディング：
  • デスクトップ：8％
  • タブレットと電話：10％

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

H4コンテンツを追加する

次に、最初のテキストモジュールを列1に追加し、選択したH4コンテンツをいくつか追加します。

H4テキスト設定

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

• 見出し4フォント：Oswald
• 見出し4フォントスタイル：大文字
• 見出し4テキストの色：#ffffff
• 見出し4テキストサイズ：
  • デスクトップ：26px
  • タブレット：22px
  • 電話番号：18px
• 見出し4行の高さ：1.3em

間隔

下マージンも適用します。

• 下マージン：20px

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

コンテンツを追加する

前のテキストモジュールの下に別のテキストモジュールを追加し、選択したリンクを含むいくつかのフッターアイテムを含めます。

リンクテキスト設定

それに応じて、モジュールのリンクテキスト設定を変更します。

• リンクフォント：ラト
• リンクテキストの色：＃00ff88
• リンクテキストサイズ：17px

間隔

次に、レスポンシブなボトムマージンを適用します。

• 下マージン：
  • デスクトップ：0px
  • タブレットと電話：50px

列1を再利用する

列2、3、4を削除します

列1の両方のテキストモジュールを完了したら、行の残りの3つの列を削除できます。

列1のクローンを3回

そして、最初の列を3回複製して再利用します。

重複するコンテンツをすべて変更する

新しい列ごとに重複するコンテンツをすべて変更してください。

列4のテキストモジュール＃2の下マージンを削除します

そして、列4の最後のテキストモジュールの下余白を削除します。

行＃3を追加

カラム構造

次の最後の行に進みます。 次の列構造を使用します。

サイジング

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

• カスタムガター幅を使用：はい
• 側溝幅：2
• 幅：90％
• 最大幅：2580px

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

コンテンツを追加する

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

テキスト設定

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

• テキストフォント：Lato
• テキストサイズ：17px

テキストモジュールのクローンを作成し、列2に複製を配置します

列1のテキストモジュールのクローンを1回作成し、複製を列2に配置します。

コンテンツの変更

重複するモジュールの内容を変更します。

テキストの配置を変更する

また、別のレスポンシブテキスト配置を使用します。

• テキストの配置：
  • デスクトップ：右
  • タブレットと電話：左

4.すべてのテンプレートとテーマビルダーの変更を保存します

スティッキーな手順を完了したら、Webサイトで結果を表示する前に、テンプレートとテーマビルダーの変更を必ず保存してください。

プレビュー

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

デスクトップ

モバイル

最終的な考え

この投稿では、ウェブサイトのフッターを使ってクリエイティブになる方法を紹介しました。 具体的には、Diviテーマビルダーを使用して連絡先の詳細をインタラクティブに強調表示する方法を示しました。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

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