Diviのスティッキーオプションを使用してスクロールでインタラクティブリストを作成する方法
公開: 2021-02-21Diviのスティッキーオプションを使用すると、作成およびデザインするページに簡単にインタラクションを追加できます。 静的リストを作成せずに複数のアイテムに言及する方法を探している場合は、このチュートリアルをお楽しみください。 今日は、Diviのスティッキーオプションを使用してスクロールでインタラクティブリストを作成する方法を紹介します。 セクションを下にスクロールすると、左側のリストにさまざまなアイテムが追加されます。 これは、概要を維持するのに役立ちます。 無料のJSONファイルもダウンロードできます！
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
レイアウトを無料でダウンロード
無料のレイアウトを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
要素構造を作成する
新しいセクションを追加
背景色
作業中のページに新しいセクションを追加することから始めます。 セクションに背景色を追加します。
- 背景色：＃f2f2f2
行を追加する
カラム構造
次の列構造を使用して、新しい行を追加して続行します。
サイジング
モジュールをまだ追加せずに、行設定を開き、次のようにサイズ設定を変更します。
- 幅：100％
- 最大幅：100％
列1の背景色
次に、列1の設定を開き、背景色を追加します。
- 背景色：＃f2f2f2
列1の間隔
次に、列の間隔設定を変更します。
- トップパディング：
- タブレット：20px
- 電話番号：20px
- ボトムパディング：
- タブレット：20px
- 電話番号：20px
- 左パディング：3％
- 右パディング：3％
列1Zインデックス
そして、[詳細設定]タブで列のzインデックスを増やします。
- Zインデックス：12
テキストモジュール＃1を列1に追加します
コンテンツを追加する
1列目の最初のテキストモジュールから始めて、モジュールを追加します。選択したコンテンツをいくつか追加します。
テキスト設定
モジュールの[デザイン]タブに移動し、次のようにテキスト設定を変更します。
- テキストフォント：プレイフェアディスプレイ
- テキストフォントの太さ：太字
- テキストフォントスタイル：斜体
- テキストの色：#bfbfbf
- 文字サイズ：
- デスクトップ：2vw
- タブレット：5vw
- 電話：8vw
- テキスト行の高さ：1em
テキストモジュール＃2を列2に追加します
H3コンテンツを追加する
選択したH3コンテンツを含む別のテキストモジュールを列に追加します。
H3テキスト設定
モジュールの[デザイン]タブに移動し、H3テキスト設定を次のように変更します。
- 見出し3フォント：プレイフェアディスプレイ
- 見出し3フォントの太さ：太字
- 見出し3テキストの色：＃000000
- 見出し3テキストサイズ：
- デスクトップ：3vw
- タブレット：10vw
- 電話番号：12vw
間隔
次に、カスタムの上下マージンを追加します。
- トップマージン：2vh
- 下マージン：2vh
変換スケール
次に、いくつかのカスタム変換スケール設定を適用します。
- 両方：300％
変換翻訳
そして、次の変換変換設定を適用して、モジュール設定を完了します。
- 下：30％
Dividerモジュールを列1に追加します
可視性
列1に必要な最後のモジュールは、ディバイダーモジュールです。 「ディバイダーを表示」オプションが有効になっていることを確認します。
- 仕切りを表示：はい
ライン
モジュールの[デザイン]タブに移動し、それに応じてライン設定を変更します。
- 線の色：＃000000
- 線のスタイル：実線
- ライン位置：上
サイジング
モジュールのサイズ設定も変更します。
- 仕切りの重量：4px
- 仕切りの高さ：4px
列2に画像モジュールを追加します
画像ボックスを空のままにします
列2で、最初に追加するモジュールは画像モジュールです。 画像ボックスは空のままにします。
背景画像
代わりに背景画像を使用してください。
- 背景画像サイズ：カバー
- 背景画像の位置：中央
間隔
また、背景画像を表示できるように、間隔の設定を次のように変更します。
- トップマージン：
- デスクトップ：15vh
- タブレットと電話：0vh
- トップパディング：33vh
- ボトムパディング：33vh
列2にテキストモジュールを追加します
コンテンツを追加する
次に必要な最後のモジュールは、画像モジュールの下にあるテキストモジュールです。 選択した説明コンテンツを追加します。
テキスト設定
モジュールの[デザイン]タブに移動し、次のようにテキスト設定を変更します。
- テキストフォント：キャビン
- テキストの色：＃000000
- 文字サイズ：
- デスクトップ：1.2vw
- タブレット：2.3vw
- 電話：3.4vw
- テキスト行の高さ：1.6em
間隔
モジュールの間隔設定を適宜変更して、モジュール設定を完了します。
- 左パディング：
- タブレットと電話：5％
- 右パディング：5％
スティッキーエフェクトを適用する
列＃1をスティッキーに変える
すべての要素が配置されたので、スティッキー設定の適用を開始できます。 列1の設定を開き、[詳細設定]タブで次のレスポンシブスティッキー設定を使用します。
- スティッキーポジション：トップに固執
- スティッキーボトムリミット
- デスクトップ：セクション
- タブレットと電話：列
- 周囲のスティッキー要素からのオフセット：
- デスクトップ：はい
- タブレットと電話：いいえ
- トランジションのデフォルトスタイルとスティッキースタイル：はい
列＃1のテキストモジュール＃1：スティッキー設定
身長
列1がスティッキーになっているので、この列内の要素にいくつかのスティッキー設定を適用し始めることができます。 最初のテキストモジュールの高さから始めます。
- 高さ：0px
- 粘着性の高さ：自動
不透明度
不透明度も変更しています。
- 不透明度：0％
- 粘着性の不透明度：100％
列＃1のテキストモジュール＃2：スティッキー設定
変換スケール
次に、列1の2番目のテキストモジュールを開きます。スティッキー状態で変換スケール値を「100％」に戻します。
- スティッキー両方：100％
変換翻訳
スティッキー変換の変換設定も変更します。
- スティッキーボトム：0％
遷移
そして、[詳細設定]タブで遷移期間を長くして、モジュール設定を完了します。
- 遷移：1000ms
仕切りモジュール：スティッキー設定
最大幅
最後になりましたが、ディバイダーモジュールの最大幅も変更します。
- 最大幅：0px
- スティッキー最大幅：120px
行を2回クローンする
最初の行が完成したら、2回クローンを作成できます。
すべてのコンテンツと画像を変更する
すべてのコンテンツと画像を変更すれば完了です。
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、Diviのスティッキーオプションを使ってクリエイティブになる方法を紹介しました。 具体的には、スクロールでインタラクティブリストを作成する方法を示しました。 人々がセクションデザインを下にスクロールしていると、リストのさまざまなアイテムが左側に収集されます。 これにより、構造化された概要が得られ、インタラクティブなデザインを作成するのに役立ちます。 このアプローチは、ページで共有したいあらゆるタイプのリストに使用できます。 JSONファイルも無料でダウンロードできました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。