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

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

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

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

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

『Elementor – リンククリックで特定のセクションまでスクロールさせる方法』を動画でご覧になりたい方はこちらからどうぞ!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

テキストエディターウィジェットのの詳細はこちらから!
>>

WordPressのメニューで設定する

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

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

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

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

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


また、リンククリックではなくこれはウィジェットの紹介になりますが、Elementor Proには『Table of Contents』といういわゆる『もくじ』を挿入することのできるウィジェットがあります。

こちらも記事が長い時になどに本当に役立つツールで、記事の横に並走しながら目次(リスト)が表示され、しかも目次の中のタイトルをクリックすると瞬時にそのタイトルのところまで画面をスキップさせることができます。

>>【Elementor Pro 『Table of Contents』の使い方

Table of ContentsはPro版を購入されている方のみ使用が可能です。

Naomi Suzuki

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

目次

コメントする

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

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

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

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

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