を追加する必要があります お問い合わせフォーム グローバルヘッダーに?

カスタムヘッダーを作成するとき サイトのWeb Divi Theme Builder を使用すると、CTA (Call to Action) を追加する完璧な方法を探していることに気付くでしょう。 これを行う XNUMX つの方法は、 お問い合わせフォーム スクロール。 

これにより、ヘッダーの全体的な外観をきれいに保ちながら、アクセスできるようになります。 接触 スクロールする必要はありません。 

このチュートリアルでは、 お問い合わせフォーム Divi、JQuery、CSSコードを使用してスクロール可能。

始めましょう!

調査

このチュートリアルに入る前に、取得する結果のプレビューを見てみましょう。

diviのグローバルヘッダーに連絡フォームを追加する

グローバルヘッダーを作成する

テーマビルダーに移動します

WordPressダッシュボードにあるDiviメニューからテーマビルダーに移動し、[グローバルヘッダーを追加]をクリックします。

[グローバルヘッダーの作成]を選択します。

ヘッダースタイルを作成する

セクション設定

背景色

テンプレートエディタに入ると、セクションが表示されます。 このセクションを開き、背景色を変更します。

  • 背景:#FFFFFF

スペーシング

次に、デフォルトの上部と下部の内側の余白をセクションから削除します。

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

シャドーボックス

また、微妙なボックスシャドウを適用します。

  • ボックスシャドウブルー強度:50px
  • 字幕フォントの色:rgba(0,0,0,0.15)

新しい行を追加します

カラムの構造

次の列構造を使用して、セクションに新しい行を追加します。

サイズ剤

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

  • カスタムガター幅を使用:はい
  • 列間隔:1
  • カラムの高さを調和させる:はい
  • 最大幅:95%
  • 最大幅:100%

スペーシング

次に、カスタムの上下のパディングを追加します。

  • ピーク内部マージン:1vw
  • 下部内部マージン:1vw

主な要素

メインの行要素にCSSコードをXNUMX行追加して、すべての列のコンテンツを揃えます。

align-items: center;

列2のZ添え字

また、レスポンシブデザインのために、XNUMX番目の列のz-index値が高くなっていることを確認します。

  • Zインデックス:12

画像モジュールを列1に追加します

ロゴをダウンロードする

モジュールの追加を開始する時が来ました! 列1の画像モジュールから始めます。ロゴをアップロードします。

Alignement

次に、モジュールの配置を変更します。

  • 画像の配置:中央揃え

サイズ剤

幅も変更します。

  • 最大幅:3vw(デスクトップ)、5vw(タブレット)、7vw(電話)

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

メニューを選択

XNUMX番目の列では、メニューモジュールを追加します。

配置

[モジュールスタイル]タブに切り替えて、レイアウトスタイルを変更します。

  • スタイル:中央揃え

メニューテキストの設定

次に、モジュールメニューのテキスト設定を変更します。

  • フォントメニュー:開くなし
  • 薄暗いメニュー:セミボールド
  • メニューテキストの色:#000000
  • メニューテキストサイズ:0,8 vw(デスクトップ)、2 vw(タブレット)、3 vw(電話)
  • メニューの文字間隔:1px

ドロップダウンメニューのテキスト設定

次に、ドロップダウンメニューから線の色を変更します。

  • ドロップダウンメニューの線の色:#007dff

アイコン

ハンバーガーメニューのアイコンの色を変更します。

  • ハンバーガーメニューアイコンの色:#007dff
diviのグローバルヘッダーに連絡フォームを追加する

テキストモジュールを列3に追加します

メッセージを追加

XNUMX番目のモジュールに移りましょう! 選択したメッセージを含むテキストモジュールを追加します。

背景色

背景色を追加します。

  • 背景色:#007dff
グローバルヘッダーに連絡フォームを追加する

テキスト設定

モジュールデザインタブに切り替え、それに応じてテキスト設定を変更します。

  • テキストフォント:Open Sans
  • ソフトライトテキスト:太字
  • テキストの色テキスト:#ffffff
  • テキストテキストサイズ:0,8 vw(デスクトップ)、2 vw(タブレット)、3 vw(電話)
  • テキストの配置:中央揃え
グローバルヘッダーに連絡フォームを追加する

サイズ剤

次に、モジュールのサイズ設定パラメーターを変更します。

  • 最大幅:33%
  • モジュールの配置:中央
グローバルヘッダーに連絡フォームを追加する

スペーシング

次に、カスタムの上部と下部のパディングを追加します。

  • 上部内部マージン:0,8 vw(デスクトップ)、2 vw(タブレットと電話)
  • 内部マージン低:0,8 vw(デスクトップ)、2 vw(タブレットと電話)
グローバルヘッダーに連絡フォームを追加する

国境

そして、境界線の半径を追加してモジュールのパラメーターを完成させます。

  • 角丸長方形:100px

列3に別のテキストモジュールを追加します

コンテンツ領域にシンボルを追加します

次のモジュール、つまり別のテキストモジュールに移りましょう。 コンテンツ領域に次の矢印記号を追加します:'▼'。

グローバルヘッダーに連絡フォームを追加する

テキスト設定

モジュールデザインタブに切り替え、それに応じてテキスト設定を変更します。

  • テキストフォント:Open Sans
  • テキストの色:#007fff
  • テキストテキストサイズ:3vw
  • テキスト行の高さ:0em
  • テキストの配置:中央揃え
グローバルヘッダーに連絡フォームを追加する

Zインデックス

モジュールのz-indexも増やしましょう。

  • Zインデックス:11

お問い合わせフォームモジュールを列3に追加します

選択した全幅フィールドを追加します

XNUMX番目の列に必要な次の最後のモジュールは、お問い合わせフォームモジュールです。 必要な全幅フィールドを追加します。

タイトルを追加する

タイトルも使用してください。

背景色

次に、背景色を変更しましょう。

  • 背景色:#e7f2ff

フィールド設定

モジュールの[スタイル]タブに移動して、フィールド設定を変更してみましょう。

  • 背景色フィールド:#ffffff
  • フィールドテキストの色:#dddddd
  • フォーカステキストの色:#007dff
  • 頂点パディングフィールド:1vw(デスクトップ)、2vw(タブレット)、3vw(電話)
  • 下部のパディングフィールド:1vw(デスクトップ)、2vw(タブレット)、3vw(電話)
  • フォントフィールド:開くなし
  • フィールドテキストサイズ:0,7 vw(デスクトップ)、1,8 vw(タブレット)、3 vw(電話)

タイトルテキストの設定

タイトルテキストの設定を編集します。

  • 見出し3を挿入:HXNUMX
  • ソフトライトタイトル:太字
  • テキストの配置:中央揃え
  • タイトルテキストの色:#007dff
  • タイトルテキストサイズ:1 vw(デスクトップ)、2,5 vw(タブレット)、3,5 vw(電話)
  • タイトル行の高さ:1,6 em

キャプチャテキスト設定

キャプチャテキスト設定あり。

  • フォントキャプチャ:Open Sans
  • キャプチャテキストの色:#007dff

ボタン設定

ボタンをカスタマイズして続行します。

  • ボタンにカスタムスタイルを使用する:はい
  • ボタンのテキストサイズ:0,8 vw(デスクトップ)、2 vw(タブレット)、3 vw(電話)
  • ボタンのテキストの色:#ffffff
  • 背景ボタン:#007dff
  • 境界線幅ボタン:0ピクセル
  • ボタンの境界線の半径:100ピクセル
  • フォントボタン:開くなし
  • ソフトライトボタン:太字のテキスト
  • ボタンマージン:1vw
  • トップパディングボタン:1vw(デスクトップ)、2vw(タブレットと電話)
  • 下部のパディングボタン:1vw(デスクトップ)、2vw(タブレットと電話)
  • 左パッドボタン:2vw(デスクトップ)、7vw(タブレットと電話)
  • 右パッドボタン:2vw(デスクトップ)、7vw(タブレットと電話)

スペーシング

さまざまな画面サイズでカスタムパディング値を使用します。

  • ピーク内部ヘッドルーム:4vw(デスクトップ)、6vw(タブレットと電話)
  • 内部マージン下部:4vw(デスクトップ)、6vw(タブレットと電話)
  • 左内側マージン:2vw(デスクトップ)、6vw(タブレットと電話)
  • 右内部マージン:2vw(デスクトップ)、6vw(タブレットと電話)

国境

次に、境界線の設定を変更します。

  • 角丸長方形の入力:10px

主な要素、連絡先のタイトル、キャプチャCSS

[詳細設定]タブにCSSの小さな変更をいくつか追加して、モジュール設定を完了します。

主な要素:

01border-radius: 20px;

のタイトル 接触 :

01margin-bottom: 1vw;

キャプチャ:

01margin-top: 1.5vw;

要素をカスタマイズして、ワンクリックでお問い合わせフォームを作成します

列3の高さを追加します

すべてのモジュールを配置したら、エフェクトを作成します。 目的の結果を得るための最初のステップは、3列の設定を開き、[詳細設定]タブにカスタムのレスポンシブ高さを追加することです。

デスク :

01height: 3vw;

タブレット:

01height: 5vw;

電話:

01height: 6vw;

ボタンと矢印にCSSクラスを追加します

次に、同じCSSクラスを列3の最初のXNUMXつのテキストモジュールに追加します。

連絡先フォームにCSSクラスを追加する

お問い合わせフォームモジュール用のカスタムCSSクラスも必要になります。

  • CSSクラス:contact-form-module

お問い合わせフォームモジュールを非表示

連絡先フォームモジュールのメイン要素にCSSコードの行を追加して続行します。 これにより、クリックする前にモジュールを非表示にできます。

01display: 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;

}

調査

すべての手順を完了したので、最後に結果を見てみましょう。

diviのグローバルヘッダーに連絡フォームを追加する

まとめ

この記事では、カスタムヘッダーにドロップダウン連絡フォームを追加する方法を説明しました。

ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。