header-logo
Wix の使用方法を学び、サイトとビジネスを構築する。
直感的な Wix 機能でサイトをデザインして管理する。
定期購入、プラン、請求を管理する。
ビジネスを運営し、サイト会員とつながる。
ドメインの購入、サイトへの接続と移管方法を学ぶ。
ビジネスとウェブプレゼンスを成長させるツールを入手する。
SEO とマーケティングツールで知名度を上げる。
より効率的な作業を支援する高度な機能を利用する。
解決策や既知の問題について確認し、問い合わせる。
placeholder-preview-image
コースとチュートリアルでスキルを習得する。
ウェブデザインやマーケティングなどのヒントを得る。
検索エンジンからのトラフィックを増やす方法について学ぶ。
フルスタックプラットフォームでカスタムサイトを構築する。
あなたの目標達成をサポートするエキスパートを見つけましょう。
placeholder-preview-image
この記事では下記を説明します:
  • ポップアップを追加する
  • ポップアップをカスタマイズする
  • ポップアップのトリガーを設定する
  • ポップアップのスケジュールを設定する
  • 要素をポップアップにリンクする
  • ポップアップを管理する

Wix Studio エディタ:ポップアップを使用する

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

ポップアップを追加する

クライアントのサイトにポップアップを追加して、訪問者と顧客への通知を設定します。

ポップアップを追加する方法:

  1. エディタに移動します。
  2. エディタ左側で「要素を追加 をクリックします。
  3. レイアウトツール」をクリックします。
  4. ポップアップ」をクリックします。
  5. 追加したいポップアップを選択します。
「要素を追加」パネルで「ポップアップ」タブが開き、カーソルがポップアップを選択しています。

ポップアップをカスタマイズする

サイトに合わせてポップアップをカスタマイズします。必要な要素を追加し、背景色を変更して不透明度を調整します。

ポップアップをカスタマイズする方法:

  1. エディタに移動します。
  2. エディタ左側で「ページ をクリックします。
  3. ポップアップ」下で該当するポップアップを選択します。
  4. キャンバス上でポップアップをクリックします。
  5. ポップアップをカスタマイズする方法を選択します:
5. 準備ができたら、下部の「完了」をクリックして編集モードを終了します。
ポップアップの要素設定パネルが開き、カーソルが「背景」のカラーボックスをクリックしています。
次のステップ:
サイトをプレビューして、ポップアップが動作していることを確認します。

ポップアップのトリガーを設定する

ポップアップが表示される方法とタイミングを選択します。特定のサイトページに自動的に表示されるように設定したり、要素(例: テキスト、画像)にリンクすることができます。また、訪問者がポップアップを閲覧した後にどのように閉じるかを決めることもできます。
注意:
ポップアップは、訪問者 1人につき 1回、最初に開いた関連するページに表示されます(複数のページに表示するように設定されている場合)。

トリガーを設定する方法:

  1. エディタに移動します。
  2. エディタ左側で「ページ をクリックします。
  3. ポップアップ」下で該当するポップアップを選択します。
  4. キャンバス上でポップアップをクリックします。
  5. 表示設定」をクリックします。
  6. ポップアップを自動的にページに表示」下で該当するオプションを選択します:
    • オン:訪問者が関連するページを開いた際に、ポップアップが自動的に表示されます。
      1. 表示するページ」下でページをクリックします。
      2. 待機時間(秒)」スライダーをドラッグして、ページが読み込まれてからポップアップが表示されるまでの時間を秒単位で設定します。
    • オフ:訪問者がページを開いてもポップアップは表示されません。代わりに、選択したボタンまたはリンクによってトリガーされます。
  7. ポップアップの閉じ方を選択」下で該当するトグルを有効にします。
    注意:「X」アイコンと「閉じる」ボタンの両方を無効にすると、サイト訪問者はポップアップの外側をクリックすることで、ポップアップを閉じることができます。
  8. 準備ができたら、「完了」をクリックして編集モードを終了します。
ポップアップの設定パネルが開き、カーソルが自動表示オプションを無効にしています。
注意:
現在、1つのページに複数のポップアップを表示することはできません。すでにポップアップがあるページを選択しようとすると、オプションは無効になります。ページに複数のポップアップを追加したい場合は、こちらから機能リクエストに投票することができます。

ポップアップのスケジュールを設定する

サイト訪問者にポップアップが表示されるタイミングを選択します。たとえば期間限定のセールを宣伝している場合、タイミングを設定することにより、ポップアップは当該期間中にのみ表示されるようになります。
重要:
このオプションは、ポップアップを自動的にページに表示するように設定した場合のみ利用できます。

ポップアップのスケジュールを設定する方法:

  1. エディタに移動します。
  2. エディタ左側で「ページ をクリックします。
  3. ポップアップ」下で該当するポップアップを選択します。
  4. キャンバス上でポップアップをクリックします。
  5. 表示設定」をクリックします。
  6. ポップアップをスケジュール」までスクロールダウンし、「+スケジュールを設定」をクリックします。
  7. 開始日時と終了日時を設定します。
    ヒント:正しいタイムゾーンが設定されていることを確認してください。正しくない場合は、変更できます。
ポップアップの設定パネルが開いている様子。カーソルがタイムゾーンドロップダウンをクリックしています。

要素をポップアップにリンクする

サイト上のパーツをリンクさせてポップアップが開くようにし、訪問者がお知らせを見逃さないようにします。テキスト、画像、動画、ボタンなどのパーツをリンクさせることができます。

パーツをポップアップにリンクさせる方法:

  1. エディタで該当する要素をクリックします。
  2. リンク」アイコン  をクリックします。
  3. 左側で「ポップアップ」を選択します。
  4. ポップアップを選択」ドロップダウンをクリックし、該当するポップアップを選択します。
  5. 完了」をクリックします。
ボタンのリンクパネルが開いている様子。リンク先として「セール通知」のポップアップが選択されているスクリーンショット

ポップアップを管理する

サイトのポップアップを管理して、エディタ内で整理しましょう。見つけやすいように名前を変更したり、複製して時間を節約したり、古いポップアップを削除したりできます。

ポップアップを管理する方法:

  1. エディタ左側で「ページ をクリックします。
  2. 該当するポップアップ横の「その他のアクション」アイコン  をクリックします。
  3. 次に実行する内容を選択します:
カーソルがサイトページパネルでポップアップをクリックし、ポップアップを管理するためのオプションが表示されています

Helpmate

こんにちは、さん

さらにヘルプが必要ですか?
この記事の概要
Unlock personalized helpLog in to get the most out of Helpmate.