Custom HTML Element
Inserting custom HTML code to your page can easily be done with the “Custom HTML” element.
First, look for the element in the right sidebar and add it to your page just as you would do with any other Thrive Architect element:
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 “Edit HTML content” button and the pop-up window will open again, allowing you to make the necessary changes:
Google Map Element
|
Important! Due to some recent changes with the Google API service, we recommend this workaround for displaying a Google Map on your website. Here’s how you can do that: 1. Manually copy the iframe HTML code of the intended location from Google Maps. To do that, use the Google search engine to look up your desired location and then click on “Maps”:  Here, click on the “Share” button:  In the pop-up that opens, select the “Embed a map” tab:  And now you will be able to copy the iframe HTML code, as showcased below:  2. With this HTML link copied, you can now head over to your page or post and add a “WordPress Content” element to it:  Then, head over to the “Text” tab in the lightbox that opens:  And simply paste the HTML code into the text field and click on “Save”:  Your map should now load on your page:  |
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.
Click on the plus sign from the right sidebar, and look for the “Google Map” element:
Drag & drop it to the part of the page where you want the map to be displayed:
The “Main Options” will automatically appear in the left sidebar:
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:
From here on, you can follow the steps from this article, which explains in detail how you can use the custom field with the “Google Map” element.
Keep in mind that the “Element Type” option will only be visible if you have gone through all the steps explained in this article.
Then, you can go ahead and define the address. 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:
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:
You can next activate the “Stretch to fit screen width” toggle in order to display the map on the full width of the page:
Lastly, you can define the “Width” and “Height” of the map from the following two options. Once more, you can use the slider or the numerical field next to each option to set the width and height of the map:
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.
After you finish, save the page by clicking on the “Save Work” button from the lower part of the sidebar:
Should you need more info on how the various Thrive Architect elements work, please follow this link.
Hopefully, this article was useful to you. If so, please give us a smile below 🙂