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