Diviグローバルヘッダーに2つのサイドバイサイドボタンを追加する方法

ほとんどのウェブサイトでは、ページに明確な行動を促すフレーズを用意する必要があります。 そして、ヘッダーに配置するよりも、最も重要なCTAのいくつかに注意を引くためのより良い方法はありますか？ 今日のチュートリアルでは、Diviのテーマビルダーを使用して、グローバルヘッダーに2つのボタンを並べて追加する方法を示します。 ボタンの1つはプライマリで、もう1つはセカンダリです。 グローバルヘッダーのJSONファイルも無料でダウンロードできます！

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

プレビュー

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

デスクトップ

モバイル

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

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

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

無料でダウンロード

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

ダウンロード

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

1. Diviテーマビルダーに移動し、グローバルヘッダーを作成します

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

まず、Divi Theme Builderに移動し、[グローバルヘッダーの追加]をクリックします。

グローバルヘッダーを作成する

[グローバルヘッダーの作成]をクリックして続行します。

2.グローバルヘッダーデザインを構築する

新しいセクションを追加

間隔

テンプレートエディタに入ると、セクションが表示されます。 セクション設定を開き、デフォルトの上部と下部のパディングをすべて削除します。

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

Zインデックス

可視性設定でもセクションのzインデックスを増やすようにしてください。 これにより、グローバルヘッダーコンテンツがすべてのページと投稿コンテンツの上部に表示されるようになります。

• Zインデックス：99999

新しい行を追加

カラム構造

セクションの設定が完了したら、次の列構造を使用してセクションに新しい行を追加します。

サイジング

モジュールを追加せずに、行設定を開き、行がセクションコンテナの幅全体を占めるようにします。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 列の高さを等しくする：はい
• 幅：100％
• 最大幅：100％

間隔

行の左右のパディング値も変更します。

• 左パディング：2vw（デスクトップ）、10vw（タブレットと電話）
• 右パディング：2vw（デスクトップ）、10vw（タブレットと電話）

主な要素

すべての列コンテンツを中央に配置するために、これら2行のCSSコードを行のメイン要素に追加します。

display: flex;
align-items: center;

タブレットとモバイルのデスクトップ表示プロパティを削除します。

display: block;

列1

国境

列1の設定を開いて続行し、デスクトップにのみ右の境界線を追加します。

• 右の境界線の幅：1px（デスクトップ）、0px（タブレットと電話）
• 右の境界線の色：＃d8d8d8

Zインデックス

列のzインデックスも増やします。

• Zインデックス：11

列2

主な要素

次に、列2の設定を開き、次の行のCSSコードを列のメイン要素に追加して2つの列に変換します。

display: grid;
grid-template-columns: 50% 50%;

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

メニューを選択

モジュールの追加を開始する時が来ました！ メニューモジュールを列1に追加し、選択したメニューを選択します。

ロゴをアップロード

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

レイアウト

モジュールの[デザイン]タブに移動し、次のレイアウト設定が適用されることを確認します。

• スタイル：左揃え
• ドロップダウンメニューの方向：下向き

メニューテキスト

次にメニューテキスト設定を変更します。

• アクティブリンクの色：＃ef6f49
• メニューフォント：Montserrat
• メニューフォントの太さ：半太字
• メニューのフォントスタイル：大文字
• メニューテキストの色：＃333333（デフォルト）、＃ef6f49（ホバー）
• メニューテキストサイズ：0.7vw（デスクトップ）、1.8vw（タブレット）、2.5vw（電話）
• メニューの文字間隔：1px

ドロップダウンメニューテキスト

ドロップダウンメニューのテキスト設定にもいくつか変更を加えます。

• ドロップダウンメニューの背景色：#ffffff
• ドロップダウンメニューの線の色：＃ef6f49

アイコン

次に、ハンバーガーメニューのアイコンの色を変更します。

• ハンバーガーメニューアイコンの色：＃000000

サイジング

サイズ設定にもロゴの最大幅を追加します。

• ロゴの最大幅：9vw（デスクトップ）、12vw（タブレット）、15vw（電話）

メニューロゴCSS

そして、[詳細設定]タブのメニューロゴに1行のCSSコードを追加して、モジュールの設定を完了します。

margin-right: 10vw;

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

モジュールにカスタムCSSコードを追加する

列1で必要な次の最後のモジュールは、コードモジュールです。 次のCSSコード行を追加して、メニュー項目間のスペースをカスタマイズします。

<style>
.et-menu>li {
padding-left: 1.5vw !important;
padding-right: 1.5vw !important;
}
</style>

ボタンモジュール＃1を列2に追加

コピーを追加

次のモジュールへ！ 最初のボタンモジュールを追加し、選択したコピーを入力します。

リンクを追加

次に、ボタンモジュールへのリンクを追加します。

配置

モジュールのデザインタブに移動し、ボタンの配置を変更します。

• ボタンの配置：右

ボタンの設定

ボタンのスタイルも設定します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：0.8vw（デスクトップ）、1.7vw（タブレット）、2.5vw（電話）
• ボタンのテキストの色：＃000000
• ボタンの背景色：＃edeef0（デフォルト）、＃d6d7d8（ホバー）
• ボタンの境界線の幅：0px

• ボタンの境界線半径：0px
• ボタンの文字間隔：2px
• ボタンフォント：Montserrat
• ボタンのフォントの太さ：半太字
• ボタンのフォントスタイル：大文字

間隔

さまざまな画面サイズにカスタムパディング値を追加して、モジュールの設定を完了します。

• トップパディング：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
• 下部のパディング：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
• 左パディング：2vw（デスクトップ）、4vw（タブレット）、6vw（電話）
• 右パディング：2vw（デスクトップ）、4vw（タブレット）、6vw（電話）

クローンボタンモジュール

最初のボタンモジュールが完了したら、クローンを作成します。

リンクを変更

複製したボタンモジュールを開き、URLを変更します。

配置を変更する

モジュールの配置も変更します。

• ボタンの配置：左

ボタン設定の変更

ボタンの設定にもいくつか変更を加えます。

• ボタンのテキストの色：#ffffff
• ボタンの背景色：＃ef6f49（デフォルト）、＃e06945（ホバー）

ホバー変換スケール

変換スケールのホバー効果を追加して、ボタンの設定を完了します。

• 右：110％
• 下：110％

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

グローバルヘッダーが完成したら、すべてのテーマビルダーの変更を保存し、Webサイトで結果を表示します。

プレビュー

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

デスクトップ

モバイル

最終的な考え

このチュートリアルでは、Diviのテーマビルダーを使用して、グローバルヘッダーに2つのボタンを並べて追加する方法を示しました。 追加したボタンの1つはプライマリボタンで、もう1つはセカンダリボタンです。 グローバルヘッダーにボタンを追加すると、Webサイトの最も重要なCTAのいくつかを強調するのに役立ちます。 JSONファイルも無料でダウンロードできました！ ご不明な点がございましたら、下のコメント欄にコメントを残してください。

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