Diviのスティッキーオプションを使用してスティッキーヘッダーを作成する方法
公開: 2020-09-09Webサイトを設定するときにDiviTheme Builderを使用する方法により、ワークフローが高速化され、すべてが簡単になりました。 Divi Theme Builderがリリースされて以来、カスタマイズされたヘッダーを作成することができましたが、追加のコードを使用せずにスティッキーヘッダーを作成できるという1つのことが継続的に要求されています。 Diviの新しいスティッキーオプションにより、スティッキーヘッダーの作成がこれまでになく簡単になりました。 Diviが提供するスティッキー設定は、デザイン要素をスティッキーにしたり、カスタムスタイルをスティッキー状態に割り当てたりするのに簡単に役立ちます。これにより、無限のデザインとユーザーエクスペリエンスの可能性が生まれます。
このチュートリアルでは、以下を含むスティッキーヘッダーを作成する方法を示します。
- 作成しているヘッダーには、上部のヘッダーバーとメニューバーがあります
- メニューバーを通過すると粘着性のあるセクションが回転します。上部に戻るとすぐに、ヘッダーバーが再び表示されます。
- セクションがスティッキーになったら、スティッキーセクション（およびその要素）のデザインスタイルを変更します
それを手に入れよう！
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
グローバルヘッダーテンプレートを無料でダウンロード
無料のグローバルヘッダーテンプレートを入手するには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
1.新しいヘッダーテンプレート内にヘッダー要素構造を構築する
新しいグローバルヘッダーテンプレートを作成する
Divi Theme Builderに移動し、新しいグローバルヘッダーまたはカスタムヘッダーの作成を開始します。
セクション＃1設定
グラデーションの背景
テンプレートエディタ内に入ると、ヘッダーの要素構造を構築することから始めます。 このチュートリアルのパート2では、さまざまなスティッキー設定を適用してスティッキーヘッダーのデザインを完成させることに焦点を当てます。 テンプレートエディタ内に、セクションがあります。 そのセクションを開き、グラデーションの背景を適用します。
- 色1：＃ffba60
- 色2：＃ffd6a0
- グラデーション方向：90度
- 開始位置：50％
- 終了位置：50％
間隔
次に、デフォルトの上下のパディングをすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
新しい行を追加
カラム構造
上部のヘッダーバーを作成するには、次の列構造を使用してセクションに新しい行を追加します。
サイジング
モジュールをまだ追加せずに、行設定を開き、次のようにサイズ設定を変更します。
- カスタムガター幅を使用：はい
- 側溝幅：1
- 幅：95％
- 最大幅：2580px
間隔
カスタムの上部と下部のパディングも追加します。
- トップパディング：15px
- ボトムパディング：15px
主な要素CSS
また、小さい画面サイズで列が隣り合っていることを確認するために、[詳細設定]タブの行のメイン要素にCSSコードを1行追加します。
display: flex;
ソーシャルメディアフォローモジュールを列1に追加
選択したソーシャルネットワークを追加する
1列目のソーシャルメディアフォローモジュールから始めて、モジュールを追加します。選択したソーシャルネットワークとそれに対応するリンクを追加します。
各ソーシャルネットワークの背景色を削除する
ソーシャルネットワークの背景色を個別に削除して続行します。
アイコン設定
次に、一般的なモジュール設定に戻り、[デザイン]タブのアイコンの色を変更します。
- アイコンの色：＃26333a
間隔
上マージンも追加します。
- トップマージン：5px
ボタンモジュールを列2に追加
コピーを追加
2列目では、必要なモジュールはボタンモジュールのみです。 選択したコピーをいくつか追加します。
リンクを追加
次にリンクを追加します。
ボタンの配置
次に、[デザイン]タブに移動し、ボタンの配置を変更します。
- ボタンの配置：右
ボタンの設定
ボタンのスタイリングも行っています。
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストサイズ：14px
- ボタンのテキストの色：＃26333a
- ボタンの境界線の幅：2px
- ボタンのボーダーカラー：＃26333a
- ボタンの境界線半径：0px
- ボタンの文字間隔：4px
- ボタンのフォントの太さ：太字
- ボタンのフォントスタイル：大文字
- 表示ボタン：はい
間隔
そして、間隔設定に上下のパディングを追加して、モジュール設定を完了します。
- トップパディング：10px
- ボトムパディング：10px
セクション＃2を追加
グラデーションの背景
前のセクションのすぐ下に別の通常のセクションを追加します。 このセクションは私たちのメニューに捧げられ、このチュートリアルの後半でスティッキーになります。 セクションを追加したら、グラデーションの背景を適用します。
- 色1：#ffffff
- 色2：＃f7f7f7
- グラデーションタイプ：線形
- グラデーション方向：90度
- 開始位置：25％
- 終了位置：25％
間隔
セクションの[デザイン]タブに移動し、デフォルトの上下のパディングをすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
新しい行を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加して続行します。
サイジング
行の[デザイン]タブに移動し、次のようにサイズ設定を変更します。
- カスタムガター幅を使用：はい
- 側溝幅：1
- 最大幅：2580px
間隔
次に、デフォルトの上下のパディングをすべて削除します。
- トップパディング：10px
- ボトムパディング：10px
メニューモジュールを列に追加
メニューを選択
次に、メニューモジュールを行の列に追加し、選択した動的メニューを選択します。
ロゴをアップロード
次にロゴをアップロードします。
背景色を削除する
次に、モジュールのデフォルトの白い背景色を削除します。
メニューテキスト設定
デザインタブに移動し、メニューのテキスト設定もスタイル設定します。
- メニューフォントの太さ：太字
- メニューテキストの色：＃002d4c
- メニューテキストサイズ：15px
- メニューの文字間隔：4px
- テキストの配置：右
ドロップダウンメニューのテキスト設定
次に、ドロップダウンメニューの設定にいくつかの変更を加えます。
- ドロップダウンメニューの背景色：#ffffff
- ドロップダウンメニューの線の色：＃002d4c
アイコン設定
アイコンの設定と一緒に。
- ショッピングカートのアイコンの色：＃002d4c
- 検索アイコンの色：＃002d4c
- ハンバーガーメニューアイコンの色：＃002d4c
サイジング
そして、サイズ設定にロゴの最大高さを追加して、モジュール設定を完了します。
- ロゴの最大高さ：60px
2.カスタムスティッキーエフェクトを適用します
セクション＃2スティッキーを回す
ヘッダーの要素構造を作成したので、2番目のセクションをスティッキーにして、スティッキー状態のヘッダーとその要素のデザインスタイルを変更します。 2番目のセクションの設定を開き、[詳細設定]タブに移動します。 そこで、スクロール効果の設定に移動し、次のスティッキーオプションを適用します。
- スティッキーポジション：トップに固執
- スティッキートップオフセット：0px
- スティッキーの下限：なし
- 周囲の粘着要素からのオフセット：はい
- トランジションのデフォルトスタイルとスティッキースタイル：はい
スティッキー状態でセクションのグラデーションの背景を変更する
セクションがスティッキーになっているので、セクション、行、モジュールの設定内に追加のオプションが表示されます。 スティッキーオプション。 このアイコンをクリックすると、スティッキー状態で選択した要素の代替スタイルを作成できます。 これらのスティッキーデザイン設定をいくつか組み合わせて、スクロールのスティッキーヘッダーのルックアンドフィールをカスタマイズします。 2番目のセクションの背景設定に移動し、次のスティッキーグラデーションの背景を適用することから始めます。
- 色1：＃26333a
- 色2：＃1e272f
スティッキー状態のストレッチ行
次に、メニューモジュールを含む行を開き、スティッキー状態で幅を変更します。
- 幅：95％
スティッキー状態の行パディングを削除する
行の粘着性のある上部と下部のパディングも削除します。
- トップパディング：0px
- ボトムパディング：0px
スティッキー状態でメニューテキストの色を変更する
次に、メニューのテキストの色をスティッキーな状態で変更します。
- メニューテキストの色：＃ffbd68
スティッキー状態でメニューアイコンの色を変更する
アイコンの色と一緒に。
- ショッピングカートのアイコンの色：#ffffff
- 検索アイコンの色：#ffffff
- ハンバーガーメニューアイコンの色：#ffffff
スティッキー状態でロゴの高さを削除する
最後になりましたが、スティッキーな状態でロゴの最大高さをゼロに変更します。 これにより、セクションのスティッキー設定が有効になると、ヘッダーからロゴが完全に削除されます。 それでおしまい！ ヘッダーのデザインが完了したら、Divi Theme Builderの変更をすべて保存し、Webサイトでプレビューしてください。
- ロゴの最大高さ：0px
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、Diviのテーマビルダーとスティッキーオプションを使用してスティッキーヘッダーを作成する方法を紹介しました。 メニューを含むセクションがスティッキーになるとすぐに、カスタムスタイルも適用されます。 これらのオプションは、作成するユーザーエクスペリエンスとデザインを改善するための無数の可能性を提供する新しいDiviスティッキーオプションによって可能になります。 グローバルヘッダーテンプレートも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。