「ウィニングスピン」スクロール効果でCTAを高める方法

賞品を獲得するのはいつも楽しいです。 そのため、企業は無料のものを提供することで製品やサービスをオンラインで販売しています。 それはあなたの最初の注文で無料のデザートのクーポン、またはあなたが電子メールリストを購読するときの無料の電子書籍である可能性があります。 しかし、時には、景品でさえウェブ上で無視されることがあります。 エレガントな「勝利のスピン」スクロール効果を追加することは、訪問者に魅力的なインタラクションを作成しながら、CTAにそれに値する注意を与えるための優れた方法かもしれません。

このチュートリアルでは、Diviの「勝利スピン」スクロール効果でCTAをブーストする方法を紹介します。 ユーザーがページを下にスクロールすると、当選した賞品が回転して表示され、独自の方法で無料のオファーが表示されます。 そして、これを使用して、考えられるほぼすべての無料オファーを宣伝できます。

始めましょう。

スニークピーク

これは、このチュートリアルで構築するデザインの概要です。

レイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

セクションレイアウトをDiviライブラリにインポートするには、Diviライブラリに移動します。

[インポート]ボタンをクリックします。

移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。

次に、インポートボタンをクリックします。

完了すると、セクションレイアウトがDiviBuilderで使用できるようになります。

チュートリアルに取り掛かりましょう。

始めるために必要なもの

開始するには、次のことを行う必要があります。

1. まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
2. WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
3. 「既成のレイアウトを選択」オプションを選択します。
   
4. ベーカリーホームページのレイアウトを選択し、クリックしてレイアウトを使用します。
   

その後、Diviで「勝利スピン」スクロール効果を使用してCTAの作成を開始する準備が整います。

パート1：「ウィニングスピン」スクロール効果の作成

開始するには、DiviBuilder内の下部の設定メニューからレイヤービューを展開します。 これにより、設計要素をより適切に管理できるようになります。

セクション、行、および列を追加します

既成のレイアウトには、すでにコンテンツを含む複数のセクションが付属しています。 CTAを配置するページに新しいセクションを追加します。 このチュートリアルでは、「サービス」というラベルの付いたセクションのすぐ下に新しい通常のセクションを追加します。

セクション内に、2列の行を追加します。

行設定

モジュールを追加する前に、行設定を開き、以下を更新します。

• 側溝幅：1
• 幅：94％
• パディング：上10px、下10px
• ボーダー幅：1px
• ボーダーカラー：rgba（0,0,0,0.12）

[詳細設定]タブで、次のカスタムCSSをメイン要素に追加します。

display:flex;
align-items: center;

列1の境界線

行の設定が完了したら、列1の設定を開き、次のように右の境界線を追加します。

• 右ボーダー幅：1px
• 右の境界線の色：rgba（0,0,0,0.12）

宣伝文モジュールを使用したスピナー矢印とテキストの作成

次に、勝者の選択を指す矢印として機能するスピナー矢印とテキストを作成します。

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

左側の列に新しい宣伝文モジュールを追加します。

宣伝文の内容

次に、宣伝文の内容を新しいタイトルとアイコンで更新します。

• タイトル：あなたは勝ちます
• アイコン：右矢印（スクリーンショットを参照）

宣伝文句のデザイン

[デザイン]タブで、以下を更新します。

• アイコンの色：＃a06d51
• 画像/アイコンの配置：左
• アイコンのフォントサイズ：80px（デスクトップ）、50px（タブレット）、40px（電話）
• タイトルフォント：Patua One
• タイトルフォントの太さ：太字
• タイトルテキストサイズ：40px（デスクトップ）、25px（タブレット）、20px（電話）
• タイトル文字の間隔：1px
• タイトルラインの高さ：2em

カスタムCSSを宣伝する

次に、次のカスタムCSSをメイン要素に追加して、矢印が左ではなく右になるように宣伝文の順序を切り替えます。

direction: rtl !important;

次に、このカスタムCSSを宣伝文のタイトルに追加して、宣伝文のタイトルの下にあるデフォルトのパディングを削除します。

padding-bottom: 0px

複数の宣伝文で賞品セレクションを作成する

右の列に、スピンして最終的に勝者に決定する賞の選択肢を追加します。 これを行うために、タイトルと画像を使用して4つの宣伝文モジュールを作成して配置します。

ぼかしの作成1

列2に最初の宣伝文を作成するには、列1の宣伝文を複製し、列2にドラッグします。

列2の重複する宣伝文の設定を開き、メイン要素のカスタムCSSを取り出します。

これにより、アイコンが左に戻ります。

タイトルと画像を更新する

次に、タイトルと画像を次のように更新します。

• タイトル：無料のクッキー！
• 画像：画像をアップロード（約100px x 100px）

ぼかし1デザイン

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

• 画像の幅：80px（デスクトップ）、50px（タブレット）、40px（電話）
• コンテンツの幅：92％
• 幅：100％

原点を変換する

変換回転オプションを使用して宣伝文を回転させるので、宣伝文の回転方法に適した変換原点を選択することが重要です。 最初のものをローテーションするつもりはありませんが、これは今後の良いテンプレートとして役立ちます。

宣伝文の変換原点を次のように更新します。

• 変換の原点：右中央

画像/アイコンのアニメーションも削除する必要があります。

絶対位置

[詳細設定]タブで、次のように宣伝文と絶対位置を指定します。

• 位置：絶対
• 場所：右中央

宣伝文2の作成

2番目の宣伝文を作成するには、宣伝文1を複製します。

宣伝文句2を回転させる

次に、次のように変換回転を追加します。

• 変換回転Z軸：25度

宣伝文が行の表示領域から回転していることがわかります。

宣伝文の作成と回転3

3番目の宣伝文を作成するには、宣伝文2を複製します。次に、変換の回転を次のように更新します。

• 変換回転Z軸：50度

宣伝文の作成と回転4

4番目の宣伝文を作成するには、宣伝文3を複製します。次に、変換の回転を次のように更新します。

• 変換回転Z軸：75度

宣伝文のタイトルと画像を更新する

4つの宣伝文の追加が完了したら、戻って、必要に応じてそれぞれのタイトルと画像を更新します。

列スクロールの回転

スクロール効果を追加するには、4つの回転した宣伝文を保持する列全体を回転させます。

列2の設定を開き、以下を更新します。

• 変換の原点：右中央

[詳細設定]タブで、回転スクロール効果タブを開き、以下を更新します。

• 回転を有効にする：はい
• 先発投手：-75％（15％）

次に、モーションエフェクトトリガーを「TopofElement」に更新します。

非表示のオーバーフローで行を更新する

次に、行の設定に戻り、次の行の設定を更新して、コンテンツのオーバーフローを非表示にします。

• 水平オーバーフロー：非表示
• 垂直オーバーフロー：非表示

パート2：賞品CTAの作成

チュートリアルのこの最後の部分では、賞品とボタンに関する情報を表示するCTAを作成します。 そして、「ウィニングスピン」アニメーションが完了した後にCTAを表示するスクロール効果を追加します。 これは、驚きのタイプの効果を模倣します。

行を追加する

まず、作成した行のすぐ下に1列の行を追加します。

テキストモジュールを追加

CTAのコンテンツを追加するために、ページの事前に作成されたレイアウトからテキストモジュールをコピーします。 「ShopOnline」というタイトルのテキストモジュールを見つけてコピーします。

次に、作成した行に貼り付けます。

テキストデザイン

次のようにテキストデザインを更新します。

• テキストフォント：PT Sans
• テキストフォントの太さ：太字
• テキストテキストサイズ：16px
• テキスト行の高さ：2em
• テキストの配置：中央

CTAボタンを追加

次に、事前に作成されたレイアウトの上部にあるボタンを見つけてコピーします。

次に、テキストモジュールのすぐ下に貼り付けます。

行スクロール効果

「ウィニングスピン」で賞品が選択された後にCTAを表示するには、行の設定を開き、次のスクロール効果を更新します。

[フェードインとフェードアウト]タブの下…

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

最終結果

最終的な考え

うまくいけば、この「勝利のスピン」スクロール効果は、あなた自身のサイトでより魅力的なCTAを設計する方法についてのいくつかの新鮮なアイデアをあなたに与えるでしょう。 それを構築するには、Diviの変換オプションとスクロール効果を使用して少し手間がかかります。 しかし、一度完成すると、レイアウトは独自のコンテンツで簡単に更新できます。

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

乾杯！