In this step-by-step tutorial, I’ll show you how to easily integrate Google Street View into your Divi website. Whether you want to showcase your business location or create immersive virtual tours, adding Google Street View to Divi is a breeze with the tips and tricks I’ll share.
Introduction
In this tutorial, we’ll walk you through the process of adding a Google Street View map to your Divi theme page. Google Street View maps can be a valuable addition to your website, providing users with an immersive experience of a particular location. Follow these steps to seamlessly integrate a Street View map into your Divi theme page.
Step 1: Create a New Page
- Log in to your WordPress dashboard.
- Navigate to “Pages” and click on “Add New.”
- Give your new page a name and select “Use Divi Builder” to launch the Divi Builder.
Step 2: Start Building from Scratch
- Once the Divi Builder is active, choose to “Build from Scratch.”
- Next, insert a row by clicking on the “+ Add Row” button.
Step 3: Insert the Code Module
- Within the newly created row, click on the gray “+” button to add a module.
- In the module search bar, type “code” to find the “Code” module, and then select it.
Step 4: Locate Your Street View Location
- Open a new browser tab and go to the Google Maps website (https://www.google.com/maps).
- Use the search bar to locate and navigate to the street view location you want to add to your page.
Step 5: Access the Street View Icon
- Once you’ve found the desired location on Google Maps, look for the small Street View icon in the bottom right corner of the map.
- Click on the Street View icon and drag it to the exact spot where you want the street view image to appear.
Step 6: Share or Embed the Street View Image
- After positioning the Street View image, go to the top right corner of the map, where you’ll find three dots.
- Click on these three dots to access a dropdown menu.
- From the menu, select “Share or Embed Image.”
Step 7: Copy the HTML Code
- In the Share or Embed dialog box, select the “Embed Map” tab.
- Copy the provided HTML code to your clipboard.
Step 8: Paste the HTML Code into Divi
- Return to the WordPress page where you want to insert the Google Street View map.
- In the Code module you added earlier, paste the copied HTML code into the text window.
- After pasting the code, make sure to save your changes.
Step 9: Adjust the Width of the Street View
- To edit the width of the Google Street View map, click on the gear (settings) icon within the Code module.
- Change the width value to “100%” to make the Street View map span the entire width of your page.
- Save your changes.
Step 10: Save and Publish
- To make your changes live, click the “Save” button.
- Then, click “Publish” to publish the page.
Step 11: Preview Your Page
- To see the final result, exit the Divi Visual Builder.
- Visit the published page on your website to ensure that the Google Street View map is correctly displayed at full width.
Conclusion: Congratulations! You have successfully added a Google Street View map to your Divi theme page. This engaging feature can enhance the user experience on your website, especially if you want to showcase specific locations or properties. Feel free to customize the placement and width of the map to suit your design preferences.
