ディビで流動的なヒーローセクションを設計する方法

ウェブサイトのヒーローセクションは、流動的なデザインの最良の候補の1つです。 さまざまなブレークポイントで調整される従来のレスポンシブデザインとは異なり、流動的なデザインはブラウザのビューポートとシームレスにスケーリングし、どのデバイスでもデザインの一貫性を保ちます。 結局のところ、ヒーローセクションは、ユーザーがWebサイトで最初に目にするものです。

流体タイポグラフィ、流体モジュール、および/または流体ボタンに関する以前のチュートリアルで実証された流体設計を見たことがあるかもしれません。 このチュートリアルでは、Diviで流動的なヒーローセクション全体を作成する方法を紹介します。 この流動的なデザインを作成するための鍵は、使用する各モジュールに流動的なルートフォントサイズを追加し、モジュールの設定全体にem長さの単位（ルートボディのフォントサイズを基準とする）を組み込むことです。

始めましょう！

スニークピーク

これは、このチュートリアルで構築するデザインの概要です。

流動的なデザインがブラウザのビューポートの幅に合わせてスムーズに拡大縮小することに注目してください。

レイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

セクションレイアウトをDiviライブラリにインポートするには、Diviライブラリに移動します。

[インポート]ボタンをクリックします。

移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。

次に、インポートボタンをクリックします。

完了すると、セクションレイアウトがDiviBuilderで使用できるようになります。

チュートリアルに取り掛かりましょう。

始めるために必要なもの

開始するには、次のことを行う必要があります。

1. まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
2. WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
3. 「最初から構築」オプションを選択します。

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

ディビで流動的なヒーローセクションを設計する方法

流動的なヒーローセクションを構築するために、3つのモジュールのそれぞれに流動的なルートフォントサイズを追加します。 これらのモジュールは、見出し、サブタイトル、およびボタンを構成します。 次に、モジュールのデザイン設定内でemの長さの単位を使用して、デザイン要素が流動的なルートフォントサイズに関連していることを確認します。 次に、絶対位置とオフセットを使用して、ページの左側に画像を配置します。 その結果、ビューポートの幅に合わせて完全にスケーリングされる流動的なヒーローセクションが作成されるため、すべてのデバイスでデザインの一貫性が保たれます。

セクション設定

まず、セクションの既存の設計設定を更新しましょう。 セクション設定を開き、以下を更新します。

• 背景グラデーションの左の色：＃ff2000
• 背景のグラデーションの正しい色：＃121212
• グラデーション方向：45度
• 開始位置：30％
• 終了位置：0％

[デザイン]タブで、パディングを更新します。

• パディング：0px上、0px下

行を作成

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

行設定

行の設定を開き、[デザイン]タブで以下を更新します。

• 側溝幅：1
• 幅：100％
• 最大幅：1700px
• 最小の高さ：100vh（デスクトップ）、なし（タブレットと電話）
• パディング：0px上、0px下

境界線のある流動的な見出しテキストを作成する

セクションと行が完成したので、流動的な見出しテキストをヒーローセクションに追加できます。 また、クリエイティブなデザイン要素のテキストモジュールに流動的な境界線を追加します。

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

見出しのテキストと境界線を作成するには、新しいテキストモジュールを列に追加します。

テキスト設定

[コンテンツ]タブで、本文のコンテンツを次のHTMLで更新します。

<h1>Fluid Fullscreen Page Design<span style="color: #ff2000;">.</span></h1>

デザイン要素を流動的にするには、最初にCSS Clamp（）関数を使用して流動的なルートフォントサイズをモジュールに追加する必要があります。 [詳細設定]タブで、次のCSSスニペットを通過します。

font-size: clamp(32px, 4.1vw, 70px);

流動的なルートフォントサイズが設定されたら、デザイン設定を更新する準備が整いました。 emの長さの単位は要素のルートフォントサイズに関連しているため、全体を通してemの長さの単位を使用することが重要です。

[デザイン]タブで、次の見出しテキストのデザイン設定を更新します。

• 見出しタイプ：H1
• 見出しフォント：Montserrat
• 見出しフォントの太さ：重い
• 見出しのテキストの色：#ffffff
• 見出しテキストサイズ：1em
• 見出し文字の間隔：0.1em
• 見出し線の高さ：1.2em

また、モジュールのパディングを次のように更新します。

• パディング：1em（上、下、左、右）

流動的な境界線のデザインを作成するには、以下を更新します。

• ボーダー幅：1em
• ボーダーカラー：#ffffff
• 下の境界線の色：透明
• 左ボーダーカラー：透明

アクセントボーダーの作成

アクセントボーダーを作成するために、既存のテキストモジュールを複製できます。

既存のボディコンテンツを取り出し、次のようにデザイン設定を更新します。

• 最大幅：6.5em
• 高さ：3.25em
• ボーダー幅：0.5em
• ボーダーカラー：＃ff2000

この重複モジュールには、同じ流動ルートフォントサイズが含まれていることを忘れないでください。 したがって、emの長さの単位を使用して、境界線のサイズと幅を調整できます。 これにより、見出しテキストモジュールのデザインに合わせてデザインが調整されます。

アクセントの境界線を配置するには、見出しテキストモジュール（1em）の境界線の幅に等しいオフセットで絶対位置を追加します。 [詳細設定]タブで、次の位置オプションを更新します。

• 位置：絶対
• 場所：右上
• 垂直オフセット：1em
• 水平オフセット：1em

流体字幕本文テキストを作成する

見出しテキストの下に、流動的な字幕本文テキストを追加します。 このテキストは小さいので、より小さな流動ルートフォントサイズを追加します。

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

字幕テキストを作成するには、既存の見出しテキストモジュールの下に新しいテキストモジュールを追加します。

次のように、フィラーテキストの数文を追加できます。

• ボディコンテンツ：Vestibulum ac diam sit amet quam vehicula elementum sed sit ametdui。 Lorem ipsum dolorは、amet、consectetur adipiscingelitに座っています。

流体ルートフォントサイズを追加

次に、小さいテキストにより適した新しい流動的なフォントサイズを追加する必要があります。 [詳細設定]タブで、次のCSSスニペットを[メイン要素]の下に貼り付けます。

font-size: clamp(14px, 1.4vw, 24px);

テキストデザイン設定

[デザイン]タブで、以下を更新します。

• テキストフォントの太さ：半太字
• テキストテキストの色：#ffffff
• テキストテキストサイズ：1em
• テキスト行の高さ：1.6em

次に、サイズと間隔を次のように更新します。

• 最大幅：19em
• マージン：下2em、左自動、右5em

流体ボタンを作成する

流動的なボタンを作成するには、字幕テキストモジュールの下に新しいボタンモジュールを追加します。

次に、ボタンのテキストを更新して「7日間の無料トライアル」を読みます。

流体ルートフォントサイズを追加

次に、ボタンに適した新しい流動的なフォントサイズを追加する必要があります。 [詳細設定]タブで、次のCSSスニペットを[メイン要素]の下に貼り付けます。

font-size: clamp(20px, 2.35vw, 40px);

ボタンのデザイン設定

[デザイン]タブで、以下を更新します。

• ボタンの配置：右

• ボタンのテキストの色：＃ff2000
• ボタンの背景グラデーション左の色：透明
• ボタンの背景のグラデーションの右の色：#ffffff
• グラデーション方向：45度
• 開始位置：25％
• 終了位置：0％
• ボタンの境界線の幅：0px
• ボタンの境界線半径：0px
• ボタンフォント：Montserrat
• ボタンのフォントの太さ：重い
• ボタンのフォントスタイル：斜体
• ボタンアイコン：直角三角形の矢印（スクリーンショットを参照）
• ボタンアイコンの配置：左

• マージン：8em右
• パディング：上0.2em、下0.2em、左1.5em、右1em

ヒーローセクションの画像を作成する

すべてのヒーローセクションのコンテンツがページの適切なサイズになっているので、左側にヒーローセクションの画像を追加する準備が整いました。 これを行うには、最初にボタンの下に画像モジュールを追加します。

画像設定を開き、画像をアップロードします。

画像デザイン設定

[デザイン]タブで、次の設定を更新します。

• 画像の配置：左（デスクトップとタブレット）、中央（電話）
• 最大幅：48％（デスクトップとタブレット）、70％（電話）
• パディング：残り4％

最後に、次のようにvminの長さの単位を使用して、オフセットを使用して画像に絶対位置を指定します。

• 位置：絶対（デスクトップとタブレット）、相対（電話）
• 場所：左上（デスクトップとタブレット）
• 垂直オフセット30vmin（デスクトップおよびタブレット）、0px（電話）

最終結果

これがライブページの最終結果です。

これは、流動的なデザインがブラウザのビューポートの幅に合わせてスムーズにスケーリングする方法です。

ブラウザのサポート

CSSのclamp（）関数（このチュートリアルで流動的なフォントサイズに使用）は、IEを除くすべての主要なブラウザーで驚くほどよくサポートされています。 ブラウザウィンドウを調整するときに動的にスケーリングされないが、ページの読み込み時に正しく表示される奇妙なサファリバグがあります。 これを修正するには、各モジュールに最小の高さを0vwにするだけです。

最終的な考え

ヒーローセクションに流動的なデザインを追加すると、特定のブレークポイントでデザインを更新したり、メディアクエリを使用したりする手間をかけずに、すべてのブラウザサイズで折り畳みの上が美しく一貫して見えるようにする便利な方法になります。

流体タイポグラフィ、流体モジュール、流体ボタンの作成方法など、流体設計に関する他の記事を確認することを忘れないでください。

コメントでお返事をお待ちしております。

乾杯！