スライドごとに特定の要素を変更するためにDiviスライダーをカスタマイズする方法

スライダーは、ウェブサイトの折り畳み上にある主要なセクションを最大化するのに最適であることは誰もが知っています。 彼らはすごい！ ユーザーは、ページを下にスクロールしなくてもスライドして表示される複数のCTAと重要な機能で歓迎されます。 ただし、スライドごとにデザインやコンテンツを変更しすぎると、訪問者の注意をそらしたり、圧倒したりすることがあります。 そのため、このチュートリアルでは、スライドの遷移ごとに特定の要素のみを変更するようにDiviスライダーをカスタマイズする方法を紹介します。 これにより、各スライドで特定の要素（1つの単語やボタンなど）のみを変更しながら、スライダーのコアコンテンツとデザインコンポーネントの一貫性を保つことができます。 訪問者は変更を簡単に処理し、行動を促すフレーズを明確に理解できるようになります。

飛び込みましょう！

ディビスライダースニークピーク

Hearは、今日のチュートリアルで作成するDiviスライダーのデザインと機能を簡単に紹介しています。

これにより、各スライドの本文の1つの単語のみがどのように変更されるかに注意してください。

この例では、スライドごとに本文の単語とボタンの色およびピリオドの両方がどのように変化するかに注目してください。

基本コンセプトの説明

デフォルトでは、Diviスライダーは、フェードインしてコンテンツをわずかに上に移動する新しいスライドに移行するたびに、説明テキストをアニメーション化します。

しかし、カスタムCSSの1行で、テキストの上向きのアニメーションを無効にすることができます。 また、スライドを複製し、背景を取り除き、要素の1つだけを変更すると（本文の1つの単語など）、スライドごとに1つの単語だけが変更されます。

この概念を使用して、特定の特定のテキスト、ボタン、または色のみを変更し、残りのデザイン要素を各スライドと連動させることができます。

入門

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

このチュートリアルでは、必要なのはDiviテーマがインストールされてアクティブになっていることだけです。 フロントエンドのDiviビルダーを使用して、Diviスライダーを最初から作成します。

開始するには、新しいページを作成し、ページにタイトルを付けます。 次に、クリックしてDivi Builderを使用し、「最初からビルド」オプションを選択します。 次に、ボタンをクリックして「フロントエンドでビルド」します。

これで、設計を開始する準備が整いました。

Diviスライダーコンテンツの設定

この例では、全幅スライダーモジュールを使用しますが、このチュートリアルは通常のスライダーモジュールにも適用されます。 全幅スライダーモジュールを備えた全幅セクションをページに追加することから始めましょう。

スライダーのコンテンツの変更を確認できるように、最初に全幅セクションに暗い背景色を一時的に追加しましょう。 セクション設定を開き、背景色を黒にします（＃222222）。

デフォルトのスライダーの背景色がそれを覆っているので、これはまだ見ることができません。 チュートリアルの後半で、セクションの背景デザインを完了するために円を描きます。

次に、全幅スライダー設定にジャンプして、デフォルトのスライドの1つを削除し、1つだけ残します。 次に、スライド設定を開きます。

スライド設定を次のように更新します。

見出し：「あなたにもっと与えるウェブサイト…」
ボタンテキスト：「はじめに」

[コンテンツ]の下に次のhtmlを追加します。

Business<span style="color: #EE164D;">.</span>

（これにより、単語の後のドット（またはピリオド）にカスタムカラーが追加されます。）

背景色：rgba（255,255,255,0）

設定を保存する。

スライドを2回複製して、合計3つのスライドを作成します。

2番目のスライド設定を開きます。 [コンテンツ]で、「ビジネス」という単語のみを「お金」に置き換えて、残りのhtml、見出し、ボタンのテキストを同じにします。 各スライドでこの1つの単語だけを変更したいと思います。 次に、設定を保存します。

次に、3番目のスライド設定を開きます。 [コンテンツ]で、「ビジネス」という単語を「成功」に置き換え、設定を保存します。

出来た！ これでスライダーのコンテンツが処理されます。

説明テキストアニメーションの最適化

スライダーのコンテンツを配置したら、アニメーションを無効にして、スライドごとにテキストがジャンプしないようにする必要があります。 これを行うには、全幅スライダー設定に移動し、スライドの説明の下に次のカスタムCSSを追加します。

animation-name: none;

この例では、スライダーアニメーションを自動化し、アニメーションの速度を上げて、ユーザーが各スライドの単語の変化をすばやく確認できるようにするのが理にかなっています。 これを行うには、[デザイン]タブに移動し、以下を更新します。

自動アニメーション：オン
自動アニメーション速度（ミリ秒）：3000

これまでの結果を確認してください。 上向きのアニメーションなしで、各スライダーのコンテンツの1つの単語だけが変化するのがわかります。

スライダーの設計

コンテンツと機能が整ったら、美しくエレガントなデザインでスライダーのスタイリングを開始できます。

全幅スライダー設定を開き、以下を更新します。

テキストの向き：左
タイトルフォント：ラト
タイトルフォントの太さ：軽い
タイトルテキストサイズ：32px
タイトルテキストシャドウ：スクリーンショットを参照
タイトルテキストシャドウブラー強度：0em（これは基本的にデフォルトのテキストシャドウを取り除きます）

ボディフォント：ラト
本文のサイズ：5vw（デスクトップ）、50px（タブレット）、40px（スマートフォン）
ボディラインの高さ：1.6em
本文の影：スクリーンショットを参照
本文の影のぼかしの強さ：0em（これは基本的にデフォルトのテキストの影を取り除きます）

ボタンのテキストサイズ：16px
ボタンの背景色：＃ee164d
ボタンの境界線の幅：8px
ボタンの境界線の色：＃ee164d
ボタンの境界線半径：0px
ボタンの文字間隔：1px
ボタンフォント：ラト
ボタンの配置：右

幅：70％（デスクトップ）、100％（タブレット）、100％（スマートフォン）
モジュールの配置：中央

カスタムパディング（デスクトップ）：19vw上部、8vw下部
カスタムパディング（タブレット）：19vw上部、4vw下部。 左0px、右0px
カスタムパディング（スマートフォン）：上30vw、下4vw、左0px、右0px

ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの水平位置：-190px
ボックスシャドウの垂直位置：60px
ボックスシャドウカラー：rgba（0,16,17,0.7）

最後のステップとして、スライダーの矢印やコントロールが表示されないように、スライダー要素を無効にしましょう。

これでDiviスライダーのデザインが決まります。

セクションスタイルのカスタマイズ

すべてのスライドの静的な背景として機能する背景画像を含め、残りのデザインはセクションに追加されます。 スライダーモジュールに背景画像を追加した場合のように、ある画像から別の画像へのわずかな遷移が見られないため、セクションに背景画像を追加することは、この使用法に適しています。

セクション設定を開き、以下を更新します。

背景画像：[1920px x800px付近の画像を挿入]
背景グラデーションの左の色：rgba（0,16,17,0.45）
背景グラデーションの右の色：rgba（0,16,17,0.92）
開始位置：34％
終了位置：0％
背景画像の上にグラデーションを配置：はい

次に、次のようにセクションに正しい境界線を付けます。

右ボーダー幅：5vw
右の境界線の色：＃001011

最後に、デザインのフレームワークのバランスをとるために、セクションにボックスシャドウを付けます。

ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの水平位置：-200px
ボックスシャドウの垂直位置：-150px
ボックスシャドウカラー：rgba（0,16,17,0.74）

それでおしまい！

Diviスライダーの最終設計

これがカスタムDiviスライダーの最終的なデザインです。

スライドの機能は次のとおりです。 スライドごとに1つの単語だけがどのように変化するかに注目してください。

モバイルでの最終設計

タブレット

スマートフォン

他の要素を変更してみてください

スライドごとに他の要素を変更して、よりクリエイティブなデザインと機能を試すことができます。 たとえば、各スライドボタンに各スライドで異なる色を付けたり、期間の色を各スライドの新しいボタンの色と一致させたりすることができます。

これがどのように見えるかです。

スライドボックスの影の色やその他のデザイン要素の変更を検討することもできます。 無数の可能性があります！

最終的な考え

このカスタムDiviスライダーのデザインと機能は、従来のスライダーに代わる優れた機能を提供します。 デザインのコアは変更されません。これにより、スライドごとに変更されるCTAの重要な側面がさらに強調されます。 これは、コンバージョンを促進するかどうかをテストできるもののようです。

以下のコメントであなたの考えを教えてください。

乾杯！