How to Use the Custom HTML and Google Map Elements
The user interface of the Thrive editor has been upgraded!
Please, check out the changes here, before proceeding.
Custom HTML Element
Inserting custom HTML code to your page can easily be done with the "Custom HTML" element.
First, drag & drop the element to your page. A pop-up window will open where you can either type or paste in the HTML code that you want to insert (in this example, HTML code for a table).
Then, just click on "Save" and the code will be applied to your page.
Note: In case you are using the “Custom HTML” element to add a conversion tracking script to a non-default state of a Thrive Leads form, another section will appear, where you will have to choose when to load your HTML code.
Please take a look at this article to see more details about this option.
If you want to modify the HTML code, all you have to do is click on the blue "Edit HTML Content" button and the pop-up window will open again. Make the necessary changes and then, click on "Save" again.
Google Map Element
Every contact page needs a map to offer the visitors details and directions to the location of the business. If you are using Thrive Architect, you can easily put a Google map on your page with the help of the "Google Map" element. Here is how to do that in 3 simple steps:
1. Add the element to the page
Drag & drop the "Google Map" element to the part of the page where you want the map to be displayed.
2. Define the address
Note: If you have previously used the "Advanced Custom Fields" plugin to set up a "Text" custom field with coordinates as the assigned value, you will have the option of using that custom field with the "Google Maps" element here.
In this case before setting up the address, you will notice the section with the "Element Type" options.
Here, choose the "Dynamic" option, in order to use the "Text" custom field you have previously set up:
You can see in the sidebar options, that by default, the "Address" section is filled in with "New York". You will have to change this by typing in the actual address of the location of your business.
3. Customize - zoom
Zoom in or out on the Google map, depending on your preferences, by dragging the slider under the option or entering a value manually in the box next to it.
After you finish, save the page and preview it by clicking on the "More options" from the bottom left corner of the page and then, on "Preview".
This way you can see how your visitors will see the map. They will be able to use every option that a Google map has (move around, use the zoom options as well as the satellite view).
Some of the more general options are also available for the "Custom HTML" and "Google Map" elements, in case you want to further adjust them.
Should you need more info on how the various Thrive Architect elements work, please follow this link.
Hopefully, this article was useful for you. If so, please give us a smile below :)