Following the entry about Elementor, it’s time to take a look at Thrive Architect. As I’ve said before, I believe this is the definitive visual layout editor. We’ll see the reasons why.
I began using Thrive Content Builder and, even though I loved it, it was lacking important elements. Thanks to Elementor for forcing, in some way, the development of Thrive Architect as well as guiding its developers down the right path. As we’ll soon see, most of these issues have been solved.
Working with Thrive Architect is extremely easy. Simply click the “Edit with Thrive Architect” and we’ll be met with our webpage’s frontend with everything we need to start working. Now we simply follow our intuition: drag the elements we want to use and drop them wherever we want them.
As we’ve seen in the video, a blue bar appears on the places we can drop the widget, we are informed (in perfect English) of the final position: above, under or next to existing elements. We can also drop an element within a text box. Thrive Architect will separate the text accordingly to have it fit and, if we drop it next to another element, it’ll automatically create a column format which we can later adjust to whatever we like. This is the functionality I’d expect from a visual layout editor.
General aspects
The user interface is simplistic, when clicking on any element, the sidebar modifies its content and shows the different settings available for it. If we click on an empty area, we’ll be shown a list of available widgets. If we are editing content, clicking on the top-left corner of the bar will also take us to that list, which allows us to insert widgets inside of the one we’re modifying.
When we have selected a widget, the top side of the screen will display the selected element and other elements which contain it in the form of breadcrumbs. The prior image shows the text editor, inside a column, inside a section (zone 1). It makes navigating hierarchies easy, something the previous version was not capable of.
Zone 2 shows what is in my opinion one of Thrive Architect’s biggest features: its inline text editor, which can work in headers or even text inside a button. As we edit text, we can see the end-result just as our users would see it. Say goodbye to pop up editors or to editing in the sidebar. Even though the text editor doesn’t allow, for example, images to be inserted, we can always use columns or any other element we see fit.
Toolbar
If we click on the gear icon on the top-left corner of the toolbar, we’ll gain access to Thrive Architect’s settings. These are the following:
- Setup Page Events – Define subscriber catching forms, which will be displayed after a specified time or when the user leaves the page.
- Edit HTML – Edit HTML code directly
- Custom CSS – Add custom CSS code
- Turn Off Save Reminders – Turn off the reminders to save our progress
- Switch Editor Side – Change the position of the toolbar
The Template Setup tab shows the following settings:
- Choose a Landing Page Template – Load a predefined template in order to not start from scratch
- Import Landing Page – Load any previously saved custom template
- Save Content as Template – Save our design to use it in other pages or entries.
We need to consider that when importing a template, our current content will be replaced by it. If we’ve loaded a template already, we have the option Revert to Theme Template, which, as the name would imply, will revert back to our previous theme.
Contrary to Elementor, we do not have global font or color pallet settings. Thrive Architect uses the ones from the theme, allowing us to customize them if we wanted to.
In Elementor we had the tabs on the sidebar, however Thrive Architect doesn’t use tabs and instead makes us shuffle through the different options.
The settings we’re presented with will depend on the widget we’re working with, but at the end we can find some global settings for all of them.
We have Responsive, which gives us the option of defining in which devices the selected element will be displayed. We can also assign a class and an ID to it, to later edit it with CSS code.
Lastly, we can save the element as a template in order to use it in other pages or entries, which will save us the hassle of setting it up again.
Last of all we have an extremely important option. In the tab Layout & Position, we can set margins and fillings, by directly inputting the values or by dragging within the corresponding area, placing the element precisely in the position we desire. This is another aspect which separates Thrive Architect from the rest of its competitors. This is best seen in the video.
Footer
Inside the footer we have several settings available:
The first icon gives a preview of the footer, the revision history, the ability to undo and redo any last changes and the option to exit Thrive Architect.
The third icon is a direct access to the general settings, and it gives us a button to save our work.
The most important setting is Responsive View, which allows us to simulate how our content will be displayed in different devices and to modify its aspect to achive the perfect result in each one. These options complement the sidebar responsive settings we’ve seen beforehand.
Available widgets
Paragraph/Text – Add text, select the format, create links and lists.
Heading – Generate headers. Select the format, create links and lists
Image – Adjust size, apply effects, styles and animations.
Button – Button generator, with full control over color, size, font and borders.
Columns – Generate up to 4 columns by default, add further columns by dragging widgets to the sides
Background Section – Have custom background sections, even videos
Content Box – A widget container, useful in complex designs.
Content template – Insert preset elements which we have saved as templates
Countdown – Add a countdown with different styles. The Evergreen setting restarts the counter automatically.
Click to Tweet – Insert content to be tweeted.
Thrive Architect guide
Content Reveal – Counter to show content. Allows setting up an autoscroll for it.
Credit Card – Insert logos for different payment methods
Comments – Insert a comments section, using Facebook or Disqus to manage it.
Post Grid Nos permite mostrar las entradas del blog en una tabla. Podemos configurar el aspecto visual y la selección de entradas
Toggle / Tabs – Generate togglers and tabs
Video – Insert YouTube, Vimeo, Wistia videos or ones from our own server.
Styled list – Create lists with different icons, with full control over its visual aspect.
Divider – Separate elements horizontally, without needing margins or fillings.
Icon – Insert icons. Thrive’s control panel gives us a list of custom icons.
Social Share – Generate buttons to share on Social media.
These are some of the more relevant widgets. We can also add custom HTML code and any content available within the standard WordPress editor. We can also include any menu from our theme, which is useful if we use a custom template different from our theme. Another interesting widget is automatically generating a table of contents based on our headers.
Finally, we have widgets to integrate Thrive Leads, as well as generating forms to catch subscribers. Logically, these widgets are integrated within our email marketing platform.
In conclusion
Thrive Architect is, in my opinion, the most complete visual layout editor out of all that I’ve tested. It’s the only one which allows to edit text directly and place/resize elements by dragging and dropping. I use it to lay out pages as well as entries.
Another aspect in favor is that, should we stop using it, the content will not be deleted and will still be available, although needing to edit it again, logically.
The main drawback is that it doesn’t offer a free version, although if we use any plugin from the Thrive ecosystem, it will come included. It also doesn’t offer many translations, but with its highly intuitive icons, we’ll get used to its interface quickly enough.
If we are on a tight budget, we can always resort to Elementor, which the free version offers almost anything we could need to achieve any design we want for our website.
