スライダーを背景にしたログインフォームのポップアップを作成します。
以下の方法を学ぶことができます。
- ボタンをクリックすると、ログインフォームのポップアップが表示されます。
- ポップアップの背景にスライドを使用する。
- ポップアップを閉じる際に、ユーザーをダッシュボードにリダイレクトします。
ポップアップとそのコンテンツをデザインする
- 「テンプレート」＞「Popups（ポップアップ）」＞「新規追加」と進み、新しいポップアップに名前を付けます。(別の方法として、CMD+EまたはCTRL+Eを押してFinderを開き、「Popup」を検索し、「Add New Popup」を選択して名前を付けることもできます)。
- あらかじめデザインされたポップアップテンプレートを選択するか、ライブラリのオーバーレイを閉じて、最初からポップアップをデザインします。この例では独自にデザインを考えてみましょう。
Popup設定 > 設定 > レイアウト
- 幅：300pxに設定
- 高さ：カスタムに設定
- Custom Height（カスタムの高さ）：600pxに設定
- Overlay：非表示に設定
Popup設定 > 高度な設定
Prevent Closing On Overlay（オーバーレイでのクローズの防止）：「はい」に設定
コンテンツ
セクション１
内部セクションを編集 > レイアウト
- 高さ：最小の高さ 600 pxに設定
- ここで、セクションに見出しとログイン ウィジェットを追加します。必要に応じて、見出しの内容やスタイルを調整してください。
- ログインウィジェットで、「コンテンツ」>「追加オプション」>「Redirect After Login（ログイン後のリダイレクト）」を選択します。オンに設定し、ユーザーをリダイレクトするページのURLを入力してください。
セクション2
内部セクションを編集 > レイアウト
高さ：最小の高さ 600 pxに設定
スライドウィジェット > レイアウト
- 高さ：600pxに設定
- 画像： スライドの各画像について、以下の4つのオプション変更を繰り返します。
- 画像：画像の選択
- サイズ：カバーを選択
- Ken Burns Effect（ケンバーンズ効果）：「はい」に設定
- ズーム方向：Inに設定
次に、2つのセクションを重ねて配置します。
- セクション2 ＞ マージン ＞ トップ：ー600 px（マイナス600）
- セクション1 > Z-Index： 1
ポップアップを公開する
「公開」ボタンをクリックします。このポップアップには、「条件」「トリガー」「高度なルール」はありませんので、「SAVE & CLOSE」ボタンをクリックします。
ポップアップを制御する
- ログインボタンを含むページを編集します。
- ログインボタンを編集します。まだボタンを作成していない場合は、今すぐ作成することができます。必要に応じて、テキストや書体を編集してください。
ボタンウィジェット > コンテンツ
- 「ボタン」>「リンク」を選択します。ダイナミックアイコン
をクリックし、「アクション」で「Popup」を選択します。 - もう一度「Popup」をクリックして、「Action」 > 「Toggle Popup（ポップアップの切り替え）」を選択します。
- ポップアップフィールドで入力を開始して、作成したログインウィジェットを検索します。
- 「更新」ボタンをクリックします。
ポップアップ > 高度な設定
- Prevent Closing On Overlay（オーバーレイでのクローズの防止）：「はい」に設定
すべて完了しました。ログインボタンが設置されているページに、通常の訪問者（ログインしていない）としてアクセスします。ログインボタンをクリックします。フォームに入力してログインに成功すると、ダッシュボードとして指定したページにリダイレクトされます。ログインせずにポップアップを閉じる場合は、再度ログインボタンをクリックすると、ポップアップの表示・非表示が切り替わります。