Elementor Proのナビメニューウィジェットの使い方

コンテンツのレイアウト設定

まずは、「コンテンツ」の「レイアウト」設定を確認していきましょう。

メニュー

• オリジナル
• トップメニュー
• ソーシャルリンクメニュー

「外観」の「メニュー」で設定したメニューをドロップダウンから選択します。

レイアウト

• 水平
• 垂直
• Dropdown

メニューのレイアウトを上記の3種類から選択します。

Align

• 左
• 中央
• 右
• ストレッチ

ナビゲーションの配置を上記の4種類から選択します。

Pointer

• なし
• Underline
• Double Line
• フレームつき
• 背景
• テキスト

カーソルを置いた時の動作を上記の6種類から選択します。

アニメーション

• Fade
• Slide
• Grow
• Drop In
• Drop Out
• None

「Pointer」で設定した動作のアニメーションを上記の6種類から選択します。

Submenu Indicator

• なし
• Classic
• Chevron
• Angle
• プラス

サブメニューがある場合のアイコンの設定です。上記の5種類から選択します。

コンテンツのMobile Dropdown設定

ここでは、スマホなどモバイルでの設定をしていきます。

Breakpoint

• Mobile（<768）
• Tablet（<1025）
• なし

モバイルとタブレットでのブレークポイントを設定できます。

全幅

「はい」にすると、タブレットやモバイルでのメニューのドロップダウンが画面の幅に合わせて表示されます。

Align

• アサイド
• 中央

「Aside」にするとメニューが左寄せに、「Center」にすると中央寄せになります。

Toggle Button

• なし
• Hamburger

「なし」だとトグルボタンが非表示になり、「Hamburger」にするとトグルボタンのアイコンが表示されます。

Toggle Align

• 左
• 中央
• 右

トグルボタンの配置を選択します。

スタイルのMain Menu設定

ここからは、「スタイル」の設定に移ります。まずは、「Main Menu」の設定を確認していきます。「普通」と「ホバー」、「Active」の3種類ありますが、「普通」というのは通常時のことで、「ホバー」はマウスカーソルを置いた時、「Active」はナビゲーションメニューのページを開いている時の設定になります。

書体

メニューテキストの書体を設定します。

文字色

メニューのテキストカラーが変更できます。

Pointer Color

これは、「Hover」と「Active」のみポインターの色を変更できます。

Pointer Width

ポインターの太さを変更できます。

Horizontal Padding

メニューテキストの周りの横のスペースを調整できます。

Vertical Padding

メニューテキストの周りの縦のスペースを調整できます。

Space Between

各メニュー間のスペースを調整できます。

スタイルのDropdown設定

ここでの設定は、パソコンではサブメニューに、モバイルではメニュー全体に影響します。

文字色

サブメニューのテキストカラーを設定できます。

背景色

サブメニューの背景色を設定できます。

書体

サブメニューの書体を設定できます。

ボーダータイプ

• なし
• 直線
• 2本線
• 点線
• 破線
• 溝

サブメニューのボーターの種類を上記の6種類から選択できます。

幅

ボーダーの幅を設定できます。

色

ボーダーの色を設定できます。

ボーダー丸み

ボーダーの丸みを設定できます。

ボックスシャドウ

ドロップダウンメニューに影をつけることができます。

Horizontal Padding

横のスペースを設定します。

Vertical Padding

縦のスペースを設定します。

スタイルの区切り線設定

タブレットやモバイルもしくは、デスクトップで2つ以上サブメニューがある場合、区切り線が追加できます。

ボーダータイプ

• 直線
• 2本線
• 点線
• 破線
• 溝

ボーダーのタイプを上記の6種類から選択します。

色

「直線」、「2本線」、「点線」、「破線」、「溝」のいずれかの区切り線を選んだら、ここで色を設定できるようになります。

ボーダー幅

ボーダーを選択した場合に限りますが、ボーダーの幅を設定できます。

Distance

トグルボタン・ドロップダウンメニューからの距離を調整できます。

スタイルのToggle Button設定

最後に、「スタイル」の「Toggle Button」の設定項目を確認していきましょう。

色

トグルボタンのアイコンの色を設定します。

背景色

トグルボタンの背景色を選択します。

サイズ

トグルボタンの大きさを設定します。

ボーダー幅

トグルボタンの周りのボーダーの太さを調節します。

ボーダー丸み

トグルボタンの丸みを設定します。