Diviのスティッキーオプションを使用してスクロールに行をスタックする方法

Diviのスティッキーオプションが登場して以来、Webサイトのビルド全体、特にヘッダー内でさまざまな機能を使用する方法を紹介してきました。 しかし、スティッキーオプションを使用して、Webサイトでのユーザーエクスペリエンスを向上させ、Webサイトを輝かせる方法はたくさんあります。 たとえば、今日のチュートリアルでは、Diviのスティッキーオプションを使用してスクロールで行をスタックする方法を示します。 行がビューポートの上部に触れるとすぐに、次の行の下に移動し始めます。これにより、美しく見えるスタッキング効果が得られます。 デザインを最初から再作成し、セクションのJSONファイルを無料でダウンロードすることもできます。

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

プレビュー

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

デスクトップ

モバイル

行スタッキングレイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

1.最初の行のコンセプトを作成する

新しいセクションを追加

間隔

このチュートリアルの最初の部分では、最初の行の基礎を築き始めます。 最初の行の要素のスタイリングが完了したら、それを完全に再利用して、行の煙突効果を作成できます。 作業中のページに新しいセクションを追加します。 セクション設定を開き、さまざまな画面サイズにカスタムパディング値を適用します。

• トップパディング：
  • デスクトップ：100px
  • タブレット：40px
  • 電話番号：25px
• ボトムパディング：
  • デスクトップ：100px
  • タブレット：40px
  • 電話番号：25px

新しい行を追加

カラム構造

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

サイジング

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

• カスタムガター幅を使用：はい
• 側溝幅：1
• 列の高さを等しくする：はい
• 幅：90％
• 最大幅：2580px

間隔

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

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

列1の設定

背景色

次に、列1の設定を開き、選択した背景色を適用します。

• 背景色：＃2b343b

背景画像

背景画像も使用します。 このチュートリアル全体で表示されているものを使用する場合は、チュートリアルの最初にzipフォルダーをダウンロードし、背景画像をメディアライブラリにアップロードします。

• 背景画像サイズ：フィット

間隔

列の[デザイン]タブに移動し、次にさまざまな画面サイズに次のパディング値を適用します。

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

列2の設定

背景色

次に、2番目の列を開き、そこでも背景色を使用します。

• 背景色：＃394751

間隔

いくつかのカスタムパディング値とともに。

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

ボックスシャドウ

そしてボックスシャドウ。

• ボックスシャドウの垂直位置：20px
• ボックスシャドウブラー強度：50px
• 影の色：rgba（0,0,0,0.14）

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

H2コンテンツを追加する

1列目のテキストモジュールから始めて、モジュールを追加します。選択したH2コンテンツをコンテンツボックス内に配置します。

H2テキスト設定

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

• 見出し2フォント：Alata
• 見出し2フォントの太さ：太字
• 見出し2テキストの配置：中央
• 見出し2のテキストの色：#ffffff
• 見出し2テキストサイズ：
  • デスクトップ：200px
  • タブレット：150px
  • 電話番号：100px
• 見出し2文字の間隔：-1px

ポジション

[詳細設定]タブでもモジュールを再配置します。

• 位置：絶対
• 場所：左上
• 垂直オフセット：2％
• 水平オフセット：2％

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

コピーを追加

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

ボタンの設定

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

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：20px
• ボタンのテキストの色：#ffffff
• ボタンの背景色：＃83a5bf
• ボタンの境界線の幅：0px
• ボタンの境界線半径：1px
• ボタンフォント：Alata

間隔

次に、いくつかのカスタムパディング値を追加します。

• トップパディング：20px
• ボトムパディング：20px
• 左パディング：50px
• 右パディング：50px

ポジション

そして、[詳細設定]タブでモジュールを再配置します。

• 位置：絶対
• 場所：右下

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

H3コンテンツを追加する

2番目の列に進みます。 選択したH3コンテンツを含む最初のテキストモジュールを追加します。

H3テキスト設定

モジュールの[デザイン]タブに移動し、次のH3テキストスタイルを適用します。

• 見出し3フォント：Alata
• 見出し3フォントの太さ：太字
• 見出し3のテキストの色：#ffffff
• 見出し3テキストサイズ：40px

Dividerモジュールを列2に追加します

可視性

最初のテキストモジュールの下に、ディバイダーモジュールを追加します。 「ディバイダーを表示」オプションが有効になっていることを確認します。

• 仕切りを表示：はい

回線設定

モジュールのデザインタブに移動し、線の色を変更します。

• 線の色：＃f3f0ee

サイジング

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

• 仕切りの重量：5px
• 幅：19％
• 高さ：5px

間隔

そして、間隔設定に下マージンを追加して、モジュール設定を完了します。

• 下マージン：20％

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

コンテンツを追加する

Dividerモジュールのすぐ下に別のテキストモジュールを追加します。 お好みの説明内容を入力してください。

テキスト設定

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

• テキストフォント：Montserrat
• テキストの色：#ffffff
• 文字サイズ：
  • デスクトップ：15px
  • タブレットと電話：14px
• テキスト行の高さ：2em

2.行をスタッキング要素に変換します

行設定

Zインデックス

最初の行が配置されたので、スティッキー行のスタッキング設定を適用します。 スタック効果が自動的に行われるように、再利用のために行のクローンを作成する前に、これらの設定を適用します。 行設定を開き、[詳細設定]タブに移動して、azインデックス1を適用します。このzインデックスは、次の各行が前の行の上に配置されるようにするのに役立ちます。

• Zインデックス：1

スティッキー設定

次に、スクロール効果の設定に移動し、次のスティッキー設定を適用します。

• スティッキーポジション：
  • デスクトップ：トップに固執
  • タブレットと電話：固執しないでください
• スティッキーボトムリミット：セクション
• 周囲の粘着要素からのオフセット：いいえ

3.同じセクションでスタッキング行を再利用する

クローン行x3

スティッキーオプションが適用されたので、行全体を何度でも再利用できます。

一般的な変更

すべてのコピーを変更

複製ごとに必ずコピーを変更してください

列1の背景色と画像を変更する

列1の背景色と画像とともに。

• 複製1：＃edc1b6
• 複製2：＃efe7e2
• 複製3：＃f7f6f4

列2の背景色を変更する

重複する各行の2番目の列にも異なる色を使用しています。

• 複製1：＃ffd1c1
• 複製2：＃fff8f2
• 複製3：＃fffaf7

ボタンの背景色を変更する

次に、重複する各行のボタンの背景色を変更します。

• 複製1：＃c18a7a
• 複製2：＃bab5b2
• 複製3：＃c98f7d

背景色が明るい行への変更

テキストの色を変更する

最後になりましたが、行の各テキストモジュールのテキストの色を明るい背景色に変更します。 それでおしまい！

• テキストの色：＃2b343b

プレビュー

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

デスクトップ

モバイル

最終的な考え

この投稿では、ページデザイン内のDiviのスティッキーオプションを使用してクリエイティブにする方法を紹介しました。 具体的には、行を積み重ねて魅力的なデザインとユーザーエクスペリエンスを作成する方法を示しました。 美しいデザイン例をゼロから再作成しました。JSONファイルも無料でダウンロードできました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

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