ビジネスを推進するDiviで垂直ナビゲーションを作成する方法

公開: 2017-08-29

今日のDiviチュートリアルでは、Webサイトのビジネスを促進する垂直ナビゲーションを作成する方法を紹介します。 作成方法を示す垂直ナビゲーションは、通常、訪問者にすぐに行動させることが重要であると考える企業に使用されます。 たとえば、顧客がオンラインで注文できるレストランを所有している場合、訪問者が迅速に行動できるようにWebサイトが必要になる場合があります。

作成方法を示す垂直ナビゲーションには、ページではなく、重要な情報と行動の呼びかけが含まれます。 これらを垂直ナビゲーションに含めると、訪問者が注文するように刺激され、Webサイトのコンバージョン率が向上します。

結果

さまざまな手順とインスピレーションに飛び込む前に、この投稿の最後に達成できる垂直ナビゲーションの結果を見てみましょう。

垂直

さまざまなメニュー項目をすべて垂直ナビゲーションに追加する方法を示すだけでなく、固定ナビゲーションも使用します。 そうすれば、情報が1ページのポケットベル全体で訪問者をフォローしていることを確認できます。

インスピレーション

ビジネスを推進する垂直ナビゲーションでこれにインスピレーションを得たのは、以前の投稿で紹介したWebサイトからです。 その投稿では、独自のWebサイトの目的で垂直ナビゲーションを使用する12のWebサイトをリストしています。 人々の目を引いた例の1つは、Eat ThaiRestaurantのWebサイトでした。 それらの垂直ナビゲーションは、それらのすぐに使える概念の1つです。 彼らのウェブサイトは1ページのポケットベルですが、ナビゲーションの可能性を活用するための優れた方法を見つけました。 彼らのウェブサイトは次のようになります。

垂直

ビジネスを推進するDiviで垂直ナビゲーションを作成する方法

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

垂直ナビゲーションを有効にする

まず、Diviが提供する垂直ナビゲーションオプションをアクティブにする必要があります。 これを行うには、 WordPressダッシュボード>外観>ヘッダーとナビゲーション>ヘッダー形式>垂直ナビゲーションを有効にするに移動します。

垂直

固定ナビゲーションを有効にする

私たちが再現している垂直ナビゲーションは、Eat ThaiRestaurantのWebサイトのように修正されます。 垂直ナビゲーションを固定するには、 WordPressダッシュボード> Divi>テーマオプション>一般タブ>固定ナビゲーションを有効にするに移動します。

垂直

プライマリメニュー設定（テーマカスタマイザ）

次に行う必要があるのは、プライマリメニューにいくつかの変更を加えることです。 WordPressダッシュボードを使用している場合は、 [外観]> [カスタマイズ]> [ヘッダーとナビゲーション]> [プライマリメニューバー]に移動します。 そこに着いたら、次の変更を加えることができます（またはその他の変更を加えたい場合）。

  • ロゴ画像を非表示：無効にする
  • ロゴの最大高さ：100
  • メニュートップマージン：0
  • テキストサイズ：14
  • 文字間隔：-1
  • フォント：Lato Light
  • テキストの色：#FFFFFF
  • アクティブリンクの色：#FFFFFF
  • 背景色：＃004159
  • ドロップダウンメニューの背景色：＃004159

垂直垂直

固定ナビゲーションメニュー設定（テーマカスタマイザー）

テーマカスタマイザーで最後に行う必要があるのは、スクロール中にロゴが表示されることを確認することです。 まだテーマカスタマイザーを使用している場合は、 [ヘッダーとナビゲーション]> [固定ナビゲーション設定]に移動し、 [ロゴを非表示]オプションが無効になっていることを確認します。

垂直

メニュー項目の追加

次に、垂直ナビゲーションにメニュー項目を追加します。 投稿のこの部分は、おそらくあなたの時間のほとんどを占めるでしょう。 カスタムリンクを使用して、各アイテムを個別に追加する必要があります。

CSSクラスをアクティブ化する

ただし、メニュー項目の追加を開始する前に、CSSクラスオプションが有効になっていることを確認する必要があります。 このオプションを使用すると、メニュー項目のそれぞれに個別にクラスを割り当てることができます。 この場合、ほとんどのアイテムには独自のスタイル設定があるため、これが必要です。 CSSクラスオプションを有効にするには、メニューページの右上にある[画面オプション]をクリックし、以下のスクリーンショットに示すようにCSSクラスオプションを有効にします。

垂直

新しいメニューを追加

メニュー項目のCSSクラスをアクティブにしたら、先に進んで新しいメニューを作成できます。 名前を付けて、この新しいメニューをメインメニューにするようにしてください。

垂直

すべてのメニュー項目を追加すると（ステップバイステップで表示されます）、バックエンドでのメニューは次のようになります。

垂直

電話番号

これは1ページのポケットベルであるため、メニューにページは含まれません。 メニューに追加するすべてのアイテムは、むしろカスタムリンクになります。 これにより、追加したいものをいじくり回すことができます。

最初のメニュー項目を追加するには、[カスタムリンク]をクリックして、[ナビゲーションラベル]フィールドに電話番号を追加します。 URLを追加するかどうかを選択できます。 ただし、メニュー項目をメニューに追加するときは、URLを入力する必要があります。 メニュー項目がメニューに追加された後、URLを消去することができ、誰かがメニュー項目をクリックしても何も起こらないことが確実になります。

垂直

メニュー項目をメニューに追加すると、CSSクラスも表示されます。 ここで、メニュー項目のスタイルを変更するCSSクラスを決定する必要があります。 この場合、クラス「phone-number」を使用しています。 この投稿の最後にあるCSSコード行をコピーして貼り付けるだけの場合は、これらの手順で説明されているCSSクラスを使用していることを確認してください。

垂直

住所

同様に、アドレスを追加します。 ナビゲーションラベルにアドレスを入力し、必要に応じてURLを追加します。 アドレスメニュー項目に使用しているクラスは、単に「アドレス」です。

垂直

ソーシャルアイコン

ソーシャルアイコンを垂直ナビゲーションに追加するには、もう少し手間がかかります。 以前の投稿では、プライマリメニューへのソーシャルアイコンの追加を明示的に処理しました。 ただし、この場合、垂直ナビゲーションでアイコンを並べて配置する必要があるため、方法は少し異なります。

FontAwesomeを追加

まだ行っていない場合は、最初に行う必要があるのは、テーマオプションにFontAwesomeを追加することです。 これを行うには、 WordPressダッシュボード> Divi>テーマオプション>統合>に移動し、次のショートコードをWebサイトの先頭に貼り付けます。 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />

垂直

ショートコードを取得する

ソーシャルアイコンへのショートコードを取得するには; FontAwesomeのWebサイトでこのページを開きます。 そのページに表示される検索フィールドで、垂直ナビゲーションに追加するさまざまなアイコンを検索します。

アイコンをクリックすると、アイコンにリンクされているショートコードが表示されます。 これらのショートコードのそれぞれをどこかに保存します。

垂直

メニューにソーシャルアイコンを追加する

次に、ソーシャルアイコンを追加します。 通常、ソーシャルアイコンのそれぞれをメニュー項目として個別に追加できます。 ただし、それらを隣り合わせに表示する必要があるため、同じメニュー項目に配置する必要があります。 ナビゲーションラベルに追加する必要があるHTMLコードは次のとおりです。 

<a href="#" target="_blank"><i class="fa fa-facebook-official facebook" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-instagram instagram" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-envelope envelope" aria-hidden="true"></i></a>

垂直

各アイコンにURLを追加することを忘れないでください。 3つのソーシャルアイコンすべてを組み合わせて使用​​しているクラスは「icon-wrapper」ですが、個々の調整を行うために、ソーシャルアイコンのそれぞれに追加のクラスも割り当てています。 これらのクラスは、FontAwesomeクラスの直後にあります。 それらは「facebook」、「instagram」、「envelope」と呼ばれています。

垂直

方向

次のメニュー項目では、CSSクラス名として「方向」という単語を使用しました。

垂直

ライン

道順のすぐ下に行を追加するには、ラベルナビゲーションに空白文字を追加する必要があります。 これは、WordPressでは、ラベルがリンクされていないとメニュー項目を作成できないためです。 ラインメニュー項目に空白文字を追加するには、「＆nbsp;」を追加するだけです。 ナビゲーションラベルに。 さらに、このメニュー項目にCSSクラス名として「line」を追加します。

垂直

営業時間

次に、営業時間を追加し、それに「hours」CSSクラス名を割り当てます。

垂直

CTA 1

次に、最初のCTAを追加します。 'cta-1'CSSクラス名を割り当てます。

垂直

CTA 2

2番目のCTAには、「cta-2」CSSクラス名を使用します。

垂直

ボタンCTA

ボタンCTAを垂直ナビゲーションに追加するには、テキストだけの通常のメニュー項目よりもいくつかの手順が必要です。 ワンページャーとして使用しているページを開くことから始めて、以下に説明する次の手順に従います。

ランディングページにボタンを作成

垂直ナビゲーションでボタンCTAを使用する場合は、1ページのポケットベルのどこかに同じボタンを配置する必要があります。 作成したら、要素を調べて、Webサイトのコードに表示される次のコード行（作成したボタンにリンクされている）をコピーできます。 

<div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center"> 
<a class="et_pb_button et_pb_button_0 et_pb_module et_pb_bg_layout_light"> 
ORDER NOW 
</a> 
</div>

垂直

もちろん、このコードはスタイルによって異なる場合があります。 また、同じページに他のボタンがあるかどうかによっても異なります。 ボタンは、ボタンが配置されているページに割り当てたスタイルでのみ表示されることに注意してください。 そのため、垂直ナビゲーションにボタンを追加することは、通常、1ページのポケットベルに関係する場合にのみ推奨されます。

注：ボタンモジュール内のボタンのフォントサイズとパディングを調整して、垂直ナビゲーションに完全に収まるようにしてください。

メニュー項目として追加

ボタンにリンクされている必要なHTMLコードをコピーしたので、新しいカスタムリンクを追加し、コードをナビゲーションラベルに追加します。 このメニュー項目に使用しているCSSクラスは「cta-3」です。

垂直

CSSコード行を追加する

この投稿の次の部分では、最終的な結果とレイアウトを実現するのに役立つCSSコード行を共有することに専念しています。 さまざまなメニュー項目に割り当てたCSSクラスを使用していることに気付くでしょう。 ただし、異なるクラス名を使用することにした場合は、CSSコードでそれらを変更して機能させるようにしてください。

CSSコードを追加するには、 WordPressダッシュボード> Divi>テーマオプション> [全般]タブを下にスクロールし、CSSコードの次の行を[カスタムCSS]ボックスに追加します。 

@media only screen and (min-width:992px) {
.et_vertical_nav #page-container #main-header {
margin: 10px !important;
height: 93% !important;
z-index: 9999;
}}
.phone-number {
font-size: 1.9em !important;
font-weight: 400 !important;
}
.address {
font-weight: 300 !important;
}
@media only screen and (min-width:769px){
#main-header div#et-top-navigation {
padding-top: 110px;
height: 100%;
position: static !important;
}}
@media only screen and (min-width:769px){
.et_vertical_nav span.logo_helper {
display: none;
}}
@media only screen and (min-width:769px){
.et_vertical_nav #main-header #logo {
margin-bottom: 28px;
}}
@media only screen and (min-width:769px){
.et_vertical_nav #main-header .container {
margin-left: 25px !important;
margin-right: 25px !important;
height: 100% !important;
}}
.facebook, .instagram, .envelope {
padding: 7px 13px 7px 13px;
font-size: 1.6em;
}
.icon-wrapper a {
display: inline-block !important;
}
.directions {
font-size: 1.2em;
font-weight: 400;
padding-top: 0;
text-align: center;
}
.line {
border-top: 1px solid;
color: #fff;
margin: 8px auto auto;
width: 20%;
}
.hours {
color: #ffffff;
font-size: 10px;
font-weight: 300;
text-align: center;
}
.cta-1 {
margin-top: 5px !important;
font-size: 1.3em;
font-weight: 600;
text-align: center;
}
.cta-2{
font-size: 1.1em;
font-weight: 300;
letter-spacing: 0.02em;
text-align: center;
}
#page-container {
background: #d6d4d1;
}

@media only screen and (max-width:768px) {
.directions, .line, .cta-1, .cta-2, .cta-3 {
display: none !important;
}}

#main-header #top-menu-nav .nav li {
line-height: 10.5px;
}

垂直

セクションの背景色を変更する

あなたがする必要がある最後のステップはあなたの1ページャーのセクションの背景色を変えることです。 この色が、ページコンテナに使用している色と同じであることを確認してください。 この場合、それは「＃d6d4d1」です。

垂直

結果

すべてのメニュー項目と、これらの各メニュー項目にリンクされたCSSコードを追加すると、次の結果が得られるはずです。

垂直

最終的な考え

この投稿では、ポケットベルの垂直ナビゲーションを作成する方法を紹介しました。 この投稿は、Diviで作成されたEat ThaiRestaurantのWebサイトからもインスピレーションを得ています。 投稿全体を段階的に実行した場合は、上記の結果を達成できるはずです。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！

大きなお知らせ、役立つヒント、Diviの景品を見逃さないように、必ずメールマガジンとYouTubeチャンネルを購読してください。

Vectomart /shutterstock.comによる注目の画像