ドロップダウンお問い合わせフォームをグローバルヘッダーに追加する方法

Diviのテーマビルダーを使用してWebサイトのカスタムヘッダーを作成しているときは、CTAを追加する理想的な方法を探していることに気付くでしょう。 あなたがそれについて行くことができる1つの方法は、ドロップダウンの連絡フォームを追加することです。 これにより、ヘッダーの全体的なルックアンドフィールをクリーンに保ちながら、スクロールせずに連絡を取ることができます。 このチュートリアルでは、DiviといくつかのJQueryおよびCSSコードを使用してドロップダウン連絡フォームを作成する方法を示します。 JSONファイルも無料でダウンロードできます！

それを手に入れましょう。

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

デスクトップ

モバイル

グローバルヘッダーテンプレートを無料でダウンロード

無料のグローバルヘッダーテンプレートを入手するには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

1. Divi Theme Builderに移動し、グローバルヘッダーの作成を開始します

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

WordPressWebサイトのバックエンドにあるDiviThemeBuilderにアクセスすることから始めます。

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

[グローバルヘッダーの追加]をクリックし、[グローバルヘッダーの作成]を選択して、カスタムグローバルヘッダーの作成を開始します。

2.ヘッダーデザインを作成する

セクション設定

背景色

グローバルヘッダーテンプレート内に入ると、セクションが表示されます。 そのセクションを開き、白い背景色を使用します。

• 背景色：#FFFFFF

間隔

次に、セクションのデフォルトの上部と下部のパディングを削除します。

• トップパディング：0px
• ボトムパディング：0px

ボックスシャドウ

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

• ボックスシャドウブラー強度：50px
• 影の色：rgba（0,0,0,0.15）

新しい行を追加

カラム構造

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

サイジング

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

• カスタムガター幅を使用：はい
• 側溝幅：1
• 列の高さを等しくする：はい
• 幅：95％
• 最大幅：100％

間隔

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

• トップパディング：1vw
• ボトムパディング：1vw

主な要素

そして、CSSコードの1行を行のメイン要素に追加して、すべての列のコンテンツを整列させます。

align-items: center;

列2Zインデックス

また、応答性を高めるために、2番目の列のzインデックス値が高くなっていることを確認しています。

• Zインデックス：12

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

ロゴをアップロード

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

配置

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

• 画像の配置：中央

サイジング

幅も変更します。

• 幅：3vw（デスクトップ）、5vw（タブレット）、7vw（電話）

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

メニューを選択

2番目の列に、メニューモジュールを追加します。

レイアウト

モジュールの[デザイン]タブに移動し、レイアウトスタイルを変更します。

• スタイル：中央揃え

メニューテキスト設定

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

• メニューフォント：Sansを開く
• メニューフォントの太さ：半太字
• メニューテキストの色：＃000000
• メニューテキストサイズ：0.8vw（デスクトップ）、2vw（タブレット）、3vw（電話）
• メニューの文字間隔：1px

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

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

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

アイコン

ハンバーガーメニューのアイコンカラーと一緒に。

• ハンバーガーメニューアイコンの色：＃007dff

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

コピーを追加

3番目のモジュールに移りましょう！ 選択したコピーを含むテキストモジュールを追加します。

背景色

次に背景色を追加します。

• 背景色：＃007dff

テキスト設定

モジュールの[デザイン]タブに移動し、それに応じてテキスト設定を変更します。

• テキストフォント：Open Sans
• テキストフォントの太さ：太字
• テキストの色：#ffffff
• テキストサイズ：0.8vw（デスクトップ）、2vw（タブレット）、3vw（電話）
• テキストの配置：中央

サイジング

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

• 幅：33％
• モジュールの配置：中央

間隔

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

• トップパディング：0.8vw（デスクトップ）、2vw（タブレットと電話）
• ボトムパディング：0.8vw（デスクトップ）、2vw（タブレットと電話）

国境

そして、境界線の半径を追加して、モジュールの設定を完了します。

• すべてのコーナー：100px

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

コンテンツボックスに記号を追加

次のモジュール、つまり別のテキストモジュールに進みます。 次の矢印記号をコンテンツボックスに追加します： '▼'。

テキスト設定

モジュールの[デザイン]タブに移動し、それに応じてテキスト設定を変更します。

• テキストフォント：Open Sans
• テキストの色：＃007fff
• テキストサイズ：3vw
• テキスト行の高さ：0em
• テキストの配置：中央

Zインデックス

モジュールのzインデックスも増やしています。

• Zインデックス：11

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

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

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

表題を加える

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

背景色

次に背景色を変更します。

• 背景色：＃e7f2ff

フィールド設定

次に、モジュールの[デザイン]タブに移動し、フィールドの設定を変更します。

• フィールドの背景色：#ffffff
• フィールドテキストの色：#dddddd
• フィールドフォーカステキストの色：＃007dff
• フィールドトップパディング：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
• フィールド下部パディング：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
• フィールドフォント：Open Sans

• フィールドテキストサイズ：0.7vw（デスクトップ）、1.8vw（タブレット）、3vw（電話）

タイトルテキスト設定

次に、タイトルテキストの設定を変更します。

• タイトル見出しレベル：H3
• タイトルフォントの太さ：太字
• タイトルテキストの配置：中央
• タイトルテキストの色：＃007dff
• タイトルテキストサイズ：1vw（デスクトップ）、2.5vw（タブレット）、3.5vw（電話）
• タイトルラインの高さ：1.6em

キャプチャテキスト設定

キャプチャテキスト設定と一緒に。

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

ボタンの設定

ボタンのスタイルを設定して続行します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：0.8vw（デスクトップ）、2vw（タブレット）、3vw（電話）
• ボタンのテキストの色：#ffffff
• ボタンの背景色：＃007dff
• ボタンの境界線の幅：0px
• ボタンの境界線半径：100px

• ボタンフォント：Sansを開く
• ボタンのフォントの太さ：太字

• ボタン上部マージン：1vw
• ボタントップパディング：1vw（デスクトップ）、2vw（タブレットと電話）
• ボタン下部のパディング：1vw（デスクトップ）、2vw（タブレットと電話）
• ボタンの左パディング：2vw（デスクトップ）、7vw（タブレットと電話）
• ボタンの右パディング：2vw（デスクトップ）、7vw（タブレットと電話）

間隔

次に、さまざまな画面サイズでいくつかのカスタムパディング値を使用します。

• トップパディング：4vw（デスクトップ）、6vw（タブレットと電話）
• 下部のパディング：4vw（デスクトップ）、6vw（タブレットと電話）
• 左パディング：2vw（デスクトップ）、6vw（タブレットと電話）
• 右パディング：2vw（デスクトップ）、6vw（タブレットと電話）

国境

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

• すべてのコーナー：10px

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

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

主な要素：

border-radius: 20px;

連絡先のタイトル：

margin-bottom: 1vw;

キャプチャ：

margin-top: 1.5vw;

3.要素をカスタマイズして、クリック時に連絡先フォームを作成します

列3の高さを追加

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

デスクトップ：

height: 3vw;

タブレット：

height: 5vw;

電話：

height: 6vw;

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

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

• CSSクラス：show-contact

お問い合わせフォームにCSSクラスを追加

Contact FormModuleにもカスタムCSSクラスが必要です。

• CSSクラス：contact-form-module

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

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

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;
}

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。

デスクトップ

モバイル

最終的な考え

この投稿では、カスタムビルドのヘッダーにドロップダウンお問い合わせフォームを追加する方法を紹介しました。 これは、最初からアクションをトリガーするための優れた方法です。 JSONファイルも無料で共有しています！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。