訪問者がポップアップ内の特定のボタンをクリックしない限り、ページのコンテンツを見ることができないようなポップアップを作成します。
ポップアップを作成する方法を学びます。
- 訪問者に質問をして、「はい」ボタンまたは「いいえ」ボタンをクリックできるようにする。
- 訪問者が「はい」ボタンをクリックした場合にはページの内容を表示し、「いいえ」ボタンをクリックした場合や「はい」ボタン以外をクリックした場合には、別のURLにリダイレクトします。
ポップアップとそのコンテンツをデザインする
- 「テンプレート」＞「Popups（ポップアップ）」＞「新規追加」と進み、新しいポップアップに名前を付けます。(別の方法として、CMD+EまたはCTRL+Eを押してFinderを開き、「Popup」を検索し、「Add New Popup」を選択して名前を付けることもできます)。
- あらかじめデザインされたポップアップのテンプレートを選択するか、ライブラリのオーバーレイを閉じて、最初からポップアップをデザインします。あらかじめデザインされたポップアップのテンプレートを選択するか、ライブラリのオーバーレイを閉じて、最初からポップアップをデザインすることができます。この例では、独自のデザインを考えてみましょう。
Popup設定 > 設定 > レイアウト
- 幅：600pxに設定
- 高さ：カスタムを選択
- Custom Height ： 800pxに設定
- 垂直：中央
- 閉じるボタン：「非表示」に設定
- 開始アニメーション：「Fade In」を選択
コンテンツ
- 「はい」か「いいえ」かの質問をする見出しを追加し、必要に応じてスタイルを設定します。
- 「はい」と「いいえ」の2つのボタンを追加し、それぞれに必要なスタイルを設定します。
- パネルの左下にある歯車のアイコン
をクリックすると、ポップアップの設定に戻ります。
Popup設定 > 設定 > スタイル
- 背景タイプ：透明
- 画像：背景画像を追加し、必要に応じてその設定を調整します。
Popup設定 > 設定 > 高度な設定
- パディング：右と左に80pxを設定し、上下は空白にする
- Prevent Closing on Overlay（オーバーレイで閉じるのを防ぐ）：「はい」に設定
- Prevent on Closing on ESC Key（ESCキーで閉じるのを防ぐ）：「はい」に設定
セクションの編集
内部セクションの編集 > スタイル > 枠線
- ボーダータイプ：直線
- 幅：15px
- 色：ボーダーの色を選択
- 枠線の丸み：下のみ40
内部セクションの編集 > 高度な設定
パディング：下のみ30
カラムの編集
カラム（
をクリック）を編集 > スタイル > 背景
- 背景タイプ：グラデーション
- 色：最初のグラデーションカラーを選択
- 2つ目の色：2つ目のグラデーションカラーを選択
- タイプ：放射状
カラムを編集 > スタイル > 枠線
- 枠線の丸み：下のみ20px
- ボックスシャドウ：必要に応じて設定
カラムを編集 > 高度な設定 > 高度な設定
- マージン：上と左の両方に-30（マイナス30）を設定
- パディング：上と下の両方に100pxを設定
コンテンツの編集
見出しを編集 > スタイル
タイトル：色を白に設定。
ボタンを編集 > スタイル
文字色：各ボタンの文字色を白に設定します。
「はい」ボタンの編集
ボタンを編集 >コンテンツ
- リンク： ダイナミックアイコン
（動的タグ）をクリックし、「アクション」>「Popup」を選択 - もう一度「Popup」をクリックします。
- Action ： 「Close Popup」を選択
- Don’t Show Again ： 「はい」にスライドさせる
「いいえ」ボタンの編集
ボタンを編集 >コンテンツ
リンク：年齢に合ったサイトのリンクを入力してください。
公開オプションの設定
「公開」ボタンをクリックします。このポップアップには、「Conditions（条件）」「Triggers（トリガー）」「Advanced Rules（高度なルール）」はありませんので、「SAVE & CLOSE」ボタンをクリックします。
購入ボタン（または、ポップアップを起動するために作成したボタン）を含むページを編集します。
購入ボタンの編集
- ポップアップを起動するためのボタンをまだ作成していない場合は、今すぐ作成することができます。必要に応じて、テキストや書体を編集してください。
- リンク： ダイナミックアイコン（動的タグ）をクリックし、「アクション」>「Popup」を選択
- もう一度「Popup」をクリックします。
- Popup欄には、先ほど作成したPopupを検索・発見するための数文字を入力します。
- 更新ボタンをクリックすると、ページが更新されます。
これで完了です。それでは、「購入」ボタンのあるページに行き、ボタンをクリックして、ポップアップの動作を確認してください。