Diviでスクロールのスティッキーロゴを変更する方法
公開: 2020-10-07Diviのスティッキーオプションが登場して以来、Diviツールボックスには無限のインタラクションデザインの可能性が追加されています。 スクロール時にヘッダーをスティッキーにするだけでなく、スティッキー状態の要素のスタイルを変更することもできます。 これにより、ヘッダーが粘着性になったらハイライト表示し、ユーザーがページや投稿を読んでいるときに別のユーザーエクスペリエンスを作成できます。
コミュニティでよく聞かれる質問の1つは、Diviのロゴを粘着性のある状態に変更する方法です。 このチュートリアルでは、それを行うためのすばやく簡単な方法を紹介します。 グローバルヘッダーを作成することからチュートリアルを開始し、次にスティッキーエフェクトを適用します。チュートリアルの第3部では、スクロールでスティッキーロゴを変更する方法を示します。 Diviのスティッキーオプションとグローバルヘッダーの可能性に既に精通している場合は、チュートリアルの3番目の部分にスキップして、スクロールでスティッキーロゴを変更するために必要ないくつかの手順を確認してください。
それを手に入れよう！
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
グローバルヘッダーテンプレートを無料でダウンロード
無料のグローバルヘッダーテンプレートを入手するには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
1.新しいヘッダーテンプレート内にヘッダー要素構造を構築する
新しいグローバルヘッダーテンプレートを作成する
まず、Divi Theme Builderに移動して、新しいグローバルヘッダーまたはカスタムヘッダーを作成します。
セクション設定
背景色
テンプレートエディタに入ると、セクションが表示されます。 そのセクションの設定を開き、背景色を適用します。
- 背景色：＃556de0
間隔
セクションの[デザイン]タブに移動し、デフォルトの上下のパディングをすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
ボックスシャドウ
ボックスシャドウも追加します。
- ボックスシャドウブラー強度：50px
- 影の色：rgba（0,0,0,0.15）
新しい行を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加して続行します。
サイジング
モジュールをまだ追加せずに、行の設定を開き、次のように行のサイズ設定を変更します。
- カスタムガター幅を使用：はい
- 側溝幅：1
- 列の高さを等しくする：はい
- 幅：
- デスクトップ：80％
- タブレットと電話：100％
- 最大幅：2580px
間隔
次に、デフォルトの上下のパディングをすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
列1の間隔
次に、列1の設定を開き、上下のパディングを適用します。
- トップパディング：15px
- ボトムパディング：15px
列2の背景色
2番目の列の設定に移動し、背景色を追加します。
- 背景色：＃6eba01
メニューモジュールを列1に追加
メニューを選択
一般的な行と列の設定が整ったので、列1のメニューモジュールから始めて、モジュールを追加します。
背景色を削除する
モジュールのデフォルトの白い背景色を削除します。
メニューテキスト設定
モジュールのデザインタブに移動し、それに応じてメニューテキスト設定を変更します。
- メニューフォント：Montserrat
- メニューフォントの太さ：太字
- メニューテキストの色：#ffffff
- メニューテキストサイズ：16px
- テキストの配置：右
ドロップダウンメニューの設定
次に、ドロップダウンメニューの設定にいくつかの変更を加えます。
- ドロップダウンメニューの背景色：＃556de0
- ドロップダウンメニューの線の色：rgba（0,45,76,0）
- モバイルメニューの背景色：＃556de0
- モバイルメニューのテキストの色：#ffffff
アイコン設定
次にアイコンの色を変更します。
- ショッピングカートのアイコンの色：#ffffff
- 検索アイコンの色：#ffffff
- ハンバーガーメニューアイコンの色：#ffffff
間隔
そして、いくつかのレスポンシブ間隔の値を適用します。
- トップマージン：
- タブレットと電話：10px
- 下マージン：
- タブレットと電話：10px
- 左マージン：
- タブレットと電話：5％
- 右マージン：5％
ボタンモジュールを列2に追加
コピーを追加
2列目では、必要なモジュールはボタンモジュールのみです。 選択したコピーをいくつか追加します。
ボタンの配置
モジュールの[デザイン]タブに移動し、モジュールの配置を変更します。
- ボタンの配置：中央
ボタンの設定
次にボタンのスタイルを設定します。
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストサイズ：17px
- ボタンのテキストの色：#ffffff
- ボタンの境界線の幅：0px
- ボタンの文字間隔：1px
- ボタンフォント：Montserrat
- ボタンのフォントスタイル：大文字
間隔
そして、いくつかのレスポンシブ間隔の値を適用します。
- トップマージン：
- デスクトップ：30px
- タブレットと電話：20px
- 下マージン：
- デスクトップ：30px
- タブレットと電話：20px
2.カスタムスティッキーエフェクトを適用します
セクションをスティッキーにする
すべての要素が揃ったので、スティッキー効果を追加し、スティッキーロゴも変更します。 セクション設定をもう一度開くことから始めます。 [詳細設定]タブに移動し、次のスティッキー位置設定を適用します。
- スティッキーポジション：トップに固執
- スティッキーの下限：なし
- 周囲の粘着要素からのオフセット：はい
- トランジションのデフォルトスタイルとスティッキースタイル：はい
粘着性のあるセクションの背景色
セクションがスティッキーになっているので、親要素と子要素にスティッキーなスタイルを適用できます。 セクションの背景設定に移動し、スティッキーな状態で白い背景色を適用することから始めます。
- 背景色：#FFFFFF
スティッキー行のサイズ設定
次に、スティッキー状態で行の幅を変更します。
- 幅：100％
スティッキーカラム1の間隔
次に、粘着性のある状態で列1の上部と下部のパディングを削除します。
- トップパディング：0px
- ボトムパディング：0px
スティッキーカラム2の背景色
スティッキーカラム2の背景色も変更します。
- 背景色：＃556de0
スティッキーメニューのテキストの色
メニューモジュールを開いて続行し、スティッキーメニューテキストの色を適用します。
- メニューテキストの色：＃556de0
スティッキーメニューのドロップダウン設定
スティッキー状態のドロップダウンメニューの色も変更します。
- ドロップダウンメニューの背景色：#ffffff
- モバイルメニューの背景色：#ffffff
- モバイルメニューのテキストの色：＃556de0
スティッキーメニューアイコンの設定
粘着性のあるアイコンの色と一緒に。
- ショッピングカートのアイコンの色：＃556de0
- 検索アイコンの色：＃556de0
- ハンバーガーメニューアイコンの色：＃556de0
スティッキーメニューの間隔
次に、間隔の設定に移動し、粘着性のある左マージンを適用します。
- 左マージン：5％
スティッキーボタンの間隔
大事なことを言い忘れましたが、間隔設定でボタンモジュールのスティッキーマージン値を変更します。
- トップマージン：15px
- 下マージン：15px
3.スティッキー状態でロゴを変更する
両方のアイコンをメディアライブラリにアップロードする
あとは、2つの異なるロゴをメニューモジュールに追加するだけです。 1つのロゴは静的な状態で適用され、もう1つのロゴは粘着性のある状態で適用されます。 両方のロゴをメディアライブラリにアップロードします。
静的ロゴを選択
次に、メニューモジュールを開き、ロゴ設定で静的ロゴ画像ファイルを選択します。
最大ロゴの幅と高さをピクセル単位で適用します
モジュールの[デザイン]タブに移動し、ロゴの最大幅と高さを適用します。 これらの値は、静的なロゴと粘着性のあるロゴのサイズを同じに保つのに役立ちます。
- ロゴの最大幅：100px
- ロゴの最大高さ：60px
スティッキーロゴのURLをコピーする
次に、メディアライブラリに戻り、スティッキーロゴのURLをコピーします。
スティッキー状態でスティッキーURLを追加する（メニューロゴのメイン要素）
スティッキーな状態でロゴを変更するには、メニューモジュールの[詳細設定]タブに移動し、[メニューロゴCSS]ボックスまで下にスクロールします。 そこで、CSSボックスでスティッキーオプションを有効にし、スティッキーロゴのURLを角かっこで囲んでCSSコードを1行追加します。 それでおしまい！
content: url(addlinkhere);
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、Diviのスティッキーオプションを使用してスクロールのスティッキーロゴを変更する方法を紹介しました。 このアプローチにより、別々のメニューを使用せずに、ヘッダーで2つの異なるロゴを使用できます。 まず、グローバルヘッダーの作成方法を示し、次にセクションをスティッキーにして、スティッキースタイルを変更しました。 チュートリアルの第3部では、スクロール時にスティッキーロゴを変更する方法を示してチュートリアルを完了しました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。