Customize content for various screens
Configuring the way content displays for various device screens is effortless in PRO mode. Content can always be displayed exactly how you want it to be.
Last updated
Configuring the way content displays for various device screens is effortless in PRO mode. Content can always be displayed exactly how you want it to be.
Last updated
Here it's important to know the following terms: section, cover, content page, quiz, block, and element. Please see the glossary if you're unfamiliar with them.
In the middle of the top panel of the Editor, you can toggle between content displays for web, tablet, and mobile devices.
The web version is selected by default, and often editing begins with this version. All display and style settings in the web version are automatically transferred to the tablet and mobile versions, and content adjusted to fit the rules of smaller screens.
Sometimes, you'll need to tweak how content looks on tablets and mobiles. Switching between these versions in the Editor makes it easier to adjust things like position, size, margins, colors, fonts and etc.
Tablet and mobile settings are kept separate and have no influence on one another; in other words, you can create a unique design for each version.
When switching to the tablet or mobile version, Rows and Columns will have additional settings: "Order" and "Direction."
These settings are quite helpful for managing how content looks on smaller screens and let you change the order of elements:
determines the overall numerical order for columns or rows. By setting the numerical order, you can control the sequence in which elements and element groups are displayed on the device screen.
Order determines the overall numerical order for columns or rows. By setting the numerical order, you can control the order in which elements appear on the screen.
Hide is another helpful column setting for mobile screens (although it's available for web versions as well), which collapses content in a column. This lets you hide/show elements on any screen.
On the image below you can see an example when captions are different on tablet and mobile version.
To make this, add two columns with different text elements inside, and hide one column for a specific version.
Here is a gif-guide:
