Wix Studio エディタ:ポップアップを使用する
8分
この記事内
- ポップアップを追加する
- ポップアップをカスタマイズする
- ポップアップのトリガーを設定する
- ポップアップのスケジュールを設定する
- 要素をポップアップにリンクする
- ポップアップを管理する
ポップアップとは、ニーズに合わせてカスタマイズできる、ライブサイトに表示されるウィンドウのことです。ウィンドウをデザインし、必要な要素を追加したら、サイト訪問者に表示されるタイミングを選択します。
テキスト、ボタン、画像などの要素をリンクして、クリックするとポップアップが開くようにすることもできます。これは、時間的制約のある情報、セールやプロモーションなどの認知度を高めるのに最適な方法です。

ポップアップを追加する
クライアントのサイトにポップアップを追加して、訪問者と顧客への通知を設定します。
ポップアップを追加する方法:
- エディタに移動します。
- エディタ左側で「要素を追加」
をクリックします。 - 「レイアウトツール」をクリックします。
- 「ポップアップ」をクリックします。
- 追加したいポップアップを選択します。

ポップアップをカスタマイズする
サイトに合わせてポップアップをカスタマイズします。必要な要素を追加し、背景色を変更して不透明度を調整します。
ポップアップをカスタマイズする方法:
- エディタに移動します。
- エディタ左側で「ページ」
をクリックします。 - 「ポップアップ」下で該当するポップアップを選択します。
- キャンバス上でポップアップをクリックします。
- ポップアップをカスタマイズする方法を選択します:
要素を追加する
背景をデザインする
ポップアップ内をスクロールするオプションを追加する
ポップアップの周囲にオーバーレイを設定する
5. 準備ができたら、下部の「完了」をクリックして編集モードを終了します。

次のステップ:
サイトをプレビューして、ポップアップが動作していることを確認します。
ポップアップのトリガーを設定する
ポップアップが表示される方法とタイミングを選択します。特定のサイトページに自動的に表示されるように設定したり、要素(例: テキスト、画像)にリンクすることができます。また、訪問者がポップアップを閲覧した後にどのように閉じるかを決めることもできます。
注意:
ポップアップは、訪問者 1人につき 1回、最初に開いた関連するページに表示されます(複数のページに表示するように設定されている場合)。
トリガーを設定する方法:
- エディタに移動します。
- エディタ左側で「ページ」
をクリックします。 - 「ポップアップ」下で該当するポップアップを選択します。
- キャンバス上でポップアップをクリックします。
- 「表示設定」をクリックします。
- 「ポップアップを自動的にページに表示」下で該当するオプションを選択します:
- オン:訪問者が関連するページを開いた際に、ポップアップが自動的に表示されます。
- 「表示するページ」下でページをクリックします。
- 「待機時間(秒)」スライダーをドラッグして、ページが読み込まれてからポップアップが表示されるまでの時間を秒単位で設定します。
- オフ:訪問者がページを開いてもポップアップは表示されません。代わりに、選択したボタンまたはリンクによってトリガーされます。
- オン:訪問者が関連するページを開いた際に、ポップアップが自動的に表示されます。
- 「ポップアップの閉じ方を選択」下で該当するトグルを有効にします。
注意:「X」アイコンと「閉じる」ボタンの両方を無効にすると、サイト訪問者はポップアップの外側をクリックすることで、ポップアップを閉じることができます。 - 準備ができたら、「完了」をクリックして編集モードを終了します。

注意:
現在、1つのページに複数のポップアップを表示することはできません。すでにポップアップがあるページを選択しようとすると、オプションは無効になります。ページに複数のポップアップを追加したい場合は、こちらから機能リクエストに投票することができます。
ポップアップのスケジュールを設定する
サイト訪問者にポップアップが表示されるタイミングを選択します。たとえば期間限定のセールを宣伝している場合、タイミングを設定することにより、ポップアップは当該期間中にのみ表示されるようになります。
重要:
このオプションは、ポップアップを自動的にページに表示するように設定した場合のみ利用できます。
ポップアップのスケジュールを設定する方法:
- エディタに移動します。
- エディタ左側で「ページ」
をクリックします。 - 「ポップアップ」下で該当するポップアップを選択します。
- キャンバス上でポップアップをクリックします。
- 「表示設定」をクリックします。
- 「ポップアップをスケジュール」までスクロールダウンし、「+スケジュールを設定」をクリックします。
- 開始日時と終了日時を設定します。
ヒント:正しいタイムゾーンが設定されていることを確認してください。正しくない場合は、変更できます。

要素をポップアップにリンクする
サイト上のパーツをリンクさせてポップアップが開くようにし、訪問者がお知らせを見逃さないようにします。テキスト、画像、動画、ボタンなどのパーツをリンクさせることができます。
パーツをポップアップにリンクさせる方法:
- エディタで該当する要素をクリックします。
- 「リンク」アイコン
をクリックします。 - 左側で「ポップアップ」を選択します。
- 「ポップアップを選択」ドロップダウンをクリックし、該当するポップアップを選択します。
- 「完了」をクリックします。

ポップアップを管理する
サイトのポップアップを管理して、エディタ内で整理しましょう。見つけやすいように名前を変更したり、複製して時間を節約したり、古いポップアップを削除したりできます。
ポップアップを管理する方法:
- エディタ左側で「ページ」
をクリックします。 - 該当するポップアップ横の「その他のアクション」アイコン
をクリックします。 - 次に実行する内容を選択します:
ポップアップの名前を変更する
ポップアップを複製する
ポップアップを削除する



をクリックします。