カスタムDiviヘッダーのメニュー項目に「新規」または「注目」のコーナーラベルを追加する方法

公開: 2020-06-24

Webサイトのヘッダーを作成するときは、訪問者の行動に特別な注意を払うことで、クリック率を高めることができます。ヘッダーの見栄えが良いだけでなく、訪問者をWebサイトの最も重要なページに誘導するのにも役立ちます。よく使用される手法は、グローバルヘッダー内に召喚状を追加することですが、それだけが選択肢ではありません。スポットライトを当てたいメニュー項目のコーナーラベルを選択することもできます。このチュートリアルでは、特定のメニュー項目に「注目」または「新規」のラベルを追加する方法を示します。これらのコーナーラベルは、リスト内のメニュー項目を強調するのに役立ちます。これにより、訪問者が好奇心を持ってクリックスルーする変化が大きくなります。グローバルヘッダーテンプレートもダウンロードできます！

それを手に入れましょう。

プレビュー

チュートリアルに入る前に、さまざまな画面サイズにわたるチュートリアルの概念を簡単に見てみましょう。

コーナーラベル

グローバルヘッダーテンプレートを無料でダウンロード

無料のグローバルヘッダーテンプレートを入手するには、まず下のボタンを使用してダウンロードする必要があります。ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

正常にサブスクライブしました。メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

1.WordPressメニュー項目にラベルを追加する

外観のメニューに移動

このチュートリアルの最初の部分は、WordPressメニュー内のラベルの設定に専念しています。これを行うには、WordPressダッシュボード>メニュー>使用しているプライマリメニューを開くか、新しいメニューを作成します。

コーナーラベル

注目のメニュー項目にラベルを追加

次に、メニュー項目の前にラベルHTMLタグを配置することにより、選択したメニュー項目に注目ラベルを追加します。

<label class="menu-label featured-label">Featured</label>

サービス

コーナーラベル

新しいメニュー項目にラベルを追加

選択した別のメニュー項目についても同じことを行い、ラベルのコピーとともにタグ内のCSSクラスを変更します。

<label class="menu-label new-label">New</label>

無料コース

コーナーラベル

2.Diviテーマビルダーに移動します

Divi Theme Builderに移動し、グローバルヘッダーを追加します

ラベルが設定されたので、Diviに切り替えます。 WebサイトのDiviテーマビルダーに移動し、[グローバルヘッダーの追加]をクリックします。

コーナーラベル

ゼロから構築を開始

次に、「BuildGlobalHeader」を選択してテンプレートエディタにリダイレクトします。

コーナーラベル

3.グローバルヘッダーを作成します

セクション設定

背景色

テンプレートエディタに入ると、セクションが表示されます。そのセクションを開き、背景色を追加します。作成するヘッダーデザインはTutorLayout Packとうまく調和しますが、コードモジュール（後で）が含まれている限り、任意のヘッダーデザインを自由に作成できます。

背景色：＃2a3749

コーナーラベル

間隔

セクションの[デザイン]タブに移動し、間隔設定のデフォルトの上下のパディングをすべて削除します。

トップパディング：0px
ボトムパディング：0px

コーナーラベル

可視性

行にオーバーラップを追加するため（プレビューでわかるように）、セクションのオーバーフローを表示に設定する必要があります。

水平方向のオーバーフロー：目に見える
垂直オーバーフロー：目に見える

コーナーラベル

新しい行を追加

カラム構造

次の列構造を使用して、セクションに新しい行を追加して続行します。

コーナーラベル

背景色

モジュールをまだ追加せずに、行設定を開き、白い背景色を適用します。

背景色：#FFFFFF

コーナーラベル

サイジング

[デザイン]タブに移動し、それに応じてサイズ設定を変更します。

カスタムガター幅を使用：はい
側溝幅：1

コーナーラベル

間隔

間隔設定にもいくつかのカスタムパディング値を適用します。

トップパディング：25px
ボトムパディング：25px
左パディング：50px
右パディング：50px

コーナーラベル

国境

いくつかの丸い角と一緒に。

すべてのコーナー：6px

コーナーラベル

ボックスシャドウ

そして微妙なボックスシャドウ。

ボックスシャドウの垂直位置：16px
影の色：rgba（0,0,0,0.07）

コーナーラベル

変換翻訳

次に、[デザイン]タブの変換変換設定を使用して行を再配置します。

変換右：50px

コーナーラベル

オーバーフロー

ドロップダウンが小さい画面サイズで確実に表示されるように、オーバーフローを表示に設定して行の設定を完了します。

水平方向のオーバーフロー：目に見える
垂直オーバーフロー：目に見える

コーナーラベル

メニューモジュールを列に追加

メニューを選択

メニューモジュールを追加します。このチュートリアルの最初の部分で編集したメニューを選択します。

コーナーラベル

ロゴをアップロード

次にロゴをアップロードします。

コーナーラベル

メニューテキスト設定

次に、[デザイン]タブに移動し、メニューテキストの設定を次のように変更します。

メニューフォント：PT Sans
メニューテキストの色：＃000000
メニューテキストサイズ：16px
テキストの配置：右

コーナーラベル

ドロップダウンメニューの設定

ドロップダウンメニューの線の色も変更します。

ドロップダウンメニューの線の色：＃007aff

コーナーラベル

アイコン

アイコン設定でハンバーガーメニューのアイコンの色を変更して続行します。

ハンバーガーメニューアイコンの色：＃007aff

コーナーラベル

サイジング

そして、サイズ設定にロゴの最大幅を割り当てて、モジュール設定を完了します。

ロゴの最大幅：40％

コーナーラベル

コードモジュールを列に追加

メニューモジュールの全体的なルックアンドフィールが完了したら、そのすぐ下にコードモジュールを追加して続行します。

コーナーラベル

CSSコードを追加する

次のCSSコードは、メニューラベルを個別にスタイル設定し、レスポンシブデザインを作成するのに役立ちます。

<style>
 
.menu-label {
text-transform: uppercase;
color: #fff;
letter-spacing: 1px;   
border-radius: 5px;    
font-size: 10px;  
padding: 5px 10px;  
}  
  
.featured-label {
background-color: #F9654D;
}
.new-label {
background-color: #007AFF;
}
 
.et_pb_menu .et_pb_menu__menu, 
.et_pb_menu .et_pb_menu__menu>nav, 
.et_pb_menu--style-left_aligned.et_pb_text_align_right .et_pb_menu__menu>nav>ul {
width: 100% !important;
}

.et_pb_menu .et_pb_menu__menu>nav>ul>li
{
padding-left: 15px !important;
padding-right: 15px !important;
}

@media all and (min-width: 980px) {
.menu-label {  
position: absolute;
top: -10px;  
padding: 8px 15px;
}

}
@media all and (max-width: 980px) {  
.menu-label {
position: relative;
float: right;
font-size: 12px;  
padding: 5px 20px;   
}
}
  
</style>

コーナーラベル

4.すべてのテーマビルダーの変更とプレビュー結果を保存します

ヘッダーのデザインが完了したら、Webサイトで結果を表示する前に、Divi ThemeBuilderの変更をすべて保存してください。

コーナーラベル

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を簡単に見てみましょう。

コーナーラベル

最終的な考え

この投稿では、Diviで構築されたグローバルヘッダー内の特定のメニュー項目を強調表示する方法を示しました。具体的には、メニューモジュール内に表示されるWordPressメニューにコーナーラベルを含めました。これは、圧倒的なナビゲーションジャーニーを作成せずに、メニュー内のさまざまなメニュー項目を強調表示するための優れた方法です。 JSONファイルも無料でダウンロードできました！ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。

カスタムDiviヘッダーのメニュー項目に「新規」または「注目」のコーナーラベルを追加する方法

プレビュー

グローバルヘッダーテンプレートを無料でダウンロード

無料でダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

1.WordPressメニュー項目にラベルを追加する

外観のメニューに移動

注目のメニュー項目にラベルを追加

新しいメニュー項目にラベルを追加

2.Diviテーマビルダーに移動します

Divi Theme Builderに移動し、グローバルヘッダーを追加します

ゼロから構築を開始

3.グローバルヘッダーを作成します

セクション設定

背景色

間隔

可視性

新しい行を追加

カラム構造

背景色

サイジング

間隔

国境

ボックスシャドウ

変換翻訳

オーバーフロー

メニューモジュールを列に追加

メニューを選択

ロゴをアップロード

メニューテキスト設定

ドロップダウンメニューの設定

アイコン

サイジング

コードモジュールを列に追加

CSSコードを追加する

4.すべてのテーマビルダーの変更とプレビュー結果を保存します

プレビュー

最終的な考え

正常にサブスクライブしました。メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。