Diviでページのウェルカムゲートを設計する方法

ウェルカムゲートは、サイトでの行動を促すフレーズのコンバージョンを増やす効果的な方法です。 実際、ウェルカムゲートは、高変換の電子メールオプトインを作成するためのOptinMonsterなどのプラグインで人気のある機能です。 ウェルカムゲートの背後にある基本的な考え方は、フルスクリーンの召喚状でWebページのコンテンツを非表示にすることです。 これにより、ユーザーは目的のページを表示する前にCTAを操作する必要があります。

このチュートリアルでは、プラグインを使用せずにWebページにカスタムウェルカムゲートを追加するためのすばやく簡単な方法を紹介します。 これは、ランディングページでのCTAのコンバージョンを促進するのに役立つ場合があります。

見てみな！

スニークピーク

これは、このチュートリアルで構築するウェルカムゲートの概要です。

レイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。

チュートリアルに行きましょう。

始めるために必要なもの

開始するには、次のことを行う必要があります。

1. まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
2. WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
3. 「既成のレイアウトを選択」オプションを選択します。
   
4. ビストロレイアウトパックを選択し、[ライブラリからロード]ポップアップから[ビストロランディングページレイアウト]を選択し、[このレイアウトを使用]ボタンをクリックしてレイアウトをページにインポートします。
   

その後、カスタムウェルカムゲートを作成するときに使用するランディングページがあります。

ウェルカムゲートの作成

新しいセクションを追加

まず、新しい通常のセクションを作成し、ページの上部にドラッグします。 次に、セクションに1列の行を追加します。

セクションを設計する

セクションにモジュール/コンテンツを追加する前に、カスタムデザインを追加して、今後の作業に適したキャンバスを作成しましょう。

バックグラウンド

まず、次のように背景のグラデーションと画像を追加します。

• 背景グラデーションの左の色：rgba（0,17,38,0.7）
• 背景のグラデーションの正しい色：＃001126
• 開始位置：68％
• 背景画像の上にグラデーションを配置：はい
• 背景画像：[画像を挿入]

パディングとアニメーション

次に、[デザイン]タブにジャンプして、次のパディングとアニメーションの設定を更新します。

• パディング（デスクトップ）：28vh上部、28vh下部
• パディング（タブレット）：18vh上部、18vh下部
• パディング（電話）：10vh上、10vh下
• アニメーションスタイル：スライド
• アニメーションの方向：下
• アニメーションの開始不透明度：100％;

ウェルカムゲートセクションを配置する

これで、セクションにzインデックスの高い固定位置を指定して、ユーザーが[いいえ]ボタンをクリックするまでウェルカムゲートがブラウザ画面全体に表示されるようにする準備が整いました。

ポジショニングcssを追加する前に、次のようにカスタムCSSIDを追加しましょう。

• CSS ID：ウェルカムゲート

これは、ユーザーが[No Thanks]ボタンをクリックしたときに、jQueryでセクションをターゲットにして、セクションを上に移動して表示されないようにするために使用されます。

次のカスタムCSSをメイン要素に追加します。

height: 100vh;
position:fixed;
width: 100%;
top: 0px;
display:flex;
flex-direction: column;

次に、Zインデックスを次のように更新します。

• Zインデックス：11

注：ウェルカムゲートでヘッダーも非表示にする場合は、「99999」などのより高いZインデックスを追加できます。

ウェルカムゲートコンテンツの作成

セクションの準備ができたので、ウェルカムゲートコンテンツの追加を始めましょう。 このウェルカムゲートには、必要なコンテンツを追加できます。 今のところ、2つのボタンを持つ単純なCTAを作成しましょう。 左側のボタンは、ユーザーにクリックしてもらいたいボタンです。 右側のボタンは、ウェルカムゲートを閉じる「NoThanks」ボタンになります。

テキストモジュール

1列の行内に、次の内容の新しいテキストモジュールを追加します。

<h2>Free Dessert for First Timers</h2>
Book a reservation today and get your choice of any dessert on us!

テキストデザイン

次に、テキストデザインを次のように更新します。

• テキストフォント：キャビン
• テキストテキストの色：#ffffff
• テキストテキストサイズ：24px（デスクトップ）、18px（電話）
• テキストの配置：中央
• 見出し2フォント：キャビン
• 見出し2フォントの太さ：太字
• 見出し2のテキストの色：#ffffff
• 見出し2テキストサイズ：66px（デスクトップ）、26px（タブレット）

2列の行を追加

ボタンについては、テキストの下に2列の行を作成しましょう。

左ボタンを追加

左側の列にボタンモジュールを追加し、次のように設定を更新します。

• ボタンテキスト：「うーん！ 予約しましょう」

• ボタンの配置：中央
• ボタンのテキストの色：#ffffff
• ボタンの背景色：＃bd8f52
• ボタンの境界線の幅：0px
• ボタンのフォントの太さ：太字

次に、次のカスタムCSSを追加して、ボタンが列の全幅に広がるようにします。

display: block !important;

右の「ノーサンクス」ボタンを追加

「NoThanks」ボタンを作成するには、最初に左ボタンをコピーして右の列に貼り付けます。

次に、コンテンツを次のように更新します。

• ボタンテキスト：いいえ
• ボタンリンクURL：＃（これは、ボタンがページを更新しないようにするために重要です）

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

• ボタンのテキストの色：＃333333
• ボタンの背景色：rgba（255,255,255,0.4）

次に、次のCSSクラスをnothanksボタンに追加します。

• CSSクラス：nothanks

これは、クリックするとウェルカムゲートを閉じるjQueryのセレクターになります。

カスタムコードを追加する

次に、ユーザーが[いいえ]ボタンをクリックしたときにウェルカムゲートを閉じる機能を追加するために必要なカスタムコードスニペットを追加しましょう。 これを行うには、nothanksボタンモジュールの下にコードモジュールを追加します。

次に、次のコードをコードモジュールコードボックスに貼り付けます。

最後に、ボタンを含む行に最大幅を指定して、ボタンを近づけましょう。 行設定を開き、以下を更新します。

• 最大幅：600px

最終結果

最終的なデザインは次のようになります。

そして、ページを更新したときのウェルカムゲートは次のようになります。

そしてここに、ウェルカムゲートがモバイルでどのように見えるかが示されています。

最終的な考え

このウェルカムマットがページやテンプレートへの追加に役立つことを願っています。 Diviを使用すると、ビジュアルビルダーを使用してウェルカムマットを簡単に設計および配置でき、jQueryの小さなスニペットで機能を完了できます。 したがって、プラグインを使用せずにページのクイックウェルカムマットを探している場合は、これが便利です。

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

乾杯！