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:

1. Open a landing page, website page or a course theme in the page builder.

2. Click on the gear icon for a section, row, column, or component.

   

   1	All
   2	Mobile only
   3	Desktop only
   4	Hide
   5	Call up CSS info

   1. 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.

        • If you want to make hidden sections and rows visible again:
          1. Click on My Page in the sidebar.

          2. Click on the three-dot menu for a hidden section or row.

             Hidden sections and rows are grayed out.

          3. Click on Show.
        • If you want to make hidden columns visible again:
          1. Click on Columns in the sidebar.
          2. Click on the crossed-out eye icon for a hidden column.
        • If you want to make hidden components visible again:
          1. Click on Components in the sidebar.
          2. Switch to the Manage tab.
          3. Click on the crossed-out eye icon for a hidden component.
   2. Edit the other settings of the component.
3. You can switch between mobile and desktop view to check your changes:

   • Click on the icon in the header bar to activate mobile view.

   • Click on the icon in the header bar to activate desktop view.

4. Click on Save in the header bar.