エレガントなテーマのプライマリメニューをDiviで複製する方法

公開: 2017-04-25

新しいエレガントなテーマメニューは、開発者が自分のサイトで複製することを求める人気のあるリクエストです。メニューの主な機能は、ページを下にスクロールするときに色を変更したりアニメーション化したりすることで訪問者の注意を引く行動を促す召喚（CTA）ボタンです。この種のCTAボタンをサイトに配置すると、クリック率とコンバージョンが増える可能性があります。

今日は、Diviを使用してElegantThemeのプライマリメニューを複製する方法を紹介します。ボタンのカスタムスタイルと機能を実装するために、CSSとjQueryを組み合わせて使用します。

始めましょう！

設計の実装

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

メニューの作成

WordPressダッシュボードから、[外観]→[メニュー]に移動します。メニューページの上部にある[画面オプション]をクリックして、[CSSクラス]を確認します。これにより、メニュー項目にカスタムCSSクラスを追加できます。

次に、「新しいメニューを作成」をクリックして、メニューに名前を付けます。

「メニュー作成」ボタンをクリックします。

次に、メニューリンクを新しいメニューに追加します。エレガントなテーマメニューを複製しているので、次のカスタムリンクを追加します。

テーマ
プラグイン
ブログ
コンタクト
ログイン
ダウンロードに参加する

メニューへのリンクの追加が完了したら、サイトのプライマリメニューとして新しいメニューを選択します。

[ダウンロードに参加]メニューリンクを[CTA]ボタンに変更するには、カスタムCSSクラスを追加して、後でCSSを使用してスタイルを設定できるようにする必要があります。クラスを追加するには、[ダウンロードに参加]メニュー項目の右側にある矢印をクリックして、構成オプションを表示します。 [CSSクラス]テキストボックス内に「jointoday_button」というクラスを追加します。

メニューを保存

メニューを作成してプライマリメニューとして設定したら、ナビゲーションメニューとCTAボタンにスタイルを追加します。

ナビゲーションメニューのスタイリング

まず、プライマリメニューバーのテキストサイズを変更する必要があります。 テーマカスタマイザ→ヘッダーとナビゲーション→プライマリメニューバーに移動します。すべてのデフォルト設定を保持し、テキストサイズを15に変更します。

ナビゲーションメニューの残りの部分は、カスタムCSSを使用してスタイル設定されます。 [テーマカスタマイザー]で、[追加のCSS]に移動し、次のカスタムCSSを追加します（これらを子テーマのstyle.cssファイルに追加することもできます）。

/*** remove shadow on main header***/
#main-header {
box-shadow: none;
}

/*** add shadow to fixed header ***/
@media (min-width: 981px) {
#main-header.et-fixed-header {
    box-shadow: 0 0 30px rgba(7, 51, 84, 0.17) !important;
    -webkit-box-shadow: 0 0 30px rgba(7, 51, 84, 0.17) !important;
    -moz-box-shadow: 0 0 30px rgba(7, 51, 84, 0.17) !important;
}
}
/*** adjust padding on menu ***/
.et_header_style_left .et-fixed-header #et-top-navigation nav > ul > li > a {
padding-bottom: 23px;
}
#top-menu li {
padding: 0 10px !important;
}

.et_header_style_left #et-top-navigation {
padding-top: 20px;
}

.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 10px;
}

/*** style the menu button ***/
.jointoday_button a {
color: #f92c8b !important;
    line-height: 9px;
    font-weight: 600;
    padding: 13px 16px !important;
    text-transform: uppercase;
    font-size: 12px !important;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    display: block;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    border: 2px solid #f92c8b;
}

.jointoday_button a:hover {
    opacity: 1 !important;
    color: #fff !important;
    background-color: #f92c8b;
}

.et-fixed-header #top-menu .jointoday_button a:hover {
    background-color: #de20b3;
    border: 2px solid #de20b3;
    box-shadow: 0px 5px 20px #aab9c3;
    -moz-box-shadow: 0px 5px 20px #aab9c3;
    -webkit-box-shadow: 0px 5px 20px #aab9c3;
}

.et-fixed-header #top-menu .jointoday_button a {
    color: #fff !important;
    background-color: #f92c8b;
    box-shadow: 0px 5px 20px #d6dee4;
    -moz-box-shadow: 0px 5px 20px #d6dee4;
    -webkit-box-shadow: 0px 5px 20px #d6dee4;
    border: 2px solid #f92c8b;
}
.et-fixed-header.et_highlight_nav #top-menu .jointoday_button a {
    background-color: #2cc2e6;
    border: 2px solid #2cc2e6;
    animation: highlight-nav .8s ease;
    -webkit-animation: highlight-nav .8s ease;
}

#main-header.et-fixed-header.et_highlight_nav #top-menu .jointoday_button a:hover {
    background-color: #f92c8b;
    border: 2px solid #f92c8b;
    box-shadow: 0px 5px 20px #aab9c3;
    -moz-box-shadow: 0px 5px 20px #aab9c3;
    -webkit-box-shadow: 0px 5px 20px #aab9c3;
}

@-webkit-keyframes highlight-nav {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}
@keyframes highlight-nav {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

/*** style the mobile menu links and button ***/
@media (max-width: 980px) {
.et_mobile_menu li {
text-align: center;
}

.et_mobile_menu li a {
border-bottom: none;
}
.et_mobile_menu li a:hover {
background-color: transparent;} 

.jointoday_button a {
border-bottom: 2px solid #f92c8b !important;
}
}

ほぼ完了です。これまでのメニューの様子を見てみましょう。

メニューの下の影が削除され、ページを下にスクロールしたときに固定ナビゲーションがアクティブになっている場合にのみ表示されることに注意してください。また、CTAボタンは、固定ナビゲーションで色を変更するようにスタイル設定されています。

jQueryの追加

あとは、ページの特定のポイントまでスクロールダウンしたときに、ボタンに色の変更とパルスアニメーションを追加するだけです。この追加機能は、ユーザーがコンテンツを操作するときにCTAボタンにさらに注意を向けます。この効果を追加するには、ユーザーがページ上の特定のポイントにスクロールしたときにのみ、ボタンにCSSクラスを追加する必要があります。この場合、ユーザーがページの本文の50％を超えるポイントまでスクロールすると、クラス「et_highlight_nav」がメニューに追加されます。ユーザーがページの先頭にスクロールして戻ると、このクラスは削除されます。

これは、jQueryを追加することで実現できます。 [ Divi]→[テーマオプション]に移動し、[統合]タブで、次のjQueryを[ブログの先頭にコードを追加する]テキスト領域に追加します。

<script>
jQuery(document).ready(function($){
	jQuery(window).scroll(function() {    
	var   $main_header = jQuery('#main-header'),
		$body = jQuery('body'),
                scrollPercentage = 100 * (jQuery(this).scrollTop() / $body.height()),
                scroll = $(window).scrollTop(),
	    	objectPosition = $body.offset().top;

	    if (scroll < objectPosition) {
	        $main_header.removeClass("et_highlight_nav");
	    }
	    if (scrollPercentage >= 50){
	        $main_header.addClass("et_highlight_nav");
	    }
	});
});
</script>

クラス「et_highlight_nav」を使用して、パルスアニメーションと青色でCTAボタンのスタイルを設定できるようになりました。この効果のカスタムCSSを以前にすでに追加しているので、これですべての設定が完了しました。

今すぐメニューをチェックしてください。

ページをさらに下にスクロールするとCTAボタンが青色に変わり、点滅し、ページの上部に戻るとリセットされます。

CTAボタンの色を変更する

CTAボタンはカスタムCSSクラスを使用しているため、前に追加したCSSを調整することで、サイトに合わせてボタンのスタイルを変更できます。カラーコードを自分のものに置き換えるだけです。さまざまなボタンスタイルを対象とするCSSのセクションは次のとおりです。

ボタンの色を変更する場合は、ここでCSSを変更して、モバイルでボタンの下の境界線を変更してください。

モバイルではどのように見えますか？

以前に追加したカスタムCSSは、エレガントなテーマのモバイルメニューと同じように、メニューアイテムを中央に配置し、モバイルでCTAボタンの間隔を適切に設定します。

メニューフォント

このチュートリアルでは、メニューフォントとしてデフォルトフォントのOpenSansを使用しています。エレガントテーマサイトのデフォルトフォント（メニューテキストを含む）は、Poppinsと呼ばれるフォントです。この前の投稿の手順に従って、GoogleFontsを使用してこのフォントをインポートできます。

最終的な考え

それでおしまい！これで、エレガントテーマのプライマリメニューが正常に複製されました。また、カスタムCSSを調整することで、サイトのデザインに合わせてCTAボタンのスタイルを調整できます。ボタンの色は固定ナビゲーションで変化し、ページを下にスクロールするとアニメーション化されるため、ユーザーはコンバージョンに役立つCTAに気付く可能性が高くなります。

この新しいメニューが今後のプロジェクトに役立つ機能になることを願っています。そして、以下のコメントであなたからの連絡を楽しみにしています。

楽しみ！