• ホームページ
  • 記事
  • テーマ
  • Diviのサイズ設定オプションを使用して固定コンタクトフォームのコーナーポップアップを作成する方法

Diviのサイズ設定オプションを使用して固定コンタクトフォームのコーナーポップアップを作成する方法

公開: 2019-07-17

毎週、次のプロジェクトに使用できる新しい無料のDiviレイアウトパックを提供します。 レイアウトパックの1つとして、Webサイトを次のレベルに引き上げるのに役立つユースケースも共有しています。

今週は、進行中のDiviデザインイニシアチブの一環として、Diviのサイズ設定オプションを使用して、固定の連絡先フォームのコーナーポップアップをページに追加する方法を紹介します。 このアプローチは、追加のプラグインを必要とせずに、訪問者がWebサイトに滞在するまでフォローする連絡フォームを設定するのに役立ちます。

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

プレビュー

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

デスクトップ

固定連絡フォーム

モバイル

固定連絡フォーム

1.カイロプラクターレイアウトパックのランディングページをアップロードする

新しいページを追加

新しいページを作成することから始めます。 ページに名前を付けて公開したら、VisualBuilderに切り替えます。

固定連絡フォーム

カイロプラクターレイアウトパックのランディングページをアップロードする

次にカイロプラクターレイアウトパックのランディングページをアップロードします。 この特定のレイアウトを使用しますが、作業中のどのページでもテクニックを機能させることができます。

固定連絡フォーム

2.再現を始めましょう！

ページの下部に新しいセクションを追加

クリック時にポップアップする固定の連絡先フォームに、まったく新しいセクションを追加します。 このセクションをページの下部に追加します。

固定連絡フォーム

背景色

セクション設定を開き、完全に透明な背景色を使用します。 この投稿の後半で、セクション全体を修正します。 透明な背景色を使用すると、セクションコンテナの下に表示されるすべてのものが透けて見えるようになります。

  • 背景色：rgba（255,255,255,0）

固定連絡フォーム

サイジング

[デザイン]タブに移動し、さまざまな画面サイズでセクションの幅を変更します。

  • 幅：37％（デスクトップ）、95％（タブレット）、100％（電話）
  • セクションの配置：右

固定連絡フォーム

間隔

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

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

固定連絡フォーム

CSSクラス

新しいセクションにもカスタムCSSクラスを与える必要があります。 投稿の後半で、このCSSクラスを使用してJQueryおよびCSSコードを追加します。

  • CSSクラス：セクション-開く

固定連絡フォーム

デフォルトのZインデックス

セクションがすべてのページコンテンツの上に表示されるようにするために、可視性設定でセクションzインデックスを増やします。

  • Zインデックス：99

固定連絡フォーム

ホバーZインデックス

ホバーにも同じzインデックス値を追加します。

  • Zインデックス：99

固定連絡フォーム

行＃1を追加

カラム構造

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

固定連絡フォーム

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

コンテンツボックスを空のままにします

この行で必要な最初で唯一のモジュールは宣伝文句です。 タイトルボックスとコンテンツボックスは空のままにしてください。

固定連絡フォーム

アイコンを選択

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

固定連絡フォーム

背景色

宣伝文の背景色も変更します。

  • 背景色：#FFFFFF

固定連絡フォーム

アイコン設定

[デザイン]タブに移動し、次のアイコン設定を適用します。

  • アイコンの色：＃ff5f24
  • アイコンの配置：上
  • アイコンのフォントサイズを使用：はい
  • アイコンのフォントサイズ：46px（デスクトップ）、30px（タブレット）、25px（電話）

固定連絡フォーム

サイジング

次に、さまざまな画面サイズでサイズ設定を変更します。

  • 幅：140px（デスクトップ）、105px（タブレット）、80px（電話）
  • モジュールの配置：右

固定連絡フォーム

間隔

また、さまざまな画面サイズにわたって、いくつかのカスタムの上部と下部のパディング値を追加します。

  • トップパディング：50px（デスクトップ）、35px（タブレット）、25px（電話）
  • 下部のパディング：20px（デスクトップ）、10px（タブレット）、0px（電話）

固定連絡フォーム

国境

円形を作成するには、境界線設定の各コーナーに高い値を追加する必要があります。 「500px」を使用しています。

固定連絡フォーム

ボックスシャドウ

また、微妙なボックスシャドウを追加して、円形が表示されるようにします。

  • ボックスシャドウブラー強度：80px

固定連絡フォーム

アニメーション

次にアニメーション設定を開き、アイコンアニメーションを削除します。

  • アイコンアニメーション：アニメーションなし

固定連絡フォーム

CSSクラス

大事なことを言い忘れましたが、CSSクラスをBlurbモジュールに追加します。 この投稿の後半で、このCSSクラスを使用してクリック関数を機能させます。

  • CSSクラス：contact-open

固定連絡フォーム

行＃2を追加

カラム構造

2列目へ！ 次の列構造を使用します。

固定連絡フォーム

背景色

モジュールをまだ追加せずに、行設定を開き、白い背景色を追加します。

  • 背景色：#FFFFFF

固定連絡フォーム

国境

次に、各コーナーに「39px」の境界線半径を追加します。

固定連絡フォーム

ボックスシャドウ

そして、微妙なボックスシャドウを追加して、行の設定を完了します。

  • ボックスシャドウブラー強度：80px

固定連絡フォーム

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

要素

この行に必要なモジュールは、お問い合わせフォームモジュールのみです。 モジュールを追加したら、要素設定でキャプチャを無効にします。

  • キャプチャを表示：いいえ

固定連絡フォーム

田畑

[デザイン]タブに移動し、フィールド設定でフィールドの背景色を変更します。

  • フィールド背景色：rgba（0,126,255,0.13）

固定連絡フォーム

ボタン

ボタンのスタイルを設定して続行します。

  • ボタンにカスタムスタイルを使用する：はい
  • ボタンのテキストサイズ：16px
  • ボタンのテキストの色：#FFFFFF
  • ボタンの背景色：＃ff5f24
  • ボタンの境界線の幅：2px
  • ボタンの境界線の色：rgba（0,0,0,0）
  • ボタンの境界線半径：0px
  • ボタンフォント：Karla
  • ボタンのフォントの太さ：太字
  • ボタントップパディング：14px
  • ボタン下部のパディング：14px
  • ボタン左パディング：20px
  • ボタン右パディング：20px

固定連絡フォーム

固定連絡フォーム

固定連絡フォーム

間隔

そして、いくつかのカスタムパディング値を追加します。

  • トップパディング：30px
  • ボトムパディング：30px
  • 左パディング：40px
  • 右パディング：40px

固定連絡フォーム

コードモジュールの追加

JQueryコードを挿入する

お問い合わせフォームモジュールを完了したら、クリック機能を機能させましょう。 セクションの2行目にコードモジュールを追加し、以下の印刷画面に表示されているように、スクリプトタグの間に次のJQueryコード行を挿入します。 

jQuery(function($){
$(".contact-open").click(function() {
 $('.section-open').toggleClass('section-open-active');
});
});

固定連絡フォーム

セクション設定の変更

身長

セクション設定を開いて続行します。 さまざまな画面サイズで高さを変更します。

  • 高さ：190px（デスクトップ）、140px（タブレット）、125px（電話）

固定連絡フォーム

デフォルトのメイン要素

次のセクションのメイン要素にカスタムCSSコードを追加して、右下隅に固定します。 

bottom: 0;
right: 0;
position: fixed;

固定連絡フォーム

メイン要素をホバーします

ホバーのメイン要素にも固定位置を追加してください。 

position: fixed;

固定連絡フォーム

カスタムCSSコードをページに追加

ページ設定を開く

トグル効果を完了するには、ページにCSSコードを少し追加する必要があります。 ページ設定を開きます。

固定連絡フォーム

カスタムCSSを追加する

[詳細設定]タブに移動し、CSSコードの次の行を追加します。 

.section-open-active {
height: auto !important;
}

固定連絡フォーム

プレビュー

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

デスクトップ

固定連絡フォーム

モバイル

固定連絡フォーム

最終的な考え

この投稿では、Diviのサイズ設定を使用して、ページに固定の連絡先フォームを追加する方法を示しました。 このアプローチは、構築しているあらゆる種類のWebサイトで機能させることができます。 このチュートリアルは、進行中のDiviデザインイニシアチブの一部であり、毎週、デザインツールボックスに何か特別なものを入れようとしています。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

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