Diviのスティッキーオプションを使用してスティッキーフッターバーを作成する方法

訪問者がWebサイトをナビゲートしているときに、訪問者をフォローするCTAを追加する方法を探している場合は、スティッキーフッターバーを検討することをお勧めします。 スティッキーフッターバーはブラウザの下部に使用されており、ボタンであろうと連絡先情報であろうと、選択した行動の呼びかけを含めることができます。 訪問者がページのフッター領域にスクロールするとすぐに、フッターバーとフッターのデザインがマージされ、スティッキーフッターバーのスタイルが変更されます。 この美しい美学は、ページのコンバージョン率を高めるのに役立つかもしれません！ テンプレートのJSONファイルも無料でダウンロードできます。

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

プレビュー

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

デスクトップ

モバイル

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

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

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

無料でダウンロード

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

ダウンロード

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

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

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

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

ゼロから構築を開始

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

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

セクション設定

背景色

テンプレートエディタに入ると、セクションが表示されます。 そのセクションを開き、黒い背景色を適用します。

• 背景色：＃000000

行＃1を追加

カラム構造

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

背景色

モジュールをまだ追加せずに、行の設定を開き、背景色を変更します。

• 背景色：＃ea6c01

サイジング

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

• カスタムガター幅を使用：はい
• 側溝幅：1
• 幅：90％
• 最大幅：2580px
• 行の配置：中央

間隔

小さい画面サイズにもカスタムの上下のパディングを追加します。

• トップパディング：5px（タブレットと電話のみ）
• 下部のパディング：5px（タブレットと電話のみ）

国境

次に、レスポンシブな丸みを帯びた角を境界線の設定に追加します。

• すべてのコーナー：
  • デスクトップ：30px
  • タブレットと電話：15px

オーバーフロー

また、チュートリアルの後半でオーバーラップを作成できるようにするために、行のオーバーフローを表示に設定します。

• 水平オーバーフロー：可視
• 垂直オーバーフロー：目に見える

列1と3の可視性

小さい画面サイズに表示されるフッターバーアイテムが多すぎるのを防ぐために、タブレットと電話の両方で行の最初と最後の列を非表示にします。

列1に宣伝文モジュールを追加する

コンテンツを追加する

列1の宣伝文モジュールから始めて、モジュールを追加します。選択したコンテンツをいくつか追加します。

アイコンを選択

次にアイコンを選択します。

アイコン設定

モジュールの[デザイン]タブに移動し、それに応じてアイコンのスタイルを設定します。

• アイコンの色：＃f5d72e
• 円のアイコン：はい
• 円の色：＃000000
• 画像/アイコンの配置：上
• 画像/アイコンの配置：中央
• アイコンのフォントサイズを使用：はい
• アイコンフォントサイズ：32px

テキスト設定

次に、テキスト設定を変更します。

• テキストの配置：中央
• テキストの色：明るい

タイトルテキスト設定

タイトルテキストの設定にもいくつか変更を加えます。

• タイトルフォント：ポピンズ
• タイトルテキストの色：＃000000

本文の設定

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

• ボディフォント：ポピンズ
• ボディフォントの太さ：超太字
• 本文サイズ：20px

サイジング

次に、サイズ設定でコンテンツの幅を「100％」にします。

• コンテンツの幅：100％

間隔

オーバーラップを作成するには、間隔設定に負の上部マージンを追加します。

• 上マージン：-60px

アニメーション

そして、アニメーション設定のアイコンアニメーションを削除して、モジュール設定を完了します。

• 画像/アイコンアニメーション：アニメーションなし

宣伝文句モジュールのクローンを作成し、列3に複製を配置します

列1の最初の宣伝文句モジュールを完了したら、それを1回複製し、複製を列3に配置します。

コンテンツとアイコンを変更する

複製のコンテンツとアイコンを変更します。

列2に宣伝文モジュールを追加する

アイコンを選択

次に、新しい宣伝文モジュールを列2に追加します。コンテンツボックスを空のままにして、選択したアイコンを選択します。

背景色

次に背景色を追加します。

• 背景色：＃000000

アイコン設定

モジュールの[デザイン]タブに移動し、それに応じてアイコン設定を変更します。

• アイコンの色：#ffffff
• 画像/アイコンの配置：上
• 画像/アイコンの配置：中央
• アイコンのフォントサイズを使用：はい
• アイコンフォントサイズ：30px

サイジング

次に、サイズ設定にいくつかの変更を加えます。

• 幅：70px
• モジュールの配置：中央
• 高さ：40px

間隔

次に、さまざまな画面サイズにカスタムマージンとパディング値を適用します。

• 上マージン：-20px（タブレットと電話のみ）
• トップパディング：5px
• ボトムパディング：0px

国境

次に、境界線の設定にいくつかの丸い角を追加します。

• すべてのコーナー：10px

アニメーション

そして、アニメーション設定でデフォルトのアニメーションを削除します。

• 画像/アイコンアニメーション：アニメーションなし

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

コンテンツを追加する

この行に必要な次の最後のモジュールは、列2のテキストモジュールです。選択したコンテンツをいくつか追加します。

テキスト設定

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

• テキストフォントの太さ：半太字
• テキストサイズ：18px
• テキスト行の高さ：1.8em
• テキストの配置：中央

行＃2を追加

カラム構造

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

サイジング

モジュールを追加せずに、行設定を開き、[デザイン]タブに移動して、次のようにサイズ設定を変更します。

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

間隔

次に、上下の余白を追加します。

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

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

画像をアップロード

画像モジュールを列1に追加し、ロゴまたは任意の種類の画像をアップロードします。

サイジング

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

• 幅：59％
• モジュールの配置：左

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

H3コンテンツを追加する

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

H3テキスト設定

モジュールのH3テキスト設定を次のように変更します。

• 見出し3フォント：ポピンズ
• 見出し3フォントの太さ：太字
• 見出し3のテキストの色：＃6d6d6d

テキストモジュールのクローンを3回作成し、列3と4に広げます

このテキストモジュールを完了すると、3回クローンを作成し、行の残りの2つの列に複製を分散させることができます。

コンテンツの変更

重複する各テキストモジュールのコンテンツを必ず変更してください。

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

コンテンツを追加する

列2の前のテキストモジュールのすぐ下に別のテキストモジュールを追加し、選択したリンクコンテンツをいくつか追加します。

テキスト設定

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

• テキストフォント：ポピンズ
• テキストサイズ：30px
• テキスト行の高さ：1em
• テキストの配置：左
• テキストの色：明るい

リンクテキスト設定

リンクテキストの色も変更します。

• リンクテキストの色：#ffffff

必要に応じてテキストモジュールのクローンを作成する

テキストモジュールが完成したら、必要な回数だけクローンを作成します。

コンテンツの変更

重複する各モジュールのコンテンツとリンクを必ず変更してください。

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

コンテンツを追加する

次に、別のテキストモジュールを列3に追加します。選択したリンクコンテンツをいくつか追加します。

テキスト設定

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

• テキストフォント：ポピンズ
• テキストサイズ：22px
• テキスト行の高さ：1em
• テキストの配置：左
• テキストの色：明るい

リンクテキスト設定

リンクテキストの色も変更します。

• リンクテキストの色：＃ea6c01

必要に応じてテキストモジュールのクローンを作成する

このモジュールのクローンを必要な回数だけ作成します。

コンテンツの変更

そしてもちろん、必要に応じてコンテンツとリンクを変更します。

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

コンテンツを追加する

4列目では、最初のテキストモジュールの下に別のテキストモジュールを追加します。 お好みのコンテンツを追加してください。

テキスト設定

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

• テキストフォント：ポピンズ
• テキストサイズ：16px
• テキスト行の高さ：1.8em
• テキストの配置：左
• テキストの色：明るい

ソーシャルメディアのフォローを列4に追加

選択したソーシャルネットワークを追加する

次に、ソーシャルメディアフォローモジュールを列の最後に追加します。 選択したソーシャルネットワークを追加します。

各ソーシャルネットワークの背景色を個別に削除します

各ソーシャルネットワークの背景色を個別に削除します。

間隔

通常のモジュール設定に戻り、間隔設定に移動して、いくつかのカスタムマージン値を追加します。

• トップマージン：-15px
• 左マージン：-8px

行＃3を追加

カラム構造

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

サイジング

モジュールをまだ追加せずに、行設定を開き、[デザイン]タブに移動して、次のようにサイズ設定を変更します。

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

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

コンテンツを追加する

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

テキスト設定

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

• テキストフォント：ポピンズ
• テキストの色：＃595959
• テキストサイズ：13px
• テキストの配置：中央

リンクテキスト設定

リンクテキストの色も変更します。

• リンクテキストの色：＃595959

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

列1のモジュールを完了したら、モジュールを2回複製して、行の残りの2つの列に複製を配置できます。

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

それに応じて、重複する各テキストモジュールのテキスト配置を変更します。

• 列2のテキストモジュール：
  • デスクトップ：センター
  • タブレットと電話：左

• 列3のテキストモジュール：
  • デスクトップ：右
  • タブレットと電話：左

コンテンツの変更

また、重複する両方のモジュールのコンテンツも変更します。

3.フッターバーにスティッキーエフェクトを適用します

行＃1を開き、スティッキー設定を適用します

デザインの基礎が整ったので、スティッキー効果を適用します。 セクションの最初の行を開き、[詳細設定]タブに移動して、次のスティッキー設定を適用します。

• スティッキーポジション：ボトムに固執
• スティッキーボトムオフセット：
  • デスクトップ：50px
  • タブレットと電話：20px

行スティッキースタイル

背景色

行をスティッキーにしたので、行とそのすべての子要素にスティッキースタイルを適用できます。 行＃1に粘着性のある背景色を追加することから始めます。

• 粘着性のある背景色：＃000000

列1と3の宣伝文句にスティッキースタイルを適用する

アイコン設定

次に、列1と3の宣伝文モジュールを開き、粘着性のある円の色を追加します。

• スティッキーサークルカラー：＃ea6c01

タイトルテキスト設定

粘着性のあるタイトルテキストの色も追加します。

• スティッキータイトルテキストの色：＃ea6c01

列2の宣伝文句モジュールにスティッキースタイルを適用する

背景色

次に、列2の宣伝文モジュールを開き、粘着性のある背景色を適用します。

• 粘着性のある背景色：＃ea6c01

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

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

プレビュー

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

デスクトップ

モバイル

最終的な考え

この投稿では、Diviのスティッキーオプションを使ってクリエイティブになる方法を紹介しました。 具体的には、ユーザーが表示しているページを下にスクロールすると、メインのフッター領域と結合するスティッキーフッターバーを作成する方法を示しました。 テンプレートJSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

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