Diviのスクロール効果を使用してプロセスへのステップを段階的にフラッシュする方法
公開: 2020-03-01多くの場合、企業は、プロセスのステップの役立つ図を提供することにより、訪問者にサービスについて教育します。 たとえば、WebデザインエージェンシーがWeb開発のプロセスを示したり、パン屋が完璧なカップケーキを作成するための手順を紹介したりする場合があります。
Diviを使用すると、組み込みのスクロールエフェクトを使用して、「プロセスへのステップ」をまったく異なるレベルに進めることができます。 このチュートリアルでは、ユーザーがページを下にスクロールするときに、プロセスへのステップを段階的にフラッシュする簡単な方法を示します。 これにより、意図したメッセージをクリエイティブに強調するインタラクティブなブーストがデザインに与えられます。
スニークピーク
レイアウトを無料でダウンロード
このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
レイアウトをページにインポートするには、zipファイルを抽出し、JSONファイルをDiviBuilderにドラッグするだけです。
チュートリアルに取り掛かりましょう。
始めるために必要なもの
開始するには、次のことを行う必要があります。
- まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
- WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
- 「最初から構築」オプションを選択します。
その後、Diviでデザインを開始するための空白のキャンバスが作成されます。
Diviのスクロール効果を使用してプロセスへのステップを段階的にフラッシュする方法
スクロール時にプロセスへのステップをフラッシュするレイアウトを作成するには、新しい行を追加することから始める必要があります。
4列の行の作成
まず、セクションに4列の行を追加します。
モジュール/コンテンツを列に追加する前に、行の設定を開き、以下を更新します。
- 側溝幅：2
- 最大幅：80％
これまでのところ十分に単純です。 それでは、コンテンツの追加を始めましょう。
各列へのコンテンツ（ステップ）の追加
このデザインは、ステップをプロセスにフラッシュするスクロール効果を備えているため、各列にはステップの1つが含まれます。 列1には、ステップ1を説明するためのコンテンツが含まれます。列2には、ステップ2のコンテンツが含まれます。
列1にテキストモジュールを追加
列1に新しいテキストモジュールを追加します。
テキストモジュールのコンテンツとデザイン
次に、テキストの内容を次のように更新します。
[デザイン]タブを開き、次の設定を更新します。
- テキストフォント：Lato
- テキストフォントの太さ：太字
- テキストテキストの色：＃fc6d71
- 見出し2フォント：Oswald
- 見出し2フォントの太さ：軽い
- 見出し2テキストサイズ：32px
- 見出し2文字の間隔：1px
- 見出し2行の高さ：1.3em
- マージン：0px下
- パディング：上10％、下10％
- ボーダー幅：1px
- ボーダーカラー：rgba（166,166,166,0.16）
列1に画像モジュールを追加
テキストモジュールを配置したら、列1のテキストモジュールの下に画像モジュールを追加します。
次に、画像の余白を次のように更新します。
列1のコンテンツをコピーして貼り付ける
設計プロセスを高速化するために、複数選択を使用して列1の2つのモジュールを選択し、残りの4つの列のそれぞれに貼り付けることができます。
重複するモジュールのコンテンツを更新する
複製モジュールを配置したら、戻ってテキストコンテンツと画像を更新し、プロセスの4つのステップのそれぞれを反映します。
完了すると、デザインは次のようになります。
各列にスクロール効果を追加する
これで、ユーザーがページを下にスクロールするときにプロセスの各ステップをフラッシュするスクロール効果を追加する準備が整いました。 各モジュールにスクロール効果を追加する代わりに、各列にスクロール効果を追加して、コンテンツ内のすべてのモジュールに効果が適用されるようにします。
点滅するスクロール効果を作成するために、各列にフェードインおよびフェードアウトスクロール効果を使用します。 アイデアは、0％の不透明度から始めて、100％の不透明度まで続けてから、0％まで戻すことから効果を開始することです。
列1のスクロール効果
行の設定で、列1の設定を開き、次のスクロール効果を追加します。
[フェードインおよびフェードアウト]オプションタブの下：
- フェードインとフェードアウトを有効にする：はい
- 開始時の不透明度：0％（20％のビューポートで）
- 中程度の不透明度：100％（25％-45％ビューポート）
- 終了不透明度：0％（50％ビューポート）
列2のスクロール効果
列2の設定を開き、次のスクロール効果を追加します。
[フェードインおよびフェードアウト]オプションタブの下：
- フェードインとフェードアウトを有効にする：はい
- 開始時の不透明度：0％（35％のビューポートで）
- 中程度の不透明度：100％（40％〜60％のビューポート）
- 終了不透明度：0％（65％ビューポート）
列3のスクロール効果
列4スクロール効果
見出しの追加
最後の仕上げとして、レイアウトに見出しを追加できます。 これを行うには、現在の行の下に新しい1列の行を追加します。
次に、次の内容のテキストモジュールを行に追加します。
[デザイン]タブで、以下を更新します。
- テキストの配置：Lato
- 見出し2フォントの太さ：軽い
- 見出し2フォントスタイル：TT
- 見出し2のテキストの色：＃fc6d71
- 見出し2テキストサイズ：70px（デスクトップ）、40px（タブレット）、24px（電話）
- 見出し2文字の間隔：0.5em
最終結果
ライブページで結果を表示するには、セクションの上下にスペースを追加して、最初から最後までスクロール効果を確認する必要があります。 これを行う簡単な方法の1つは、セクションに上下の余白を追加することです。
結果は次のとおりです。
最終的な考え
プロセスのステップを説明することは、静止画像またはグラフィックに限定される必要はありません。 Diviのスクロール効果を使用すると、ユーザーがページを下にスクロールするときに各ステップを徐々に点滅させて、イラストに命を吹き込むことができます。 また、各列にスクロール効果が追加されているため、機能を損なうことなく、各列内のモジュール/コンテンツを簡単に変更できます。 うまくいけば、これはデザインツールボックスに追加するのに役立つテクニックになるでしょう。
コメントでお返事をお待ちしております。
乾杯！