ヒーローセクションは、訪問者の注意を引くための優れたツールであると常に考えられています。 また、それは彼らの心の中で無意識のうちにウェブサイトのトーンを設定しました。 したがって、創造的なヒーローセクションを持つことはビジネスにとって祝福です。 Diviは素晴らしいWordPressテーマとページビルダーであり、あなたのウェブサイトのヒーローセクションを美しくする多くの機会を提供します。 以前はスクロールでスティッキーなヒーローセクションをデザインする方法を見てきましたが、今日はスクロールで明らかになる秘密の画像グリッドがあるヒーローセクションをデザインする方法を見ていきます。 エキサイティングですね。

チュートリアルに飛び込みましょう。
スニークピーク
これが今日作成するデザインであり、これは完全にレスポンシブになります。
デスクトップビュー
モバイルビュー
ヒーローセクションのデザイン
WordPressダッシュボードから新しいページを開きます。 好きな名前を付けて、Diviビルダーで開きます。
素晴らしいウェブサイトを作成します
最高の無料ページビルダーElementor を使用
今すぐ始める
追加:新しいセクション
背景色
最初のセクションに背景色を追加します。 セクションの設定を開き、背景色を追加します。
- 背景色:#111111

間隔
次に、セクションの[デザイン]タブに移動し、下部のパディングを調整します。これにより、より良いスクロールエクスペリエンスを実現するためのスペースが増えます。
- ボトムパディング:120vh

追加:行1
カラム構造
次に、準備したセクションに新しい行を追加します。 示されている列構造に従います。

サイジング
モジュールを追加する前に、行設定を開き、[デザイン]タブから次の値を変更します。
- カスタムガター幅を使用:はい
- 側溝幅:2
- 幅:100%
- 最大幅:2580px

間隔
次に、上部にマージンを追加します。
- トップマージン:デスクトップ:10vh、タブレットと電話:5vh

Zインデックス
設計シーケンスを維持するには、この行を2番目の行の下に保持する必要があります。 そのため、いくつかのZインデックス値を追加します。
- Zインデックス:10

すべての列設定
行1の設定が完了したら、各列の設定を開き、以下で説明する変更を加えます。

主な要素CSS
このCSSコードは、モバイルデバイス専用です。 必ず各列に個別に追加してください。
width: 50% !important;
margin: 0 !important;

列2の設定
Zインデックス
次に、列2の設定を開き、Zインデックス値を追加します。 これにより、列が次の列に移動します。
- Zインデックス:12

追加:列1への画像モジュール
画像をアップロード
次に、画像モジュールを列1に追加し、選択した画像をアップロードします。

間隔
モジュールの[デザイン]タブから、間隔の設定を変更します。
- 下マージン:タブレットと電話:10px
- 右マージン:タブレットと電話:2%

画像モジュールのクローンを作成し、残りの列を埋めます
モジュールの設定が完了したので、モジュール全体を3回複製して、残りの列に配置します。

次に、残りの列の画像を変更します。

画像2と4の間隔設定を変更する
次に、2列目と4列目の画像モジュールの設定を開き、次の間隔値を適用します。
- 下マージン:タブレットと電話:10px
- 左マージン:タブレットと電話:2%
- 右マージン:/

追加:行2
カラム構造
次に、メインセクションに新しい行を追加します。

グラデーションの背景
次に、この新しく作成された行にグラデーションの背景を適用します。 だから、設定を開いて背景を適用します
- 色1:#111111
- 色2:rgba(255,255,255,0)

サイジング
次に、サイズ設定を変更します。
- 幅:100%
- 最大幅:2580px

間隔
次に、上部と下部にパディングを追加します。
- トップパディング:20vh
- ボトムパディング:20vh

ポジション
ここで、最初の行の上に2番目の行を配置するため、それに応じて位置設定を設定する必要があります。
- 位置:絶対
- 場所:トップセンター
- Zインデックス:12

追加:列へのテキストモジュール
H1コンテンツを追加する
次に、テキストモジュールと選択したコンテンツを列に追加します。

H1テキスト設定
モジュールの[デザイン]タブに移動し、それに応じてH1テキスト設定を変更します。
- 見出しフォント:Kumbh Sans
- 見出しフォントの太さ:太字
- 見出しフォントスタイル:大文字
- 見出しテキストの配置:中央
- 見出しのテキストの色:#ffdbaa
- 見出しのテキストサイズ:デスクトップ:120ピクセル、タブレット:60ピクセル、電話:40ピクセル
- 見出し文字の間隔:デスクトップ:-3px、タブレットと電話:0px
- 見出しテキストの影:選択:3番目のオプションと見出しテキストの影の色:rgba(0,0,0,0.4)

サイジング
次に、サイズ設定からモジュールの配置と最大幅を調整します。
- 最大幅:1070px
- モジュールの配置:中央

追加:; ボタンモジュール
コピーを追加
この行に追加する最後のモジュールは、uttonモジュールです。 必要に応じて何かを書いてください。

ボタンの配置
[デザイン]タブから、ボタンの配置を変更します。
- ボタンの配置:中央

ボタンの設定
次に、ボタンのスタイルを設定します。
- ボタンにカスタムスタイルを使用する:はい
- ボタンのテキストサイズ:デスクトップ:20ピクセル、タブレット:16ピクセル、電話:14ピクセル
- ボタンのテキストサイズ:#111111
- ボタンの背景色:#ffffff
- ボタンの境界線の幅:0px
- ボタンの境界線半径:100px
- ボタンフォント:Kumbh Sans
- ボタンのフォントの太さ:太字

間隔
間隔設定からパディング値を追加します。
- トップパディング:デスクトップとタブレット:20ピクセル、電話:15ピクセル。
- 下部のパディング:デスクトップとタブレット:20ピクセル、電話:15ピクセル。
- 左パディング:デスクトップとタブレット:50ピクセル、電話:40ピクセル。
- 右パディング:デスクトップとタブレット:50ピクセル、電話:40ピクセル。

ヒーローセクションのスティッキー設定
行1のスティッキー設定
これで設計が完了し、スティッキー設定に焦点を当てる時が来ました。 次のスティッキー設定が最初の行に適用されるので、最初の行の設定を開きます。
- スティッキーポジション:トップに固執
- スティッキーボトムリミット:セクション
- 周囲の粘着要素からのオフセット:はい
- トランジションのデフォルトスタイルとスティッキースタイル:はい

粘着性のある不透明度
次に、フィルター設定で不透明度を変更します。
- デフォルト:20%
- 粘着性:100%

イメージモジュール1つのスティッキー設定
間隔
画像モジュールの設定から、[デザイン]タブに移動し、粘着性のある間隔を追加します。
- スティッキートップマージン:-20%
- スティッキー右マージン:-20%

遷移
移行期間も長くします。
- 移行時間:700ms

画像モジュール2つのスティッキー設定
間隔
イメージモジュール2の設定から、間隔も調整します。
- スティッキートップマージン:20%
- スティッキー左マージン:-30%

遷移
ここでも遷移時間を増やします。
- 移行時間:1000ms

画像モジュール3つのスティッキー間隔
間隔
ここで、3番目の画像モジュールには、次のスティッキー間隔の値を使用します。
- スティッキートップマージン:-10%
- スティッキー左マージン:-25%
- スティッキー右マージン:-25%

遷移
それに応じて遷移期間を調整します。
- 移行時間:700ms

画像モジュール4つのスティッキー間隔
間隔
最後のイメージモジュールを開き、変更を加えます。
- スティッキートップマージン:-20%
- スティッキー左マージン:-30%


遷移
4番目のイメージモジュールのトランジション期間を長くして、今日の仕事を終えましょう。
- 移行時間:1000ms

これで完了です。 ページを保存して終了し、今日の設計結果を確認してください。
最終的な外観
これが今日のデザインです。 スクロールすると2行目のグラデーションの背景が上に移動し、値を設定すると1行目の画像がポップアップ表示されます。 このように、それはよりインタラクティブに見えます。
デスクトップビュー
モバイルビュー
結論
今日のチュートリアルでは、 Diviのスティッキーオプションを使用して、Webサイトのヒーローセクションでいかに創造的に革新できるかを示しました。 チュートリアルがお役に立てば幸いです。 投稿を共有して、他の人もその恩恵を受けることができます。 この投稿を読んでいただきありがとうございます。