今回はClickFunnelsでナビゲーションメニューバーを作っていきます。
今回お届けするノウハウはこちら
ナビゲーションメニューバーとは
ナビゲーションメニューバーはClickFunnelsやZapierなどのツール系のホームページによくあるのですが、「Features」「Pricing」「Order Now」のような感じでページのトップに各Sectionのメニューが表示されています。今回はこれを応用して、ページ内に各Sectionの見出しのようなものを表示して、クリックするとこの長いセールスページの一部に飛んでいくようなメニューバーを作っていきます。
Step1. 「NAVIGATION」を挿入する
「ADD NEW ELEMENT」をクリックします。ナビゲーションメニューバーは正式名はナビゲーションメニューです。「NAVIGATION」というエレメントを選択してください。ボタンをクリックしてから設定画面が表示されるまで少しタイムラグがあるので、焦らずに待ってください。
今は3つのメニューが表示されていますが、本当は最大で5つ設定することができ、デフォルトでも5つ設定されています。「Features」「Pricing」「Order Now」「About Us」「Resources」がデフォルトで設定されているのですが、今は3つしか表示されていません。これはADVANCEDタブの「STYLES」で「# OF LINKS」を「5 Links」に変えることで設定した5つを全て出せます。これは後で変えていきます。
Step2. SETTINGSタブを設定する
- TOP MARGIN：エレメントの上の余白を調整できます。
- LINK TEXT：クリックする所に表示されるテキストです。今回は用意したものがあるので、これを全部コピーしていきます。「LINK TEXT」の1つ目に「お客様の声」、2つ目に「価格」、3つ目に「About Me」、4つ目に「今すぐ参加する」をコピーします。そうしたらここに表示されたのがわかると思います。次にここのURLの設定をしていきたいのですが、まず始めに内部リンクでスクロールをかけていくので、そのリンク先を設定します。他のページに飛ばすこともできるので、その場合は「LINK URL」に「http://」というURLを普通に入れていただいたらいいのですが、今回は同じページ内の各セクションに飛ばします。そのためにセクション名をわかりやすいものに変更しておきましょう。
- お客様の声：「SETTINGS」から右下の「#」をクリックして「Title:」を「Section-Testimonial」に変更します。
- 価格：価格が書いてあるSectionまで行きます。そうしたらまた「SETTINGS」から右下の「#」をクリックして「Title:」を「Section-Pricing」に変更します。
- 「About Me」と「今すぐ参加する」：同様に「SETTINGS」から右下の「#」をクリックして「Title:」をそれぞれ「Section-aboutme」と「Section-OrderNow」に変更します。この際は必ず「UPDATE」をクリックしてください。
では、もう一度「SETTINGS」に入ります。1つ目の「お客様の声」についての設定をしていきます。「LINK URL」の入力欄をクリックすると自動的にショートコードを表示してくれるので便利です。ClickFunnelsでスクロールも想定していて、スクロールのショートコードも出してくれます。最初に「Testimonial」という名前を付けたので、「#scroll-Section-Testimonial」を選択します。「LINK TARGET」が「Same Window」になっているので、ページ内でジャンプしてくれると思います。
「価格」は「#scroll-PurchaseSection」、「About Me」は「#scroll-Section-aboutme」、「今すぐ参加する」は「#scroll-Section-OrderNow」を選択します。今回は「Resources」は使わないのでそのままにしておきます。
- FONT SIZE：フォントのサイズを変更できます。4つ出すことを想定して少し大きめに設定しておきます。
- LINK COLOR：リンクのカラーを設定できます。今回は緑にしておきます。
Step3. ADVANCEDタブを設定する
STYLESタブです。
- # OF LINKS：「4 Links」にします。
- TEXT WEIGHT：「Normal」でもいいのですが、「Bold」のほうがしっかりした感じが出るので「Bold」を選択します。
- ALIGN：左右の位置を変更できます。今回は中央でいいと思います。
ANIMATIONタブではディレイの設定ができます。大きく上と下に分かれていて、上のほうは1秒以上の比較的大きなディレイを入れることができ、例えば60分のウェビナーで30分のところでピッチが入ったときに、同時に申し込み関係のフォームを出したりする場合に使えます。下のほうはJavaScriptでいうLazy Loadingのような考え方になると思います。ページを読み込むときにふわっとディレイで表示させるような機能です。
「TIMED DELAY」のほうは1秒以上の大きなディレイでしたね。これは効果を2つから選べます。「Fade In」と「Fade In With Scale」のどちらか好きなほうを選んでください。プレデューでテストできるので、例えば時間を1秒に指定するなどしてどのような感じで表示されるのかを確認してみるといいと思います。
「MINUTES」と「SECONDS」の所は、例えば「MINUTES」を「30」、「SECONDS」を「15」にして30分15秒に指定したりできます。
「ANIMATION」の「TYPE」は「On Page Load」と「On Page Scroll (becomes visible)」の2つがあります。「On Page Load」はページの読み込みから起算してディレイを表示してくれる機能です。「STYLE」は「Fade In」の他にも選択肢があるので試してみてください。「DELAY (MS)」はミリセカンド単位で、デフォルトでは500ミリセカンドになっています。「On Page Scroll (becomes visible)」は長いページなどをスクロールしていってそのエレメントの場所まで来たときから起算してディレイを出すという機能です。「STYLE」と「DELAY (MS)」は先ほどと同様です。
うまくいくかどうか見てみます。セーブしてからプレビューしましょう。「お客様の声」をクリックしてみます。ちゃんと該当箇所に飛びました。「価格」「About Me」「今すぐ参加する」も飛びました。ぜひやってみてください。