すべての Web サイトには連絡先セクションが必要ですが、それは標準的なデザインを採用しなければならないという意味ではありません。 ディビのスクロール効果で、浮き出る接触部を演出できます。 訪問者があなたのサイトとやり取りするように誘う垂直スクロールの連絡先セクション レイアウトで、ユーザーのやり取りを強化します。 お問い合わせフォーム. この記事では、どのページにも追加できる全幅のフローティング連絡先セクションを作成する方法を紹介します。 Divi Theme Builder を使用して、サイト全体のフッターの上部に追加することもできます.
以下に、独自のDiviライブラリにダウンロードできるJSONレイアウトの無料ダウンロードファイルを示します。 また、マップの背景を再作成するのに役立つPSDテンプレートと、独自の色でカスタマイズできるマップピンSVGも含まれています。
要素構造を作成する
このデザインでは、紹介したい場所を Google マップで表現した背景画像を使用します。 これは、Photoshop またはその他の画像エディターで行うことができます。
新しいセクションを追加する
今こそ、DiviBuilderを使用してフローティングコンタクトセクションの作成を開始するときです。 最初に行うことは、新しいページまたは既存のページを開いて、新しいセクションを追加することです。
[コンテンツ]タブで、Photoshopで作成したマップの背景を追加します。
- 背景画像：変更したマップ
スペーシング
次に、デザインタブでセクション間隔の設定をカスタマイズします。
- 上部および下部マージン：50vh
- 下部のパディング：0vw
可視
次に、オーバーフローを可視に設定します。
- 水平および垂直オーバーフロー：可視
役職
最後に、セクションのZインデックスを10に設定します。
- Zインデックス：10
新しい行を追加
カラム構造
今こそ、いくつか追加するときです。 まず、2列の行を追加します。
サイズ剤
ラインパラメータを開き、次のようにサイズを調整します。
- 幅
- オフィス：90％
- タブレットと電話：80％
- 最大幅：90％
可視
[詳細設定]タブをクリックして、オーバーフローを調整します。
- 水平および垂直オーバーフロー：可視
役職
位置設定を変更して、行の設定を完了します。
- 位置：相対
- 原点オフセット：左上
- 垂直オフセット
- デスクトップ：-8vw
列1の設定
経歴
モジュールを追加する前に、個々の列にスタイルを設定する必要があります。 列1に背景色を追加します。
- 無地：＃25274d
間隔
次に、間隔の設定を調整します。
- 上下のパディング
- デスクトップとタブレット：7vw
- 左と右のパディング
- デスクトップ：3vw
- タブレットと電話：6vw
ボーダー
次に、いくつかの丸い角を境界線設定に追加します。
- 丸みを帯びた角：10隅すべてXNUMXpx
スクロール効果
最後になりましたが、スクロール効果の設定で垂直方向の動きを使用してください。 これはフローティング効果を作成するのに役立ちます。
- スクロール変換効果：垂直運動
- 上下動/デスクトップセット
- 開始オフセット：4
- 中央オフセット：0（50％）
- 終了オフセット：-4
- 上下運動/タブレットと電話セット
- 開始オフセット：4
- 中央オフセット：0（40％および60％）
- 終了オフセット：-3
- トリガーモーション効果：要素の中央
列2の設定
役職
次に、XNUMX番目の列のパラメーターに移りましょう。 それに応じて位置設定を調整します。
- 位置：相対
- オフセットの原点：左上
- 垂直オフセット
- オフィス：25vw
スクロール効果
また、この列に垂直方向の動きを追加します。
- スクロール変換効果：垂直移動
- 垂直/デスクトップの動きを定義する
- 開始オフセット：2
- 平均オフセット：0（50％で）
- 終了オフセット：-2
- 垂直方向の動きを定義する/タブレットと電話
- 開始オフセット：0
- 平均オフセット：0（50％で）
- 終了オフセット：-2
- モーションエフェクトトリガー：エレメントトップ
1列にテキストモジュールを追加します
中身
1列目のテキストモジュールから始めて、モジュールを追加します。必要なH2コンテンツを追加します。
タイトルテキスト
[デザイン]タブに移動し、H2テキストのスタイルを次のように設定します。
- タイトルレベル：H2
- フォント：Palanquin Dark
- フォントの太さ：太字
- フォントスタイル：TT
- 色：黄色＃ffd868
- サイズ
- オフィス：5vw
- タブレット：10vw
- 電話：12vw
- 文字間隔：4px
列1に連絡フォームモジュールを追加する
中身
テキスト モジュールの下に、 お問い合わせフォーム. 使用するフィールドは次のとおりです。
- 名前
- メール
- 材料
- メッセージ
スパム保護
モジュールのスタイルを設定する前に、 お問い合わせフォーム。 スパム保護を有効にして、ReCaptcha アカウントを接続します。
- スパム保護サービスを使用する：はい
- サービスプロバイダー：ReCaptcha
- アカウントを選択
フィールド
[デザイン]タブに切り替えて、次のようにフィールドのスタイルを設定します。
- 背景色：ダークブルー＃25274d
- テキストの色：ライトグレー＃d1d1d1
- フォーカスの背景色：ダークブルー＃25274d
- フォーカステキストの色：ライトグレー＃d1d1d1
- フォント：Palanquin
- スタイル：TT
- 文字サイズ
- オフィス：0.9vw
- タブレット：2vw
- 電話：3vw
- 文字間隔：1px
ボタン
次に、ボタンのスタイルを設定します。
- カスタムスタイル：はい
- テキストサイズ：20px
- テキストの色：ダークブルー＃25274d
- 背景色：黄色＃ffd868
- ボーダーの半径：7px
- アイコンの色：ダークブルー＃25274d
- 上余白：5px
サイズ剤
次に、サイジングパラメータを変更します。
- 幅：100％
- 最大幅：100％
スペーシング
また、上部パディングを追加します。
- 上部パディング：4vw
ボーダー
境界パラメータをカスタマイズして、モジュールパラメータを完成させます。
- 角が丸い入口：6つの角がXNUMXpx
- エントリーボーダースタイル：四辺すべて
- 入口のボーダーの幅：2px
- エントリーボーダー色：黄色＃ffd868
ソーシャルメディアトラッキングモジュールを列2に追加します
中身
列2に移動し、ソーシャルメディアモジュールを追加します。 必要なすべてのソーシャルネットワークを使用してください。
リンク
スタイルを設定する前に、対応するネットワークへのリンクを追加します。
記事のコンテキスト
次に、最初のソーシャルネットワークを開き、背景色を変更します。
- 色：ダークブルー＃25274d
要素アイコン
同じ要素の[デザイン]タブで、アイコンの設定を次のように変更します。
- 色：黄色＃ffd868
- アイコンのフォントサイズ
- デスクとタブレット：31ピクセル
- 電話：26ピクセル
アイテムの間隔
次に、小さなマージンを追加して、アイコンを互いに分離します。
- 右マージン：1vw
アイテムスタイルをコピーして貼り付ける
残りのソーシャルネットワークのスタイルを設定するには、メインコンテンツウィンドウに戻り、最初のアイコンから要素スタイルをコピーします。 次に、残りのソーシャルネットワークに要素スタイルを貼り付けます。
Alignement
メインの[デザイン]タブに切り替えて、モジュールが左揃えになっていることを確認します。
- モジュールの配置：左
サイズ剤
次に、モジュールのサイズを調整します。
- 幅：100％
スペーシング
また、デフォルトの塗りつぶしをすべてクリアします。
- 上、下、左、右のパディング：0vw
ボーダー
最後に、境界線の設定に丸い角を追加します。 これにより、すべてのアイコンの境界線が一度に調整されます。
- 角丸
- 左上と右上：7ピクセル
- 左下と右下：0px
2列にテキストモジュールを追加します
中身
ソーシャルメディアモジュールの下に、別のテキストモジュールを追加します。 選択したコンテンツを追加します。 電話番号とメールのXNUMXつのアドレスを追加しました。 すべて大文字の各アイテムのタイトルには太字を使用してください。
- 本社： 1587 Sukhumvit Soi 21、バンコク、タイ。
- POS ：エンポリアムモール2階
- 電話番号： （321）564 2398
- メールアドレス： [メール保護]
コンテキスト
モジュールの背景色を変更します。
- 色：ダークブルー＃25274d
テキスト
デザインタブに切り替えて、テキストのスタイルを設定します。
- フォント：Palanquin
- 色：黄色＃ffd868
- サイズ：18px
スペーシング
また、カスタム間隔値を追加します。
- 上マージン
- オフィス：-60px
- タブレットと電話：-50ピクセル
- 上、下、左、右のパディング
- オフィス：3vw
- タブレット：6vw
- 電話：8vw
ボーダー
そして、境界線の設定に丸い角を追加して、モジュールを完成させます。 それでおしまい！
- 角の丸い：右上、左下、右下に10ピクセル。
概要
フローティングコンタクトセクションの再作成が完了したので、さまざまな画面サイズで結果を最終的に確認します。
追加のリソース
これは ressources あなたが今読んだものを補完するかもしれません。 それらは、追加で、または持っていない人が使用する必要があります Diviテーマ.
フィニッシュへ
新しいDiviスクロール効果を使用すると、標準のレイアウトが素敵なデザインに変わります。 独自の背景を作成することで、完成したデザインの外観をより細かく制御できます。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！
