Diviスクロールモーションエフェクトを使用してフローティングコンタクトセクションを作成する

すべてのウェブサイトには連絡先セクションが必要ですが、それはあなたが標準的なデザインに行く必要があるという意味ではありません。 Diviのスクロール効果を使用すると、目立つフローティングコンタクトセクションを作成できます。 訪問者を連絡フォームに誘導する垂直スクロール連絡セクションレイアウトを使用して、ユーザーの操作を改善します。 この投稿では、任意のページに追加できる全幅のフローティングコンタクトセクションを作成する方法を紹介します。 Divi Theme Builderを使用して、サイト全体のフッターの上部に追加することもできます。

以下に、独自のDiviライブラリにアップロードするためのJSONレイアウトを含む無料のダウンロード可能なフォルダーを示します。 また、マップの背景を再作成するのに役立つPSDテンプレートと、マップピンのSVGが含まれているため、独自の色でパーソナライズできます。

それを手に入れよう！

プレビュー

お問い合わせフォームのレイアウトの作成を開始する前に、さまざまな画面サイズでの結果を確認してください。

デスクトップ

モバイル

フローティングコンタクトセクションを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

1.フローティングコンタクトセクションのマップ背景を作成します

Googleマップを開く

このチュートリアルの最初のステップは、白黒の地図の背景を作成することです。 独自に作成するには、以下の手順に従います。

• まず、Googleマップを開いて、住所を検索します。
• 読み込まれたら、ズームアウトして、住所周辺の街や通りの大部分が見えるようにします。

• 次に、現在地が地図の右上の象限になるように地図を配置します。
• 次に、ロケーションピンを取り外します。
• 最後に、隅のタブを避けて地図のスクリーンショットを撮ります。

ピンをパーソナライズする

上記のダウンロード可能なファイルには、デザインで使用したピンのSVGファイルが含まれています。 あなたはそれを使用して、あなたのベクターグラフィックエディタで色を変えることを歓迎します。 Photoshopで色を変更したい場合は、透明なPNGも含まれています。

SVGピンについては次の手順に従います。

• まず、このチュートリアルの冒頭で無料のファイルをダウンロードし、フォルダーを解凍します。
• 次に、Illustrator、Inkscape、またはお気に入りのベクターエディターでSVGピングラフィックを開きます。
• 第三に、あなたのブランドやウェブサイトに合うように色を変更します。
• 最後に、透明なPNGとして保存します。

Photoshopで編集

それでは、すべてをまとめましょう。 まず、お気に入りのグラフィックエディタでマップを開いて、色の彩度を下げます。 次に、ピンを追加します。

Photoshopを使用している場合は、含まれているPSDファイルを使用して、マップのスクリーンショットを2番目のレイヤーのスマートオブジェクトに追加するだけです。

スマートオブジェクトを使用するには、次の手順に従います

• PSDファイルを開きます。
• オレンジ色のレイヤーをダブルクリックします。 新しいウィンドウが開きます。
• 私たちの地図をあなたのものに置き換えてください。
• 保存をクリックすることを忘れないでください。
• メインの編集ウィンドウに戻り、そこにも[保存]をクリックします。
• Web用に.jpgとしてエクスポートします。

Photoshopをお持ちでない場合は、次の手順に従ってください。

• まず、1920ピクセルx700ピクセルで新しいプロジェクトを作成します。
• 次に、マップのスクリーンショットをキャンバスに配置します。 位置を中央より少し高い右上の象限に保つようにしてください。
• 第三に、画像調整を使用すると、画像が白黒になります。
• また、コントラストを追加します。
  1. 明るさ：-25
  2. コントラスト：-50
• 次に、画像レイヤーをクリックして、約55％の透明度を追加します。
• 背景が白以外のWebページでこのデザインを作成する場合は、画像の下に白いレイヤーを追加して、Webサイトの背景色に関係なく基本色を白に保ちます。
• あなたの場所にピンを置くことによって続行します。 高さ約90pxにサイズ変更します。 最上層に残します。
• 最後に、.jpgとしてダウンロードします。

2.要素構造を作成します

新しいセクションを追加

バックグラウンド

次に、DiviBuilderを使用してフローティングコンタクトセクションの構築を開始します。 最初に行うことは、新しいページまたは既存のページを開いて、新しいセクションを追加することです。

[コンテンツ]タブで、Photoshopで作成した地図の背景を追加します。

• 背景画像：編集した地図

間隔

次に、[デザイン]タブでセクションの間隔設定をカスタマイズします。

• 上マージンと下マージン：50vh
• ボトムパディング：0vw

可視性

次に、オーバーフローを表示するように調整します。

• 水平および垂直オーバーフロー：目に見える

ポジション

最後に、セクションのZインデックスを10に設定します。

• Zインデックス：10

新しい行を追加

カラム構造

次に、いくつかの要素を追加します。 まず、2列の行を追加します。

サイジング

行設定を開き、次のようにサイズを調整します。

• 幅
  • デスクトップ：90％
  • タブレットと電話：80％
• 最大幅：90％

可視性

[詳細設定]タブをクリックして、次にオーバーフローを調整します。

• 水平および垂直オーバーフロー：目に見える

ポジション

位置設定を変更して、行設定を完了します。

• 位置：相対
• オフセット原点：左上
• 垂直オフセット
  • デスクトップ：-8vw

列1の設定

バックグラウンド

モジュールを追加する前に、個々の列のスタイルを設定する必要があります。 列1に背景色を追加します。

• 単色：＃25274d

間隔

次に、間隔の設定を調整します。

• 上部と下部のパディング
  • デスクトップとタブレット：7vw
• 左右のパディング
  • デスクトップ：3vw
  • タブレットと電話：6vw

国境

次に、境界線の設定にいくつかの丸い角を追加します。

• 丸みを帯びた角：四隅すべてを10px

スクロール効果

大事なことを言い忘れましたが、スクロール効果の設定で垂直方向の動きを使用します。 これは、フローティング効果を作成するのに役立ちます。

• スクロール変換効果：垂直モーション
• 垂直モーション/デスクトップを設定する
  • 開始オフセット：4
  • ミッドオフセット：0（50％）
  • 終了オフセット：-4
• 垂直方向の動き/タブレットと電話を設定する
  • 開始オフセット：4
  • 中間オフセット：0（40％および60％）
  • 終了オフセット：-3
• モーションエフェクトトリガー：要素の中央

列2の設定

ポジション

次に、2番目の列の設定に進みます。 それに応じて位置設定を調整します。

• 位置：相対
• オフセット原点：左上
• 垂直オフセット
  • デスクトップ：25vw

スクロール効果

この列にも垂直方向の動きを追加しています。

• スクロール変換効果：垂直モーション
• 垂直モーション/デスクトップを設定する
  • 開始オフセット：2
  • ミッドオフセット：0（50％）
  • 終了オフセット：-2
• 垂直方向の動き/タブレットと電話を設定する
  • 開始オフセット：0
  • ミッドオフセット：0（50％）
  • 終了オフセット：-2
• モーションエフェクトトリガー：要素の上部

列1にテキストモジュールを追加

コンテンツ

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

見出しテキスト

[デザイン]タブに移動し、H2テキストのスタイルを次のように設定します。

• 見出しレベル：H2
• フォント：Palanquin Dark
• フォントの太さ：太字
• フォントスタイル：TT
• 色：黄色＃ffd868
• サイズ
  • デスクトップ：5vw
  • タブレット：10vw
  • 電話番号：12vw
• 文字間隔：4px

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

コンテンツ

テキストモジュールの下に、お問い合わせフォームを追加します。 使用しているフィールドは次のとおりです。

• 名前
• Eメール
• 主題
• メッセージ

スパム保護

お問い合わせフォームモジュールをスタイリングする前に。 スパム保護をオンにして、ReCaptchaアカウントに接続します。

• スパム保護サービスを使用する：はい
• サービスプロバイダー：ReCaptcha
• アカウントを選択

田畑

[デザイン]タブに移動し、次のようにフィールドのスタイルを設定します。

• 背景色：ダークブルー＃25274d
• テキストの色：淡い灰色＃d1d1d1
• フォーカスの背景色：ダークブルー＃25274d
• フォーカステキストの色：ペールグレー＃d1d1d1
• フォント：輿
• スタイル：TT
• 文字サイズ
  • デスクトップ：0.9vw
  • タブレット：2vw
  • 電話：3vw
• 文字間隔：1px

ボタン

次に、ボタンのスタイルを設定します。

• カスタムスタイル：はい
• テキストサイズ：20px
• テキストの色：ダークブルー＃25274d
• 背景色：黄色＃ffd868
• 境界半径：7px
• アイコンの色：ダークブルー＃25274d
• トップマージン：5px

サイジング

次に、サイズ設定を変更します。

• 幅：100％
• 最大幅：100％

間隔

トップパディングも追加します。

• トップパディング：4vw

国境

境界線の設定をカスタマイズして、モジュールの設定を完了します。

• 入力の丸みを帯びた角：4つの角すべてを6px
• 入力ボーダースタイル：4辺すべて
• 入力ボーダー幅：2px
• 入力境界線の色：黄色＃ffd868

ソーシャルメディアフォローモジュールを列2に追加

コンテンツ

列2に移動し、ソーシャルメディアモジュールを追加します。 必要なすべてのソーシャルメディアネットワークを使用してください。

• フェイスブック
• ツイッター
• Linkedin

リンク

スタイリングする前に、対応するネットワークへのリンクを追加します。

アイテムの背景

次に、最初のソーシャルネットワークを開き、背景色を変更します。

• カラー：ダークブルー＃25274d

アイテムアイコン

同じ要素のデザインタブで、アイコンの設定を次のように変更します。

• 色：黄色＃ffd868
• アイコンのフォントサイズ
  • デスクトップとタブレット：31px
  • 電話番号：26px

アイテムの間隔

次に、アイコンを互いに分離するために小さなマージンを追加します。

• 右マージン：1vw

アイテムスタイルのコピーと貼り付け

残りのソーシャルネットワークのスタイルを設定するには、メインコンテンツウィンドウに戻り、最初のアイコンのアイテムスタイルをコピーします。 次に、残りのソーシャルネットワークにアイテムスタイルを貼り付けます。

配置

メインのデザインタブに移動し、モジュールが左に配置されていることを確認します。

• モジュールの配置：左

サイジング

次に、モジュールのサイズを調整します。

• 幅：100％

間隔

デフォルトのパディングもすべて消去します。

• 上、下、左、右のパディング：0vw

国境

最後に、境界線の設定にいくつかの丸い角を追加します。 これにより、すべてのアイコンの境界線が一度に調整されます。

• 丸い角
  • 左上と右上：7px
  • 左下と右下：0px

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

コンテンツ

ソーシャルメディアモジュールの下に、別のテキストモジュールを追加します。 お好みのコンテンツを追加してください。 電話番号とメールアドレスの2つのアドレスを追加しました。 すべて大文字の各アイテムのタイトルには太字を使用してください。

• 本社： 1587 Sukhumvit Soi 21、バンコク、タイ。
• 小売店の場所：エンポリアムモール、2階
• 電話： （321）564 2398
• メール： [メール保護]

バックグラウンド

モジュールの背景色を変更します。

• カラー：ダークブルー＃25274d

文章

[デザイン]タブに移動して、テキストのスタイルを設定します。

• フォント：輿
• 色：黄色＃ffd868
• サイズ：18px

間隔

いくつかのカスタム間隔値も追加します。

• トップマージン
  • デスクトップ：-60px
  • タブレットと電話：-50px
• 上、下、左、右のパディング
  • デスクトップ：3vw
  • タブレット：6vw
  • 電話：8vw

国境

そして、境界線の設定に丸みを帯びた角を追加して、モジュールを完成させます。 それでおしまい！

• 丸みを帯びた角：10px右上、左下、右下。

プレビュー

フローティングコンタクトセクションの再作成が完了したので、さまざまな画面サイズでの結果を最終的に確認します。

デスクトップ

モバイル

フローティングコンタクトセクションのレイアウトの再作成が完了しました。

新しいDiviスクロール効果を使用すると、標準のレイアウトを優れたデザインに変えることができます。 独自のマップ背景を作成することで、完成したデザインの外観をより細かく制御できます。 ご質問やご提案がございましたら、下のコメントセクションにコメントを残してください！