(↑Pinterestでシェアお願いします!)

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

執筆者 | 更新日 2020年02月10日 | Elementorの使い方 | コメント0件

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

Elementor マップウィジェット

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

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

コンテンツのマップ設定

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

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

Location

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

ズーム

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

高さ

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

スタイルのマップ設定

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

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

CSSフィルタ

CSSフィルタ

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

トランジション所要時間

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

Elementorの使い方を動画レクチャーで網羅的に学びませんか?
 

無料でオンラインコースを受講できます。

・Elementorのウィジェットの使い方

・ランディングページの作り方

・テンプレートの使い方

 

以下のボタンから、無料でオンラインコースに登録し、今すぐアクセスしてください。

0コメント

コメントを提出

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

Elementorの使い方

無料でElementorの使い方を網羅的に学びませんか?
 

基本的なウィジェットの使い方から、ページを作成する方法までカバーしています。デザイン性の高いランディングページの作成を考えている方にオススメです。 下のボタンから無料で受講できます。

かっこいいLP作りたくないですか?

Elementorの使い方を"無料"で学びませんか?

プロのようなランディングページが作れるElementorの使い方が無料で受講できます。