サイトのヘッダーにあるメニューボタンから起動する、レスポンシブポップアップメニューを作成します。
次のようなメニューポップアップを作成する方法を学びます。
- 魅力的で機能的、そして美しい
- モバイルに対応している
ポップアップとそのコンテンツをデザインする
- 「テンプレート」＞「Popups（ポップアップ）」＞「新規追加」と進み、新しいポップアップに名前を付けます。(別の方法として、CMD+EまたはCTRL+Eを押してFinderを開き、「Popup」を検索し、「Add New Popup」を選択して名前を付けることもできます)。
- あらかじめデザインされたポップアップテンプレートを選択するか、ライブラリのオーバーレイを閉じて、最初からポップアップをデザインします。この例では独自にデザインしますが、このテンプレートはElementor Pro Popups Templates Libraryで見つけることもできます。ポップアップライブラリで「メニュー」を検索すれば見つかります。
Popup設定 > 設定 > レイアウト
- 幅：85vwに設定
- Overlay（オーバーレイ）：非表示
- 開始アニメーション：フェードイン
- アニメーションの長さ：2秒
Popup設定 > スタイル > Popup
ボックスシャドウ：必要に応じて設定します。
ボタンを閉じる
- Vertical Position（垂直方向の位置）：4
- 色：#878787に設定
- サイズ：35
Popup設定 > 高度な設定 > 詳細
Prevent Closing on Overlay（オーバーレイで閉じるのを防ぐ）：はい
次に、2カラムのセクションを追加します。
最初のカラムを設計する
内部セクションを編集 > レイアウト
- コンテンツの幅：全幅
- カラムギャップ：すき間なし
内部セクションウィジェットを最初のカラムにドラッグします。
「内部セクションを編集」>「レイアウト」>「カラムギャップ」で、「すき間なし」を設定します。
「内部セクションを編集」>「高度な設定」で、「パディング」を全周で70pxに設定します。
内部セクションを編集 > 高度な設定
パディング： 上、下、左、右で70。
見出しウィジェットを最初の列にドラッグします。
「スタイル」>「書体」で「サイズ」を「60」に、「太さ」を「100」に設定します。
残りのメニュー項目の作成する
- 見出しウィジェットのハンドルを右クリックし、「
複製」を選択します。 - 必要なメニューの数だけ、複製を繰り返します。
- 各見出しウィジェットのタイトルテキストを編集し、各メニュー項目に適切なラベルを付けます。
メニューにボタンを追加する
ボタンウィジェットをメニュー項目の下にドラッグし、好みに合わせてスタイルを設定します。
「高度な設定」>「マージン」で、「トップのマージンを70に設定」し、レスポンシブデザインのアイコンをクリックし、「モバイル」のアイコンをクリックして、「モバイル」のマージンを「トップのマージンを40に設定」します。
別の内部セクションウィジェットをボタンの下の最初のカラムにドラッグします。
- 「内部セクションを編集」>「レイアウト」>「コンテンツの幅」で「全幅」を設定します。
- 「内部セクションを編集」>「レイアウト」>「カラムギャップ」で、「すき間なし」を設定します。
- 「内部セクションを編集」>「高度な設定」>「パディング」で、「上」を30、「右」を70、「下」を50、「左」を70に設定します。
- ここで、列ハンドル
を右クリックして「削除」を選択すると、1つの列が削除され、1つの列だけになります。
メニューにシェアボタンを追加
シェアボタンウィジェット（Pro）をカラムにドラッグします。
シェアボタン > コンテンツ
- 必要に応じてソーシャルネットワークの項目を編集します。
- スキン：Minimal
- 配置：左
シェアボタン > スタイル
- Button Size（ボタンサイズ）：1
- 色：カスタムカラー、ブラック（#000000）を選択
２番目のカラムを設計する
カラムのハンドルを右クリックすると、カラムの設定を編集することができます。
カラムの編集 > スタイル > 背景
背景タイプ > グラデーション
- 色：#000000（ブラック）に設定
- 2つ目の目：#000000（ブラック）に設定
ニュースレター購読のコールトゥアクションフォームの作成
内部セクションウィジェットをこの列にドラッグします。
カラムのハンドルを右クリックして「削除」を選択すると、片方の列が削除され、1つの列だけになります。
内部セクションを編集 > 高度な設定
- マージン：ボトムのみ、130に設定
- パディング：「上」が70、「右」が60、「下」が70、「左」が60に設定されています。
見出しウィジェットをカラムにドラッグします
必要に応じて、タイトルテキスト（例：Sign Up For Our Newsletter）や、テキストのサイズ、色などを調整してください。
見出しの下にフォームウィジェット（Pro）をドラッグします。
フォーム > コンテンツ
Form Fields（フォームフィールド）
- この例ではメールのみが必要なので、「名前」フィールドと「メッセージ」フィールドの右端にある[X]をクリックします。
- Input Size（入力サイズ）：中
- メール > コンテンツ > カラム幅：80
送信ボタン
Buttons
- サイズ：中
- カラム幅： 20
- 配置：右
- アイコン > アイコンライブラリー ： Long Arrow Right
フォーム > スタイル
フォーム
- カラムのすき間：0
- Rows Gap（ロウギャップ）：0
Field（フィールド）
- 文字色：ホワイト
- 背景色：透明
- ボーダー色：ホワイト
- ボーダー幅：1（ボトムのみ）
- 書体 > サイズ: 10
Buttons（ボタン）
- ボーダータイプ：直線
- 幅：1（下のみ）
- 背景色：透明
- 文字色：ホワイト
- ボーダー色：ホワイト
商品ディスプレイの作成
フォームの下のこのカラムに、別の内部セクションウィジェットをドラッグします。
内部セクションを編集 > 高度な設定
- パディング：右のみ、30に設定
レスポンシブデザイン
- モバイルで隠す：非表示
内部セクションを編集 > レイアウト
- カラムギャップ：すき間なし
カラムのハンドルを右クリックして「削除」を選択すると、片方の列が削除され、1つの列だけになります。
カラムの編集
カラム > 高度な設定
- マージン：左のみに̠ー60（マイナス60）を設定
見出しウィジェットのハンドルを右クリックし、ニュースレターの見出しのタイトルをコピーして、この列に貼り付けます。
見出し > スタイル > タイトル
- 文字色：ブラック（#000000）
見出し > スタイル > 書体
- 太さ：700
見出し > 高度な設定
- マージン：左のみ、20に設定
カラム > スタイル > 背景タイプ
色：ホワイト（#ffffff）
カラム > スタイル > 枠線 > 通常
- 枠線の丸み：すべての側面で5
ボッカラム > スタイル > ボックスシャドウ
- 色：rgba(0,0,0,0.21)
- 水平： 0
- 垂直：10
- ぼかし：30
- スプレッド：－10（マイナス10）
- 位置：アウトライン
カラム > スタイル > 枠線 > マウスオーバー
ボックスシャドウ
- 色：rgba(0,0,0,0.21)
- 水平： 0
- 垂直：15
- ぼかし：40
- スプレッド：－10（マイナス10）
- 位置：アウトライン
見出しの下に「画像」ウィジェットをドラッグします。
画像
まだ画像を選択しないでください。
- 画像サイズ：フル
- 配置：左
次に、「見出し」ウィジェットのハンドルを右クリックして複製し、複製したウィジェットのスタイルを調整します。
見出し > スタイル > 書体
- サイズ：15
- 太さ：300
次に、それぞれの文言を変更します。
カラムハンドルを右クリックして2回複製し、合計3つのカラムを作成します。
- 中段と最終段のカラムを編集します。「カラム」>「高度な設定」のマージンを、中段の左マージンを－40、最終段の左マージンを－20に変更します。
- カラムごとに、「画像」ウィジェットを編集し、画像を選択します。ここでは.gif画像でも問題ありません。
- 必要に応じて、文字やマージンを調整してください。
モバイル用の調整
左側カラムの各内部セクションの編集をします
内部セクション > 高度な設定
- パディング：全て25
パネルの左下にある歯車のアイコン
をクリックすると、ポップアップの設定に戻ります。
ポップアップ設定 > レイアウト
- 幅：100vw
フォーム
メールフィールドと送信ボタンの幅をそれぞれ80%と20%に設定します。
公開オプションの設定
「公開」ボタンをクリックします。このポップアップには、「Conditions（条件）」「Triggers（トリガー）」「Advanced Rules（高度なルール）」はありませんので、「SAVE & CLOSE」ボタンをクリックします。
Elementorで作成したサイトのヘッダーテンプレートを編集する
「テンプレート」>「テーマビルダー」>「ヘッダー」> ヘッダーを選択し、「Elementorで編集」をクリックします。
メニューボタンウィジェットのハンドルをクリックして、ウィジェットが存在する場合は編集するか、新しいウィジェットを作成します。
ボタン
- リンク：「ダイナミック（動的タグ）」アイコン
をクリックし、「アクション」>「ポップアップ」を選択。 - 「ポップアップ」を再度クリックし、「アクション」で「ポップアップの切り替え」を選択します。
- ポップアップフィールドで、先ほど作成したポップアップを検索して選択します。
「更新」ボタンをクリックすると、ヘッダーテンプレートの変更が保存されます。
これで完成です。本番のサイトにアクセスして、ヘッダーの「メニューボタン」をクリックすると、新しい「メニュー」ポップアップが動作します。