Diviのテーマビルダーを使用してグローバルな透明なフローティングメニューバーを作成する方法

ページのヒーローセクションの上にグローバルヘッダーを配置する方法をお探しですか？ 今日のDiviチュートリアルでは、その方法を正確に説明します。 （Diviのテーマビルダーを使用して）見事なグローバルヘッダーを最初から再作成し、メニューバーにフローティング効果を適用します。 JSONファイルも無料でダウンロードできます！

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

プレビュー

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

デスクトップ

モバイル

フローティングメニューバーのグローバルヘッダーテンプレートを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

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

1. Diviテーマビルダーに移動し、新しいテンプレートを追加します

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

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

グローバルヘッダーの作成を開始します

次に、[グローバルヘッダーの追加]をクリックし、[グローバルヘッダーの作成]を選択して続行します。

2.グローバルヘッダーの作成を開始します

セクション設定

背景色

テンプレートエディタに入ると、ページにセクションが表示されます。 そのセクションを開き、背景色を完全に透明な色に変更します。 これにより、セクションの下のすべてが透けて見えます。

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

サイジング

次にセクションのデザインタブに移動し、幅を変更します。

• 幅：100％

間隔

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

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

Zインデックス

また、セクションがすべてのヒーローセクションのコンテンツの上位にあることを確認するには、可視性設定でセクションのzインデックスを増やす必要があります。

• Zインデックス：99999

新しい行を追加

カラム構造

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

サイジング

モジュールをまだ追加せずに、行設定を開き、次のようにサイズ設定を変更します。

• 列の高さを等しくする：はい
• 幅：100％
• 最大幅：100％

間隔

次に、カスタムの上部と下部のパディングを追加します。

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

主な要素

次に、[詳細設定]タブに移動し、行のメイン要素に1行のCSSコードを追加して、小さい画面サイズで列が隣り合っていることを確認します。

display: flex;

列2

背景色

列2の設定を開いて続行し、背景色を半透明に変更します。

• 背景色：rgba（255,255,255,0.71）

国境

列にも下の境界線を追加します。

• 下の境界線の幅：2px
• 下の境界線の色：＃f4583f

ボックスシャドウ

そして、微妙なボックスシャドウを追加してフローティング効果を作成します。

• ボックスシャドウの垂直位置：20px
• ボックスシャドウブラー強度：50px
• ボックスシャドウスプレッド強度：-20px
• 影の色：rgba（0,0,0,0.23）

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

ロゴをアップロード

行と列の設定が完了したら、列1の画像モジュールから始めてモジュールを追加します。背景が透明なロゴをアップロードします。

配置

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

• 画像の配置：中央

サイジング

サイズ設定でもモジュールの幅を変更します。

• 幅：8vw（デスクトップ）、14vw（タブレット）、21vw（電話）

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

メニューを選択

次の列に進みます。 そこで必要なモジュールはメニューモジュールだけです。 お好みのメニューを選択してください。

背景色を削除する

次に、背景設定に移動し、背景色を削除します。

レイアウト

モジュールの[デザイン]タブに移動し、レイアウトを変更します。

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

メニューテキスト

メニューのテキスト設定もスタイル設定します。

• メニューフォント：Muli
• メニューテキストの色：＃6f6666
• メニューテキストサイズ：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）

ドロップダウンメニュー

次に、ドロップダウンメニューの設定を変更します。

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

アイコン

アイコン設定のハンバーガーメニューアイコンの色に同じ色を使用します。

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

間隔

間隔設定に上部と下部のパディングを追加して、モジュールの設定を完了します。

• トップパディング：1.5vw
• ボトムパディング：1.5vw

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

コピーを追加

次の最後の列に進みます。 選択したコピーを含むボタンモジュールを追加します。

配置

次に、モジュールの配置を変更します。

• ボタンの配置：中央

ボタンの設定

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

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

• ボタンフォント：Muli
• ボタンのフォントの太さ：太字

間隔

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

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

追加のセクション設定

デフォルトのメイン要素

全体的な設計が完了したら、やるべきことが1つ残っています。 ページコンテンツの上にセクションを配置します。 そのためには、セクションのメイン要素に2行のCSSコードを追加する必要があります。

position: absolute;
top: 0;

メイン要素をホバーします

メイン要素のホバーオプションに、同じ行のCSSコードを追加してください。 これにより、セクションにカーソルを合わせると、セクションがちらつくのを防ぐことができます。

position: absolute;
top: 0;

3.ビルダーの変更を保存して結果を表示する

セクションを完了すると、グローバルヘッダーを保存して、Webサイトで結果を表示できます。

プレビュー

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

デスクトップ

モバイル

最終的な考え

この投稿では、Diviのテーマビルダーを使用してフローティングメニューバーを作成する方法を紹介しました。 これは、ヘッダーセクションとヒーローセクションをブレンドするのに最適な方法です。 ヘッダーは、ページまたは投稿の最初のセクションの上に配置されます。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！

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