ズームインスクロールアニメーションを使用してレスポンシブフルスクリーンコンタクトフォームセクションを作成する方法

多くのWebサイトでは、ページの連絡先セクションが訪問者にとって理想的な宛先です。 明白なことを言うと、ほとんどの人/会社は彼らの訪問者がより多くのビジネスのために彼らに連絡することを望んでいます。 そのため、変換を改善するためにそのセクションを最適化することが重要です。 これを行う1つの方法は、連絡先情報を気を散らすことなく表示できるフルスクリーンの連絡先フォームレイアウトを作成することです。

このチュートリアルでは、Diviサイトの任意のページで使用できるフルスクリーンの連絡先フォームセクションレイアウトを作成します。 また、レスポンシブデザインの設定を使用してレイアウトをカスタマイズし、小型の携帯電話でもフルスクリーンレイアウトの見栄えを維持します。

始めましょう！

スニークピーク

これから作成するレスポンシブフルスクリーンお問い合わせフォームセクションを簡単に見てみましょう。

レイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

https://youtu.be/5Qt9J95uME8

私たちのYoutubeチャンネルを購読する

セクションレイアウトをDiviライブラリにインポートするには、Diviライブラリに移動します。

[インポート]ボタンをクリックします。

移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。

次に、インポートボタンをクリックします。

完了すると、セクションレイアウトがDiviBuilderで使用できるようになります。 これはセクションレイアウトであるため、ビルダーで新しいセクションを作成するときに、このレイアウトをページ、投稿、またはテンプレートに追加する必要があることに注意してください。

セクションレイアウトをページに追加する方法については、投稿の下部を参照してください。

チュートリアルに取り掛かりましょう。

始めるために必要なもの

開始するには、次のことを行う必要があります。

1. まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
2. WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。

連絡先セクションのレイアウトの作成

まず、Divi Builderを使用して、作成済みのレイアウトを新しいページに追加します。 これにより、デザインがスピードアップし、セクション（お問い合わせフォーム付き）をフルスクリーンでレスポンシブにするために必要なことに集中できるようになります。 次に、スクロール効果を追加して、最後にすべてをまとめます。

既成のレイアウトの追加

Diviビルダーを使用してページを編集するためにクリックしたら、「既成のレイアウトを選択する」オプションを選択します。

次に、ビジネスコーチの連絡先ページのレイアウトを見つけて、[このレイアウトを使用]ボタンをクリックします。

セクション設定

レイアウトがページに読み込まれたら、レイアウトの最上部にあるセクションの設定を開き、以下を更新します。

バックグラウンド

• 背景色：＃3550a0

セクションの高さとパディング

• 最小高さ：600px
• 高さ：104vh
• パディング：上0px、下0px

この設計の鍵の1つは、高さを少なくとも100vh（ビューポートの高さの100％）に設定することです。 これにより、セクションがブラウザウィンドウの高さ全体に広がるようになります。 ユーザーがセクションにスクロールするときに少し余分なスペースがあるように、104vhの高さを追加しています。

min-heightを600pxに設定することはフォールバックの高さであり、ブラウザーの高さが小さすぎる場合でも、セクション内の要素が非表示になることはありません。 これは、セクション内のコンテンツの量に応じて調整する必要があります。

カスタムCSS

セクション内の行を垂直方向に中央揃えにするには（フルスクリーンセクションに最適）、次のカスタムCSSをメイン要素に追加します。

display:flex;flex-direction: column;

お問い合わせフォームの追加

お問い合わせフォームをセクションに追加するには、下の既成のセクションから既存のテキストモジュールの下にドラッグします。

既成のレイアウトから余分なセクションを削除する

次に、下部のセクションを削除して、構築している1つのセクションだけが残るようにします。

フルスクリーンレスポンシブデザインのセクション要素のカスタマイズ

セクションのレイアウトが完了したので、すべてのデバイスのフルスクリーンセクションに適切にスケーリングするレスポンシブデザインを使用して、セクションのコンテンツ（または子要素）のカスタマイズを開始する準備が整いました。

各要素のテキストサイズと間隔のほとんどにvh長さの単位を使用します。 これは、短い電話ディスプレイでも、フルスクリーンレイアウトで要素を表示し続けるのに役立ちます。

行設定

行設定を開き、以下を更新します。

• 側溝幅：1
• 幅：100％
• パディング：上0px、下0px、左7vh、右7vh

テキストモジュールの設定

テキストモジュールの設定を開き、以下を更新します。

見出しのテキストサイズ

• 見出しのテキストサイズ：7vh（デスクトップ）、5vh（タブレットと電話）

• 見出し3テキストサイズ：2vh（デスクトップ）、3vh（タブレット）、12px（電話）

マージン

• マージン：3vhボトム

お問い合わせフォームの設定

次に、vh長さの単位を使用して、連絡先フォームでレスポンシブデザインの調整を続けます。 お問い合わせフォームの設定を開き、以下を更新します。

フィールド設定

• フィールドマージン：3vh
• Fleidsパディング：2vh上部、2vh下部
• フィールドテキストサイズ：2.5vh

ボタンのテキストサイズ

• ボタンのテキストサイズ：2vh

幅

• 最大幅：なし

スクロール効果の追加

デザインの最後のステップは、ページを下にスクロールしたときに連絡先フォームセクションを全画面表示に移行するスクロール効果です。 これを行うには、セクション設定をもう一度開き、以下を更新します。

[スケールアップとスケールダウン]タブの下…

• スケールアップとスケールダウンを有効にする：はい
• 開始スケール：60％（0％）
• ミッドスケール：60％（70％）
• 終了スケール：100％（100％）

これで、フルスクリーンの連絡フォームセクションのデザインは完了です。 ただし、最終結果を表示する前に、まずWebサイトのいずれかのページに追加してみましょう。

あなたのウェブサイトのフルスクリーンお問い合わせフォームセクションを使用する

セクションレイアウトをDiviライブラリに保存

このセクションをWebサイトの別のページに追加する前に、まずセクションのレイアウトをDiviライブラリに保存する必要があります。

これを行うには、セクションメニューの[ライブラリに追加]アイコンをクリックします。 次に、レイアウトに名前を付けて、[ライブラリに保存]ボタンをクリックします。

これで、セクションレイアウトは、将来使用するためにDiviライブラリ内で使用できるようになります。

Diviライブラリからページにセクションレイアウトを追加

フルスクリーンの連絡先フォームのセクションレイアウトをDiviのページ（または投稿）に追加するには、DiviBuilderを使用してページを開いて編集します。

次に、クリックしてページのどこかに新しいセクションを追加します。

[セクションの挿入]ポップアップで、[ライブラリから追加]タブをクリックし、リストから保存したセクションレイアウトを選択します（これは「フルスクリーンお問い合わせフォーム」と呼ばれます）。

最終結果

それでは、最終結果を確認しましょう。

こちらはデスクトップです。

こちらはタブレット（実際にはiPad Pro）です。

こちらは電話です（実際にはiPhone 5）。 画面が非常に短い場合でも、コンテンツはフルスクリーンビュー内に収まることに注意してください。

最終的な考え

フルスクリーンのお問い合わせフォームセクションが、ご自身のウェブサイト向けにコンバージョン率の高いお問い合わせフォーム/セクションを作成するのに役立つことを願っています。 心に留めておくべき重要なことは、コンテンツが小さな電話でもうまく表示されるように、コンテンツを常に十分に簡潔に保つことです。 このレイアウトで使用されている主要なレスポンシブデザイン手法のいくつかは、Webサイト全体のデザインを調整するときにも役立ちます。

このトピックの詳細については、vwおよびvhの長さの単位を使用してDiviでレスポンシブコンタクトフォームを設計する方法に関する投稿を確認してください。

コメントでお返事をお待ちしております。

乾杯！