Elementor – リンククリックで特定のセクションまでスクロールさせる方法

Elementor - リンククリックで特定のセクションまでジャンプさせる方法

「リンクをクリックしたら画面の特定のセクションまでジャンプさせたい」
「カッコよくスクロールさせたい」

長いページを作ってたら、こんな時ありますよね。
Elementorを使うと簡単にこの機能を追加することが出来ます。

この記事ではそのやり方を説明しています。

Elementorのメニューアンカーを使う

メニューアンカーウィジェットを使う

これを実現するためには、『メニューアンカー』というウィジェットを使います。

ジャンプさせたい箇所にドロップ

メニューアンカーをドロップ

メニューアンカーをジャンプさせたい箇所にあるウィジェットの上にドラッグ&ドロップします。

メニューアンカーのIDを設定

メニューアンカーに名前をつける

『メニューアンカーのID』というところに、半角アルファベットと数字でこのセクションを意味するIDを書きます。
これは何でもいいんです。
この例だと『sweets』になってますね。

これでアンカーの設定は完了です。

アンカーにジャンプさせるリンクの設定

どうやってジャンプさせるリンクを作るのか説明します。

リンクを『# + アンカーID』にする

実はこれにつきます。例えばIDがsweetsだったら、#sweetsにします。
これだけです。

では実際にリンクを設定します。

ボタンウィジェットを使う

Elementorボタンでメニューアンカー設定

例えばボタンウィジェットなら、リンクというところにこのように#sweetsと設定します。
これだけです。

テキストエディターでリンク設定

テキストエディターにジャンプリンクを挿入

このようにテキストエディターウィジェットでもリンクを挿入出来ます。

WordPressのメニューで設定する

WordPressのメニューでも設定できる

このようにWordPressのメニュー機能も、カスタムリンクのURLセクションに同じように#とIDを入れれば完了です。

詳しくはこの動画を見てください。

このように、アンカーの設定からリンクの設定まで全て簡単です。
是非試して見てください!

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

コメントする

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

Scroll to Top