ディビのスティッキーオプションを使用して、ヒーローの基になる画像グリッドを明らかにする方法

訪問者の注意を引くヒーローセクションを作成すると、Webサイトの残りの部分のトーンを設定できます。 Diviのスティッキーオプションを使用してそこにたどり着くための創造的な方法を探しているなら、このチュートリアルを気に入るはずです。 今日は、Diviのスティッキーオプションを使用して、ヒーローの基になる画像グリッドを表示する方法を紹介します。 デフォルトからスティッキーへの非常にスムーズな移行が含まれており、JSONファイルも無料でダウンロードできます！

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

プレビュー

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

デスクトップ

モバイル

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

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

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

無料でダウンロード

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

ダウンロード

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

1.ヒーローデザインを作成する

新しいセクションを追加

背景色

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

• 背景色：＃111111

間隔

セクションの[デザイン]タブに移動し、下部にパディングを追加します。 この下部のパディングにより、スクロールエクスペリエンスを作成するのに十分なスペースが得られます。

• ボトムパディング：120vh

行＃1を追加

カラム構造

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

サイジング

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

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

間隔

次に、レスポンシブトップマージンを追加します。

• トップマージン：
  • デスクトップ：10vh
  • タブレットと電話：5vh

Zインデックス

また、この行がこのセクションに追加する2番目の行の下にあることを確認するために、後で[詳細設定]タブでazインデックス10を使用します。

• Zインデックス：10

すべての列設定

一般的な行の設定が完了したら、各列を個別に開きます。

主な要素CSS

各列で、CSSコードの次の行を電話のメイン要素に適用します。

電話のみ：

width: 50% !important;
margin: 0 !important;

列2の設定

次に、列2の設定を開きます。

Zインデックス

そして、Zインデックスを12に増やします。これにより、この列が3番目の列の上に配置されます。

• Zインデックス：12

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

画像をアップロード

列1の画像モジュールから始めて、モジュールを追加します。選択した画像をアップロードします。

間隔

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

• 下マージン：
  • タブレットと電話：10px
• 右マージン：
  • タブレットと電話：2％

イメージモジュールを3回クローンし、残りの列に複製を配置します

モジュールの設定が完了したら、モジュール全体を3回複製し、行の残りの列に複製を配置できます。

画像を変更する

重複する各モジュールのイメージを必ず変更してください。

イメージモジュール＃2と＃4の間隔を変更する

次に、2列目と4列目の画像モジュールの設定を開き、次の間隔値を適用します。

• 下マージン：
  • タブレットと電話：10px
• 左マージン：
  • タブレットと電話：2％
• 右マージン：/

行＃2を追加

カラム構造

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

グラデーションの背景

行設定を開き、次のグラデーションの背景を適用します。

• 色1：＃111111
• 色2：rgba（255,255,255,0）

サイジング

次に、サイズ設定を変更します。

• 幅：100％
• 最大幅：2580px

間隔

次に、上下のパディングを適用します。

• トップパディング：20vh
• ボトムパディング：20vh

ポジション

この行を画像グリッドの上に配置するには、それに応じて位置設定を使用します。

• 位置：絶対
• 場所：トップセンター
• Zインデックス：12

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

H1コンテンツを追加する

選択したH1コンテンツを使用して、この行に最初のテキストモジュールを追加します。

H1テキスト設定

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

• 見出しフォント：Kumbh Sans
• 見出しフォントの太さ：太字
• 見出しフォントスタイル：大文字
• 見出しテキストの配置：中央
• 見出しのテキストの色：#ffdbaa
• 見出しのテキストサイズ：
  • デスクトップ：120px
  • タブレット：60px
  • 電話番号：40px
• 見出し文字の間隔
  • デスクトップ：-3px
  • タブレットと電話：0px
• 見出しテキストの影：
  • 選択：3番目のオプション
  • 見出しテキストの影の色：rgba（0,0,0,0.4）

サイジング

次に、サイズ設定を変更します。

• 最大幅：900px
• モジュールの配置：中央

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

コピーを追加

この行で必要な次の最後のモジュールはボタンモジュールです。 選択したコピーをいくつか追加します。

ボタンの配置

デザインタブに移動し、ボタンの配置を変更します。

• ボタンの配置：中央

ボタンの設定

次に、ボタンのスタイルを設定します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：
  • デスクトップ：20px
  • タブレット：16px
  • 電話番号：14px
• ボタンのテキストサイズ：＃111111
• ボタンの背景色：#ffffff
• ボタンの境界線の幅：0px
• ボタンの境界線半径：100px

• ボタンフォント：Kumbh Sans
• ボタンのフォントの太さ：太字

間隔

また、間隔設定でいくつかのレスポンシブパディング値を使用します。

• トップパディング：
  • デスクトップとタブレット：20px
  • 電話番号：15px
• ボトムパディング：
  • デスクトップとタブレット：20px
  • 電話番号：15px
• 左パディング：
  • デスクトップとタブレット：50px
  • 電話番号：40px
• 右パディング：
  • デスクトップとタブレット：50px
  • 電話番号：40px

2.スティッキー設定を適用します

行＃1をスティッキーに変える

すべての要素が整ったので、スティッキー設定に集中できます。 最初の行の設定を開き、次のスティッキー設定を適用します。

• スティッキーポジション：トップに固執
• スティッキーボトムリミット：セクション
• 周囲の粘着要素からのオフセット：はい
• トランジションのデフォルトスタイルとスティッキースタイル：はい

粘着性のある不透明度

次に、フィルター設定で不透明度を変更します。

• デフォルト：20％
• 粘着性：100％

画像モジュール＃1スティッキー設定

間隔

次に、列1の画像モジュールの設定を開きます。[デザイン]タブに移動し、粘着性のある上下の余白を追加します。

• スティッキートップマージン：-20％
• スティッキー右マージン：-20％

遷移

移行期間も長くします。

• 移行時間：700ms

画像モジュール＃2スティッキー間隔

間隔

列2の画像モジュールに移動し、次のスティッキー間隔設定を使用します。

• スティッキートップマージン：20％
• スティッキー左マージン：-30％

遷移

ここでも遷移時間を増やします。

• 移行時間：1000ms

画像モジュール＃3スティッキー間隔

間隔

次に、列3に画像モジュールがあります。次のスティッキー間隔の値を使用します。

• スティッキートップマージン：-10％
• スティッキー左マージン：-25％
• スティッキー右マージン：-25％

遷移

それに応じて移行期間を変更します。

• 移行時間：700ms

画像モジュール＃4スティッキースペーシング

間隔

最後に、列4の画像モジュールを開きます。次のスティッキー間隔の値を適用します。

• スティッキートップマージン：-20％
• スティッキー左マージン：-30％

遷移

移行期間を長くして、モジュール設定とこのチュートリアルを完了します。 それでおしまい！ ページを保存して終了し、結果を確認します。

• 移行時間：1000ms

プレビュー

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

デスクトップ

モバイル

最終的な考え

この投稿では、Diviのヒーローセクションでクリエイティブになる方法を紹介しました。 具体的には、Diviのスティッキーセクションを使用して、スクロールで画像グリッドを表示する方法を示しました。 JSONファイルも無料でダウンロードできました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

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