を作成しますか お問い合わせフォーム モジュールのおかげであなたのウェブサイトに お問合せフォーム ディビから？ ここに3つのカスタマイズのアイデアがあります…
レス フォーム 連絡先の詳細は、多くの Web サイトにとって不可欠な要素です。 彼らの主な目標は、直感的で、訪問者が簡単に連絡できるようにすることです.
しかし、それがすべてというわけではありません フォーム 連絡先には、正確で定義済みの外観が必要です。 直感的な体験と美しいデザインを簡単に組み合わせることができます。 これは、まさにこのチュートリアルで行うことです。
モジュールの3つのユニークなデザインを共有します お問合せフォーム de Divi これは、Divi の組み込みオプションのみを使用して作成できます。
行こう！
Divi Contact Form モジュールのデザインの概要
デスクトップ版
まずは、さまざまなデザインのモジュールのデスクトップ バージョンを見てみましょう。 お問合せフォーム このチュートリアルで設計します。
モバイル版
小さな画面サイズでは次のように表示されます。
今すぐDIVIをダウンロードしてください!!!
Divi Contact Form モジュールをカスタマイズする方法: 3 つの例
お問い合わせフォームの作成 #1
新しいセクションを追加する
グラデーションの背景
最初の例から始めましょう！ 新しいセクションを追加し、背景設定に移動して、グラデーションの背景を追加します。
- 勾配停止
- 34%: #4c00ff
- 34%: #ffd400
- タイプ: ラウンド
- グラデーションの方向: 左下
スペーシング
次に、[デザイン] タブの [間隔] オプションに移動し、次のように設定を変更します。
- パディング (上下): 200px
新しい行を追加
カラムの構造
次の列構造を使用して新しい行を追加します。
列 1: 背景色
まだモジュールを追加せずに、行の設定を開き、次に列 1 の設定を開き、下に背景色を追加します
- 背景: rgba(255,255,255,0.55)
列 1: 背景画像
また、最初の列に背景画像を追加します。
- 背景画像の繰り返し: 繰り返しなし
- 背景画像ブレンド: スクリーン
列 2: 背景画像
そして、XNUMX列目に白い背景色。
- 背景: #ffffff
サイズ剤
次に、サイズ変更パラメーターを変更します。
- 列の高さを均等にする: はい
スペーシング
また、デフォルトのカスタム パディングをすべて削除します。
- パディング (上下): 0px
列境界半径
高度なタブで両方の列に境界線の半径を追加します。
border-radius: 10px;
テキスト モジュールを列 1 に追加します。
コンテンツを追加する
さまざまなモジュールの追加を開始する時が来ました! 選択したコンテンツを含むテキスト モジュールを最初の列に追加します。
テキスト設定
次に、テキスト モジュールの [デザイン] タブに移動し、いくつかの変更を行います。
- テキスト：
- フォント: 満足
- 文字色：#333333
- サイズ: 100px
- 行の高さ: 1 em
- 配置: 中央
スペーシング
カスタム塗りつぶし値も追加します。
- パディング (上): 600px
- パディング (下): 100px
シャドーボックス
デザインに深みを加えるには、微妙なボックス シャドウを使用します。
- ボックスシャドウブラー強度：80px
- ボックス シャドウの拡散強度: -16px
- 影の色: rgba(0,0,0,0.3)
列2に画像モジュールを追加します
画像をアップロードする
続けて、XNUMX 番目の列に Image モジュールを追加します。 選択した画像をアップロードします。
サイズ剤
このモジュールのサイズ設定を変更します。
- 幅: 25% (デスクトップ)、50% (タブレット)、60% (電話)
- モジュールの配置：中央
スペーシング
負の上余白を使用してオーバーラップを作成します。
- マージン (上): -60%
国境
画像の境界線を次のように変更します。
- 角丸: 100px (すべての角)
テキスト #1 モジュールを列 2 に追加
コンテンツを追加する
Image モジュールのすぐ下に、コンテンツを含む Text モジュールを追加します。
テキスト設定
このモジュールのテキスト設定を編集します。
- テキスト：
- フォント: 満足
- 文字色：#333333
- テキストサイズ: 44px
- 向き: 中央
テキスト #2 モジュールを列 2 に追加
コンテンツを追加する
次に、別の Text モジュールを追加します。
テキスト設定
このモジュールのテキスト設定も変更します。
- テキスト：
- フォント: Arial
- テキストの色: #ffd400
- テキストの色: 18px
- 文字間隔: 2px
- 向き: 中央
スペーシング
次に、下マージンを追加します。
- 余白 (下): 100px
Contact Form モジュールを列 2 に追加します。
名前と電子メールフィールドで「全角にする」オプションを有効にします
最後に必要なモジュールは Contact Form モジュールです。 他のことをする前に、名前とメールのフィールドを開いてレイアウトを変更します。
- 全角にする: はい
件名フィールドを追加する
このデザインを作成するために、件名用に別のフィールドを追加しました。
スパム保護
次に、キャプチャ オプションを無効にします。
- 基本的なキャプチャを使用する: いいえ
フォームフィールドのテキスト設定
この Contact Form モジュールのフォーム フィールドのテキスト設定を変更します
- 田畑：
- 背景色: rgba(255,255,255,0)
- フォント: Arial
- フォントの太さ: ライト
- テキストサイズ: 16px
- 文字間隔: 2px
ボタン設定
また、ボタンの外観も変更しています。
- ボタンにカスタムサイズを使用: はい
- ボタン：
- テキストの色: #ffd400
- 境界線の幅: 0 ピクセル
- 文字間隔: 2px
- フォント: Arial
- フォント スタイル: U
- 下線の色: #4c00ff
スペーシング
次に、いくつかのカスタム パディング値を追加します。
- パディング (下): 100px
- パディング（左右）：50px
ボーダー
そして、各フィールドに微妙な下枠を追加します。
- 入力下枠の幅: 2px
- 入力 下枠の色: #efefef
個々のフィールドの間隔
最後に、メッセージ フィールドを除く各フィールドに下余白を追加します。
- 余白 (下): 20px
お問い合わせフォームの作成 #2
新しいセクションを追加する
グラデーションの背景
次の例に移りましょう！ グラデーションの背景を持つ新しいセクションを追加します。
- 勾配停止:
- 50%: #562fef
- 50%: #ffffff
- グラデーションの種類: 線形
スペーシング
このセクションの間隔設定にカスタム パディング値を追加します。
- パディング (上下): 200px
新しい行を追加
カラムの構造
次の列構造を使用して新しい行を追加します。
背景色
モジュールを追加せずに、行設定を開き、行に背景色を追加します。
- 背景色: #ffffff
2 列のグラデーションの背景
行の XNUMX 列目にグラデーションの背景を追加します。
- 勾配停止:
- 0%: #9932ff
- 100%: #562fef
- タイプ: 線形
- ステアリング: 160 度
サイズ剤
また、ライン サイズ パラメータを変更します。
- カスタムガター幅を使用：はい
- ガター幅: 1
- 列の高さを均等にする: はい
スペーシング
次に、カスタムの間隔値を追加します。
- ライン ：
- パディング (上下): 0px
- 列 1:
- パディング: 100px (上)、50px (下)
- パディング (左右): 50px
- 列 2:
- パディング (上下): 100px
- パディング (左右): 50px
ボーダー
各線の境界線に「20px」を追加します。
シャドーボックス
最後に、微妙なボックス シャドウを線に追加します。
- ボックスシャドウブラー強度：45px
- ボックス シャドウの拡散強度: -11px
- サドウの色: rgba(0,0,0,0.3)
テキスト モジュールを列 1 に追加します。
コンテンツを追加する
モジュールの追加を開始する時が来ました! 最初の列のテキスト モジュールから始めます。
テキスト設定
このモジュールのテキスト設定を編集します。
- テキスト：
- フォントの太さ: 超太字
- フォントスタイル：TT
- カラー: #562fef
- サイズ: 100px (デスクトップ)、80px (タブレット)、60px (スマートフォン)
- 文字間隔: -10px
- 行の高さ: 1 em
スペーシング
また、下余白を追加します。
- 余白 (下): 50px
Contact Form モジュールを列 1 に追加します。
要素
最初の列で必要な XNUMX 番目のモジュールは、Contact Form モジュールです。モジュールを追加したら、[Use Basic Captcha] オプションをオフにします。
- 基本的なキャプチャを使用する: いいえ
フォームフィールドのテキスト設定
次に、フォーム フィールドの背景色を変更します。
- フィールドの背景色: #ffffff
ボタン設定
また、ボタン設定をいじって、テキスト ボタンの代わりにアイコン ボタンを作成します。
- ボタンにカスタム スタイルを使用する: はい
- ボタン：
- テキストサイズ: 73px
- テキストの色: rgba(0,0,0,0) (デフォルト),
- 背景色: rgba(255,255,255,0) (ホバー)
- ボーダー幅：0px
- アイコンの色: #9932ff
- ボタンのホバー時にのみアイコンを表示：いいえ
シャドーボックス
最後に、各フィールドに微妙なボックス シャドウを追加します。
- ボックスシャドウブラー強度：36px
- ボックス シャドウの拡散強度: -14px
- 影の色: rgba(0,0,0,0.3)
テキスト モジュールを列 2 に追加します。
コンテンツを追加する
XNUMX 列目に必要な最初のモジュールは、別の Text モジュールです。
テキスト設定
コンテンツを追加したら、このモジュールのテキスト設定を編集します。
- テキスト：
- フォントの太さ: 超太字
- フォントスタイル：TT
- 色: #ffffff
- サイズ: 23px
- 文字間隔: -1px
宣伝文句モジュール #1 を列 2 に追加
コンテンツを追加する
XNUMX 番目に必要なモジュールは Blurb モジュールです。 先に進み、いくつかの連絡先情報を入力してください。
アイコンを選択します
次に、対応するアイコンを選択します。
アイコンの設定
このアイコンの設定を変更します。
- アイコンの色: #ffffff
- 画像/アイコンの配置: 右
タイトルテキストの設定
次に、タイトル テキストの設定をいくつか変更して続行します。
- タイトルの文字サイズ: 15px
- タイトル文字の間隔: -0,5 ピクセル
スペーシング
そして、上余白を追加します。
- 余白 (上): 120px
BlurbモジュールをXNUMX回複製
最初の Blurb モジュールの編集が完了したら、先に進んでモジュールを XNUMX 回複製できます。
XNUMX つの複製のコンテンツとアイコンを変更します。
XNUMX つの複製のコンテンツとアイコンを編集して、さまざまな種類の連絡先情報を訪問者と共有します。
XNUMX つの複製の間隔を変更する
XNUMX つの複製の上余白も変更する必要があります。
- 余白 (上): 30px
お問い合わせフォームの作成 #3
新しいセクションを追加する
背景色
XNUMX番目の例に移りましょう！ 次の背景色で新しいセクションを追加します。
- 背景色: #3491CE
スペーシング
間隔設定でカスタム パディング値を追加して続行します。
- パディング（上下）：200px
行＃1を追加
カラムの構造
次に、次の列構造を使用して新しい行を追加します。
テキスト モジュールを追加する
コンテンツを追加する
モジュールの追加を開始する時が来ました! 最初の列に追加する必要がある最初のモジュールは、テキスト モジュールです。 選択内容を入力します。
テキスト設定
次に、テキストの設定を変更します。
- テキスト：
- フォントの太さ: 超太字
- テキストの色: rgba(255,255,255,0.24)
- テキストサイズ: 100px (デスクトップ)、70px (タブレット)、36px (スマートフォン)
- 行の高さ: 1 em
- 向き: 中央
スペーシング
また、マイナスの下マージンを追加します。
- 余白 (下): -100px
2行目を追加
カラムの構造
この例を完了するために必要な XNUMX 番目の行には、次の列構造が含まれています。
グラデーションの背景
モジュールを追加せずに、ライン設定を開き、グラデーションの背景を追加します。
- 勾配停止:
- 50%: #11CE84
- 50%: #10C77F
- グラデーションの種類: 線形
- ステアリング: 160 度
サイズ剤
また、サイジングパラメータを変更します。
- カスタムガター幅を使用：はい
- ガター幅: 1
- 列の高さを均等にする: はい
スペーシング
次に、いくつかのパディング値を追加します。
- パディング: 150px (上)、100px (下)
- パディング: 50px (左右)
ボーダー
次に、境界設定に移動し、各コーナーに「20px」を追加します。 下罫線も使用します。
- 角丸：20px
- 下枠の幅: 10px
- 下枠の色: #1ba35a
シャドーボックス
微妙なボックス シャドウを追加して、線の設定を完了します。
- ボックスシャドウブラー強度：80px
- ボックス シャドウの拡散強度: -24px
- 影の色: rgba(0,0,0,0.3)
Contact Form モジュールを列 1 に追加します。
名前と電子メールフィールドで「全角にする」オプションを有効にします
行の最初の列で必要な最初のモジュールは、Contact Form モジュールです。 名前と電子メール フィールドを開き、レイアウト設定を変更します。
- 全角にする: はい
要素
次に、キャプチャを無効にします。
- 基本的なキャプチャを使用する: いいえ
ボタン設定
ボタンの設定を変更します。
- ボタンにカスタム スタイルを使用する: はい
- ボタンのテキストの色: #ffffff
- 勾配停止:
- 50%: #3AA0E3
- 50%: #3491CE
- グラデーションの種類: 線形
- グラデーション方向：155度～
- ボタンの境界線の幅：0ピクセル
- ボタンの境界線の半径: 10px
- ボックスシャドウスプレッド強度：-2px
- シェードカラー：#0a60af
参照： Divi: 「全幅メニュー」モジュールのバスケットと検索アイコンをカスタマイズする方法
ボーダー
また、各フィールドに「5px」の丸みを帯びた角を追加します。
テキスト モジュールを列 2 に追加します。
コンテンツを追加する
XNUMX 番目の列で、最初に必要なモジュールは Text モジュールです。 先に進み、いくつかのコンテンツを入力してください。
背景色
次に、背景色を変更します。
- 背景: rgba(255,255,255,0.13)
テキスト設定
また、テキスト設定で編集します。
- テキスト：
- フォントの太さ: ライト
- 文字色：#ffffff
- テキストサイズ: 15px
- 文字間隔: -0,5px
スペーシング
また、カスタム パディングを追加して、モジュールに余裕を持たせます。
- パディング（上下）：12px
- パディング (左右): 10px
ボーダー
また、左上隅と左下隅に「20px」を追加します。 その上に、左の境界線を追加します。
- 角丸：20px(左上と左下)
- 左ボーダーの幅: 34px
- 左枠の色: #edf000
可視
このデザインをさまざまな画面サイズに合わせるために、携帯電話とタブレットのテキスト モジュールを無効にします。
Text モジュールを XNUMX 回複製する
最初の Text モジュールの編集が完了したら、先に進み、モジュールを XNUMX 回複製します。
XNUMX つの複製の内容を変更する
XNUMX つの複製の内容を別のものに変更します。
XNUMX つの複製の間隔を変更する
また、各モジュール間にスペースを作成するために上部の余白を追加します。
- 余白 (上): 20px
XNUMX つの複製の境界を変更する
最後に、各複製の左側の境界線の色を個別に変更します。
- カラー 1: #00faff
- カラー 2: #00f76f
の記事もご覧ください レスポンシブ アコーディオン スライダーの作成方法
概要
デスクトップ版
すべての手順を完了したので、デスクトップ上の Divi Contact Form モジュールのデザインを最後に見てみましょう.
モバイル
また、小さい画面サイズでの Divi の Contact Form モジュールのデザインから期待できることは次のとおりです。
今すぐDIVIをダウンロードしてください!!!
まとめ
この投稿では、作成したWebサイトで簡単に使用および変更できる3つの素晴らしいDivi Contact Formモジュールデザインを共有しました.
レス フォーム 連絡先は多くの Web サイトにとって不可欠な部分であるため、訪問者が連絡を取るよう説得するデザインにすることが重要です。
このチュートリアルがあなたの次のDiviプロジェクトに刺激を与えることを願っています。 懸念や提案がある場合は、 コメントセクション それを議論する。
相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合。
また、私たちのガイドを参照することを躊躇しないでください WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
