Diviのテーマビルダーを使用してカスタムグローバルヘッダーを作成する方法

テーマビルダーがここにあるので、WebサイトをAからZにセットアップするのに役立つ新しいチュートリアルに飛び込むのが待ちきれません。これには、Diviの組み込みオプションを使用したカスタムヘッダーの作成が含まれます。 このチュートリアルでは、Diviのテーマビルダーを使用してグローバルヘッダーを作成することに焦点を当てます。 そのページまたは投稿に別のヘッダーを割り当てていない限り、グローバルヘッダーはWebサイトのいたるところに表示されます。

それを手に入れよう！

プレビュー

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

デスクトップ

モバイル

カスタムヘッダーデザインを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

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

1.プライマリメニューを設定します

WordPressWebサイトの外観設定でメニューを作成することから始めます。

2.テーマビルダーオプションに移動します

次に、Diviのテーマオプションでテーマビルダーに移動します。 そこに到達すると、空のデフォルトのWebサイトテンプレートに気付くでしょう。

3.グローバルヘッダーの追加と構築

デフォルトのWebサイトテンプレートでは、カスタムグローバルヘッダー、グローバルボディ、およびグローバルフッターの作成を開始できます。 [グローバルヘッダーの追加]をクリックし、[グローバルヘッダーの作成]をクリックして続行して、プロセスを開始します。

セクション設定

サイジング

ページに表示されているセクションを開き、[デザイン]タブに移動して、さまざまな画面サイズで幅を変更します。

• 幅：100％
• 最大幅：1280px（デスクトップ）、100％（タブレットと電話）

間隔

次に、デフォルトの上下のパディングをすべて削除します。

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

国境

次のセクションの左下隅と右下隅に境界線の半径を追加します。

• 左下：50px
• 右下：50px

ボックスシャドウ

微妙なボックスシャドウも追加しています。

• ボックスシャドウブラー強度：60px
• 影の色：rgba（0,0,0,0.13）

可視性

次に、[詳細設定]タブに移動し、オーバーフローを非表示にします。 zインデックスも増やします。これにより、セクションがすべてのページコンテンツの上に表示されたままになります。

• 水平方向のオーバーフロー：目に見える
• 垂直オーバーフロー：目に見える
• Zインデックス：99999

4.新しい行をヘッダー専用にします

一般的なセクション設定が完了したので、行の追加を開始できます。 合計で2つの行が必要になります。 1つはヘッダー専用で、もう1つはメニュー項目を表示できるようにします。 次の列構造を使用して新しい行を追加することから、ヘッダーから始めます。

行設定

背景色

行にモジュールを追加せずに、行の設定を開き、背景色を変更します。

• 背景色：＃38383f

サイジング

次に、行のサイズ設定を変更します。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 幅：100％
• 最大幅：100％

画面

また、行のメイン要素に1行のCSSコードを追加して、小さい画面サイズでも列が隣り合って表示されるようにします。

display: flex;

列1に画像モジュールを追加

ロゴをアップロード

行の設定が完了したら、モジュールの追加を開始します。 列1に画像モジュールを追加し、ロゴをアップロードします。

配置

[デザイン]タブに移動し、左の画像配置を使用していることを確認します。

• 画像の配置：左

サイジング

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

• 幅：100px

間隔

また、さまざまな画面サイズにカスタムマージン値を追加します。

• トップマージン：5px
• 左マージン：50px（デスクトップ）、20px（タブレットと電話）

ソーシャルメディアフォローモジュールを列2に追加

ソーシャルネットワークを追加する

2番目の列に進みます。 そこで、ソーシャルメディアフォローモジュールが必要になります。 選択したソーシャルネットワークを追加します。

ソーシャルネットワークの背景色

次に、各ソーシャルネットワークを個別に開き、背景色を完全に透明な色に変更します。

• 背景色：rgba（0,0,0,0）

配置

モジュールの通常の設定に戻り、次にモジュール全体の配置を変更します。

• モジュールの配置：中央

アイコン

アイコンの設定も変更します。

• アイコンの色：#ffffff
• カスタムアイコンサイズを使用：はい
• アイコンのフォントサイズ：16px（デスクトップとタブレット）、12px（電話）

間隔

そして、トップマージンを追加します。

• トップマージン：10px

ボタンモジュールを列3に追加

コピーを追加

3番目の列に移動し、選択したコピーを含むボタンモジュールを追加します。

配置

デザインタブでボタンの配置を変更します。

• ボタンの配置：右

ボタンの設定

それに応じてボタン設定のスタイルを設定します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：12px（デスクトップ）、10px（タブレット）、8px（電話）
• ボタンのテキストの色：#ffffff
• ボタンの背景色：＃ffae25
• ボタンの境界線の幅：0px

• ボタンの境界線半径：0px
• ボタンの文字間隔：5px（デスクトップ）、3px（タブレットと電話）
• ボタンフォント：Sansを開く
• ボタンのフォントの太さ：太字
• ボタンのフォントスタイル：大文字

間隔

また、さまざまな画面サイズにカスタムパディング値を追加します。

• トップパディング：20px
• ボトムパディング：20px
• 左パディング：50px（デスクトップとタブレット）、15px（電話）
• 右パディング：50px（デスクトップとタブレット）、15px（電話）

5.新しい行をメニューバー専用にします

グローバルヘッダー専用の行が完成したら、次の列構造を使用して、そのすぐ下に別の行を追加できます。

行設定

サイジング

モジュールをまだ追加せずに、行設定を開き、デザインタブでサイズ設定を変更します。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 幅：100％
• 最大幅：100％

間隔

次に、デフォルトの上下のパディングをすべて削除します。

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

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

メニューを選択

次に、メニューモジュールを列に追加し、このチュートリアルの最初の部分で作成したメニューを選択します。

レイアウト

[デザイン]タブに移動し、次のようにレイアウト設定を変更します。

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

リンク

デザインタブでもアクティブなリンクの色を変更します。

• アクティブリンクの色：＃ffae25

ドロップダウンメニュー

ドロップダウンメニュー設定のドロップダウンメニューの線の色についても同じようにします。

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

アイコン

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

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

メニューテキスト

メニューのテキスト設定と一緒に。

• メニューフォント：プラタ
• メニューテキストの色：＃000000

6.ヘッダーとメニューバーを上に貼り付ける

セクション設定を開く

2行目を完了したら、あとはセクションをページと投稿の上部に固定するだけです。 そのために、セクション設定を再度開きます。

メイン要素にカスタムCSSを追加する

次に、[詳細設定]タブに移動し、セクションのメイン要素に数行のCSSコードを追加します。

position: fixed;
top: 0;
left: 0;
right: 0;

7.グローバルヘッダーとテーマビルダーのオプションを保存します

グローバルヘッダーデザイン全体が完成したら、テンプレートレイアウトを終了する前に、必ずデザインを保存してください。 テンプレートレイアウトの外に出たら、テーマビルダー全体の変更を保存すれば完了です。

プレビュー

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

デスクトップ

モバイル

最終的な考え

この投稿では、Diviの新しいテーマビルダーを使用してカスタムグローバルヘッダーを作成する方法を紹介しました。 このチュートリアルでは、美しいヘッダーを作成して、それらをWebサイト全体または特定のカスタム投稿タイプに適用することがいかに簡単であるかを示します。 このチュートリアルが、テーマビルダーをすぐに使い始めるきっかけになることを願っています。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

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