カスタムDiviヘッダーCTAの8つの遅延ボタンアニメーション
公開: 2020-01-23CTAに遅延ボタンアニメーションを追加すると、訪問者に注意を引き付け、クリックを獲得する可能性を高める効果的な方法になります。 このチュートリアルでは、Diviを使用してカスタムヘッダーCTAの8つの遅延ボタンアニメーションを作成する方法を示します。 これを行うために、私たちはあなたが今まで考えたことのない方法でアニメーション設定を組み合わせます。 さらに、これらのアニメーションは、サイト全体のほぼすべてのCTAボタンに適用できます。
始めましょう。
スニークピーク
これは、DiviのカスタムヘッダーCTAに追加する8つの遅延ボタンアニメーションの概要です。
8つの遅延ヘッダーボタンアニメーションレイアウトを無料でダウンロード
このチュートリアルの8つの遅延ボタンアニメーションを手に入れるには、まず下のボタンを使用してアニメーションをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。
チュートリアルに行きましょう。
始めるために必要なもの
開始するには、Diviテーマをインストールしてアクティブ化する必要があります。 最新バージョンのDiviを使用していることを確認してください。
このチュートリアルでは、そのパックの404ページテンプレートのカスタムヘッダーを使用するため、2番目のテーマビルダーパックをダウンロードする必要があります。
その後、あなたは行く準備ができています。
2番目のテーマビルダーパックからのテンプレートのインポート
WordPressダッシュボードから、Divi> ThemeBuilderに移動します。 テーマビルダー内で、ページの右上にある移植性アイコンを選択します。 移植性ポップアップで、[インポート]タブを選択し、theme-builder-pack-2-404-page-template.jsonファイルを選択して、[インポート]ボタンをクリックします。 （このインポートファイルは、Second Theme Builder Packフォルダー内にあります）
グローバルヘッダーとフッターを静的レイアウトとしてインポートするオプションを選択することもできます。
テンプレートをインポートしたら、アイコンをクリックしてカスタムヘッダー領域を編集します。
これにより、ボディテンプレートレイアウトエディタが表示され、事前に作成されたヘッダーのボタンに遅延アニメーションが追加されます。
カスタムヘッダーCTAの8つの遅延ボタンアニメーション
以下の8つの遅延ボタンアニメーションには、組み込みのDiviアニメーションオプションとパースペクティブCSSプロパティの独自の組み合わせが含まれています。 ボタンアニメーションにフリップ効果またはフォールド効果が含まれている場合、perspectiveプロパティは3D効果を追加します。 これらのアニメーションのほとんどでは、より複雑な動きを得るために、ボタンとその親列の両方にアニメーションを追加します。
はい、どうぞ…
＃1ドロップダウンバウンス
ボタン設定：
ドロップダウンバウンス遅延ボタンアニメーションはシンプルで効果的です。 ビルドするには、ボタンモジュールの設定を開き、以下を更新します。
- アニメーションスタイル：バウンス
- アニメーションの方向：下
- アニメーション時間：1100ms
- アニメーションの遅延：1500ms
- アニメーションの開始不透明度：100％
＃23D垂直フリップ
3D垂直フリップ遅延ボタンアニメーションを作成するには、最初にパースペクティブプロパティをボタンの親列（列2）に追加する必要があります。
列の設定
列に遠近法を追加するには、行の設定を開き、クリックして列2の設定を編集します。 [詳細設定]タブで、次のカスタムCSSをメイン要素に追加します。
perspective: 150px
ボタン設定：
- アニメーションスタイル：フリップ
- アニメーションの方向性：中央
- アニメーション時間：1500ms
- アニメーションの遅延：1000ms
- アニメーション強度：400％
- アニメーションの開始不透明度：100％
＃33D水平フリップ
3D水平フリップ遅延ボタンアニメーションは、垂直フリップに似ています。 唯一の本当の違いは、アニメーションの方向です。
列の設定：
まず、メイン要素に次のカスタムCSSを追加して、列2にパースペクティブを追加したことを確認します。
perspective: 150px
ボタン設定：
ボタンモジュールの設定を開き、以下を更新します。
- ボタンの配置：中央
これにより、水平方向の反転が親のパースペクティブプロパティの中央に配置されます。
- アニメーションスタイル：折り
- アニメーションの方向性：中央
- アニメーション時間：1000ms
- アニメーションの遅延：2000ms
- アニメーション強度：400％
- アニメーションの開始不透明度：100％
- アニメーション速度曲線：線形
＃4ドロップダウンバウンス+ 3D垂直フリップ
この遅延ボタンアニメーションは、バウンスアニメーション（列に追加）とフリップアニメーション（ボタンに追加）を組み合わせることで実現されます。
作成方法は次のとおりです。
列の設定：
行の設定を開き、列2の設定を次のように更新します。
- アニメーションスタイル：バウンス
- アニメーションの方向：下
- アニメーションの遅延：2000ms
- アニメーションの開始不透明度：100％
次に、次のようにパースペクティブcssをメイン要素に追加します。
perspective: 150px;
ボタン設定：
列の設定が完了したら、ボタンモジュールの設定を次のように更新します。
- アニメーションスタイル：フリップ
- アニメーションの方向性：中央
- アニメーション時間：1500ms
- アニメーションの遅延：1000ms
- アニメーション強度：400％
- アニメーションの開始不透明度：100％
ここでの秘訣は、列のアニメーションが完了した後、フリップの開始を遅らせることです。
＃5急降下（下にスライド+回転）
この次のアニメーションの「急降下」アニメーションを取得するには、スライドアニメーション（列に追加）とロールアニメーション（ボタンに追加）を組み合わせる必要があります。
やってみましょう。
列の設定：
行の設定を開き、次のように列2の設定を更新します。
- アニメーションスタイル：スライド
- アニメーションの方向：下
- アニメーションの遅延：1000ms
- アニメーションの開始不透明度：100％
次に、次のカスタムcssをメイン要素に追加します。
perspective: 150px
ボタン設定：
次に、ボタンの設定を次のように更新します。
- アニメーションスタイル：ロール
- アニメーションの方向：下
- アニメーション時間：1500ms
- アニメーションの遅延：1000ms
- アニメーションの開始不透明度：100％
＃6拡大（ズーム+変換スケール）
この遅延ボタンアニメーションは、変換スケールを使用してボタンをスケーリングする必要があるという点で独特です。 次に、ズームアニメーションをボタンに追加します。
これがその方法です。
ボタン設定：
ボタンモジュールの設定を開き、以下を更新します。
- 変換スケール：175％
- アニメーションスタイル：ズーム
- アニメーションの方向性：中央
- アニメーション時間：1500ms
- アニメーションの遅延：1000ms
- アニメーションの開始不透明度：100％
＃7パルス（ズームイン+ズームアウト）
この遅延パルスアニメーションは、ズームアウトアニメーション（列に追加）とズームインアニメーション（ボタンに追加）を組み合わせて作成されます。
やってみましょう。
列の設定：
行の設定を開き、次のように列2の設定を更新します。
- アニメーションスタイル：ズーム
- アニメーションの方向性：中央
- アニメーション時間：1000ms
- アニメーションの遅延：2000ms
- アニメーション強度：-100％
- アニメーションの開始不透明度：100％
アニメーションの強度に負の値（-100％）を追加したことに注意してください。 これにより、列の効果が逆になり、列/ボタンが縮小（またはズームアウト）します。
ボタン設定：
次に、ボタンの設定を次のように更新します。
- アニメーションスタイル：ズーム
- アニメーションの方向性：中央
- アニメーション時間：1500ms
- アニメーションの遅延：1000ms
- アニメーション強度：50％
- アニメーションの開始不透明度：100％
ボタンがズームアウトする前にズームインするように、アニメーションの遅延が列アニメーションの1000ms前に発生するように設定されていることに注意してください。
＃8スパイラル（左スライド+スピン）
この最後の遅延ボタンアニメーションは、スライドアニメーション（列に追加）と720度のフリップアニメーション（ボタンに追加）を組み合わせたものです。
これがその方法です。
列の設定：
まず、行の設定を開き、次のように列2の設定を更新します。
- アニメーションスタイル：スライド
- アニメーションの方向：左
- アニメーション時間：2000ms
- アニメーションの遅延：2000ms
- アニメーション強度：100％
- アニメーションの開始不透明度：100％
ボタン設定：
次に、ボタンモジュールの設定を次のように更新します。
- アニメーションスタイル：フリップ
- アニメーションの方向性：中央
- アニメーション時間：2000ms
- アニメーションの遅延：2000ms
- アニメーション強度：800％
- アニメーションの開始不透明度：100％
ここで、アニメーションの強度が800％に設定されていることに注意してください。 これにより、ボタンが3回反転して、スピン効果が作成されます。
最終結果
最後に、8つの遅延ボタンアニメーションを見てみましょう。
最終的な考え
これらの8つの遅延ボタンアニメーションが、カスタムヘッダーCTAのコンバージョンを促進するのに役立つことを願っています。 これらの例を使用してインスピレーションを得たり、独自のWebサイトの追加のデザインやアプリケーションを探索したりすることもできます。
お気に入りはありますか？
コメントでお返事をお待ちしております。
乾杯！