How to make FOOTER using ELEMENTOR with GOOGLE MAP | Wordpress Elementor Tutorial 🔥🔥🔥
To create a footer with a Google Map using Elementor, follow these step-by-step instructions:
1. Install Elementor: Make sure you have Elementor installed and activated on your WordPress website. You can find Elementor in the WordPress plugin directory or by searching for it in your WordPress dashboard.
2. Create a new footer section: In your WordPress dashboard, navigate to "Elementor" -"Templates" and click on the "Add New" button. Select "Footer" as the template type and give it a name.
3. Edit the footer template: Once you've created the footer template, click on the "Edit with Elementor" button to start customizing it.
4. Add a new section: In the Elementor editor, click on the gray plus icon to add a new section to the footer template.
5. Choose the desired column structure: After adding a new section, you'll be prompted to choose a column structure. Select the desired column layout for your footer, such as a single column or multiple columns.
6. Add a Google Maps widget: In the Elementor widget panel on the left side, search for "Google Maps" or navigate to the "Basic" category and locate the Google Maps widget. Drag and drop it into the section you created in step 4.
7. Configure the Google Maps widget: Once you've added the Google Maps widget, you'll see the widget's settings in the left panel. Configure the following settings:
Enter the address or location: In the "Location" field, enter the address or location you want to display on the map. You can also provide latitude and longitude coordinates instead.
Adjust map zoom level: Use the "Zoom" slider or input box to set the desired zoom level for the map.
Customize map appearance (optional): Expand the "Style" section if you want to customize the map's appearance. You can change the colors, saturation, and other visual aspects to match your website's design.
8. Customize the footer content: You can further customize the footer by adding other widgets or elements to the section. For example, you can add text, images, or social media icons by dragging and dropping the relevant widgets from the Elementor panel.
9. Save and publish the footer template: Once you're satisfied with the footer design, click the "Update" button to save the changes. This will make the footer template available for use on your website.
10. Assign the footer template to your website's footer: To assign the newly created footer template to your website's footer, go to your WordPress dashboard and navigate to "Appearance" - "Widgets". Find the widget area where your footer is displayed (often called "Footer" or "Footer Widgets") and add the "Elementor Full Width" widget. In the widget settings, choose the footer template you created in step 2.
11. Preview and test: Visit your website to preview the footer with the Google Map. Make sure the map is displayed correctly and that the address or location is accurate. You can also test the interactivity of the map, such as zooming in or out and dragging the map.
That's it! You have now created a footer with a Google Map using Elementor. Remember to save your changes and update the template whenever you make modifications to the footer design.
