今回のポイントと作成環境と内容の前提
DEMO
Popupでモバイルメニュー 作成のステップ
- STEP 01Popupsテンプレートを作成
モバイル時に表示する、Popupメニューのテンプレートを作成します。
- STEP 02ヘッダーテンプレートを作成
テーマビルダーでヘッダーコンテンツを設定してもよいのですが、テンプレート（部品）としてより使い回ししやすいように、今回はelementorテンプレートで作成します。
PC・タブレット用レイアウトと、モバイル用レイアウトを別々に作成します。 - STEP 03テーマビルダーでヘッダーを作成
テーマビルダーでヘッダーを作成し、step02で作成したテンプレートをショートコードで読み込みます。
Popupsテンプレートを作成
Popupsテンプレートを新規作成
[ テンプレート ] > [ Popups ] > [ 新規追加 ] でPopupsテンプレートを作成します。
テンプレートの種類は「Popups」を選択。
テンプレート名を記入。今回は「popup-menu-single」にしています。
ライブラリが表示されますが、今回は使用しません。
右上の「×」ボタンをクリックでライブラリを閉じます。
Popupのテンプレートのベースを設定
Popupsのベース設定をします。
編集画面左下の歯車アイコンをクリックします。
Popupのテンプレートのベースを設定
レイアウト
一般設定
Preview settings
（デフォルト）
Popup：スタイル
背景の色を設定。
ブラシマークをクリックすると、色設定が表示されます。
背景色
オーバーレイ色
閉じるボタンのサイズ
Popup：高度な設定
今回はパディングの設定しています。（単位は%にしています。）
CSSクラスに「popup-menu-customize」と記載しています。
このクラス名をもとに、独自CSSでスタイルの調整を行います。
詳細
（パディング設定）
カスタムCSS
（設定なし）
ナビゲーションメニューを設定
ウィジェットメニューから「ナビメニュー」を選択し、セクション（カラム）にドラッグ&ドロップ。
ナビメニュー：コンテンツの設定
ナビメニューのコンテンツ基本設定です。
ナビメニュー：スタイルの設定
書体と文字色を設定。
ナビメニュー：高度な設定
高度な設定はデフォルトのまま。
スタイル等を設定したPopupメニュー
スタイルしたPopupメニューはこのような感じになります。
PC
タブレット
モバイル
elementorテンプレートでヘッダーテンプレートを作成
elementorのテンプレートを新規作成
サイドメニューの[ テンプレート保存 ] > [ 新規追加 ]からテンプレートを新規作成します。
テンプレートの種類「セクション」を選択し、テンプレート名を記載します。
今回は「header-menu-single」にしています。
PC・タブレット画面サイズ用のヘッダーを設定
今回は、PC・タブレット画面サイズと、モバイルサイズ用、それぞれ分けて２つのヘッダーを作成します。
elementorの[ 高度な設定 ]タブの[ レスポンシブ設定 ] で、PC・タブレットとモバイルの表示切り替えをします。
PC・タブレット：レイアウトセクションを追加
＋ボタンをクリックし、セクションを追加します。
２列の構造を選択します。
左側のカラム（サイトロゴを設定）を30%にします。
右側のカラム（ナビゲーションを設定）を70%にします。
レイアウトイメージは以下のようになります。
PC・タブレット：ヘッダーロゴの設定
左側のカラムに、見出しウィジェットやSite Logoウィジェットなどでヘッダーロゴを設定します。
PC・タブレット：ナビゲーションの設定
右側のカラムにナビゲーションを設定します。
ナビメニューウィジェットをドラッグ&ドロップします。
コンテンツのレイアウト設定は以下にしています。
スタイル：テキストの設定
スタイル：書体の設定
普通時：文字色
ホバー時：文字色
ホバー時：ポインターカラー
アクティブ時：文字色、ポインターカラー
Dropdownの設定、今回はデフォルトのままです。
モバイル画面サイズで非表示にする
PC・タブレット用のヘッダーになるため、レスポンシブデザイン表示状態「モバイルで隠す」を有効にします。
以下のような表示になります。
モバイル画面サイズ用のヘッダーを設定
モバイル：レイアウトセクションを追加
モバイル画面用のレイアウトセクションを追加し、２列の構造を選択します。
カラム幅は、左右共に50%にします。
編集画面をモバイルサイズに切り替えます。
モバイル：ハンバーガーアイコンを設定
ウィジェット検索に「icon」と入力し、候補に表示された「アイコン」を右側のカラムにドラッグアンドドロップします。
アイコンが表示されました。
アイコンスタイルを設定します。
メインの色をグローバルカラーのテキスト#7a7a7aを選択。
サイズを30にします。
高度な設定タブで、幅をインライン（auto)
位置を固定
水平方向を右よせ
水平方向のオフセットを右5%
垂直方向のオフセットを上3%
このヘッダーはモバイル用になるため、レスポンシブデザイン設定で、「デスクトップで隠す」「タブレットで隠す」を有効化します。
以下のようなレイアウトになります。
Popupsメニューの設定
アイコンを編集状態にし、コンテンツタブの「動的タグ」から「Popup」を選択し、歯車マークをクリック。
作成したPopupテンプレートを選択します。
編集時のポイント
任意のセクション、カラム、アイテムを選択したい場合ば、ナビゲータを利用すると便利です。
プレビューでPopupのレイアウトと動きを確認
プレビュー（目のマークのアイコン）でPopupの動きと表示を確認できます。
（画面幅をモバイルサイズにして確認してください。）
テーマビルダーでヘッダーを作成
Popupsで作成したテンプレートをショートコードで読み込み
今回は、Popupsで作成したテンプレートをショートコードで読み込みます。
ショートコードウィジェットを選択し、左カラムにドラッグ&ドロップします。
ショートコードは、ダッシュボードメニューの[ テンプレート ] > [ Popups ] から任意のものを選択（コピー）します。
elementorの編集画面で設定したショートコード、コピーしてきたコードを貼り付けます。
ヘッダーテンプレートを表示するページ種類を設定
ダッシュボードメニューの[ テンプレート ] > [ Thema Builder ] を選択します。
左メニューからHeaderを選択し、「＋」 Addで新規追加します。
ライブラリが表示されますが、今回は使用しませんので、右上のクローズで閉じます。
編集画面になったら、左下（最下部）の上矢印をクリックし、ヘッダーテンプレートのディスプレイ設定をします。
今回は全てのページで表示の「Entire Site」を選択します。
設定したサイトで表示を確認してみてください。
