新しいタブ/ウィンドウでDivi全幅ヘッダーとスライダーボタンを開く方法

公開: 2017-06-06

特定のオーディエンスを引き付けて話すウェブサイトを構築することはプロセスであることは誰もが知っています。それは彼らのカスタマージャーニーの一部であるため、彼らがあなたのウェブサイトで取るすべての行動は重要です。すべての訪問者、および潜在的なクライアントは、個人的にアプローチされ、理解されていると感じる必要があります。

あなたのウェブサイトを適切なものにするためには、優れたデザイン、よく考えられたコンテンツ、そして間違いなく十分なCTAが必要です。これにより、訪問者はあなたと彼らの両方が望む行動を取るようになります。

Webサイトでの行動の呼びかけをサポートする最もよく使用される要素の1つは、ボタンです。通常、ボタンはWebサイトのさまざまなセクションにあります。それらは、Webサイトのさまざまな部分につながる可能性があり、または訪問者を外部Webサイトに紹介する可能性があります。

Diviを使用すると、Webサイトを作成する各人が、好きな場所に好きなだけボタンを含めることができます。ターゲットオーディエンスとすばやく関わりたい場合や、Webサイトへのアクセスの開始からすぐに好奇心を刺激したい場合は、ヒーローセクションにCTAを追加することをお勧めします。

新しいタブ/ウィンドウでリンクを自動的に開く必要があるのはなぜですか？

新しいウィンドウでリンクを開くことに影響を与えることはできません。これは、過去に多くの人が誤用していたことであり、現在では、すべてユーザーの好みに依存しています。ただし、同じウィンドウではなく、新しいタブで特定のリンクを開くオプションがあります。新しいタブでリンクを開きたい理由はたくさんありますが、そのいくつかを次に示します。

あなたの訪問者をウェブサイトから逃がさないようにする

あなたがあなたの訪問者を失った瞬間、あなたのウェブサイトに彼らを再び戻すことはとても難しいです。これは通常、ボタンをクリックしたときに同じウィンドウ内の外部Webサイトに送信する場合に当てはまります。

それで、なぜそもそもそれらを送り出すのですか？新しいタブでボタンを開くことにより、タブにWebサイトがあるページが開いたままになっていることを確認できます。彼らは彼らの歴史を経ることなくあなたのページに戻ることができます。

彼らが開いたリンクを閉じた後、あなたのウェブサイトで彼らの滞在を続ける

何かを読み終えるたびにタブを閉じるのは自然なことです。それか、クリックしているだけです。どちらの状況でも、彼らが次の行動に移った瞬間から、彼らはあなたからもう一歩離れています。

新しいタブまたはウィンドウでリンクを自動的に開くと、そもそもどこかに着陸したことを人々に思い出させるのに役立ちます。あなたのウェブサイトを通して。

後で開いているタブを拾う

あなたは何日も隣同士にたくさんのタブを並べた最初の人ではないでしょう。それこそが、あなたのブラウザにあなたのブラウザを表示し続けることが価値のある理由です。訪問者が数日後に開いているタブであなたのウェブサイトを見つけた場合、彼らはあなたのコンテンツを沈めて別のラウンドを与える時間があったかもしれません。

2回目、3回目、または4回目に読んだときに、コンテンツがはるかに理解される可能性があります。

はじめに：新しいタブで全幅のヘッダーとスライダーのボタンを開く

全幅ヘッダーまたは全幅スライダーを備えた全幅セクションを使用していない場合、通常は標準セクションを追加し、それにボタンモジュールを手動で追加します。各ボタンモジュールの[コンテンツ]タブで、同じウィンドウでリンクを開くか、新しいタブで開くかを選択できます。このオプションは、[コンテンツ]タブの[リンク]サブカテゴリにあります。

全幅ヘッダーとスライダーには、これらの可能性は含まれていません。また、HTMLは事前定義されているため、それに付随するHTMLコードを単純に変更することはできません。そのため、全幅ヘッダーボタンと全幅スライダーボタンの両方を新しいタブ/ウィンドウで開くjQueryコードを追加します。

全幅ヘッダーの作成

既存または新しいページに新しい全幅セクションを追加することから始めましょう。

その全幅セクション内で、全幅ヘッダーを選択します。全幅ヘッダーは、必要なものがすべて揃った美しいヘッダーをWebサイトに提供します。次に、全幅ヘッダーの[コンテンツ]タブを下にスクロールして、ボタンに表示するテキストを書き留めます。その後、ボタンへのリンクも追加します。

次に、[全幅]ヘッダーの[詳細設定]タブに移動し、ボタンフィールドが表示されるまで下にスクロールします。この場合、ボタン番号1のみを使用します。新しいタブで2番目のボタンを開きたい場合は、ボタン2に割り当てられているクラスを使用する必要があります。

Button Oneフィールドをクリックして、クラスがオレンジ色のフォントで表示されるのを確認します。クラスは「.et_pb_fullwidth_header_0.header-content-container.header-content.et_pb_button_one.et_pb_button」です。 jQueryコードでこのクラスが必要になります。 2番目のボタンを新しいタブまたはウィンドウで開く場合は、先に進んでそのクラスをどこかに保存します。

全幅スライダーの作成

代わりに全幅スライダーを追加する場合は、先に進んで新しい全幅セクションを追加してください。今回は、セクションに全幅スライダーを配置します。 [コンテンツ]タブにボタンのテキストを書き留めて、[詳細設定]タブに移動します。

スライドボタンオプションが見つかるまで、そのタブを下にスクロールします。全幅スライダーの一部であるボタンの割り当てられたクラスをコピーします。

DiviテーマオプションへのjQueryコードの追加

全幅ヘッダーとスライダーの新しいタブでリンクを開くために使用するコードは異なります。さらに、2つの異なる方法でjQueryコードをWebサイトに統合することもできます。最も一般的なのは、DiviWebサイトのテーマオプションにコードを追加することです。

このオプションを最も頻繁に使用する理由は、Webサイト全体に適用されるためです。サイトのどのページにいても、コードが適用されます。 Webサイトの異なるページで特定のセクションまたは要素を再利用する場合は、Webサイトにカスタムコードを追加する最も簡単な方法です。

Webサイト全体にコードを追加するには、 [Divi]> [テーマオプション]> [統合]に移動し、次のコードをWebサイトの<head>に追加します。

全幅ヘッダーボタンのjQueryコード

<script>
jQuery(function($){
$('.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button').attr('target', '_blank');
});
</script>

全幅スライダーボタンのjQueryコード

<script>
jQuery(function($){
$('.et_pb_slide_0.et_pb_slide .et_pb_container a.et_pb_more_button.et_pb_button').attr('target', '_blank');
});
</script>

上記の印刷画面に示すように、<script>タグの間にテキストを追加することを忘れないでください。

お気づきのように、全幅ヘッダーと全幅スライダーのコードは少し異なります。コードの3行目の角かっこで囲まれた各ボタンのクラスがどのように記述されているかがわかります。したがって、コードを全幅ヘッダーの2番目のボタンに適用したいとします。記述されたクラスを、2番目のボタンに割り当てられたクラスに置き換えるだけです。

その後、変更を保存します。コードはすぐにウェブサイト全体に適用されます。

コードモジュールへのjQueryコードの追加

Webサイトにコードを追加する別の可能性は、コードモジュールを使用することです。このモジュールは通常、含めるコードが1ページにのみ適用される場合に使用されます。

変更を適用するページを開き、ページの上部に1列の行を追加します。その後、その行にコードモジュールを追加します。

同じコードをコピーして、[コンテンツ]タブの[テキスト]サブカテゴリ内の[コンテンツボックス]に貼り付けます。

全幅ヘッダーボタンのjQueryコード

<script>
jQuery(function($){
$('.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button').attr('target', '_blank');
});
</script>

全幅スライダーボタンのjQueryコード

<script>
jQuery(function($){
$('.et_pb_slide_0.et_pb_slide .et_pb_container a.et_pb_more_button.et_pb_button').attr('target', '_blank');
});
</script>

変更を保存します。

上記の印刷画面に示すように、<script>タグの間にテキストを追加することを忘れないでください。コードは、Webサイトのそのページにのみ適用されます。

最終的な考え

次のコードをWebサイトに追加する必要があるのは、全幅セクションで全幅ヘッダーとスライダーを使用しているときにボタンを新しいタブで開く場合のみです。ボタンモジュールを使用すると、Divi Builder内にオプションが含まれ、新しいタブでリンクを開くことを選択できます。

Webサイトの複数のページでコードを使用する場合は、Webサイトのテーマオプションにコードを追加します。ただし、1つの全幅ヘッダーまたは全幅スライダーのコードのみを使用している場合は、その特定のページのコードモジュールにコードを追加する方がよい場合があります。

リンクを新しいタブで開く頻度とその理由を教えてください。 以下のコメントセクションでお知らせください！