Diviのスティッキーオプションでスクロールする前にヘッダーを非表示にする方法
公開: 2021-01-07ヒーローセクションはあなたのウェブサイトの目を引くものです。 これは通常、Webサイトの残りの部分のトーンを設定し、訪問者に期待できることを示します。 そのため、コピーや召喚状など、ヒーローセクションで共有するいくつかの要素にすべての焦点を当てることが役立つ場合があります。 しかし、ヒーローセクションを強調したいからといって、ナビゲーションバーも必要ないというわけではありません。 ユーザーがスクロールを開始したときにヘッダーを表示するためのユーザーフレンドリーな方法を探している場合は、この投稿を気に入るはずです。 今日は、Diviの組み込みのスティッキーオプションを使用して、スクロールする前にヘッダーを非表示にする方法を紹介します。 私たちが達成している効果は完全にレスポンシブであり、すべての画面サイズで見栄えがします。 テンプレートJSONファイルも無料でダウンロードできます！
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
ヘッダーテンプレートを無料でダウンロード
無料のヘッダーテンプレートを入手するには、まず下のボタンを使用してテンプレートをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
テンプレートをDiviTheme Builderにアップロードしてテンプレートを入力すると、セクションが表示されないことがわかります。 これは、エフェクトがすでに適用されているためです。 さまざまな要素を変更するには、ワイヤーフレームモードに切り替えてそこの要素にアクセスするか、セクション変換の変換とメイン要素の設定を一時的に削除して、ヘッダーデザインの変更が完了したら元に戻します。
1.新しいヘッダーテンプレート内にヘッダー要素構造を構築する
新しいグローバルヘッダーテンプレートを作成する
まず、Diviテーマビルダーに移動します。 そこで、新しいグローバルヘッダーまたはカスタムヘッダーの作成を開始します。
セクション設定
背景色
テンプレートエディタに入ると、セクションが表示されます。 セクション設定を開き、背景色を変更します。
- 背景色：＃001b34
間隔
セクションの[デザイン]タブに移動し、次にデフォルトの上下のパディングをすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
新しい行を追加
カラム構造
次の列構造を使用して、新しい行を追加して続行します。
背景色
モジュールをまだ追加せずに、行設定を開き、選択した背景色を適用します。
- 背景色：＃001b34
サイジング
行の[デザイン]タブに移動し、それに応じてサイズ設定を変更します。
- カスタムガター幅を使用：はい
- 側溝幅：1
- 列の高さを等しくする：はい
- 幅：100％
- 最大幅：100％
間隔
それに応じてパディング値を変更して続行します。
- トップパディング：0px
- ボトムパディング：0
- 左パディング：
- デスクトップ：/
- タブレットと電話：5％
- 右パディング：
- デスクトップ：/
- タブレットと電話：5％
列1の設定
背景色
一般的な行の設定が完了したら、列1の設定を開き、背景色を適用します。
- 背景色：＃f4d5b8
メニューモジュールを列1に追加
メニューを選択
列1のメニューモジュールから始めて、モジュールを追加します。選択したメニューを選択します。
ロゴをアップロード
次にロゴをアップロードします。
背景色
次に、背景色を変更します。
- 背景色：＃063765
背景画像
そして、お好みのイラスト背景画像をアップロードしてください。 この投稿の冒頭にある景品をダウンロードすると、以下のものを見つけて使用できます。
- 背景画像サイズ：フィット
- 背景画像の位置：中央
メニューテキスト設定
モジュールのデザインタブに移動し、メニューのテキストサイズを変更します。
- メニューテキストサイズ：18px
ドロップダウンメニューの設定
次に、それに応じてドロップダウンメニューの設定を変更します。
- ドロップダウンメニューの線の色：rgba（0,0,0,0）
- モバイルメニューの背景色：＃ddc1a7
- モバイルメニューのテキストの色：＃063765
アイコン設定
アイコン設定のアイコンの色も白に変更します。
- ショッピングカートのアイコンの色：#ffffff
- 検索アイコンの色：#ffffff
- ハンバーガーメニューアイコンの色：#ffffff
サイジング
次に、サイズ設定でロゴの最大幅を変更します。
- ロゴの最大幅：70px
間隔
次に、いくつかのカスタムパディング値を適用します。
- トップパディング：1％
- ボトムパディング：1％
- 左パディング：5％
- 右パディング：5％
ボックスシャドウ
いくつかのカスタムボックスシャドウと一緒に。
- ボックスシャドウブラー強度：50px
- 影の色：rgba（0,0,0,0.3）
変換翻訳
そして、次のように変換変換設定を変更して、モジュール設定を完了します。
- 右：
- デスクトップ：20px
- タブレットと電話：0px
ボタンモジュールを列2に追加
コピーを追加
2列目では、必要なモジュールはボタンモジュールのみです。 選択したコピーをいくつか追加します。
ボタンの配置
デザインタブに移動し、ボタンの配置を変更します。
- ボタンの配置：右
ボタンの設定
次に、それに応じてボタンのスタイルを設定します。
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストサイズ：16px
- ボタンのテキストの色：＃2a2a2a
- ボタンの背景色：#ffffff
- ボタンの境界線の幅：0px
- ボタンの境界線の色：rgba（0,0,0,0）
- ボタンのフォントの太さ：太字
- ボタンのフォントスタイル：大文字
間隔
カスタムパディングを使用して、ボタンに何らかの形を与えます。
- トップパディング：20px
- ボトムパディング：20px
- 左パディング：40px
- 右パディング：40px
ボックスシャドウ
次に、ボックスシャドウを適用します。
- ボックスシャドウブラー強度：30px
- 影の色：rgba（0,0,0,0.18）
変換翻訳
それに応じて変換変換値を変更して、モジュール設定を完了します。
- 右：
- デスクトップ：50px
- タブレットと電話：0px
2.カスタムスティッキーエフェクトを適用して、スクロール効果の前に非表示を実現します
行を絶対位置にする
ヘッダーの基礎を設定したので、スクロール効果の前に非表示ヘッダーを適用できます。 以下の手順に従う限り、作成する任意のヘッダーにこの効果を適用できます。 最初のステップは、行設定を開き、行を絶対にすることです。 これにより、ページ上部のヘッダーがスペースを占有するのを防ぐことができます。
- 位置：絶対
- 場所：左上
セクションをスティッキーにする
次に、セクション設定を開き、上部に固定できるようにします。
- スティッキーポジション：トップに固執
- スティッキーの下限：なし
- 周囲の粘着要素からのオフセット：はい
- トランジションのデフォルトスタイルとスティッキースタイル：はい
セクションアニメーション
セクションにもアニメーションを追加します。 このアニメーションは、ページの読み込み時にヘッダーが表示されないようにするのに役立ちます。
- アニメーションスタイル：フェード
セクション移行期間
セクションの[詳細設定]タブで遷移期間を変更することにより、スクロールを開始した後のヘッダーのスライドの速度を自分で決めることができます。 継続時間が長いほど、ヘッダーのスライドが遅くなります。
- 移行時間：800ms
セクション変換翻訳
現在、デフォルトの状態では、ヘッダーを表示したくありません。 これを実現するための最初のステップは、セクションの変換設定に移動し、Y軸に負の値を使用することです。
- 右：-300px
スティッキー状態でこの値をゼロに戻します。 これは、スクロールを開始するとすぐに、ヘッダーが再び表示されることを意味します。
- スティッキー右：0px
セクションの可視性CSSプロパティ
このチュートリアルの次の最後のステップは、効果を達成するために理論的には必要ありませんが、使用されていない要素を非表示にすることをお勧めします。 そのため、セクションの[詳細設定]タブに移動し、メイン要素ボックスに次のCSSコード行を追加します。
- 主な要素：
visibility: hidden
コンテンツをスティッキーな状態で表示できるように戻します。 それでおしまい！
- スティッキーメインエレメント：
visibility: visible;
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、ユーザーがページに入るとすぐに、ヒーローセクションがページのフォーカスになるようにする方法を示しました。 具体的には、スクロールする前にヘッダーを非表示にする方法を示しました。 これにより、訪問者は、ナビゲートする機能が提示される前に、最初にヒーローセクション情報を処理できます。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。