24時間セールのカウントダウンタイマーを表示するポップアップの作成
ポップアップを作成する方法を学びます。
- 緊急性を高める
- 売上高の増加
ポップアップとそのコンテンツをデザインする
- 「テンプレート」＞「Popups（ポップアップ）」＞「新規追加」と進み、新しいポップアップに名前を付けます。(別の方法として、CMD+EまたはCTRL+Eを押してFinderを開き、「Popup」を検索し、「Add New Popup」を選択して名前を付けることもできます)。
- あらかじめデザインされたポップアップのテンプレートを選択するか、ライブラリのオーバーレイを閉じて、最初からポップアップをデザインします。この例では、独自のデザインを考えてみましょう。
Popup設定 > 設定 > レイアウト
- 幅：100vw（ビューポートの幅が100％に渡って表示されます）
- 高さ：カスタムを選択
- Custom Height ： 300pxに設定
- 垂直：上に設定
- Overlay ： 非表示に設定
- 開始アニメーション：「Fade In」を選択
- アニメーションの継続時間（Sec）： 2.2
Popup設定 > 設定 > スタイル
- 背景タイプ：透明
- ボックスシャドウ：リセットの矢印をクリックして、ボックスシャドウをオフにします。
- ボタンを閉じる > Vertical Position ： 20
- ボタンを閉じる > Horizontal Position ： 4
- サイズ ： 30
Popup設定 > 設定 > 高度な設定
- パディング：すべて30pxを設定
コンテンツ
をクリックし、4カラムの新しいセクションを追加します。- セクションを編集 > レイアウト > 垂直方向に整列： 中央
- セクション > スタイル > 背景 > 背景タイプ > クラシックを選択：色：#e8e8e8
- 見出しウィジェットを追加し、タイトルを入力し、必要に応じてスタイル > タイトル > 書体からフォントサイズと太さを調整します。
- ボタンウィジェットを追加し、テキスト、色、デザイン要素を必要に応じて調整する。
- カウントダウン・ウィジェットを追加し、カラムをドラッグして伸ばします。
- カウントダウンを編集 > コンテンツ > タイプ ： Evergreen Timer
- カウントダウンを編集 > コンテンツ > Hours：23
- カウントダウンを編集 > コンテンツ > Minutes：59
- カウントダウンを編集 > コンテンツ > Actions After Expire：非表示とShow Messageの両方を選択
- カウントダウンを編集 > コンテンツ > Message：タイマーが切れたときに表示させたいメッセージを入力
- カウントダウンを編集 > スタイル > Boxes > 背景色：色を選択
- カウントダウンを編集 > スタイル > Digits ： 色と書体を自由に変更
- カウントダウンを編集 > スタイル > Label ： 色と書体を自由に変更
- 画像ウィジェットを追加して、ライブラリから写真を選択します。
- 画像を編集 > 高度な設定 > マージン：「下」にマイナスの余白を設定することで、画像がポップアップの下に少し浮くようになります。
- 画像を編集 > 高度な設定 > モーション効果 > 開始アニメーション：Rotate In Down Left
- 画像を編集 > 高度な設定 > アニメーションの継続時間：ゆっくり
- 画像を編集 > 高度な設定 > アニメーション遅延（ms）：500
公開オプションの設定
- Condition（条件）： Include > Entire Site（サイト全体）
- Triggers（トリガー） > On Page Load ：「はい」： Within（sec）： 3
- Advanced Rules（高度なルール） > Hide For Logged In Users ：「はい」：All Users
- Advanced Rules（高度なルール） > Show Up To X Times ：「はい」：Times ： 1
これで完了です。あなたのページにアクセスすると、3秒後にカウントダウンポップアップが表示され、緊急性と製品購入への動機付けがなされます。