A Google map location on your WordPress website helps users locate your business quickly and builds trust.
Do you want to learn how to add and customize the Elementor Google Maps Widget to your WordPress website?
Then, you are at the right place.
In this blog, we will learn how to customize the Elementor Google Maps Widget in four quick steps.
How to Add Google Maps Widget in Elementor for WordPress Website?
Elementor is one of the best WordPress page builders. It offers a drag-and-drop feature for adding widgets and elements to your site’s page or post.
Elementor Google Maps Widget is a drag-and-drop widget that allows you to add your business’s location to your website without any coding.
In this section, we will learn how to add this widget to the WordPress post or page hassle-free.
Let us get started!
- Step 1: Open your Elementor widget section and search for “Google Maps” widget. Select the widget and add it to the container on your page/post.
- Step 2: Now, preview your Google Maps and add the business location. Finally, publish your page and preview the Google map on your website.
You have successfully added the Elementor Google Maps Widget to your website. Using this widget, you will be able to depict your exact location and build trust among the users.
Customize Google Maps Widget on WordPress Website using Elementor
Every element requires customization before going live on the website, and the same goes for the WordPress Elementor Google Maps widget.
In this section, you will learn how to style the Elementor widget to make it more presentable on the site.
Before going to the Style tab, we will look at some widget options for adjusting its height and zooming in/out of Google Maps.
- Zoom: You can use this zoom slider to zoom in/out on Google Maps to make your location on the website more precise.
- Height: With this option, you can adjust the widget’s height according to the element’s placement.
Style tab
This tab lets you style the widget to match the website’s theme and color combination. It can also adjust the CSS filter for the normal and hover effects.
Normal
- CSS Filters: You can adjust Google Maps blur, brightness, contrast, saturation, and hue with a normal effect.
Hover
- CSS Filters: This option under the hover effect helps you to adjust the hover effect filters by editing the settings.
- Transition Duration: This option helps you adjust the hover effect’s transition duration for your Elementor Google Maps widget.
Conclusion
Suppose you have an offline business like a bakery shop where you want your customers to visit and spend quality time with their loved ones. In that case, you can use the Elementor Google Maps Widget to help visitors locate your place quickly. You can use this widget with both free and premium versions of Elementor.
Leave a Reply