関連記事のポップアップを作成する方法

ポップアップとそのコンテンツをデザインする

1. 「テンプレート」＞「Popups（ポップアップ）」＞「新規追加」と進み、新しいポップアップに名前を付けます。(別の方法として、CMD+EまたはCTRL+Eを押してFinderを開き、「Popup」を検索し、「Add New Popup」を選択して名前を付けることもできます)。
2. あらかじめデザインされたポップアップのテンプレートを選択するか、ライブラリのオーバーレイを閉じて、最初からポップアップをデザインします。この例では、独自のデザインを考えてみましょう。
3. Popup設定で、「レイアウト」の「幅」を「100vw」に変更すると、ビューポートの幅の100％にわたって表示されます。
4. 次に、「レイアウト」>「水平」を「中央」、「レイアウト」>「垂直」を「下」に設定します。
5. 「新しいセクションの追加」アイコンをクリックすると、4カラムの新しいセクションが追加されます。
6. 各カラムを編集し、最初の列の幅を55％、その他の列を15％に設定します。
7. 1カラム目に「見出しウィジェット」と「テキストエディタウィジェット」を追加します。
8. その他のカラムには、それぞれ「画像ウィジェット」を追加します。
9. 各画像ウィジェットのリンクURLを入力し、それぞれが関連する記事を指すようにします。
10. 画像の効果を追加します。一つの画像に対して、「画像を編集」>「スタイル」>「通常」>「CSSフィルタ」で「彩度」を「0」に変更します。 次に「マウスオーバー」>「スタイル」>「CSSフィルタ」で「彩度」が「100」のままになっていることを確認します。
11. 画像ウィジェットを右クリックし、「コピー」を選択します。
12. 他の画像ウィジェットをそれぞれ右クリックし、「スタイルの貼り付け」を選択します。
13. 歯車アイコンをクリックして、「Popup設定」パネルを開きます。「開始アニメーション」で「Slide In Up」を選択します。
14. 「Overlay」を「非表示」に設定します。

公開オプションの設定

1. 「Conditions（条件）」>「Singular」>「固定ページ」>「すべて」「ページ名」のように新しい条件を追加します。
2. 新しいTriggers（トリガー）を追加します。「 On Scroll to Element」を「はい」に設定し、 「Selector」欄に任意のCSSクラス名を入力します。
3. 歯車アイコンをクリックすると、「Popup設定」パネルが表示されます。
4. ポップアップを表示させたいページを編集します。そのページで、ユーザーがスクロールしたときにポップアップを起動する要素を編集します。
5. 「高度な設定」>「CSSクラス」で、上記の「Triggers（トリガー）」に入力したのと同じCSSクラス名を入力します。