ElementorのGoogleマップウィジェットの使い方

ElementorのGoogleマップウィジェットでできること

Elementor マップウィジェット

ElementorのGoogleマップウィジェットは、会社の所在地やお店の所在地を表す時とかに使います。レストランのホームページを作成していたり、会社ホームページを作成しているのであれば、このGoogleマップをサイトに置いておくと良いかもしれません。

【限定】Elementorの使い方を動画で網羅的に学びませんか?こちらから無料でコースを受講できます。

コンテンツのマップ設定

Elementor マップウィジェット コンテンツ マップ

まずは、「コンテンツ」の「マップ」にある設定項目を確認していきましょう。

Location

「Location」の欄には、会社などの住所を記入しましょう。「東京都港区・・・」みたいに入力してみてください。すると、自動的にその住所にピンが打たれます。

ズーム

「ズーム」の項目では、デフォルトのズームの値を設定できます。レストランの位置を示したいのに、日本全体が見れる地図を表示しても意味がないので、ツマミを右に持って行ってズームしましょう。レストランや会社の位置情報を伝えたいのであれば、「15」くらいがちょうど良いのかなと思います。

高さ

最後の「高さ」は、地図の縦幅のことです。大きめの地図を表示させたい場合は、ツマミを右にずらして、地図を拡大しましょう。

スタイルのマップ設定

Elementor マップウィジェット スタイル マップ

「スタイル」では、「普通」と「ホバー」というのがあります。普通は、通常時の設定で、ホバーはマウスカーソルをマップに置いた時の設定になります。

CSSフィルタ

マップウィジェットのCSSフィルタ

「CSSフィルタ」をクリックすると、上記の項目が表示されるので、好きなように設定してみましょう。

トランジション所要時間

「トランジション所要時間」というのは、「CSSフィルタ」を設定した場合にのみに効果がある設定項目です。マップにマウスカーソルを置いた時に、設定したフィルタがどれくらいの時間続くかというものです。例えば、「ホバー」でぼかしを入れ、この項目で「3」と入力すると、マップにマウスカーソルが置かれたら3秒かけてぼかしが入ります。逆に、マップからマウスカーソルを外すと、3秒かけて、ぼかしが消えていきます。

コメントを残す

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