Diviでインラインスクロールリビールを作成する

毎週、次のプロジェクトに使用できる新しい無料のDiviレイアウトパックを提供します。 レイアウトパックの1つとして、Webサイトを次のレベルに引き上げるのに役立つユースケースも共有しています。

今週は、進行中のDiviデザインイニシアチブの一環として、DJレイアウトパックを使用して美しいインラインスクロールリビールを作成する方法を紹介します。 これは、ページに何度も追加しなくても、Webサイト上の特定の列コンテナーに注意を引くための優れた方法です。 クールなホバー/リリース効果をテクニックに追加して、訪問者がカラムコンテナーを保持し、好きなときにドロップできるようにします。 JSONファイルも無料でダウンロードできます！

プレビュー

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

デスクトップ

モバイル

インラインスクロールがレイアウトを無料で公開するをダウンロードする

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

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

無料でダウンロード

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

ダウンロード

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

再作成を始めましょう！

DJ LayoutPackのホームページを使用して新しいページを作成する

新しいページを追加

このユースケースチュートリアルでは、DJレイアウトの1つを使用します。 新しいページを作成し、ページにタイトルを付けて、VisualBuilderに切り替えることから始めます。

DJホームページをアップロード

DJホームページのレイアウトをページにアップロードして続行します。

ページの各セクションに高いZインデックス値を追加する

ヒーローセクションに上位Zインデックスを追加

1つの特定の列を修正し、必要な場所に表示できるようにします。 逆もまた真です。 表示したくない場所には非表示にします。 そのために、ページの各セクション（列が配置されているセクション（ページのセクション＃2）を除く）に、より高いzインデックス値を指定します。 ヒーローセクションを開くことから始めて、可視性設定でzインデックスを増やします。

• Zインデックス：2

Zインデックスをコピー

zインデックスを追加したら、それをコピーできます。

セクション＃2を除くページの他のセクションに貼り付けます

そして、セクション＃2 （インラインスクロールリビールに変換する列を含むセクション）を除いて、ページの他のすべてのセクションに貼り付けます。

セクション2を変更する

列の内容を別々の行に配置する

行の列構造を変更する

行の列構造から始めて、2番目のセクションの変更を始めましょう。

行が重複しています

行のクローンを作成して続行します。

行のモジュールを削除する

最初の行のテキストモジュールとボタンモジュール、および2番目の行のオーディオモジュールを削除します。

セクション＃2の行＃1を変更します

一部のオーディオモジュールを削除します（小さい画面サイズに合わせるため）

次の手順では、オーディオモジュールを含む列を修正します。 ここで、列が小さい画面サイズのビューポートの高さに適合することを確認するために、いくつかのオーディオモジュールを削除する必要があります。

行に下マージンを追加

行設定を開き、[デザイン]タブに移動して、下部のパディングを追加して続行します。 チュートリアルの後半のスクロールで列が表示されるようにするには、このスペースが必要です。

• 下マージン：700px

列設定を開く

列をインラインスクロール表示に変換し始める時が来ました！ 列の設定を開きます。

ホバーボックスシャドウ

次に、[デザイン]タブに移動し、ホバー時にいくつかのボックスシャドウ値を変更します。

• ボックスシャドウブラー強度：150px
• 影の色：rgba（0,0,0,0.55）

ホバー変換スケール

変換スケール値を変更して、ホバー時に列のサイズも増やします。

• 下：110％
• 右：110％

デフォルトのメイン要素

列を修正するために、列のメイン要素に数行のCSSコードを追加します。

position: fixed;
bottom: 100px;
max-width: 800px !important;
width: 80% !important;

メイン要素をホバーします

ホバーのメイン要素にも固定位置のCSS行を追加してください。 これにより、カラムがちらつくのを防ぎます。

position: fixed;

デフォルトのZインデックス

これで、通常の状況では、モジュールをすべてのページコンテンツの下に表示する必要があります。 これを確実に行うために、列のzインデックスを変更します。

• Zインデックス：0

ホバーZインデックス

ただし、ホバーすると、列がすべてのページコンテンツと重なるようにします。 誰かが列を解放するとすぐに、すべてのページコンテンツの背後にある場所にフォールバックします。 それに応じてホバーのzインデックスを変更します。

• Zインデックス：10

セクション＃2の行＃2を変更します

列にトップパディングを追加

見栄えを良くするために、セクション2の2行目の列を開き、カスタムの上部パディングを追加します。

• トップパディング：80px

ページ全体のセクションにカスタム下マージンを追加

セクションを探す

セクション設定を開く

インラインスクロール表示列を変更したので、表示するためのスペースを作成する必要があります。 すでに配置されている行（700pxの下部のパディング）に対してこれを実行しましたが、ページの他の場所にも列が表示されるようにします。 次のセクションのセクション設定を開きます。

下マージンを追加

間隔の設定に移動し、下マージンを追加します。 下余白を追加すると、ページに空のスペースが作成され、低zインデックス列が表示されます。

• 下マージン：700px

セクションを探す

セクション設定を開く

次に次のセクションを開きます。

下マージンを追加

また、ここにも下マージンを追加します。

• 下マージン：700px

余分なセクションのパディングを削除する

セクション＃2の下部パディングを削除します

さて、私たちに残されている唯一のことは、私たちのデザインがインラインスクロールリビールと一致する方法を最適化することです。 ページの2番目のセクションを開き、下部のパディングを削除します。

• 下：0px

セクションを探す

セクション設定を開く

次に、次のセクション設定を開きます。

下部パディングを削除して上部パディングを追加

上部のパディングを追加し、下部のパディングを削除します。

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

セクションを探す

セクション設定を開く

最後のセクションに移ります。 セクション設定を開きます。

トップパディングを削除する

上部のパディングを削除すれば完了です。

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

プレビュー

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

デスクトップ

モバイル

最終的な考え

この投稿では、DiviとDJ LayoutPackを使用してインラインスクロールリビールを作成する方法を紹介しました。 これは、Webサイトにインタラクションを追加するための優れた方法です。 このチュートリアルが、独自の固定インラインスクロールリビールを作成するきっかけになることを願っています。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

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