スライドイン列の連絡フォームをDiviHeroセクションにシームレスに含める方法

ページデザインにCTAを含める方法を考えるときは、ヒーローセクションに連絡フォームを含めることを検討してください。 このアプローチにより、人々はあなたのWebサイトをこれ以上ナビゲートしなくても、すぐにあなたと連絡を取ることができます。 Divi内でこの作業をシームレスに行う方法を探しているなら、この投稿を気に入るはずです。 このチュートリアルでは、Diviの組み込みオプションのみを使用して、スライドイン列の連絡フォームをヒーローセクションに追加する方法を示します。 JSONファイルも無料でダウンロードできます！

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

プレビュー

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

デスクトップ

モバイル

コラムお問い合わせフォームヒーローセクションレイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

再作成を始めましょう

新しいセクションを追加

背景色

作業中のページに新しいセクションを追加することから始めます。 セクション設定を開き、背景色を変更します。

• 背景色：＃ff8949

背景画像

次に、Financial Advisor LayoutPackの一部である背景パターンをアップロードします。 この背景画像は、この投稿の冒頭でダウンロードできたフォルダーにあります。

• 背景画像サイズ：フィット
• 背景画像の位置：中央

間隔

セクションの[デザイン]タブに移動し、デフォルトの上下のパディングをすべて削除します。

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

オーバーフロー

[詳細設定]タブでオーバーフローを非表示にして、セクション設定を完了します。 これにより、後で追加するアニメーションがセクションコンテナを超えないようになります。

• 水平オーバーフロー：非表示
• 垂直オーバーフロー：非表示

新しい行を追加

カラム構造

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

サイジング

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

• 列の高さを等しくする：はい
• 幅：80％（デスクトップ）、100％（タブレットと電話）
• 最大幅：1380px
• 行の配置：右

間隔

次に、デフォルトの上下のパディングをすべて削除します。

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

列1の設定

間隔

次に、列1の設定を開き、さまざまな画面サイズで間隔の設定を変更します。

• トップパディング：22％
• ボトムパディング：22％
• 左パディング：10％（タブレットと電話のみ）
• 右パディング：10％（タブレットと電話のみ）

列2の設定

背景色

次に、列2の設定を開き、白い背景色を使用します。

• 背景色：#ffffff

アニメーション

次のアニメーション設定を適用して、列2の設定を完了します。

• アニメーションの方向：左（デスクトップ）、上（タブレットと電話）
• アニメーション時間：1500ms
• アニメーション強度：70％
• アニメーションの開始不透明度：100％

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

H1コンテンツを追加する

1列目の最初のテキストモジュールから始めて、モジュールを追加します。選択したH1コンテンツをいくつか追加します。

H1テキスト設定

モジュールの[デザイン]タブに移動し、H1テキスト設定を次のように変更します。

• 見出しフォント：Oswald
• 見出しフォントスタイル：大文字
• 見出しのテキストの色：#ffffff
• 見出しのテキストサイズ：120px（デスクトップ）、70px（タブレット）、60px（電話）

サイジング

モジュールのサイズ設定も変更します。

• 幅：75％（デスクトップ）、100％（タブレットと電話）
• モジュールの配置：左

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

説明コンテンツを追加

次のモジュール、つまり別のテキストモジュールに進みます。 選択した説明コンテンツを追加します。

テキスト設定

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

• テキストフォント：Open Sans
• テキストの色：#ffffff
• テキスト行の高さ：1.9em

サイジング

サイズ設定も変更します。

• 幅：75％（デスクトップ）、100％（タブレットと電話）
• モジュールの配置：左

ボタンモジュールを列1に追加

コピーを追加

列1に必要な最後のモジュールは、ボタンモジュールです。 選択したコピーをいくつか追加します。

ボタンの設定

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

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストの色：#ffffff
• ボタンの境界線半径：1px

• ボタンフォント：Oswald
• ボタンのフォントスタイル：大文字

列2に宣伝文モジュールを追加する

コンテンツを追加する

2番目の列に進みます。 そこで、最初に必要なモジュールは宣伝文句です。 お好みのタイトルを追加してください。

アイコンを選択

次に、アイコンを選択します。

アイコン設定

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

• アイコンの色：＃ffd8c6
• アイコンの配置：上
• アイコンの配置：中央
• アイコンのフォントサイズを使用：はい
• アイコンのフォントサイズ：250px（デスクトップ）、150px（タブレットと電話）

タイトルテキスト設定

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

• タイトル見出しレベル：H2
• タイトルフォント：Oswald
• タイトルフォントスタイル：大文字
• タイトルテキストの配置：中央
• タイトルテキストの色：＃ff8949
• タイトルテキストサイズ：38px

間隔

左右のパディングも追加します。

• 左パディング：11％
• 右パディング：11％

アニメーション

そして、次のアニメーション設定を追加してモジュールを完了します。

• アニメーションの方向：下
• アニメーション時間：1100ms
• アニメーションの遅延：400ms
• アニメーションの開始不透明度：100％

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

フィールドを全幅に変える

最後のモジュールであるお問い合わせフォームモジュールに移ります。 名前とメールのフィールドを個別に開き、レイアウト設定で全幅にします。

• 全幅にする：はい

背景色

次に、一般的な連絡先フォームモジュールの設定に戻り、背景色を追加します。

• 背景色：＃f7f7f7

フィールド設定

[デザイン]タブに移動し、次にフィールド設定にいくつかの変更を加えます。

• フィールドの背景色：#ffffff
• フィールドテキストの色：＃ff8949
• フィールドトップマージン：15px
• フィールド下マージン：15px
• フィールドトップパディング：20px
• フィールド下部パディング：20px

• フィールドフォント：Oswald
• フィールドフォントスタイル：大文字
• フィールドテキストの配置：中央
• フィールドテキストサイズ：21px

ボタンの設定

次に、それに応じてボタンのスタイルを設定します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストの色：＃ff8949
• ボタンの境界線半径：1px

• ボタンフォント：Oswald
• ボタンのフォントスタイル：大文字

サイジング

また、サイズ設定で幅が「100％」であることを確認しています。

• 幅：100％

間隔

次に間隔設定に移動し、いくつかのカスタムパディング値を適用します。

• トップパディング：14％
• ボトムパディング：14％
• 左パディング：12％
• 右パディング：12％

アニメーション

次に、次のアニメーション設定を使用します。

• アニメーションスタイル：スライド
• アニメーションの方向性：上
• アニメーション時間：1100ms
• アニメーションの遅延：400ms
• アニメーションの開始不透明度：100％

ポジション

そして、デスクトップ上でのみモジュールを再配置して、モジュール設定（およびチュートリアル）を完了します。

• 位置：絶対（デスクトップ）、デフォルト（タブレットと電話）
• 場所：下部中央

プレビュー

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

デスクトップ

モバイル

最終的な考え

この投稿では、ヒーローセクションに連絡フォームをシームレスに含める方法を紹介しました。 具体的には、すべての画面サイズで見栄えのするスライドイン列の連絡フォームを作成しました。 JSONファイルも無料でダウンロードできました！ ご不明な点がございましたら、下のコメント欄にコメントを残してください。

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