Elementorのメニューアンカーウィジェットの使い方

Elementor一般『メニューアンカー』ウィジェットの使い方

Elementorでウェブサイトを作っていて、同じページ内である特定の場所にリンクを飛ばしたい時ありますよね。

そんな時は、メニューアンカーウィジェットを使ってみましょう。
とても便利なウィジェットで簡単に使えます。

今回はメニューアンカーウィジェットの使い方を説明します。

この記事は『Elementorの使い方無料コース』を元に作っています。
動画でみたい方は是非この無料コースをチェックしてみてください。

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

Elementor一般『メニューアンカー』ウィジェットの使い方を動画でご覧になりたい方はこちらからどうぞ!

飛ばしたい先にウィジェット挿入

メニューアンカーを挿入

まずリンクで飛ばしたい場所に、メニューアンカーウィジェットを挿入します。
画像のようにドラッグ&ドロップでOK。

今回は動画まで飛ばすことを想定して設定していきます。

メニューアンカーウィジェットを挿入した画面

ウィジェットを挿入するとコンテンツタブが開き、画面右側にはこのように表示されます。

IDは半角英数字のみ

IDの設定

メニューアンカーウィジェットにはスタイルタブはなく、コンテンツタブもIDを入れる項目のみとなります。

四角の欄に半角英数字でIDを直接入力します。
今回は『movie』としました。
これでメニューアンカーウィジェット自体の設定は終わり。

ただこれだけではリンクを飛ばせず、他のウィジェットと併用する必要があります。
例としてボタンウィジェットと画像ウィジェットで説明します。

ボタンウィジェットとリンクさせる

ボタンウィジェット挿入画面

ではボタンウィジェットをページに挿入して、リンクさせていきます。
ボタンウィジェットの詳しい説明は別にありますのでそちらをご覧ください。

リンクにIDを入れる

リンク項目の説明

ボタンウィジェットのコンテンツタブ『リンク』に先ほど設定したメニューアンカーのIDを入れます。
この時初めから入っている『#』は消さないでください。

IDを入力

『#movie』と入れたら、丸印のプレビュー表示で確認してみましょう。

プレビュー表示で動作を確認

プレビュー表示で確認

プレビュー画面で挿入したボタンをクリックして、動作を確認してみて下さい。

メニューアンカーの動作確認

きちんと設定できていると、メニューアンカーウィジェットを挿入した場所(今回は動画部分)までページがスクロールされます。

画像ウィジェットとリンクさせる

画像ウィジェットとリンクさせる

画像ウィジェットをリンクさせることも可能です。
画像ウィジェットのコンテンツタブ内にある四角のリンク項目を設定していきましょう。

他の項目は画像ウィジェットの使い方で説明していますので、割愛します。

カスタムURLにしてIDを入力

リンクの設定方法

リンク欄を『カスタムURL』にします。

するとすぐ下にリンク入力項目が出てきますので、設定したID『#movie』を入れます。
ボタンウィジェットには初めから#がありましたが、ない場合は冒頭に『#』を入れてからIDを入力してください。

その後ボタンウィジェットの時と同じようにプレビュー表示で動作を確認します。

以上がメニューアンカーウィジェットの使い方になりますが、要するにIDを設定してページの特定の場所にリンクを入れるウィジェットということです。

とても使い勝手が良く、パワフルなウィジェットです。
ぜひ使ってみてください。

なお、高度な設定についてはどのウィジェットも共通していますので、詳しい説明は省きます。

またElementorのメニューアンカーが固定ヘッダーの下に来るのを防ぐ方法という記事もありますので合わせてお読みください!

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

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

Elementorの無料テンプレートサイト
新規追加されました。

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通