にヒーロー セクションを作成しますか? Divi 従来のレスポンシブの代わりに流動的なのはどれですか?
のヒーローセクション サイトのWeb 流体設計の最良の候補の XNUMX つです。 さまざまなブレークポイントに適応する従来のレスポンシブ デザインとは異なり、流動的なデザインはブラウザーのビューポートにシームレスに適応し、どのデバイスでもデザインの一貫性を保ちます。 結局のところ、ユーザーが最初に目にするのはヒーロー セクションです。 サイトのWeb.
このチュートリアルでは、流動的なヒーロー セクション全体を作成する方法を紹介します。 Divi. この流動的なデザインを作成するための鍵は、使用する各モジュールに流動的なルート フォント サイズを追加し、長さの単位を組み込むことです。 em （誰が ルート本体のフォント サイズに対する相対的なサイズ ) モジュール設定で。
始めましょう！
概要
このチュートリアルで作成するデザインを簡単に見てみましょう。
滑らかなデザインがブラウザー ウィンドウの幅にスムーズに適応する様子に注目してください。
Divi Builder で新しいページを作成する
開始するには、次のことを行う必要があります。
WordPress ダッシュボードから、 ページ>新規追加 新しいページを作成します。
わかりやすいタイトルをつけてクリック Divi ビルダー
その後、クリック 構築を開始 (ゼロから構築)
その後、デザインを開始するための空白のキャンバスが作成されます。 Divi.
ディビで流体ヒーローセクションを設計する方法
セクション設定
まず、セクションの既存の設計設定を更新しましょう。 セクション設定を開き、以下を更新します。
- 勾配停止:
- 30%: #ff2000
- 30%: #121212
- 勾配方向: 45deg
タブの下 設計、パディングを更新します。
- パディング: 上 0px、下 0px
ラインを作成する
次に、セクションに XNUMX 列の行を追加します。
ライン設定
回線設定を開き、タブの下で次を更新します 設計 :
- ガター幅: 1
- 幅: 100%
- 最大幅: 1px
- 最小高さ: 100 vh (デスクトップ)、なし (タブレットとスマートフォン)
- パディング: 0px(上下)
ボーダー付きのフロー ヘッダー テキストを作成する
セクションと行が完成したので、フロー ヘッダー テキストを Hero セクションに追加できます。 また、クリエイティブなデザイン要素のテキスト モジュールに滑らかな境界線を追加します。
テキストモジュールを追加する
タイトル テキストと境界線を作成するには、新しい Text モジュールを列に追加します。
テキスト設定
タブの下 コンテンツ、更新してください コンテンツ 本文を次の HTML コードで置き換えます。
<h1>Fluid Fullscreen Page Design<spanstyle="color: #ff2000;">.</span></h1>
デザイン要素を滑らかにするには、まず CSS の Clamp() 関数を使用してモジュールに流動的なルート フォント サイズを追加する必要があります。
タブの下 高機能に、次の CSS スニペットを貼り付けます。
font-size: clamp(32px, 4.1vw, 70px);
タブの下 設計で、次のヘッダー テキストのデザイン設定を更新します。
- 見出しテキスト:
- タイプ: H1
- フォント: モントセラト
- フォントの重さ: 重い
- 色: #ffffff
- サイズ: 1em
- 文字間隔: 0,1em
- 行の高さ: 1,2 em
mod パディングも次のように更新します。
- パディング: 1st (上、下、左、右)
滑らかな境界線のデザインを作成するには、次を更新します。
- ボーダーの幅: 1em
- ボーダーカラー：#ffffff
- 下枠の色：クリア
- 左枠の色：クリア
アクセントボーダーの作成
アクセント ボーダーを作成するには、既存の Text モジュールを複製します。
消して コンテンツ 既存のボディの設計パラメータを次のように更新します。
- 最大幅: 6,5cm
- 高さ: 3,25 エム
- ボーダー幅: 0,5em
- ボーダーカラー: #ff2000
アクセントの境界線を配置するには、見出しテキスト (1em) モジュールの境界線の幅に等しいオフセットで絶対位置を追加します。
タブの下 高機能で、次の位置オプションを更新します。
- ポジション: アブソリュート
- 場所：右上
- 垂直オフセット: 1em
- 水平オフセット: 1em
字幕テキストを作成する
タイトル テキストの下に、フロー サブタイトル テキストを追加します。 このテキストは小さいので、小さな Fluid root フォント サイズを追加します。
新しいテキスト モジュールを追加する
キャプション テキストを作成するには、既存のヘッダー テキスト モジュールの下に新しいテキスト モジュールを追加します。
次のように、いくつかのフィラー テキスト文を追加できます。
- 内容: Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fluid root のフォントサイズを追加
次に、小さなテキストに適した新しい滑らかなフォント サイズを追加する必要があります。 [Advanced] タブで、次の CSS スニペットをメイン要素の下に貼り付けます。
font-size: clamp(14px, 1.4vw, 24px);
テキストのデザイン設定
タブの下 設計、次を更新します。
- テキスト：
- フォントの太さ: セミボールド
- 色: #ffffff
- サイズ: 1em
- 高さ: 1,6 エム
次に、サイズと間隔を次のように更新します。
- 最大幅: 19cm
- 余白: 2 em (下)、auto (左)、5 em (右)
流体ボタンを作成する
Fluid ボタンを作成するには、Subtitle Text モジュールの下に新しい Button モジュールを追加します。
次に、ボタンのテキストを更新して、「7 日間の無料トライアル」に変更します。
Fluid root のフォントサイズを追加
次に、ボタンに適した新しい流体フォント サイズを追加する必要があります。
タブの下 高機能で、メイン要素の下に次の CSS スニペットを貼り付けます。
font-size: clamp(20px, 2.35vw, 40px);
ボタンのデザイン設定
タブの下 設計、次を更新します。
- ボタンの配置: 右
- ボタンにカスタムサイズを使用: はい
- ボタンのテキストの色: #ff2000
- 勾配停止:
- カラー 1 25%: クリア
- カラー 2 25%: #ffffff
- グラデーションの方向: 45 度
- ボタン：
- 境界線の幅: 0 ピクセル
- 境界半径: 0 ピクセル
- フォント: モントセラト
- フォントの太さ: 太い
- スタイル: 斜体
- ボタンアイコンを表示：はい
- アイコン: 右向きの三角形の矢印 (スクリーンショットを参照)
- アイコンの配置: 右
- 余白: 8em (右)
- パディング: 0,2em (上下)、1,5em (左)、1em (右)
ヒーロー セクションの画像を作成する
すべての コンテンツ ヒーロー セクションをページの正しいサイズに調整したら、左側にヒーロー セクションの画像を追加する準備が整いました。 これを行うには、まずボタンの下に画像モジュールを追加します。
画像設定を開き、画像をアップロードします。
画像デザイン設定
タブの下 設計で、次の設定を更新します。
- 画像の配置: 左 (デスクトップおよびタブレット)、中央 (スマートフォン)
- 最大幅: 48% (デスクトップおよびタブレット)、70% (スマートフォン)
- パディング: 4% (左)
最後に、次のように vmin の長さ単位を使用して、オフセットを使用して画像に絶対位置を指定します。
- 位置: 絶対 (デスクトップとタブレット)、相対 (電話)
- 場所: 左上 (デスクトップおよびタブレット)
- 垂直オフセット: 30vmin (デスクトップおよびタブレット)、0px (電話)
最終結果
これがライブページの最終結果です。
これにより、滑らかなデザインがブラウザ ウィンドウの幅にスムーズに適応します。
今すぐDIVIをダウンロードしてください!!!
まとめ
流動的なデザインをヒーロー セクションに追加することは、特定の場所でデザインを更新したり、メディア クエリを使用したりすることなく、すべてのブラウザー サイズでフォールドの上部が美しく一貫していることを保証する便利な方法です。
このテクニックが、将来のプロジェクトに役立つ別の設計スキルを追加することを願っています。
また、このチュートリアルが次の Divi プロジェクトの参考になることを願っています。 ご不明な点やご提案がございましたら、 コメントセクション それを議論する。
相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合。
また、私たちのガイドを参照することを躊躇しないでください WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
