Diviでロックされたコンテンツコーナーポップアップを作成する方法
公開: 2019-03-27毎週、次のプロジェクトに使用できる新しい無料のDiviレイアウトパックを提供します。 レイアウトパックの1つとして、Webサイトを次のレベルに引き上げるのに役立つユースケースも共有しています。
今週は、進行中のDiviデザインイニシアチブの一環として、DiviとResort LayoutPackを使用してロックされたコンテンツコーナーポップアップを作成する方法を紹介します。 ロックされたコンテンツのオプチンフォームの概念は単純です。 人々は自分のメールアドレスを入力する必要があり、入力するとすぐに非表示のコンテンツが表示されます。 この非表示のコンテンツを使用して、たとえば割引コードを共有できます。 これをすべて実現するために、Bloomプラグインを使用して、ロックされたコンテンツのオプチンフォームのショートコードをテキストモジュールに追加します。これをポップアップとしてスタイル設定します。 テキストモジュールには、テキストモジュールをポップアップのように表示するためのアニメーション遅延付きのアニメーションも含まれます。
それを手に入れよう！
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
Bloomプラグインをインストールします
Bloomをダウンロード
最初に行う必要があるのは、Bloomプラグインをダウンロードすることです。 すでにエレガントテーマのメンバーである場合は、メンバーエリアに移動してプラグインを見つけることができます。 そこで、zipファイルをダウンロードできるようになります。 まだエレガントテーマのメンバーでない場合は、最初にメンバーシップを購入する必要があります。
Bloomをアップロードしてインストールする
Bloomをダウンロードしたら、[プラグイン] > [新規追加]に移動し、ページ上部の[プラグインのアップロード]をクリックして、WordPressWebサイトにアップロードできます。
次に、zipファイルをアップロードし、[今すぐインストール]をクリックします。
プラグインもアップロードしたら、プラグインをアクティブ化することを忘れないでください。
ブルームオプチンフォームの設定
新しいロックされたコンテンツフォームを追加する
これで、ロックされたコンテンツフォームの作成を開始できます。このフォームは、この投稿の後半で、Diviデザインで使用します。 WordPressダッシュボード>ブルーム>オプチンフォームに移動し、新しいオプチンフォームを作成します。
「ロックされたコンテンツ」オプチンタイプを選択して続行し、セットアップ設定に進みます。
セットアップ設定
セットアップ設定に入ったら、新しいオプチンフォームに名前を付ける必要があります。 また、選択した電子メールプロバイダーを選択し、認証の詳細を入力する必要があります。
デザイン設定
次のステップはフォームのデザインです。 投稿の後半で、スタイルを設定するテキストモジュールでoptinフォームのショートコードを使用するので、optinフォーム自体にあまり多くの設定を適用する必要はありません。 オプチンタイトルとオプチンメッセージのコンテンツボックスは空のままにしてください。 画像の向きも変更します。
- 画像の向き：画像なし
ページを下にスクロールして、optinのスタイルとフォームの設定にいくつかの追加の変更を加えます。
- 背景色：#ffffff
- フォームの向き：下部のフォーム
フォームのスタイル設定も変更しています。
- フォームフィールドの向き：積み重ねられたフォームフィールド
- フォームの背景色：＃f4f4f4
- ボタンの色：#ffffff
- ボタンのテキストの色：暗い
- フォームエッジスタイルを選択：2番目のオプション
Diviでデザインを作成する
新しい行を追加
カラム構造
これで、DiviBuilderに切り替えることができます。 リゾートレイアウトパックのホームページを使用して、新しいページを作成してください。 レイアウトがアップロードされたら、次の列構造を使用して2番目のセクションの上部に新しい行を追加して続行します。
サイジング
モジュールをまだ追加せずに、行設定を開き、サイズ設定にいくつかの変更を加えます。
- この行を全幅にする：はい
- カスタムガター幅を使用：はい
- 側溝幅：1
間隔
次に間隔設定に移動し、行の上下のパディングに「0px」を追加します。 これにより、追加した新しい行が占めるスペースが制限されます。
- トップパディング：0px
- ボトムパディング：0px
テキストモジュールを追加
H3コンテンツを追加する
ロックされたコンテンツコーナーポップアップを作成するために必要な唯一のモジュールは、テキストモジュールです。 選択したH3タイトルをコンテンツボックスに追加します。
ロックされたコンテンツオプチンフォームのショートコードを追加する
次に、Bloomプラグインに戻り、このチュートリアルの前の部分で作成したオプチンフォームのショートコードをコピーします。
人々がオプチンフォームに記入した後に表示したいコンテンツを追加します。 以下の例では、クーポンコードを共有していることがわかりますが、必要なあらゆる種類の情報を共有できます。
背景色
次にモジュールの背景設定に移動し、完全に白い背景色を追加します。
- 背景色：#ffffff
テキスト設定
[デザイン]タブに移動し、次にテキスト設定を変更します。
- テキストフォント：Open Sans
- テキストの色：＃0f87ff
- テキストサイズ：15px
H3テキスト設定
H3コピーに使用されているフォントも変更します。
- 見出し3フォント：Gilda Display
間隔
モジュールに形状を与えるために、いくつかのカスタムマージンとパディング値を追加します。 また、訪問者が使用している画面サイズに関係なくデザインが一致するように、これらすべての値を変更しています。
- トップマージン：-17vw
- 左マージン：65vw（デスクトップ）、37vw（タブレット）、3vw（電話）
- 右マージン：0px
- トップパディング：5vw（デスクトップ）、11vw（タブレット）、13vw（電話）
- ボトムパディング：5vw、11vw（タブレット）、13vw（電話）
- 左パディング：6vw（デスクトップ）、11vw（タブレット）、16vw（電話）
- 右パディング：6vw（デスクトップ）、11vw（タブレット）、16vw（電話）
国境
テキストモジュールの境界線設定に移動し、右下のコーナーを除く各コーナーに「500vw」を追加します。
ボックスシャドウ
テキストモジュールをポップにするために、横にボックスシャドウを追加します。
- ボックスシャドウブラー強度：150px
- 影の色：rgba（0,0,0,0.3）
アニメーション
最後に、ポップアップ効果を作成するために右から左に移動するアニメーションも追加します。
- アニメーションの繰り返し：1回
- アニメーションの方向：左
- アニメーション時間：500ms
- アニメーションの遅延：1000ms
- アニメーション強度：16％
クローン行
最初のロックされたコンテンツコーナーポップアップの作成が完了したら、先に進んで行全体のクローンを作成できます。
重複する行をここに配置します。
セクション下部パディングを削除します
行を配置したセクションの下部のパディングを削除します。
- ボトムパディング：0px
テキストモジュールの間隔設定を変更する
次に、テキストモジュールの設定を開き、カスタムマージン値を変更します。
- 左マージン：0vw
- 右マージン：65vw（デスクトップ）、37vw（タブレット）、3vw（電話）
テキストモジュールの丸みを帯びた角を変更する
丸みを帯びた角も変更してください。 左下を除く各コーナーに「500vw」を使用しています。
テキストモジュールのアニメーション設定を変更する
最後になりましたが、アニメーションの方向を右に変更すれば完了です。
- アニメーションの方向性：右
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最後に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、Divi、Bloomプラグイン、Resort LayoutPackを使用してロックされたコンテンツコーナーポップアップを作成する方法を紹介しました。 この手法を使用すると、フォームに入力すると表示されるクーポンコードを提供することで、メーリングリストに参加するように人々を説得できます。 このチュートリアルは、進行中のDiviデザインイニシアチブの一部であり、毎週、デザインツールボックスに何か特別なものを入れようとしています。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！