問い合わせフォームモジュールのインラインフィールドと全幅フィールドを組み合わせる必要があります Divi ?
電子メールを取得して訪問者を顧客に変えたい場合は、お問い合わせフォームを Web サイトに含める重要な要素となります。
お問い合わせフォームモジュール Divi あらゆるタイプのウェブサイト向けに、魅力的で魅力的なお問い合わせフォームを簡単にカスタマイズできます。このモジュールには、各フォームフィールドに適用できる2つの表示オプションが用意されています。 アンリニュ ou 全幅.
このチュートリアルでは、インライン フィールドと全幅フィールドを使用して、Divi お問い合わせフォームの 4 つの独自のレイアウトの可能性を紹介します。
のは、始めましょう！
概要
これは、これからデザインするもののプレビューです。
最初のレイアウト
XNUMX 番目のレイアウト
XNUMX 番目のレイアウト
XNUMX 番目のレイアウト
始めるために必要なもの
始める前に Diviテーマをインストールしてアクティブにします ウェブサイトに最新バージョンの Divi がインストールされていることを確認してください。
これで、開始する準備が整いました。
インラインフィールドと全幅フィールドを使用したDiviコンタクトフォームモジュールの4つのレイアウト例
定義済みのレイアウトを選択する
4 つのテンプレートのそれぞれは、靴修理の連絡先ページのレイアウトから変更されています。 靴修理レイアウトパック、Divi ライブラリにあります。
ウェブサイトに新しいページを追加し、タイトルを付けて、オプションを選択します DiviBuilderを使用する.
この例では、Divi ライブラリから事前に作成されたレイアウトを使用するので、 レイアウトを参照.
[Shoe Repair Contact Page] レイアウトを見つけて選択します。
選択 このレイアウトを使用 ページにレイアウトを追加します。
これで、例を設計する準備が整いました。
最初のレイアウト
まず、Contact Formモジュールを含む行を、Blurbモジュールを含む行のすぐ下のセクションに移動します。その後、残りの空のセクションを削除します。
行設定を開き、左右のパディングを追加します。
- パディング (左右): 15%
レスポンシブ オプションを選択し、モバイル用のパディングを設定します。
- パディング (左右): 5%
お問い合わせフォームのレイアウトをインラインおよび全角フィールドに変更
このレイアウトでは、名と姓の XNUMX つの個別のフィールドを作成します。
Contact Form モジュールの設定を開き、[姓] フィールドの [ID] と [役職] フィールドを [名] に変更します。
First Name フィールドの下に新しいフィールドを追加します。 ID と Title フィールドを Name に設定します。
名前フィールドの設定で、レイアウト設定を開き、[全角にする] を [いいえ] に設定します。
- 全角にする: いいえ
次に、お問い合わせフォームの設定で、件名と電話番号の順序を変更し、電話番号が件名の前に表示されるようにします。
件名フィールドのレイアウト設定を開き、フィールドを全角に設定します。
- 全角にする: はい
お問い合わせフォームデザインのカスタマイズ
デザインを完成させるために、いくつか設定を変更しましょう。お問い合わせフォームモジュールの設定から「デザイン」タブに移動してください。
まず、ボタンの背景色を変更します。
- ボタンの背景: #DBC2B3
ボタンの上余白を追加します。
- ボタン余白 (上): 10px
最後に、境界線の設定に移動し、フィールドに丸みを帯びた角を追加します。
- 角丸入力: 30px
例1の最終結果
これがデスクトップとモバイルでの最終結果です。
XNUMX 番目の例
XNUMX 番目の例では、Blurb モジュールをページの左側に移動し、連絡先フォームをページの右側に配置します。 Blurb モジュールを列に移動します。
行のレイアウトを変更します。
ラインデザイン設定を開いてオフにする Use Custom Gutter Width.
- カスタムガター幅を使用: いいえ
メイン要素のカスタム CSS にコードを追加して、Blurb モジュールと Contact Form モジュールを垂直に配置します。
align-items:center;
次に、列間の細い境界線を削除します。行設定を開き、列1の設定を開きます。「デザイン」タブで境界線の設定に移動し、境界線を削除します。
- 右ボーダーの幅: 0px
次に、列 2 の設定を開き、手順を繰り返して境界線を削除します。
- 右ボーダーの幅: 0px
「お問い合わせ」のテキストを中央揃えに設定します。
お問い合わせフォームを右の列に移動します。 残りの空のセクションを削除します。
お問い合わせフォームのレイアウトをインラインおよび全角フィールドに変更
このレイアウトには、名と姓の XNUMX つの個別のフィールドもあります。 Contact Form モジュールの設定を開き、[姓] フィールドの [ID] と [役職] フィールドを [名] に変更します。
First Name フィールドの下に新しいフィールドを追加します。 ID と Title フィールドを Name に設定します。
名前フィールドの設定で、レイアウト設定を開き、[全角にする] を [いいえ] に設定します。
- 全角にする: いいえ
電話番号がオブジェクトの前になるように、電話フィールドとオブジェクト フィールドの順序を変更します。
メール、電話、件名のフィールド設定を開き、レイアウトを全幅に設定します。
- 全角にする: はい
お問い合わせフォームデザインのカスタマイズ
行の設定を開き、次に列2の設定を開きます。背景色を設定します。
- 背景: #DBC2B3
列 2 の設定で、[デザイン] タブに移動し、パディングを追加します。
- パディング (上下左右: 50px)
レスポンシブ設定を変更するには、モバイルアイコンを選択してください。モバイル用のパディングを設定します。
- パディング (上下左右): 30px
次に、列にボックス シャドウを追加します。
最後に、Contact Form モジュールの設定を開き、フィールドのテキストの色を変更します。
- フィールドのテキストの色: #000000
例2の最終結果
これが XNUMX 番目のレイアウトの最終結果です。
XNUMX 番目の例
XNUMX 番目のレイアウトでは、左側に連絡先フォーム、右側に Blurb モジュールを配置します。 Blurb モジュールを含む行の列構造を変更することから始めましょう。
アドレス モジュールを右側の列に移動します。
次に、テキスト モジュール「Contact US」を左の列に移動し、残っている空の行を削除します。
お問い合わせフォームモジュールを左側の列、「お問い合わせ」テキストモジュールの下に移動します。残りの空白部分を削除します。
線の設定を開き、デザインタブで無効にする Use Custom Gutter Width
- カスタムガター幅を使用: いいえ
メイン要素のカスタム CSS にコードを追加して、Blurb モジュールと Contact Form モジュールを垂直に配置します。
align-items:center;
行の設定を開き、列1の設定を開きます。「デザイン」タブで境界線の設定に移動し、境界線を削除します。この手順を繰り返して、列2の境界線を削除します。
- 右ボーダーの幅: 0px
お問い合わせフォームのレイアウト変更
3 番目のデザインではフィールド幅はそのままにしておきます。ただし、お問い合わせフォームの設定を開き、電話番号と件名フィールドの順序を変更して、電話番号が先頭になるようにします。
例3の最終結果
これが XNUMX 番目のレイアウトの最終結果です。
XNUMX番目の例
最後の XNUMX 番目のレイアウトでは、Contact Form モジュールが左側にあり、Blurb モジュールが右側にあります。 ここでも、Blurb モジュールを含む行の列構造を変更することから始めます。
アドレス モジュールを右側の列に移動します。
次に、Contact Form モジュールを左の列に移動します。 残りの空白部分を削除します。
ライン設定を開き、デザインタブに移動して無効にします Use Custom Gutter Width.
- カスタムガター幅を使用: いいえ
メイン要素のカスタム CSS にコードを追加して、Blurb モジュールと Contact Form モジュールを垂直に配置します。
align-items:center;
行設定を開き、列 1 の設定を開きます。[デザイン] タブで、境界線設定に移動して境界線を削除します。
- 右ボーダーの幅: 0px
次に、列 2 の設定を開き、手順を繰り返して境界線を削除します。
- 右ボーダーの幅: 0px
「お問い合わせ」というテキストのテキストモジュール設定を開き、テキストを中央に配置します。
- テキストの配置: 中央揃え
お問い合わせフォームのレイアウトをインラインおよび全角フィールドに変更
このデザインでは、すべてのフィールドが全幅になります。お問い合わせフォームモジュールの設定を開き、各フィールドの設定を開きます。デザインタブで、 レイアウト 定義します 全角にする シュール はい.
各全角フィールドを作成すると、フォームは次のようになります。
ここで、Last Name フィールドの ID と Title フィールドを First Name に変更します。
First Name フィールドの下に新しいフィールドを追加します。 ID と Title フィールドを Name に設定します。
電話番号がオブジェクトの前になるように、電話フィールドとオブジェクト フィールドの順序を変更します。
お問い合わせフォーム モジュールのデザインをカスタマイズする
モジュール設定の「デザイン」タブで、フィールドのテキストの色を黒に設定します。
- フィールドのテキストの色: #000000
セクション設定を開き、背景色を追加します。
- 背景: #DBC2B3
最後に、背景マスクを追加します。
- 背景マスク: アーチ
- マスク変換: 水平
背景マスクがモバイル上でより適切に機能するように、レスポンシブ設定を使用しましょう。
- マスク変換 (電話): 水平および回転
最終結果
これが XNUMX 番目のレイアウトの最終結果です。
最終結果
すべての例をもう一度見てみましょう。
最初の例
XNUMX 番目の例
XNUMX 番目の例
XNUMX番目の例
今すぐDIVIをダウンロードしてください!!!
結論
魅力的なお問い合わせフォームを使用すると、コンバージョンが増加し、訪問者があなたと直接つながることができます。
この記事で説明したように、インラインおよび全幅フィールド オプションを使用してフォームのさまざまな外観とレイアウトを作成できます。また、Divi の組み込みデザイン オプションを使用すると、フォームを目立たせるユニークで魅力的なデザインを作成できます。
このテクニックが、将来のプロジェクトに役立つ別の設計スキルを追加することを願っています。
このチュートリアルがあなたの次のDiviプロジェクトに刺激を与えることを願っています。 懸念や提案がある場合は、 コメントセクション それを議論する。
相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合。
また、私たちのガイドを参照することを躊躇しないでください WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...