Thrive Architect gives you complete control over which elements appear on Desktop, Tablet, and Mobile. The Responsive option makes it easy to show or hide specific elements based on screen size, helping you create a tailored experience for each device.
In this guide, you will learn how to use the Responsive option to adjust your layout across different devices.
You can also check out this video for a visual walkthrough:
Accessing the Responsive Option
To start using the responsive settings for an element, follow these steps:
- Open your page in Thrive Architect.
- In the editor, click on the plus (+) sign in the right sidebar to access the list of available Thrive Architect elements or select an existing element that you want to modify.
- In the left sidebar, locate the Responsive option.
- Click Responsive to expand its settings. You will see three icons that represent the device types: Desktop, Tablet, and Mobile.
By default, all three icons will be active, meaning the element will be visible on all three devices.
Hiding an Element on Specific Devices
To hide an element on one or more devices, follow these steps:
- Select the element you want to adjust.
- Open the Responsive settings in the left sidebar.
- Click on the icon for the device where you want to hide the element. For example, if you click on the Mobile icon, the element remains visible on Desktop and Tablet, but visitors on Mobile will not see it.
Showing Hidden Elements While Editing
To view elements that are hidden on the Desktop interface while editing your page, go to the Responsive settings for your element and toggle the Show all hidden elements option.
Enabling this option will allow you to see all hidden elements in the editor, making it easier for you to find and edit them.
However, visitors to your website will not be able to see these hidden elements.
You can check out this video for a quick start guide on mobile responsive editing.