カスタムヘッダーを作成するとき サイトのWeb、Divi のテーマ ビルダーを使用すると、AAL (行動を促すフレーズ) を追加する完璧な方法を探していることに気付くでしょう。 これを行う XNUMX つの方法は、 お問い合わせフォーム スクロール。 これにより、ヘッダーの全体的な外観をきれいに保ちながら、入力する機能を提供できます。 接触 下にスクロールする必要はありません。 このチュートリアルでは、 お問い合わせフォーム Divi と JQuery & CSS コードを使用したドロップダウン。 また、JSON ファイルを無料でダウンロードすることもできます。
行こう。
概要
チュートリアルに入る前に、さまざまな画面サイズでの結果を見てみましょう。
1. Divi Theme Builderに移動して、グローバルヘッダーの作成を開始します
Divi Theme Builderに移動します
まず、WordPressサイトのバックエンドにあるDivi Theme Builderにアクセスしてください。
グローバルヘッダーを作成する
[グローバルヘッダーの追加]をクリックし、[グローバルヘッダーの作成]を選択して、カスタムグローバルヘッダーの作成を開始します。
2.ヘッダーデザインを作成します
セクション設定
背景色
ヘッダーテンプレート全体に入ると、セクションが表示されます。 このセクションを開き、白い背景色を使用します。
- 背景色：#FFFFFF
スペーシング
次に、デフォルトの上部および下部のパディングをセクションから削除します。
- 上部パディング：0px
- 下部のパディング：0px
シャドーボックス
また、微妙なボックスシェードを適用します。
- ボックスシャドウブラー強度：50ピクセル
- 影の色：rgba（0,0,0,0,15）
新しい行を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加し続けます。
サイズ剤
モジュールを追加せずに、行パラメーターを開き、次のようにサイズ変更パラメーターを変更します。
- カスタムのガター幅を使用：はい
- 側溝幅：1
- 列の高さの均等化：はい
- 幅：95％
- 最大幅：100％
スペーシング
次に、カスタムの上下のパディングを追加します。
- 上部パディング：1vw
- 下部のパディング：1vw
主な要素
そして、行のメイン要素にXNUMX行のCSSコードを追加して、列のすべてのコンテンツを整列させます。
align-items: center;
列2 Zインデックス
また、リアクティブな目的で、XNUMX番目の列のz-index値が高くなっていることを確認します。
- Zインデックス：12
列1に画像モジュールを追加します
ロゴをダウンロードする
モジュールの追加を開始する時が来ました！ 列1の画像モジュールから始めます。ロゴをアップロードします。
Alignement
次に、モジュールの配置を変更します。
- 画像の配置：中央
サイズ剤
幅も変更します。
- 幅：3vw（デスクトップ）、5vw（タブレット）、7vw（電話）
列2にメニューモジュールを追加する
メニューを選択
XNUMX列目には、メニューモジュールを追加します。
配置
モジュールデザインタブに切り替えて、レイアウトスタイルを変更します。
- スタイル：中央揃え
メニューテキストの設定
次に、モジュールメニューのテキスト設定を変更します。
- メニューフォント：なしで開く
- メニューのフォントの太さ：半太字
- メニューテキストの色：＃000000
- メニューのテキストサイズ：0.8vw（デスクトップ）、2vw（タブレット）、3vw（電話）
- メニュー文字間隔：1px
ドロップダウンメニューのテキスト設定
次に、ドロップダウンメニューで線の色を変更します。
- ドロップダウンメニューの線の色：＃007dff
アイコン
ハンバーガーメニューアイコンカラー付き。
- ハンバーガーメニューアイコンの色：＃007dff
1テキストモジュールを3列に追加します
コピーを追加
XNUMX番目のモジュールに移りましょう！ 選択したコピーを含むテキストモジュールを追加します。
背景色
次に、背景色を追加します。
- 背景色：＃007dff
テキスト設定
モジュールデザインタブに切り替え、それに応じてテキスト設定を変更します。
- テキストフォント：Open Sans
- テキストのフォントの太さ：太字
- テキストの色：#ffffff
- テキストサイズ：0.8vw（デスクトップ）、2vw（タブレット）、3vw（電話）
- テキストの配置：中央
サイズ剤
次に、モジュールのサイズ設定パラメーターを変更します。
- 幅：33％
- モジュールの配置：中央
スペーシング
次に、カスタムの上下のパディングを追加します。
- 上部のパディング：0.8vw（デスクトップ）、2vw（タブレットと電話）
- 下部のパディング：0.8vw（デスク）、2vw（タブレットと電話）
ボーダー
そして、境界線の半径を追加してモジュールのパラメーターを完成させます。
- すべてのコーナー：100ピクセル
2テキストモジュールを3列に追加します
コンテンツ領域にシンボルを追加します
次のモジュール、つまり別のテキストモジュールに移りましょう。 コンテンツ領域に次の矢印を追加します：「▼」。
テキスト設定
モジュールデザインタブに切り替え、それに応じてテキスト設定を変更します。
- テキストフォント：Open Sans
- テキストの色：＃007fff
- テキストサイズ：3vw
- テキスト行の高さ：0em
- テキストの配置：中央
Zインデックス
モジュールのzインデックスも増やします。
- Zインデックス：11
連絡先フォームモジュールを列3に追加します
を追加できるようになりました。 お問い合わせフォーム 矢印を含むテキストモジュールのすぐ下にあります。 このモジュールは非常に使い方が簡単なので、どのフィールドを表示するかをカスタマイズする必要があります。
3.要素をカスタマイズして、ワンクリックで連絡先フォームを作成します
列3の高さを追加します
すべてのmodが配置されたら、エフェクトを作成します。 目的の結果を達成するための最初のステップは、列3の設定を開き、[詳細設定]タブで応答するカスタムの高さを追加することです。
オフィス：
height: 3vw;
タブレット：
height: 5vw;
電話：
height: 6vw;
ボタンと矢印にCSSクラスを追加します
次に、同じCSSクラスを列3の最初のXNUMXつのテキストモジュールに追加します。
- CSS クラス: show-接触
連絡先フォームにCSSクラスを追加する
また、ContactFormモジュール用のカスタムCSSクラスも必要になります。
- CSSクラス: 接触-フォームモジュール
連絡先フォームモジュールを非表示にする
お問い合わせフォームモジュールのメイン要素にCSSコードの行を追加して続行します。 これにより、クリックする前にモジュールを非表示にできます。
display: none;
JQueryとCSSコードを使用して、列3にコードモジュールを追加します
また、クリック関数を作成するには、いくつかのJQueryコードが必要になります。 カスタムCSSコードも使用します。 コードを使用して、新しいコードモジュールを列2に追加します。 スクリプトタグの間にJQueryコードを配置し、スタイルタグの間にCSSコードを配置してください。
jQuery(function($){$(".show-contact").click(function() {$('.contact-form-module').slideToggle();});});
.show-contact {cursor: pointer;} .et-menu>li {padding-left: 0.7vw !important;padding-right: 0.7vw !important;}
概要
すべての手順を完了したので、さまざまな画面サイズでどのように表示されるかを最後に見てみましょう。
オフィス
覚えておくべきこと
この記事では、カスタムヘッダーにドロップダウンお問い合わせフォームを追加する方法を説明しました。 これは、早い段階でアクションをトリガーするための優れた方法です。
