Diviであらゆる種類のウェブサイトのための魅力的な購読セクションを設計する方法

人々がウェブサイトを作成する主な理由の1つは、ターゲットオーディエンスにアプローチする新しい方法を見つけることです。 その最初の一歩を踏み出し、ウェブサイトの構築を開始すると、潜在的なクライアントとどのように正確に連絡を取ることができるのか疑問に思い始めます。 多くのウェブサイトの所有者を助けることが証明されていることの1つはリストの作成です。 それはすべて、訪問者から電子メールアドレスを収集し、電子メールマーケティングでそれらをリード（そして最終的には顧客）に変えることです。

また、リストの作成により、Webサイトに魅力的なサブスクライブセクションが作成されます。 サブスクライブセクションを人目を引くようにし、さらに重要なことに、サブスクライブセクションを変換する必要があります。 このチュートリアルでは、訪問者の注意を引くこと間違いなしの魅力的なサブスクライブセクションを作成しました。 洗練されたデザインと、メーリングリストに登録する理由についての議論を組み合わせています。 さらに、デザインの作成時に選択できる3つのカラーパレットも共有します。

それを手に入れよう！

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

プレビュー

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

カラーパレット＃1

• 色＃1： rgba（79,35,255,0.88）
• カラー＃2： ＃e09900
• カラー＃3： ＃4f23ff

カラーパレット＃2

• 色＃1： rgba（255,35,97,0.75）
• カラー＃2： ＃e09900
• 色＃3： ＃d80e00

カラーパレット＃3

• 色＃1： rgba（41,17,147,0.75）
• 色＃2： ＃00ffd8
• カラー＃3： ＃291193

アプローチ

上記のカラーパレットの1つを選択して（または独自のカラーパレットを作成して）、チュートリアル全体でこれらの色を使用してください。 設定で色を使用する場合は、色＃1、＃2、または＃3を参照します。 また、サブスクライブモジュールを2つの列にオーバーラップさせ、メーリングリストにサインアップすることの利点を強調しています。

サブスクライブセクションを再作成

新しいセクションを追加する

トップディバイダー

サブスクライブセクションを追加するページを開き、新しい標準セクションを追加します。 セクションの設定をすぐに開き、次の上部仕切りを追加します。

• 仕切りスタイル：リストで検索
• 仕切りの色：#FFFFFF
• 仕切りの高さ：200px
• 仕切りフリップ：垂直

ボトムディバイダー

セクションの下部に同じ種類の仕切りを追加します。

• 仕切りスタイル：リストで検索
• 仕切りの色：#FFFFFF
• 仕切りの高さ：200px
• 仕切りフリップ：垂直

間隔

次に[間隔]設定を開き、上部と下部のパディングに「0px」を追加して、セクションのデフォルトのパディングをすべて削除します。

新しい行を追加する

カラム構造

すべてのセクション設定が完了したので、新しい行を追加できます。 次の列構造を選択してください

グラデーションの背景

行設定を開き、次のグラデーションの背景を追加して続行します。

• 最初のグラデーションカラー：カラー＃1
• 2番目のグラデーションの色：色＃2
• グラデーション方向：123度
• 背景画像の上にグラデーションを配置：はい

背景画像

選択した背景画像を追加して続行します。 この背景画像は少しだけ透けて見えます。 背景画像のサイズとしても「カバー」を選択します。

コロン2の背景色

次に、列2の背景色として「rgba（255,255,255,0.87）」を追加します。

サイジング

また、次のサイズ設定を適用して、両方の列間のスペースを減らし、行が画面の幅全体を占めるようにします。

• この行を全幅にする：はい
• カスタムガター幅を使用：はい
• 側溝幅：1
• 列の高さを等しくする：はい

間隔

行設定内で最後に行う必要があるのは、カスタムパディングを追加することです。

• トップ＆ボトムパディング：0px
• 列1の上部パディング：200px
• 列1の下部パディング：100px
• 列2の上部パディング：300px（デスクトップ）50px（タブレットと電話）
• 列2の下部パディング：100px（タブレットと電話）
• 列2の左右のパディング：50px

宣伝文モジュール＃1を列1に追加します

宣伝文のタイトルを追加

それでは、モジュールの追加を始めましょう！ 宣伝文句モジュールを追加することから、最初の列から始めます。 その宣伝文句の変更が完了したら、その設定を他の2つにも再利用します。 宣伝文モジュールを追加したら、タイトルを付けます。

宣伝文のアイコンを追加

次に、Blurbモジュールにアイコンを追加します。 最初のモジュールには次のアイコンを使用しました。

アイコン設定

次の設定を追加して、アイコンの外観を変更します。

• アイコンの色：#FFFFFF
• アイコンの配置：上
• アイコンのフォントサイズを使用：はい
• アイコンフォントサイズ：43px

タイトルテキスト設定

宣伝文のタイトルのみを使用しています。 そのため、H4のテキスト設定のみを変更する必要があります。

• タイトルフォント：Yeseva One
• タイトルテキストの配置：中央
• タイトルテキストの色：#FFFFFF
• タイトル文字の間隔：-1px

サイジング

また、さまざまな画面サイズに応じて、宣伝文モジュールの幅を変更します。

• コンテンツの幅：150px
• 幅：33％（デスクトップ）、40％（タブレット）、60％（電話）
• モジュールの配置：中央

間隔

最後に、次のカスタムパディングもBlurbモジュールに追加します。

• トップ＆ボトムパディング：50px

宣伝文句モジュールのクローンを2回作成し、注目の宣伝文句モジュールを変更します

アイコンとコンテンツを変更する

これで、Blurbモジュールのクローンを2回作成できます。 それらすべてを最初の列に保持します。 新しい宣伝文モジュールのそれぞれについて、先に進み、アイコンとタイトルを変更して、送信するメッセージと一致するようにします。

背景色を追加する

真ん中の宣伝文句を強調します。 そのためには、まず白い背景色を追加します。

アイコンとタイトルのテキストの色を変更する

アイコンの色とH4タイトルも「＃000000」に変更します。

丸みを帯びた角を追加

次に、境界線設定の各コーナーに「5px」を追加します。

ボックスシャドウ

最後になりましたが、最初のボックスシャドウオプションを使用して、少し奥行きを追加します。

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

テキスト設定

2列目に移りましょう！ 必要な最初のモジュールはテキストモジュールです。 コンテンツを追加したら、次のテキスト設定をコンテンツに適用します。

• テキストフォント：Yeseva One
• テキストの色：＃000000
• テキストサイズ：54px
• テキスト行の高さ：1em

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

間隔

そのテキストモジュールのすぐ下に、説明用に別のテキストモジュールを追加します。 コンテンツを追加したら、上部の余白に「20px」を追加します。

Eメールオプチンモジュールを列2に追加

背景色

追加する必要がある次のモジュールは、EmailOptinモジュールです。 追加したら、先に進んで背景色を「rgba（255,255,255,0）」に変更します。

メールアカウント

次に、選択したサービスプロバイダーを選択して、電子メールアカウントを追加します。

田畑

[フィールド設定]を開いて続行し、[名]フィールドと[名前]フィールドを無効にします。

フィールド設定

フィールド設定も変更します。 それぞれの角に「0px」を追加して、丸みを帯びた角を削除します。 最初のボックスシャドウオプションも追加します。

ボタンの設定

次に、ボタンの外観を変更します。

• ボタンのテキストの色：#FFFFFF
• ボタンの背景色：色＃3
• ボタンの境界線の幅：0px
• ボタンの境界線半径：0px
• ボタンフォント：Yeseva One
• ボタンアイコンを表示：はい
• ボタンアイコンの色：#FFFFFF
• ボタンアイコンの配置：左
• ボタンのホバーにアイコンのみを表示：いいえ
• ボックスシャドウ：最初のオプションを選択します

間隔

最後に、次の間隔設定を使用して、サブスクライブモジュールを両方の列にオーバーラップさせます。

• 上マージン：20px（デスクトップ）、0px（タブレットと電話）
• 左マージン：-60％（デスクトップとタブレット）、0px（電話）
• 右マージン：60％（デスクトップ）、50％（タブレット）、0px（電話）

ソーシャルメディアフォローモジュールをColum2に追加する

必要な数のソーシャルネットワークを追加する

最後になりましたが、ソーシャルメディアフォローモジュールを追加します。 先に進み、表示したいソーシャルネットワークを追加します。

丸い角

すべてのソーシャルネットワークを追加したら、境界線設定の各コーナーに「50px」を追加します。

間隔

また、上部の余白に「50px」を追加して、モジュールを押し下げます。

各ソーシャルネットワークの背景色を個別に変更する

最後になりましたが、各ソーシャルネットワークの背景色を個別に「＃000000」に変更します。

プレビュー

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

最終的な考え

購読セクションはあなたのウェブサイトの重要な部分です。 彼らはあなたが電子メールリストを構築し、電子メールマーケティングを可能にし、そして時間の問題でリードを訪問者に変えるのを助けます。 この投稿では、あらゆるタイプのWebサイトに一致する魅力的なサブスクライブセクションを作成する方法を紹介しました。 ゴージャスなデザインとサインアップのメリットを組み合わせました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！