Diviを使用してヒーローセクションに絶対位置のボトムバーを追加する方法

ヒーローセクション内の要素を構造化する方法は、時々注意が必要です。 共有したいコンテンツの量を大幅に減らすことなく、バランスを取りたいと考えています。 幸いなことに、いくつかの合理化されたアプローチは、Web全体でその価値を証明しています。 それらのアプローチの1つは、ヒーローセクションに絶対位置のボトムバーを追加することです。 デザイン的に見栄えが良いだけでなく、デザインのバランスを崩すことなく、複数のアクション呼び出しを追加するのにも役立ちます。

このチュートリアルでは、Divi内のヒーローセクションに絶対位置のボトムバーを追加する方法を示します。 追加する下部のバーには、4つの部分が含まれます。 3つのボタンと1つのお問い合わせフォーム。 JSONファイルも無料でダウンロードできます！

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

プレビュー

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

デスクトップ

モバイル

絶対位置のボトムバーヒーローセクションレイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

私たちのYoutubeチャンネルを購読する

再作成を始めましょう！

新しいセクションを追加

グラデーションの背景

作業中のページに新しいセクションを追加することから始めます。 セクション設定を開き、グラデーションの背景を適用します。

• 色1：rgba（0,0,0,0.62）
• 色2：rgba（0,0,0,0.97）
• 背景画像の上にグラデーションを配置：はい

背景画像

次に、選択した背景画像をアップロードします。

間隔

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

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

オーバーフロー

セクションのオーバーフローも非表示にしています。

• 水平オーバーフロー：非表示
• 垂直オーバーフロー：非表示

行＃1を追加

カラム構造

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

間隔

モジュールをまだ追加せずに、行設定を開き、上下の余白を適用します。

• トップマージン：20％
• 下マージン：20％

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

H1コンテンツを追加する

選択したH1コンテンツを含む最初のテキストモジュールから始めて、モジュールを追加します。

H1テキスト設定

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

• 見出しフォント：Work Sans
• 見出しのテキストの色：#ffffff
• 見出しのテキストサイズ：
  • デスクトップ：80px
  • タブレット：50px
  • 電話番号：40px
• 見出し文字の間隔：
  • デスクトップ：-4px
  • タブレットと電話：-2px

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

コンテンツを追加する

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

テキスト設定

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

• テキストフォント：Open Sans
• テキストの色：＃a0a0a0

サイジング

サイズ設定も変更します。

• 幅：
  • デスクトップ：68％
  • タブレットと電話：100％

ボタンモジュールを列に追加

コピーを追加

この行で必要な最後のモジュールはボタンモジュールです。 お好みのコピーをいくつか含めてください。

リンクを追加

ボタンリンクを追加します。

• ボタンリンクURL：＃

ボタンの設定

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

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストの色：#ffffff
• ボタンの境界線の幅：0px

• ボタンフォント：Work Sans
• ボタンアイコンを表示：はい
• ボタンアイコンの配置：左

行＃2を追加

カラム構造

一番下のヒーローセクションバーを作成する時が来ました！ そのために、次の列構造を使用して新しい行を追加します。

サイジング

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

• カスタムガター幅を使用：はい
• 側溝幅：1
• 列の高さを等しくする：はい
• 幅：
  • デスクトップ：100％
  • タブレットと電話：80％
• 最大幅：2560px

間隔

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

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

ボックスシャドウ

ボックスシャドウも含めます。

• ボックスシャドウブラー強度：80px
• ボックスシャドウスプレッド強度：50px
• 影の色：rgba（135,135,135,0.08）

ポジション

次に、[詳細設定]タブに移動し、デスクトップ上の行全体を再配置します。 画面サイズが小さい場合は、デフォルトに戻します。 この行の位置設定により、行がセクションコンテナの下部に固定されます。

• ポジション：
  • デスクトップ：絶対
  • タブレットと電話：デフォルト
• 場所：下部中央

列1の設定

間隔

列1の設定を開いて続行し、いくつかのカスタムパディング値を適用します。

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

国境

この列にもレスポンシブボーダー設定を使用しています。

• トップボーダー：
  • 上枠幅：5px
  • トップボーダーカラー：
    • デフォルト：rgba（255,255,255,0）
    • ホバー：#ffffff
• 下の境界線：
  • 下の境界線の幅：
    • デスクトップとタブレット：0px
    • 電話番号：3px
  • 下の境界線の色：rgba（255,255,255,0.11）
• 左の境界線：
  • 左ボーダー幅：
    • デスクトップ：0px
    • タブレット：3px
    • 電話番号：0px
  • 左の境界線の色：rgba（255,255,255,0.11）

列2の設定

間隔

2列目の設定に移ります。 間隔設定にいくつかのパディング値を追加します。

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

国境

そして、次のレスポンシブボーダーを含めます。

• トップボーダー：
  • 上枠幅：5px
  • トップボーダーカラー：
    • デフォルト：rgba（255,255,255,0）
    • ホバー：#ffffff
• 下の境界線：
  • 下の境界線の幅：
    • デスクトップとタブレット：0px
    • 電話番号：3px
  • 下の境界線の色：rgba（255,255,255,0.11）
• 左の境界線：
  • 左ボーダー幅：
    • デスクトップ：3px
    • タブレット：3px
    • 電話番号：0px
  • 左の境界線の色：rgba（255,255,255,0.11）

列3の設定

間隔

3番目の列にもカスタムパディング値が必要です。

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

国境

次の境界線設定とともに：

• トップボーダー：
  • 上枠幅：5px
  • トップボーダーカラー：
    • デフォルト：rgba（255,255,255,0）
    • ホバー：#ffffff
• 左の境界線：
  • 左ボーダー幅：
    • デスクトップ：3px
    • タブレット：3px
    • 電話番号：0px
  • 左の境界線の色：rgba（255,255,255,0.11）

列4の設定

背景色

最後の列に移ります。 白い背景色を追加します。

• 背景色：#ffffff

間隔

いくつかのカスタムレスポンシブパディング値を適用します。

• トップパディング
  • デスクトップ：3％
  • タブレット：3％
  • 電話番号：10％
• ボトムパディング：
  • デスクトップ：3％
  • タブレット：3％
  • 電話番号：10％
• 左パディング：
  • デスクトップ：3％
  • タブレット：5％
  • 電話番号：10％
• 右パディング：
  • デスクトップ：3％
  • タブレット：5％
  • 電話番号：10％

ポジション

そして、デスクトップ上の列全体を再配置します。 これにより、列のサイズが絶対になり、行の下部に固定されます。

• ポジション：
  • デスクトップ：絶対
  • タブレットと電話：デフォルト
• 場所：右下

前の行のボタンモジュールのクローンを作成し、新しい行の列1に複製を配置します

行と列の設定が完了したら、モジュールの追加を開始します。 前の行の一部であるボタンモジュールを再利用しています。 モジュールのクローンを作成し、その複製を新しい行の最初の列に配置します。

ボタンの配置を変更する

ボタンモジュールの複製を開き、配置を変更します。

• ボタンの配置：中央

コピーとリンクの変更

次に、モジュールのコピーとリンクを変更します。

列1のボタンのクローンを作成し、列2と3に複製を2回配置します

列1のボタンモジュールの設定を変更したら、モジュール全体を2回複製し、複製を列2と3に配置できます。

コピーとリンクの変更

複製ごとにコピーとリンクを変更します。

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

H2コンテンツを追加する

行の最後の列に移動します。 そこで必要な最初のモジュールは、H2コンテンツを含むテキストモジュールです。

H2テキスト設定

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

• 見出し2フォント：Work Sans
• 見出し2のテキストの色：＃000000
• 見出し2文字の間隔：-2px

間隔

下マージンも追加します。

• 下マージン：10％

お問い合わせフォームモジュールを列4に追加

フィールドを全幅にする

次に、テキストモジュールのすぐ下に連絡フォームモジュールを追加します。 名前とメールアドレスのフィールドを個別に開き、両方で[全幅にする]オプションを有効にします。

• 全幅にする：はい

フィールド設定

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

• フィールドの背景色：#ffffff
• フィールドテキストの色：＃000000
• フィールドトップパディング：4％
• フィールドボトムパディング：4％
• フィールドフォント：Work Sans
• フィールドテキストサイズ：13px

キャプチャテキスト設定

次に、キャプチャテキストの設定にいくつかの変更を加えます。

• キャプチャフォント：Work Sans
• キャプチャテキストの色：＃000000

ボタンの設定

ボタンのスタイリングも行っています。

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

• ボタンの境界線半径：0px
• ボタンの文字間隔：-1px
• ボタンフォント：Work Sans

国境

最後になりましたが、下の境界線の幅を含めます。 それでおしまい！

• 入力下枠幅：1px
• 下の境界線の色を入力します：#dddddd

プレビュー

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

デスクトップ

モバイル

最終的な考え

この投稿では、Divi内のヒーローセクションでクリエイティブになる方法を紹介しました。 具体的には、絶対位置のボトムバーを含めて設計する方法を示しました。 ボトムバーを使用すると、圧倒されることなく、ヒーローセクション内でより多くのコンテンツを共有するのに役立ちます。 この手法を使用すると、あらゆる種類のデザインを作成し、複数のCTAを実行できます。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

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