エレガントなテーマのような「拡大する」CTAを作成する方法

公開: 2017-05-14

エレガントなテーマは最近、模倣する価値のあるいくつかの機能を含むようにWebサイトのデザインを変更しました。以前の投稿で、Elegant Themeブログのデザインを実装し、プライマリメニューを複製する方法について書きました。ただし、この投稿では、エレガントなテーマの召喚状（CTA）を複製する方法を紹介します。このCTAは、Elegant ThemesWebサイトのフッター近くの下部にあります。このCTAの特別な点は、ユーザーが要素にスクロールするとアニメーションをトリガーする機能が追加されたことです。

今日は、このCTAのスタイルだけでなく、アニメーション機能も複製する方法を紹介します。これは、いくつかのカスタムCSSと数行のJavaScriptを備えたDiviのコードモジュールを使用して実現されます。ただし、Diviのどのモジュールでも同じアニメーション機能を簡単に拡張できます。

始めましょう。

Diviを使用した設計の実装

コードモジュールを使用した召喚状の作成

Visual Builderを使用して、全幅の行列を持つ新しい通常のセクションを追加します。

次に、コードモジュールを行に追加します。

[一般的なコード設定]で、次のhtmlをコンテンツセクションに追加します。

<div class="cta-info">

<h3>401,632 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web</h3>

<p>We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!</p>

<a href="ENTER URL HERE" id="sign">Sign Up Today</a>

</div>

このhtmlは、CTAのコンテンツとして機能します。メインのCTA見出しがh3タグで囲まれていることに気付くでしょう。小見出しは標準のpタグで囲まれています。また、リンク（まもなくボタンになります）には、「sign」と呼ばれるCSSIDがあります。

また、クラス「cta-info」のdivがコンテンツにラップされています。これは、後でスタイリングするために重要です。

変更内容を保存

次に、新しいセクションに新しいCSSIDを追加する必要があります。セクション設定アイコンをクリックして、セクション設定を開きます。

[セクション設定]の[CSS]タブで、CSS ID「cta-section」を追加し、変更を保存します。

次に、CSSIDを行に追加する必要があります。行設定アイコンをクリックします。

[CSS]タブで、「cta-row」という新しいCSSIDで行設定を更新します。

変更内容を保存

CTAのレイアウトに必要なのはこれだけです。コンテンツとCSSIDが揃ったら、カスタムCSSを追加する準備が整いました。

カスタムCSSの追加

Divi→ThemeCustomizer→AdditionalCSSに移動します（または、子テーマのstyle.cssファイルを直接更新できます）。コードボックス内に、次のCSSを追加します。

/* Animated Call To Action */

/*** style CTA section and row when waypoint is not triggered ***/
#cta-section {
    padding: 0 80px;
    transition: all .8s ease;
    -moz-transition: all .8s ease;
    -webkit-transition: all .8s ease;
}
#cta-row {
    margin: 80px auto 0 auto;
    padding: 80px 0;
    max-width: 100%;
    background-color: #6c17dc;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    box-shadow: 0px 10px 50px #939fa9;
    transition: all .8s ease;
    -moz-transition: all .8s ease;
    -webkit-transition: all .8s ease;

}
/*** Style CTA section and row once waypoint toggles animate-cta class ***/
#cta-section.animate-cta {
    padding: 46px 0 66px 0;
    overflow: hidden;
}
.animate-cta #cta-row {
    margin: 0 auto 0 auto;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    background-color: #4843d2;
    width: inherit;
}
/*** style button ***/

#sign {
    display: inline-block;
    width: 246px;   
    color: #fff;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
    background-color: #f92c8b;
    padding: 20px 40px;
    margin-top: 30px;
    border-radius: 60px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    transition: all .8s ease;
    -webkit-transition: all .8s ease;
    -webkit-transition: all .8s ease;
    box-shadow: 0px 5px 20px #231f92;
    -moz-box-shadow: 0px 5px 20px #231f92;
    -webkit-box-shadow: 0px 10px 50px #231f92;
}
#sign:hover {
    background-color: #2cc2e6;
    box-shadow: 0px 20px 80px #1b1867;
    -moz-box-shadow: 0px 20px 80px #1b1867;
    -webkit-box-shadow: 0px 20px 80px #1b1867;
}

/*** style content within the code module ***/

.cta-info{
    color: #fff;
    text-align: center;
    margin: 0 auto !important;
    max-width: 1080px;
    padding: 50px;
}
.cta-info h3 {
    color: #fff;
    font-size: 35px;
    line-height: 1.3em;
}

今、あなたのCTAはその部分を見始めています。あとは、スクロール時にブラウザのビューポートにCTAが表示されたら、目を引くアニメーション効果をCTAに与えるために、短いスクリプトを追加するだけです。

要素までスクロールするときにCTAをアニメーション化するWaypointスクリプトを追加する

ページ上の要素にスクロールするときに関数をトリガーする最も簡単な方法の1つは、Waypointsと呼ばれるJavaScriptライブラリを使用することです。 DiviにはすでにWaypointsがインストールされているので（イェーイ！）、ライブラリを利用するスクリプトを含めるだけです。

Divi→テーマオプション→統合に移動し、「ブログの先頭にコードを追加する」セクションに次のスクリプトを貼り付けます。

<script>
jQuery(document).ready(function(){
	jQuery('#cta-section').waypoint(function() {
		jQuery('#cta-section').toggleClass('animate-cta');
	}, {offset: '80%'});
});
</script>

このスクリプトは、CTAセクション（CSS ID「cta-section」）にスクロールしたときに「animate-cta」と呼ばれるクラスを切り替える関数を追加しています。オフセットを80％として指定するコードの部分に注意してください。これは、CTAセクションの上部がブラウザウィンドウの上部から80％になると、関数がトリガーされることを意味します。 CTAがページの中央に達したときに関数がトリガーされるのを遅らせたい場合は、オフセット値を50％などに変更できます。ただし、CTAがページの一番下に表示される場合は、80％〜90％に近い値を使用する必要があります。これは、スクロール時にCTAがブラウザウィンドウの中央に到達しない可能性があるため、トリガーされないためです。

それでおしまい！

それでは、完成したプロジェクトを見てみましょう。

他のモジュールへのCTA機能の追加

このCTA機能をDiviBuilder内の他のモジュールに追加する場合、これは非常に簡単です。開始する手順は次のとおりです。

全幅（単一列）行の標準セクションを作成します。
[セクション設定]の[CSS]で、CSSID「cta-section」を追加します。
[行の設定]の[CSS]で、CSS ID「cta-row」を追加し、列CSSクラス「cta-column」を追加します。
次のカスタムCSSを挿入します。

 .cta-column.et_pb_column:last-child {
 margin: 0 auto;
 margin-right: auto !important;
 max-width: 1080px;
 float: none;
}

行に必要なモジュールを追加し（つまり、Call to Action Module）、それに応じてスタイルを設定します。モジュールに透明な背景を追加して、CTAのセクションの背景色と重ならないようにすることができます。

重要な注意：この機能を使用して、ページごとに複数のCTAを追加することはできません。

最終的な考え

エレガントなテーマのCTAを複製することは、将来のプロジェクトに追加するのに便利な機能です。それは、過度に耐えることなく、読者の注意を引き付けます。コードモジュールを使用すると、開発者はCTA内にカスタムHTMLを追加する柔軟性が高まります。また、ウェイポイントアニメーション機能はコードモジュールに限定されません。また、必要なCSS IDを任意のセクション、行、および列に追加して、DiviBuilderを使用して任意のモジュールでCTAを作成することもできます。

以下のコメントであなたからの連絡を楽しみにしています。

乾杯！