You can optimize your landing pages and website pages for display on mobile and desktop screens. For this, you can set each element to be displayed always or only on certain screen types: sections, rows, and columns, as well as components. This is relevant for the mobile and desktop optimization of your website.
For example, you can display product images large on desktop screens and hide them on mobile devices to save space:
- You can place two rows for an introduction one below the other.
- In the row for the desktop view, add a large product image.
- In the row for the mobile view, keep only the text.
On desktop screens, an introduction with an image is displayed, while on mobile devices, it is displayed without the image.
How to show or hide page elements:
- Open a landing page, website page or a course theme in the page builder.
- Click on a section, row, column, or component.
-
Click on the gear icon next to the component to configure the component in the side menu.
1 All 2 Mobile only 3 Desktop only 4 Hide 5 Call up CSS info - Select an option:
-
All
The page element is displayed on all screens.
-
Mobile only or Desktop only
The page element is only displayed on screens of the selected type and hidden on others.
The page element is outlined in red and labeled.
-
Hide
The page element is not displayed at all.
This allows you to insert content that should not be used yet. For example, you can preemptively insert a component for an image that is still awaiting approval.
Hidden page elements can be made visible again in the following way.
-
In the header bar, click on Sections, Rows, Columns or Components and then click on Manage.
The icon appears when hovering over it with the mouse cursor.
An overview of the elements on the page will appear. The overview extends to the elements that you want to manage:
Sections > row > column> component
-
Page elements with a strikethrough eye icon are hidden.
Click on the strikethrough eye icon to make the page element immediately visible in the page builder.
The change will only be visible to visitors after you save the page.
-
-
- Edit the other settings of the component.
- Select an option:
- In the header bar, click on Save.