Wix Studio エディタ:ライトボックスを使用する
読了時間:6分
ライトボックスは、ニーズに合わせてカスタマイズできるポップアップです。ポップアップウィンドウをデザインし、必要な要素を追加したら、サイト訪問者に表示されるタイミングを選択します。
テキスト、ボタン、画像などの要素をリンクして、クリックするとライトボックスを開くこともできます。これは、時間的制約のある情報、セールやプロモーションを露出する機会を増やすのに最適な方法です。
![クライアントのニュースレターの購読者を増やすために使用されたライトボックスの例](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2020/07/11/c7f68f5c-04b3-4d64-ab02-6c56a13a7cf2/37de16b0-e8e4-4fed-8107-16c7932b4a15.png)
この記事では、以下の項目について説明します:
ライトボックスを追加する
サイトにライトボックスポップアップを追加して、訪問者に魅力的な告知を表示できるようにしましょう。
ライトボックスを追加する方法:
- エディタ左側で「要素を追加」
をクリックします。
- 「レイアウトツール」をクリックします。
- 「ライトボックス」クリックします。
- 追加したいライトボックスを選択します。
ライトボックスをカスタマイズする
サイトに合わせてライトボックスをカスタマイズします。必要な要素を追加し、背景色を変更して不透明度を設定します。
ライトボックスをカスタマイズする方法:
- エディタ左側で「ページ」
をクリックします。
- 「ライトボックス」下で該当するライトボックスを選択します。
- エディタでライトボックスをクリックします。
- ライトボックスのカスタマイズ方法を選択します:
- 要素を追加する:
- エディタ左側で「要素を追加」
をクリックします。
- 該当する要素をドラッグ&ドロップします。
- エディタ左側で「要素を追加」
- 背景をデザインします:
- エディタ右上の「要素設定パネルを開く」矢印アイコン
をクリックします。
- 「デザイン」までスクロールダウンします。
- 色を選択し、「背景」下で背景の不透明度を設定します。
- エディタ右上の「要素設定パネルを開く」矢印アイコン
- 要素を追加する:
- 準備ができたら、下部の「完了」をクリックして編集モードを終了します。
![要素設定パネルで背景色を選択しているライトボックス編集モードのスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/11/16/d3defc6b-189c-4358-a6fb-6ba830c52250/480d492a-1ada-4165-982b-93591cd427b9.jpeg)
次のステップ:
サイトをプレビューして、ライトボックスの動作を確認しましょう。
ライトボックスのトリガーを設定する
ライトボックスが表示される方法とタイミングを選択します。特定のサイトページに自動的に表示されるように設定したり、要素(例: テキスト、画像)にリンクすることができます。また、訪問者がライトボックスを閲覧した後にどのように閉じるかを決めることもできます。
注意:
ライトボックスは、訪問者 1人につき 1回、最初に開いた関連するページに表示されます(複数のページに表示するように設定されている場合)。
トリガーを設定する方法:
- エディタ左側で「ページ」
をクリックします。
- 「ライトボックス」下で該当するライトボックスを選択します。
- キャンバス上のライトボックスをクリックします。
- 「表示設定」をクリックします。
- 「ライトボックスの自動表示」下で該当するオプションを選択します:
- オン:訪問者が関連するページを開いた際に、ライトボックスが自動的に表示されます。
- 「表示するページ」下でページをクリックします。
- 「待機時間(秒)」スライダーをドラッグして、ページが読み込まれてからライトボックスが表示されるまでの時間を秒単位で設定します。
- オフ:訪問者がページを開いてもライトボックスは表示されません。代わりに、選択したボタンまたはリンクによってトリガーされます。
- オン:訪問者が関連するページを開いた際に、ライトボックスが自動的に表示されます。
- 「ボックスを閉じる方法」下で該当するトグルを有効にします。
注意:「X」アイコンと「閉じる」ボタンの両方を無効にすると、サイト訪問者はライトボックスの外側をクリックすることで、ライトボックスを閉じることができます。 - 準備ができたら、「完了」をクリックして編集モードを終了します。
![トップページで自動的に開くように設定されたライトボックスの横にあるトリガーパネルが開いています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/11/16/33baf2b8-382b-4978-9b6b-95b334abc458/f0a600a2-114f-417d-ab22-8b58608ca142.jpeg)
ライトボックスのスケジュールを設定する
サイト訪問者にライトボックスが表示されるタイミングを選択します。たとえば、期間限定のセールを宣伝している場合、タイミングを設定することにより、ライトボックスが該当期間中にのみ表示されるようになります。
ライトボックスのスケジュール設定を行う方法:
- エディタ左側で「ページ」
をクリックします。
- 「ライトボックス」下で該当するライトボックスを選択します。
- キャンバス上のライトボックスをクリックします。
- 「表示設定」をクリックします。
- 「スケジュール設定」までスクロールダウンし、「+スケジュールを設定」をクリックします。
- 開始日時と終了日時を設定します。
ヒント:正しいタイムゾーンが設定されていることを確認してください。正しくない場合は、変更できます。
![Wix Studio エディタでライトボックスのスケジュール設定を行なっているスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/12345678-1234-1234-1234-1234567890ab/2023/11/15/7028b1b2-1c21-4410-923f-d607bad6d33d/472f00e7-58d5-43f5-91a7-3684bb644207.png)
要素をライトボックスにリンクする
サイト上の要素をリンクしてライトボックスを開き、訪問者が告知を見逃さないようにします。テキスト、画像、動画、ボタンなどの要素をリンクできます。
要素をライトボックスにリンクする方法:
- エディタで該当する要素をクリックします。
- 「リンク」アイコン
をクリックします。
- 左側で「ライトボックス」を選択します。
- 「表示するライトボックス」ドロップダウンメニューをクリックして、該当するライトボックスを選択します。
- 「完了」をクリックします。
![訪問者がクリックしたときにライトボックスが開くようにテキストマスク要素をリンクする](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/11/16/68f58036-26ed-4670-ace8-e8bae210fb9e/cfcc0c39-ebfa-499a-a4ac-f5beab72bdeb.jpeg)
ライトボックスを管理する
エディタでサイトのライトボックスを管理し、整理しましょう。見つけやすいように名前を変更したり、複製して時間を節約したり、古いライトボックスを削除したりできます。
ライトボックスを管理する方法:
- エディタ左側で「ページ」
をクリックします。
- 該当するライトボックス横の「その他のアクション」アイコン
をクリックします。
- 次に実行する内容を選択します:
ライトボックスの名前を変更する
ライトボックスを複製する
ライトボックスを削除する
![利用可能な管理オプションが表示されたページパネルのライトボックス](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/11/16/16e995d1-7d99-46ea-b0ff-bd7ed0126101/d8b4c5f0-481e-4866-928a-39a693b98021.jpeg)
お役に立ちましたか?
|