【WiX豆知識】ライトボックスの設定方法

みなさん、こんにちは！

株式会社ラジャのやよいです。

今回は、キャンペーンや注意喚起表記をする際に使う機能のライトボックの設置方法についてご説明いたします。

詳しくはYouTube 動画でもご説明しているので、こちらもご参考ください。

・

・

ライトボックスとは

みなさんはライトボックスが何かご存知ですか？

短く言うと、このようにwebサイトでポップアップ表示させる機能です！

ライトボックスの例

ユーザーがwebサイトを訪問した際に画面に自動的に表示され、必要がなければ「×」印から削除することができます。（ポップアップと言ったりもします）

ライトボックスの使用例は、

・期間限定キャンペーン情報表記

・注意喚起表記

・ボタンクリックで小窓として表示

が主な仕様用途かと思います。

ECサイトやサービスサイトを運用されていて、「期間限定」「安売りキャンペーン」「おすすめ商品」等を特に強調して訴求したい際に効果的な機能ですので、是非、Wix サイトで制作する際はお試しください。

ライトボックスの作り方

1. Wix エディターにライトボックスを追加

ライトボックスの設置方法はとても簡単で、まずはエディターの追加「＋」から「インタラクティブ」を選択します。

「ライトボックス」セクションにWix のテンプレで作られたライトボックスのデザインが様々あるので、一番レイアウトが近いのもを選択します。

2. ライトボックスのデザインを構築する

どのレイアウト（画面右端/中央/左端）かを選んだあとは、デザインを調整していきます。

ライトボックスは、決められた枠内に必要なパーツ（テキストボックス/ボックス/ボタン/写真 等）を追加するだけで、簡単に完成します。

主には下記のような機能を調整するとよりプロらしく綺麗なライトボックスを制作できるのでおすすめです。

・オーバーレイ設定

枠外をタップした際の機能設定で、こちらはオンにしたほうがユーザーさんにとって使いやすいです。

と言うのも、非表示にしたいと思った際に消す手間が削減されます。

オーバーレイ設定

・オーバーレイの背景を透過する

ライトボックスで背景を透過させるのも、一つプロのアドバイスです！

背景が透けて見えることで、ページが変わっていないことや、すぐに元のページに戻れることを視覚的にユーザーに訴求することができます。

その方が、背景が一瞬で変わってしまうようりも安心感がありますよね。

オーバーレイ背景を投下する 【手順１】

オーバーレイ背景を投下する 【手順２】

3. ライトボックスの表示設定をする

レイアウト・デザインも整えたら、最後に表示設定を調整します。

ライトボックスは自動的にページ内に表示される機能になりますが、Wix ではどのページで自動表示させるか、表示させるまでの時間(秒数) 、また表示させる際のアニメーション等を設定することができます。

まずは、ライトボックス自体の表示設定を決めましょう。

ライトボックスの表示設定　【手順１】

ライトボックスの表示設定　【手順２】

・「オフ」にする場合

Webサイト上では、自動的に表示されません。

ボタンのリンク先に設定し、クリックした際にライトボックスを表示させたい際に使いやすい機能です。

・「オン」にする場合

Webサイト上で自動的に表示させます。

この際、どのページに訪問した先に表示させたいかを選択できます。

複数ページの選択もカスタマイズ可能なので、ライトボックスの内容に合わせて選びましょう。

まとめ

いかがだったでしょうか？

ライトボックス自体は構築がとても簡単で、強調したいコンテンツを効率的に視覚訴求できるので是非ご利用ください。

最後までご覧いただきありがとうございました。

ーーーーーーーーーーーーーーーーーーーー

Wixで制作したサイトを見たい方はhttps://www.wix.creative-raja.com/worksへ

日本 Wix 研究所は、Wix の機能面から運用方法まで、Wix の全てをまとめているメディアサイトです。

実施にエディターを用いて説明するから誰でもわかりやすいコンテンツが盛りだくさん！

お仕事のご依頼やご相談は日本 Wix 研究所のお問い合わせページからお願いいたします。