DiviのEメールオプトインモジュールで作成できる5つのEメールオプトインデザイン

私たちは皆、私たちの電子メールリストへの新規加入者を愛しています。 また、新規加入者を獲得するための主な方法の1つは、訪問者に適切に設計された電子メールオプトインフォームを提供することです。 そのため、このチュートリアルでは、Diviメールオプトインモジュールを使用して5つの異なるデザインを実現し、この強力で柔軟なモジュールで何が可能かについて想像力をかき立てる方法を紹介します。

スニークピーク

これは、本日取り組む5つのDiviEメールオプトインモジュールの設計のプレビューです。

＃1シャドウスタックオプトイン

設計を開始＃1

＃2大きくて最小限のオプトイン

設計を開始＃2

＃3スキニーオプトイン

設計を開始＃3

＃4ブックオファーオプトイン

設計を開始＃4

＃5カットアウトフレームオプトイン

設計を開始＃5

始めるために必要なもの

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

このチュートリアルでは、必要なのはDiviだけです。 それぞれをゼロから構築するため、事前に作成されたレイアウトは必要ありません。 ただし、いくつかのレイアウトパックの画像をいくつか使用しますが、必要に応じて独自の画像を使用することもできます。

また、電子メールプロバイダー/リストを電子メールオプトインモジュールに割り当てるまで、ライブサイトのオプチンフォームフィールドを表示できないことを知っておくことが重要です。 これは、EメールアカウントのEメールオプチン設定で行うことができます。

それでは、それらのデザインに取り掛かりましょう！

＃1シャドウスタックオプトイン

このデザインは、Diviメールオプトインモジュールに2つのボックスシャドウを追加して、フォームをポップにする独自のスタッキング効果を実現します。 最初のボックスシャドウが電子メールオプトインモジュールに追加され、2番目のボックスシャドウがカスタムサイズと境界線を持つ行に追加されて機能します。

これがその方法です。

まず、1列の行で新しいセクションを作成し、その行にメールオプトインモジュールを追加します。

メールオプトイン設定を開き、以下を更新します。

背景色：＃1a0a38
レイアウト：ボディを上に、フォームを下に
フィールドの丸みを帯びた角：0px
テキストの向き：中央
タイトルフォントの太さ：軽い
タイトルテキストサイズ：36px
ボタンのテキストの色：#ffffff
ボタンの背景色：＃00ac69
ボタンの境界線の幅：0px
ボタンの境界線半径：0px
カスタムパディング：上3vw、下3vw、左5vw、右5vw

次に、メールオプトインモジュールの後ろに最初のボックスシャドウレイヤーを追加しましょう。

ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの水平位置：25px
ボックスシャドウの垂直位置：-25px
影の色：rgba（26,10,56,0.82）

次に、デフォルトでフォームに追加されている左側のパディングを削除するために、カスタムCSSの小さなスニペットを追加しましょう。 [詳細設定]タブに移動し、オプトインフォームの下に次のCSSを追加します。

padding-left: 0px !important;

これにより、メールオプトインモジュールの設定が処理されます。 次に、行を編集しましょう。 行設定を開き、以下を更新します。

カスタム幅：600px
カスタムパディング：上25px、下0px、右25px
下の境界線の幅：25px
下の境界線の色：rgba（0,0,0,0）
左ボーダー幅：25px
左の境界線の色：rgba（0,0,0,0）

これで、ボックスシャドウを行に追加できます。

ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの水平位置：50px
ボックスシャドウの垂直位置：-50px
ボックスシャドウスプレッド強度：-25px
影の色：rgba（26,10,56,0.55）

それでは、最終的なデザインを確認しましょう。

＃2大きくて最小限のオプトイン

このメールオプトインのデザインは、最小限で、クリーンで、大きなものです。 フォームフィールドはブラウザのサイズに合わせて拡大縮小されるため、すべてのデバイスで見栄えがします。 また、ユーザーにスクロールを強制するほど大きくはありません。

これがその方法です。

まず、1列の行で新しいセクションを作成し、その行にメールオプトインモジュールを追加します。

メールオプトイン設定を開き、タイトルとフッターのテキストを含むようにコンテンツを更新します。

次に、背景を暗い色または画像で更新します。

背景色：＃121212
背景画像：これはオプションです。 ポッドキャストレイアウトパックのものを使用しています

さらにカスタマイズするために[デザイン]タブに進む前に、追加する大きなフォーム要素用のスペースを確保する必要があります。 これを行うには、行の設定に移動し、以下を更新します。

カスタム幅：100％

ヒント： 100％のカスタム幅を使用することは、モバイルでデザインに左右の余白がないことを確認するための優れた方法です。 [全幅にする]オプションを使用すると、最大幅は89％になるため、モバイルでもマージンを確保できます。

次に、Eメールオプトインモジュール設定に戻り、次のデザインを更新します。

レイアウト：ボディを上に、フォームを下に

フォームフィールドの背景色：rgba（0,0,0,0）
フィールドの丸みを帯びた角：0px
フィールド下部境界線幅：2px
フィールド下の境界線の色：#ffffff

テキストの向き：中央

タイトルフォント：ラト
タイトルフォントの太さ：軽い
タイトルフォントスタイル：TT
タイトルテキストサイズ：4vw
タイトルラインの高さ：1em

フィールドテキストの色：#ffffff
フィールドフォント：ラト
フィールドフォントの太さ：軽い
フィールドテキストサイズ：3.5vw
フィールドレターの間隔：0.1em
力線の高さ：1.3em

本文の文字間隔：0.5em

ボタンのテキストサイズ：4vw
ボタンの境界線半径：0px
ボタンの文字間隔：0.1em
ボタンフォント：ラト
フォントの太さ：軽い
カスタムパディング：上10vw、下10vw、左10vw、右10vw

フォントサイズにvwの長さの単位を使用し、行の高さと文字の間隔にemの長さの単位を組み合わせて使用​​していることに注意してください。 これにより、ブラウザを調整するときにテキストとデザインをシームレスに拡大縮小できます。

最後のステップは、デザインを磨くためのカスタムCSSのスニペットをいくつか含めることです。 [詳細設定]タブに移動し、[オプトインフォームフィールド]の下に次のカスタムCSSを追加します。

font-size: 3.5vw;

これにより、入力時のテキストのサイズをフォームフィールドのプレースホルダーテキストと一致させることができます。

次に、ボタンの上にカスタムマージンを追加して、少し余裕を持たせます。 [購読]ボタンの下に以下を追加します。

margin-top: 3.5vw;

それでは、最終的なデザインを確認しましょう。

＃3スキニーオプトイン

この次のデザインは、投稿やランディングページの垂直方向のスペースを節約したいと考えている企業やブログに人気のあるソリューションになるはずです。 DiviのEメールオプトインモジュールは、従来の垂直フォームに最適ですが、実際には、CSSの小さなスニペットを使用してフォームを細い水平フォームに変換できます。

これがその方法です。

1列の行で新しいセクションを作成し、その行にメールオプトインモジュールを追加します。

メールのオプトイン設定を開き、コンテンツを更新してタイトルを含めますが、それ以外は含めません。

次に、次のように背景とボタンの色でデザインを更新します。

背景色：＃54677d
レイアウト：ボディを上に、フォームを下に
テキストの向き：中央
ボタンの背景色：＃b0c94f
ボタンの境界線の幅：0px

次に、カスタムCSSを使用します。 スキニーフォームデザインはデスクトップ（モバイルではなく）でのみ必要なので、カスタムCSS IDを使用して（ページ設定の下で）ページにCSSを追加し、フォームスタイルをターゲットにします。

これを行うには、[詳細設定]タブに移動し、オプトインモジュールにカスタムCSSIDを指定します。

CSS ID：スキニー

これは、ページに追加する外部CSSでこのフォームをターゲットにするために使用されます。

次に、Divi Builderページの設定を開き、[詳細設定]タブに次のCSSを追加します。

@media (min-width: 980px){
#skinny.et_pb_newsletter .et_pb_newsletter_fields {
  flex-wrap: nowrap !important;
}
#skinny.et_pb_newsletter .et_pb_newsletter_fields>* {
  flex-basis: 23%;
}
}

#skinny .et_pb_newsletter_form {
  padding-left: 0px;
} 

Diviはすでにflexを使用してバックエンドのフォームのスタイルを設定しているため、このCSSは、フォームフィールドを垂直方向に整列させるflex-wrapプロパティを取得します。 結果は、フォームフィールドの水平レイアウトです。 flex-basisプロパティを23％に調整すると、基本的に各フォームフィールドの幅が設定されます。 また、メディアクエリ内にCSSを追加したため、デザインはデスクトップでのみ行われ、フォームのデフォルトのレイアウトがモバイルで表示されます。

これが最終的なデザインです。

＃4ブックオファーオプトイン

このデザインは、サインアップのための無料の本のオファーを促進する目的で、電子メールオプトインモジュール内にいくつかの画像を組み込んでいます。 これを行うには、組み込みのwysiwygエディターを使用して画像を追加し、説明とフッターのコンテンツを追加するだけです。 メールオプトインモジュールを他のモジュールと2列の行で組み合わせることで、これと同じ設計を実現できることは事実ですが、同じモジュールですべてを行う方法を示すと役立つと思いました。

これがその方法です。

1列の行で新しいセクションを作成し、その行にメールオプトインモジュールを追加します。

メールオプトイン設定を開き、[コンテンツ]タブにとどまります。

説明の下で、デフォルトのテキストを数文だけに短縮します。 次に、[メディアの追加]ボタンをクリックして、メディアライブラリから画像を追加します。

画像の幅が約200px以下であることを確認する必要があります。 この例では、中サイズの画像を使用しています。

[フッター]で、フッターテキストコンテンツにいくつかの文を追加し、[メディアの追加]ボタンをクリックして、テキストの下にロゴ画像を追加します（これはもちろんオプションです）。

画像が中央に配置されるようにするには、メディアライブラリから画像を追加するときに、配置オプションを中央に設定します。

これで、残りのデザインを更新する準備が整いました。 モジュールに背景画像と画像の上の背景グラデーションを与えて、テキストを読みやすくすることから始めます。

背景画像：[画像を追加]
背景グラデーションの左の色：rgba（0,0,0,0.5）
背景グラデーションの右の色：rgba（0,0,0,0.5）
背景画像の上にグラデーションを配置：はい

次に、残りのデザインを次のように更新します。

ボタンのテキストの色：＃333333
ボタンの背景色：＃ffcb7a
ボタンの境界線の幅：0px
ボタンの文字間隔：5px
フォントの太さ：超太字
フォントスタイル：TT
幅：700px
モジュールの配置：中央
カスタムパディング：上3vw、下3vw、左3vw、右3vw

これが最終的なデザインです。

＃5カットアウトフレームオプトイン

このシンプルなデザイン手法は、メールのオプトインに独自の外観を与えるための優れた方法です。 秘訣は、セクションの背景と同じ色のセクション仕切りを使用することです。 次に、仕切りの高さを調整することで、メールオプトインフォームを重ねて、独自の方法でエッジを切り取り、フレーミング効果を高めることができます。

これがその方法です。

1列の行で新しいセクションを作成し、その行にメールオプトインモジュールを追加します。

メールオプトイン設定を開き、モジュールに背景のグラデーションを付けます。

背景グラデーションの左の色：＃8300e9
背景のグラデーションの正しい色：＃06c8ff
グラデーションタイプ：ラジアル
半径方向：左上

次に、残りのデザインを次のように更新します。

タイトルフォントの太さ：太字
タイトルテキストサイズ：36px
幅：70％（デスクトップ）、100％（タブレットとスマートフォン）
モジュールの配置：中央
カスタムパディング：6vw上、6vw下、6vw左、6vw右
丸みを帯びた角：左上50px、右上0px、右下50px、左下0px

設定を保存します。

次に、カスタム幅で行設定を更新します。

カスタム幅：100％

これで、セクション設定をカスタマイズして、これらのセクションディバイダーでカットアウトフレーム効果を追加する準備が整いました。

セクション設定を開き、以下を更新します。

背景色：＃222222

トップディバイダースタイル：スクリーンショットを参照
トップディバイダーの色：＃222222（これがセクションの背景色と一致していることを確認してください）
トップディバイダーの高さ：12vw（デスクトップ）、150px（タブレットとスマートフォン）
トップディバイダーの配置：セクションコンテンツの上

ボトムディバイダースタイル：スクリーンショットを参照
下部の仕切りの色：＃222222（これがセクションの背景色と一致していることを確認してください）
ボトムディバイダーの高さ：12vw（デスクトップ）、150px（タブレットとスマートフォン）
ボトムディバイダー水平リピート：0.8x
ボトムディバイダーフリップ：垂直および水平
ボトムディバイダーの配置：セクションコンテンツの上

それでは、最終的なデザインを確認しましょう。

このデザインテクニックの詳細については、ユニークなフレームデザインの作成に関する投稿をご覧ください。

最終的な考え

これらの電子メールオプトインデザインは、Divi内で利用可能なすべてのスタイルオプションについて考えるとき、実際には氷山の一角にすぎません。 私は意図的にデザインをシンプルに保ち、あなたができることの幅広いストロークを提供しました。 新しいフォント、色、ホバー効果を追加して、より洗練されたデザインを自由に探索してください。 そして、その過程でいくつかの楽しみを持っていることを忘れないでください。

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

乾杯！