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

​Elementor Proのナビメニューというウィジェットは、ナビゲーションメニューを追加する機能です。

【限定】Elementor Proの使い方を動画で網羅的に学びませんか?こちらから無料でコースを受講できます。

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

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設定

Elementor Pro ナビメニュー コンテンツ Mobile Dropdown

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

Breakpoint

  • Mobile(<768)
  • Tablet(<1025)
  • なし

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

全幅

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

Align

  • アサイド
  • 中央

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

Toggle Button

  • なし
  • Hamburger

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

Toggle Align

  • 中央

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

スタイルのMain Menu設定

Elementor Pro ナビメニュー スタイル Main Menu

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

書体

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

文字色

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

Pointer Color

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

Pointer Width

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

Horizontal Padding

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

Vertical Padding

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

Space Between

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

スタイルのDropdown設定

Elementor Pro ナビメニュー スタイル Dropdown

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

文字色

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

背景色

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

書体

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

Elementor Pro ナビメニュー スタイル Dropdown ボーダー

ボーダータイプ

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

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

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

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

ボーダー丸み

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

ボックスシャドウ

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

Elementor Pro ナビメニュー スタイル Dropdown パディング

Horizontal Padding

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

Vertical Padding

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

スタイルの区切り線設定

Elementor Pro ナビメニュー スタイル Dropdown 区切り線

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

ボーダータイプ

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

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

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

ボーダー幅

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

Distance

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

スタイルのToggle Button設定

Elementor Pro ナビメニュー スタイル Toggle Button

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

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

背景色

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

サイズ

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

ボーダー幅

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

ボーダー丸み

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です