簡単な方法「イメージマップ」を使おう！

Elementorで画像の一部にリンク を貼るにはイメージマップが簡単です。
イメージマップとは？１枚の画像の中に複数のリンクを設定する方法です。これはHTMLの知識が少し必要となります。が、コードは極力避けたい（ノンプログラミング精神？）のが本サイトの裏テーマなので、簡単に出来る方法をご紹介します。

おじさん

そんな精神あったんだ・・・

「HTML Imagemap Generator」で簡単HTMLコード生成

書いてある通りにイメージマップを設定したい画像をドラッグします。

次に表示された画像のリンクを貼りたい部分を、右上の「短形を描く」「円を描く」・・・など好きな形を選び、囲います。すると、上の画像の様にリンク部分が水色になります。

右のエリアにHTMLが自動生成されるので、メモ帳などに貼り付け、リンクの追加などを行います。

Elementor「HTMLウィジェット」

まずは、あらかじめ使う画像はWordPressのメディアにアップロードしておき、画像のURLをゲットします。ゲットしたURLを先ほどのHTMLのコードに反映させ、ElementorのHTMLウィジェットを配置、コンテンツ部分に貼り付けます！

完成はこちら

ホバー時のエフェクトや、リンクのアクションなどについては、各自お調べ下さい。