Elementorでサイトを作成する際に、こんな問題点に直面したことはありませんか？
・ページ内リンクを設定しようとしたけどやり方がわからない
・ページ内で特定の場所までかっこよくスクロールしたいけどやり方がわからない
今回はこのお悩みを解決するためにElementorで実装できるページ内リンクのやり方をご紹介します。
是非最後までご覧ください！
Elementorでページ内リンクを設定する方法
それでは、早速Elementorでページ内リンクを設定する方法についてご紹介していきます。
今回使用するのは、ウィジットの中にある「メニューアンカーウィジェット」です。
では実際に、「メニューアンカー」を使ってた内部リンクの設定方法について詳しく解説していきます。
手順としては下記となります。
- スクロール先を設定
- ジャンプス先を設定する
1. スクロール先を決定させる
まずは、ページ内でスクロール先を設定させます。設定方法は下記です。
- メニューアンカーをジャンプさせたい部分にドラッグ＆ドロップをする
- 「メニューアンカーのID」の部分で半額英数字で名前を設定する
この際、2でつける名前に関しては、自分がわかりやすければなんでも大丈夫です。
これでスクロール先の決定は終了です。
2. ジャンプするリンクの設定方法
次にジャンプするリンクの設定方法をご紹介します。
- 先ほど設定した「メニューアンカーのID」の前に＃を付ける
- 「＃〇〇（メニューアンカーのID）」をボタンウィジットなどリンクが設定するできる場所に記入
- 保存を押して実際に機能するか確認
となります。
とても簡単ですよね！
これをうまく活用すれば、ヘッダーのメニューなどにも設定することが出来ます。
注意として、ページ内でしか作動することを想定していなく、外部リンクよりは作動しないことがあります。これは公式でも明記されています。
ただ、基本的にはURLの末尾にメニューアンカーのIDを下記例のように入れれば作動はします。（本当にたまに作動しないことがありますが、これはそういう想定ではないためしょうがないです。）
例：https://（飛ばしたいページのURL）/#（メニューアンカーID）
まとめ
今回はElementorで実装できるページ内リンクのやり方をご紹介しました。
こちらの機能をうまく活用すれば、カッコイイLPがより機能的になり、自分の理想したページを作ることも可能となります。
是非今回の記事を参考にしてページ内リンクを活用してみてはいかがでしょうか？
また、メニューアンカーウィジェット自体のさまざまな使い方については別記事で解説していますので、そちらも合わせてご覧ください。
