複数のスライダーを使用して自動アニメーションでサービスを紹介する方法

公開: 2019-07-26

ほとんどの企業は、訪問者にWebサイトでサービスを紹介する必要があります。そして、折り目の上のサービスを紹介する1つの方法は、スライダーを使用することです。これにより、各サービスを1つずつ強調表示できますが、欠点は、ユーザーが必要なサービスを見つけるために前後に移動する必要があることです。より良いユーザーエクスペリエンスは、これらのサービスを常にユーザーに表示しておくことです。

このチュートリアルでは、スライダーを使用してサービスを紹介すると同時に、各サービスコンテンツを常にユーザーに表示する方法を紹介します。これを行うには、複数のスライダーと自動アニメーションを使用して、各サービスが特定のスライドデザインで1つずつ強調表示されるようにします。そして、Diviの組み込みの設計オプションを使用してこれを行います。

始めましょう。

スニークピーク

これは、複数のスライダーを使用してサービスを1つずつ紹介する設計の概要です。

複数のスライダーレイアウトを備えたショーケースサービスを無料でダウンロード

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

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

無料でダウンロード

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

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

レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。

チュートリアルに行きましょう。

私たちのYoutubeチャンネルを購読する

始めるために必要なもの

開始するには、次のものが必要です。

Diviテーマがインストールされ、アクティブになっています
フロントエンドでゼロから構築するために作成された新しいページ（ビジュアルビルダー）
モックコンテンツに使用する画像

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

Diviで複数のスライダーデザインを使用したショーケースサービスの作成

セクションと行1を作成します

開始するには、1列の行を持つ通常のセクションを作成します。

次に、モジュールを追加する前に、セクション設定を開き、暗い背景画像（または背景色）を追加します。

次に、行の設定を開き、以下を更新します。

最大幅：80％

テキストモジュールを使用してヘッダーテキストを追加する

デザインのヘッダーテキストを追加するには、テキストモジュールを使用しましょう。先に進み、テキストモジュールを行に追加します。

次に、テキストモジュールの本文のコンテンツを次のHTMLで更新します。

<h1>How can we help?</h1>

次に、次のように設計設定を更新します。

見出しフォント：Montserrat
見出しのテキストの色：#ffffff
見出しのテキストサイズ：6vw
パディング：上5％、下5％

2番目の行を追加します

次に、3列のレイアウトで別の行を追加します。

次に、最大幅80％で行設定を更新します。

最大幅：80％

列1にスライダーを追加する

これで、各out列にスライダーを追加する準備が整いました。列1にスライダーモジュールを追加することから始めます。

2番目のデフォルトのスライドを削除して、1つのスライドだけが残るようにします。

次に、以下を更新します。

矢印を表示：いいえ
コントロールの表示：いいえ
背景色：rgba（0,0,0,0）

テキストの配置：左
タイトルフォント：Montserrat
タイトルフォントの太さ：半太字
ボタンの背景色：＃38b3cb
ボタンの境界線の幅：0px

次に、自動アニメーションオプションを次のように設定します。

自動アニメーション：オン
自動アニメーション速度：3000
ホバーで自動スライドを続行：オン

デフォルトでは、Diviはスライド間に微妙なフェードアニメーションを追加します。スライド間で目立った変化がないように、これを無効にします。これを行うには、次のカスタムCSSをスライドの説明に追加します。

animation: none !important;

これでスライダーの設定が処理されます。次に、個々のスライドを更新する必要があります。

スライダー1のスライドを作成する

3つの列のそれぞれに1つのスライダーがある3つのスライダーを使用します。また、スライドのタイミングで各サービスを1つずつ強調表示するには、スライダーごとに3つのスライドが必要です。次に、サービスを紹介または強調するために設計するスライドの1つを選択できます。

スライダー1の3つのスライドを作成することから始めましょう。

個々のスライドの設定を開きます。次に、短い文のみが含まれるように本文の内容を調整します。

次に、個々のスライド設定を保存し、スライドを2回複製して、合計3つのスライドを作成します。このデザインでは、スライダー/列と同じ数のスライドが必要であることを忘れないでください。

スライダーをコピーして残りの各列に貼り付ける

スライダー1に3つのスライドを配置したら、スライダーモジュールをコピーして、列2と列3に貼り付けることができます。

これで、各列に同じスライダーが表示されます。また、各スライダーには3つの同一のスライドがあり、3000ミリ秒ごとに自動的に移行するように設定されています。また、フェードアニメーションを無効にしたため、スライド間の遷移を確認できません。ただし、スライドの1つのデザインを変更すると、スライダーがそのスライドに移動したときに違いがわかります。これにより、自動アニメーションでサービスを紹介（または強調表示）するために、各スライダーの1つのスライドのデザインを変更できます。

ショーケーススライドで各スライダーを更新する

これを行うには、スライダー1の最初のスライド、スライダー2の2番目のスライド、スライダー3の3番目のスライドのデザインを変更します。これにより、左の列から始まり、で終わる各サービスが自動的に（3000ミリ秒ごとに）強調表示されます。右側の3番目の列。その後、この自動アニメーションを繰り返します。

スライダー1ショーケーススライドを更新

スライダー1の設定を開き、次に最初の個々のスライドの設定を開くことから始めます。

サービスを強調するために、スライドを背景色（ボタンに一致する）と、乗算ブレンドモードを使用して背景色とブレンドされる背景画像で更新します。

これを行うには、以下を更新してください。

背景色：＃00b2ca
背景画像：[お好みの画像をアップロード]
背景画像のブレンド：乗算

次に、このスライドのボタンスタイルを次のように更新します。

ボタンのテキストの色：＃00b2ca
ボタンの背景色：#ffffff

設定を保存する。

これで、最初のスライドに新しいデザインが追加され、スライダーが最初のスライドに到達するたびに、最初のスライドでサービスが強調表示されます。

スライダー2ショーケーススライドを更新

スライダー2の場合、2番目のスライドをショーケーススライドにして、スライダー1のショーケーススライドの直後に表示されるようにします。

列2のスライダーのスライダーモジュール設定を開き、ボタンの背景色を変更します。

ボタンの背景色：＃1d4e89

次に、2番目のスライドの個々のスライド設定を開き、以下を更新します。

背景色：＃1d4e89
背景画像：[選択した画像をアップロード]
背景画像のブレンド：ソフトライト（または、より暗い効果を得るには乗算）

次に、スライドのボタンスタイルを更新します。

ボタンのテキストの色：＃1d4e89
ボタンの背景色：#ffffff

スライダー3ショーケーススライドを更新

スライダー3（列3）の場合、3番目のスライドをショーケーススライドとして更新して、2番目のスライダーショーケーススライドの直後に表示されるようにする必要があります。

まず、スライダー3のボタンの色を次のように変更します。

ボタンの背景色：＃ef476f

次に、3番目のスライドの設定を開き、以下を更新します。

背景色：＃ef476f
背景画像[選択した画像を挿入]
背景画像のブレンド：乗算

次に、スライドのボタンスタイルを次のように更新します。

ボタンのテキストの色：＃ef476f
ボタンの背景色：#ffffff

最終結果

最終結果を確認してみましょう。

そして、これがタブレットと電話でデザインがどのように積み重なるかです。

最終的な考え

自動アニメーションで複数のスライダーを使用してサービスを紹介するのは少し難しいようです。しかし、概念を理解すれば、実際には非常に簡単です。

各スライダーは1つのサービスを表すため、コンテンツを同じに保ち、ボタンのURLが各スライドで同じであることを確認する必要があります。

この設定を使用する方法は他にもたくさんあります。たとえば、サービスを散発的に強調表示するために、自動アニメーション期間をさまざまな速度に設定できます。また、スライダーの各スライド内にさまざまなサービスを追加して、ポップアップするサービスを増やすこともできます。

現在の設定は進行状況を示し、訪問者にプロセスを示すために使用できるため、個人的に気に入っています。しかし、私はあなたの考えやアイデアを聞いてみたいです。

コメントでお返事をお待ちしております。

乾杯！