スクロールで展開するコピーをDiviと同期する方法

特定のセクションがコピーに重点を置いている場合、コピーが見過ごされないようにすることが重要です。 コピーにスポットライトを当てるために使用できるテクニックはたくさんありますが、このチュートリアルでは、Diviの新しいスクロール効果を使用して、スクロールで展開するコピーを同期する方法を示します。 ユーザーがスクロールすると、コピーの別の部分が表示され、提供しているコンテンツを段階的に読むことができます。 JSONファイルも無料でダウンロードできます！

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

プレビュー

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

デスクトップ

モバイル

スクロールレイアウトの拡張コピーを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

1.セクションデザインを作成する

新しいセクションを追加

背景色

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

• 背景色：＃151515

間隔

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

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

行＃1を追加

カラム構造

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

サイジング

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

• カスタムガター幅を使用：はい
• 側溝幅：1
• 幅：90％
• 最大幅：1380px

間隔

次に、カスタムの上部と下部のパディングを追加します。

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

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

コンテンツを追加する

次に、選択したコンテンツを含む最初のテキストモジュールを追加します。

テキスト設定

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

• テキストフォント：Livvic
• テキストフォントの太さ：太字
• テキストの色：＃f1f1f1
• テキストサイズ：170px（デスクトップ）、100px（タブレット）、70px（電話）
• テキスト行の高さ：1em

• テキストシャドウの水平方向の長さ：0.06em
• テキストシャドウの垂直方向の長さ：0em
• テキストの影の色：rgba（79,79,79,0.74）
• テキストの配置：中央（デスクトップ）、左（タブレットと電話）

テキストモジュールを2回複製する

テキストモジュールのクローンを2回作成します。

コンテンツの変更

重複する両方のテキストモジュールのコンテンツを変更します。

行＃2を追加

カラム構造

次の列構造を使用して、前の行のすぐ下に別の行を追加します。

サイジング

行設定を開き、それに応じてサイズ設定を変更します。

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

間隔

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

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

国境

次に上枠を追加します。

• 上枠幅：1px
• 上枠の色：＃4c4c4c

列の設定

間隔

列の設定にもいくつか変更を加えています。 設定を開き、いくつかのカスタムパディング値を追加します。

• トップパディング：5vw
• ボトムパディング：10vw
• 左パディング：6vw
• 右パディング：6vw

国境

右の境界線も使用します。

• 右ボーダー幅：1px
• 右の境界線の色：＃4c4c4c

列1に宣伝文モジュールを追加する

コンテンツを追加する

選択したコンテンツを含む宣伝文モジュールを列に追加して続行します。

アイコンを選択

次に、お好みのアイコンを選択します。

アイコン設定

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

• アイコンの色：＃a3acff
• 画像/アイコンの配置：左

タイトルテキスト設定

タイトルテキストの設定も変更します。

• タイトルフォント：Livvic
• タイトルフォントの太さ：太字
• タイトルテキストの色：＃c1c1c1
• タイトルテキストサイズ：35px

• タイトルテキスト影の水平方向の長さ：0.06em
• タイトルテキスト影の垂直方向の長さ：0em
• タイトルテキストシャドウカラー：rgba（79,79,79,0.74）

本文の設定

本文の設定にも変更を加えています。

• 本文の色：＃878787
• 本文サイズ：16px
• ボディラインの高さ：2.4em

宣伝文のタイトルCSS

そして、1行のCSSコードを使用してタイトルの周囲にスペースを作成し、[詳細設定]タブの宣伝文のタイトルに追加します。

margin: 30px 0 40px 0;

列全体を2回クローンします

列全体とその中の宣伝文句を完了したら、列全体を2回複製できます。

列3の境界線を削除します

列3の設定を開き、右側の境界線を削除します。

• 右ボーダー幅：0px

コンテンツの変更

そして、複製ごとに宣伝文モジュールの内容を変更します。

2.スクロール効果を追加します

セクション

上下のスケーリング

セクションから始めて、スクロール効果を追加する時間です。 次の値でスケールアップおよびスケールダウンスクロール効果を使用します。

• スケールアップとスケールダウンを有効にする：はい
• 開始スケール：70％
• ミッドスケール：100％
• エンディングスケール：100％

テキストモジュール＃1

フェードインとフェードアウト

次に、セクションの最初の行にある最初のテキストモジュールを開き、フェードインおよびフェードアウト効果を追加します。

• フェードインとフェードアウトを有効にする：はい
• 開始時の不透明度：0％
• 中程度の不透明度：0％（55％）
• 終了不透明度：100％（71％）

上下のスケーリング

スケールアップとスケールダウンの効果も使用します。

• スケールアップとスケールダウンを有効にする：はい
• 開始スケール：0％（47％）
• ミッドスケール：100％（56％）
• 終了スケール：100％（64％）

テキストモジュール＃1のスクロール効果を拡張する

スクロール効果を列内の他の2つのテキストモジュールに拡張して続行します。

• 宛先：すべてのテキスト
• 全体：このコラム

宣伝文モジュール＃1

上下のスケーリング

次に、列1の宣伝文句モジュールに拡大縮小スクロール効果を追加します。

• スケールアップとスケールダウンを有効にする：はい
• 開始スケール：
  • デスクトップ：0％
  • タブレットと電話：100％
• ミッドスケール：100％（33％）
• 終了スケール：100％（64％）

宣伝文モジュール＃1のスクロール効果を拡張する

行内のすべての宣伝文句にスクロール効果を拡張してチュートリアルを完了すると、完了です。

• 宛先：すべての宣伝文
• 全体：この行

プレビュー

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

デスクトップ

モバイル

最終的な考え

このチュートリアルでは、Diviセクションで展開するコピーを同期するための創造的な方法を示しました。 これは、コピーを強調表示し、訪問者がセクションのさまざまな部分を段階的に読むことができるようにするための優れた方法です。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

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