Wix エディタ：全画面のポップアップメニューを作成する
4分
ライトボックスパーツを使用して、魅力的な全画面ポップアップメニューを作成しましょう。訪問者が「メニュー」ボタンをクリックすると、サイトのコンテンツの上に表示されます。
ステップ 1 | サイトにライトボックスを追加する
まず、「パーツを追加」パネルからライトボックスをサイトに追加し、後でデザインします。
ライトボックスを追加する方法：
- エディタに移動します。
- エディタ左側で「パーツを追加」
をクリックします。 - 「インタラクティブ」をクリックします。
- ライトボックスを選択してサイトに追加します。
ステップ 2 | ライトボックスメニューを設定する
ライトボックスを追加したら、訪問者がサイトにアクセスするたびに自動的に表示されないように設定します。次に、ライトボックスを好みに合わせてデザインし、縦型メニューを追加します。
ライトボックスを設定する方法：
- エディタでライトボックスをクリックします。
- 「設定」アイコン
をクリックします。 - ライトボックスの名前を「メニュー」などのわかりやすい名前に変更します。
- 「ライトボックスの自動表示」下で「オフ」を選択します。
- ライトボックス内の全てのパーツを削除します。X アイコンは削除しないでください。
- ライトボックスに縦型のメニューを追加します。
- メニューをデザインします。メニューのフォントは大きく、中央揃えにすることをおすすめします。
- 準備ができたら、上部の「モードを終了」をクリックします。
ヒント：
サイトに合わせてライトボックスの背景や背景オーバーレイをカスタマイズすることができます。背景をわずかに透明にして洗練されたエフェクトを加えましょう。
ステップ 3 | メニューを開くボタンを追加する
ライトボックスとメニューの準備ができたら、訪問者がクリックしてメニューにアクセスするためのボタンを追加します。次に、ボタンをライトボックスにリンクします。
ボタンを追加する方法：
- エディタ左側で「パーツを追加」 をクリックします。
- 「装飾」を選択します。
- 「ベーシック」を選択します。
- ベーシックシェイプ下で「もっと見る」をクリックします。
- 検索バーに「メニュー」と入力し、Enter キーを押します。
- メニューボタンデザインを選択し、「ページに追加」をクリックします。
- エディタでメニューボタンをクリックします。
- （オプション）「デザインを変更」アイコン
をクリックし、メニューボタンをデザインします。 - 「リンクを追加」アイコン
をクリックします。 - 左側で「ライトボックス」を選択します。
- ドロップダウンメニューからライトボックスを選択します。
- 「完了」をクリックします。
ヒント：
- メニューボタンをサイトの目立つ場所に配置します。ヘッダーに配置するか、画面に固定機能を使用して、サイトの上部に固定してください。メニューボタンがヘッダーに配置されていない場合は、全ページに表示される設定にしてください。
- 独自のメニューボタンをデザインすることもできます。テキストボタン、アイコンボタン、または別のシェイプにすることができます。以下の例をご覧ください：
ステップ 4 | モバイルサイトでボタンを非表示にする
すでに全画面メニューがプリセットされているモバイルサイトで、作成したばかりのボタンを非表示にします。
ボタンを非表示にする方法：
- モバイルエディタにアクセスします。
- ライトボックスにリンクされているメニューボタンをクリックします。
- 「非表示」アイコン
をクリックします。
