Diviを使用してスクロールで透明ヘッダーをスティッキーにする方法

あなたのウェブサイトのグローバルヘッダーを設定することになると、それにアプローチする多くの方法があります。 より微妙なアプローチの1つは、透過ヘッダーです。 透明なヘッダーはページのヒーローセクションの上に配置されます。これにより、最小限でありながら明確なアプローチに焦点を当てた美しいデザインにつながる可能性があります。 透明なヘッダーを使用することにしたが、スクロールにスティッキーヘッダーが必要な場合は、このチュートリアルを気に入るはずです。 Diviの組み込みのスティッキーオプションを使用して、スクロールで透明ヘッダーから異なるスタイルのスティッキーヘッダーに移行する方法を示します。 透明と粘着性の間の移行は簡単です！ JSONファイルも無料でダウンロードできます。

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

プレビュー

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

デスクトップ

モバイル

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

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

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

無料でダウンロード

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

ダウンロード

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

1.新しいヘッダーテンプレート内にヘッダー要素構造を構築する

新しいグローバルヘッダーテンプレートを作成する

まず、Diviテーマビルダーに移動します。 そこで、新しいグローバルヘッダーまたはカスタムヘッダーの作成を開始します。

セクション＃1設定

背景色

テンプレートエディタに入ると、セクションが表示されます。 このセクションは、この投稿のプレビューで気付くことができる上部のヘッダーバー専用になります。 セクションの設定を開き、黒い背景色を追加します。

• 背景色：＃000000

間隔

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

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

新しい行を追加

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

列にテキストモジュールを追加

コンテンツを追加する

行の列にテキストモジュールを追加し、選択したコピーを入力します。

テキスト設定

モジュールの[デザイン]タブに移動し、それに応じてテキスト設定を変更します。

• テキストフォント：Oswald
• テキストフォントスタイル：大文字
• テキストの色：#ffffff
• 文字サイズ：
  • デスクトップ：19px
  • タブレット：18px
  • 電話番号：16px
• テキストの配置：中央

セクション＃2を追加

間隔

最初のセクションのすぐ下に、別の通常のセクションを追加します。 このセクションでは、スクロールするとスティッキーになる透明なメニューについて説明します。 セクション設定を開き、デザインタブのデフォルトの上下のパディングをすべて削除します。

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

新しい行を追加

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

透明な背景色

行の設定を開き、完全に透明な背景色を行に適用します。

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

サイジング

行のデザインタブに移動し、サイズ設定を変更します。

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

間隔

次に、カスタムの左右のパディングを追加します。

• 左パディング：10％
• 右パディング：10％

ボックスシャドウ

次に、透明なボックスシャドウを適用します。 チュートリアルの後半では、このボックスシャドウを、異なるシャドウカラーのスティッキー状態で使用します。

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

ポジション

行がページコンテンツの上部に表示され、背景が透明になるようにするために、[詳細設定]タブの行の絶対位置を使用します。

• 位置：絶対
• 場所：左上

列2の可視性

また、タブレットと携帯電話の行の2番目の列を非表示にして、小さい画面サイズでより複雑でないヘッダーデザインを使用できるようにします。

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

メニューを選択

行の設定が完了したので、列1のメニューモジュールから始めて、モジュールを追加します。選択したメニューを選択します。

ロゴをアップロード

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

背景色を削除する

モジュールの背景色も削除します。

メニューテキスト設定

モジュールのデザインタブに移動し、それに応じてメニューテキスト設定を変更します。

• メニューフォント：Oswald
• メニューフォントの太さ：太字
• メニューのフォントスタイル：大文字
• メニューテキストの色：#efefef
• メニューテキストサイズ：18px
• テキストの配置：右

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

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

• ドロップダウンメニューの線の色：rgba（0,0,0,0）
• モバイルメニューの背景色：rgba（0,0,0,0.95）

アイコン設定

次に、アイコン設定でアイコンの色を変更します。

• ショッピングカートのアイコンの色：#ffffff
• 検索アイコンの色：#ffffff
• ハンバーガーメニューアイコンの色：#ffffff

ロゴ設定

画像反転フィルターを変更することで、ロゴ設定でもロゴの色を変更しています。

• 画像反転：90％

サイジング

次に、ロゴに最大の高さを割り当てます。

• ロゴの最大高さ：40px

間隔

次に、小さい画面サイズに上部と下部のパディングを追加します。

• トップパディング：
  • タブレットと電話：10px
• ボトムパディング：
  • タブレットと電話：10px

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

コピーを追加

2列目では、必要なモジュールはボタンモジュールのみです。 選択したコピーをいくつか追加します。

ボタンの配置

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

• ボタンの配置：右

ボタンの設定

次にボタンのスタイルを設定します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：16px
• ボタンのテキストの色：#ffffff
• ボタンの背景色：＃ed4441
• ボタンの境界線の色：＃ed4441

• ボタンの境界線半径：0px
• ボタンの文字間隔：4px
• ボタンフォント：Oswald
• ボタンのフォントの太さ：太字
• ボタンのフォントスタイル：大文字
• ボタンアイコンを表示：はい
• ボタンアイコンの色：＃1a1a1a

間隔

そして、いくつかのカスタム間隔値を追加して、モジュール設定を完了します。

• 上マージン：-70px
• トップパディング：25px
• ボトムパディング：25px

2.カスタムスティッキーエフェクトを適用します

セクション＃2スティッキーを回す

ヘッダーの基礎を設定したので、スティッキー効果を適用します。 これを行うには、最初に2番目のセクションの設定を開き、次のスティッキー設定を[詳細設定]タブに適用します。

• スティッキーポジション：トップに固執
• スティッキートップオフセット：0px
• スティッキーの下限：なし
• 周囲の粘着要素からのオフセット：はい
• トランジションのデフォルトスタイルとスティッキースタイル：はい

粘着性のある行の背景色

スティッキーオプションが有効になったので、セクション内のすべての要素にスティッキーデザインの変更を加えることができます。 メニューを含む行を開き、白い粘着性のある背景色を適用することから始めます。

• 背景色：#FFFFFF

スティッキー行の間隔

次に、行のスティッキー間隔の値を変更します。

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

スティッキーローボックスシャドウ

ボックスシャドウの色もスティッキー状態に変更します。

• 影の色：rgba（0,0,0,0.08）

スティッキー行の配置

次に、スティッキーな状態で行の位置を相対位置に戻します。

• 位置：相対
• オフセット原点：左上

スティッキーメニューのテキスト設定

次に、スティッキーメニューのテキストの色を変更します。

• メニューテキストの色：＃000000

スティッキーメニューのドロップダウン設定

メニュードロップダウン設定のモバイルメニューの背景色とともに。

• モバイルメニューの背景色：#ffffff

スティッキーメニューアイコンの色

粘着性のある状態でもアイコンの色を変更します。

• ショッピングカートのアイコンの色：＃000000
• 検索アイコンの色：＃000000
• ハンバーガーメニューアイコンの色：＃000000

スティッキーロゴフィルター

次に、粘着状態のロゴ画像反転フィルターを取り外します。

• 画像反転：0％

スティッキーボタンの間隔

そして、粘着性のあるボタンの負の上部マージンを削除して、チュートリアルを完了します。

• 上マージン：0px

プレビュー

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

デスクトップ

モバイル

最終的な考え

この投稿では、Diviのテーマビルダーを新しいスティッキーオプションと組み合わせる方法を紹介しました。 具体的には、スクロールで透明ヘッダーから別のスタイルのスティッキーヘッダーに移行する方法を示しました。 このアプローチにより、スクロール時に美しいスティッキーヘッダーを維持しながら、ページデザインをメニューとマージできます。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

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