Divi：スティッキーグローバルヘッダーを作成する方法

スティッキーヘッダーを作成しますか? Divi ?

スティッキーヘッダーの作成は、テーマ、しかし、追加のコードを使用せずにそれらを作成する方法を知らない人が多いことがわかりました. ただし、スティッキーオプションのおかげで、それも非常に簡単です Divi.

実際、この方法は簡単であるだけでなく、デザインをカスタマイズするためのより多くの可能性を提供します。

したがって、このチュートリアルでは、パラメータを使用して超個人化されたスティッキーヘッダーを作成する方法を説明します。 Divi.

概要

このチュートリアルに入る前に、達成したい結果を見てみましょう。

ヘッダー要素構造を構築する

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

Divi Theme Builderにアクセスして、新しいグローバルヘッダーまたはカスタムヘッダーの作成を開始します。

セクション1パラメータ

グラデーションの背景

テンプレートエディタに入ったら、ヘッダー要素の構造を構築することから始めます。このチュートリアルの第XNUMX部では、さまざまなスティッキー設定を適用してスティッキーヘッダーのデザインを完成させることに焦点を当てます。

また読みます： DIVIでスライドメニューとプッシュメニューを作成する方法

テンプレートエディタには、セクションがあります。このセクションを開き、グラデーションの背景を適用します。

色1：＃ffba60
色2：＃ffd6a0
グラデーション方向：90度
開始位置：50％
最終順位：50％

スペーシング

次に、デフォルトですべての内部マージン（上と下）を削除します。

内側マージン頂点：0px
下部内部マージン：0px

新しい行を追加

カラムの構造

上部のヘッダーバーを作成するには、次の列構造を使用してセクションに新しい行を追加します。

サイズ剤

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

カスタムガター幅を使用：はい
列間隔：1
最大幅：95％
最大幅：2ピクセル

スペーシング

また、カスタム内部マージン（上と下）を追加します。

内側マージン頂点：15px
下部内部マージン：15px

CSSメイン要素

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

display: flex;

「ソーシャルメディアでフォローする」モジュールを列1に追加します

選択したソーシャルネットワークを追加する

1列目の「ソーシャルメディアでフォロー」モジュールから始めて、モジュールを追加します。選択したソーシャルネットワークとそれに対応するリンクを追加します。

各ソーシャルネットワークから背景色を削除します

ソーシャルネットワークから各背景色を個別に削除して続行します。

アイコン設定

次に、一般的なモジュール設定に戻り、[デザイン]タブのアイコンの色を変更します。

アイコンの色：＃26333a

スペーシング

上マージンも追加します。

上マージン：5ピクセル

Buttonモジュールを列2に追加します

ボタンにテキストを追加

2列目では、必要なモジュールはButtonモジュールのみです。選択したテキストを追加します。

リンクを追加

次に、リンクを追加します。

ボタンの配置

次に、[スタイル]タブに切り替えて、ボタンの配置を変更します。

ボタンの配置：右

ボタン設定

ボタンもカスタマイズします。

ボタンにカスタムスタイルを使用する：はい
ボタンのテキストサイズ：14px
ボタンのテキストの色：＃26333a
ボタンの境界線の幅：2px
ボタンの境界線の色：＃26333a
ボタンの境界線半径：0ピクセル

文字間隔ボタン：4px
ソフトライトボタン：太字のテキスト
コピースタイルボタン：大文字
表示ボタン：はい

スペーシング

そして、間隔設定に内部余白 (上と下) を追加して、モジュールの設定を完了します。

内側マージン頂点：10px
下部内部マージン：10px