Editing the Mobile Version of your Page in Smart Builder

Follow

Smart Builder’s responsive layouts and grid system automatically create landing pages that align and center to scale perfectly on any device. In other words, pages created with Smart Builder are entirely mobile responsive! 

This article will explain how to: 

Toggle Between the Mobile & Desktop View

  1. Navigate to your landing page in the Smart Builder.
  2. At the top right-hand corner of Smart Builder, locate the Desktop desktop-version icon.
  3. Click the arrow to toggle the drop-down menu, and select the Mobile mobile-version icon:
    toggle-between-desktop-and-mobile-views
    The mobile version of your landing page will appear in Smart Builder.
  4. To toggle back to the desktop version, click the arrow again and select the Desktop icon from the drop-down menu.

Editing of the Mobile Version

  1. Navigate to the mobile version of your landing page in Smart Builder.
  2. Locate the section on the mobile version you’d like to change to a different layout.
  3. Click near the bottom of the section. Section formatting options will appear.
  4. Select the Change Layout button:
    change-mobile-section-template
  5. A new window will appear at the bottom of the page with different section templates to choose from.
  6. Choose a section template to apply it to the mobile version of your page.
    choose-from-section-templates
    Changing the template in the mobile version will not affect the template on the desktop version.

Save and publish your page when you’re happy with these changes. To preview your page, see toggling Preview mode in Smart Builder.

Make Edits to the Mobile Version Without Changing the Desktop Version

At this time, the following edits made to the mobile version will also change the desktop version, and vice versa: 

  • Updating the text, such as editing content in headings, paragraphs, buttons, and
  • Deleting a section. 

Instead of deleting a section, hide it from that version via the Content Tree, as explained in the next section of this article.

Hide or Display Elements with the Content Tree

Sometimes, you may want to hide or show certain elements on the mobile version, but show it on the desktop version, or vice versa. Instead of deleting the section, hide it from view instead!

Follow these steps to set this up:

  1. Navigate to the mobile version of your landing page in Smart Builder.
  2. Navigate to the Content Tree tab within the Smart Builder header.
  3. A hierarchical list of all elements on your page will appear within the Content Tree. For example, this Hero section contains nested elements such as texts, buttons, images, and so on:
    breakdown-of-content-tree
  4. Click the eye icon to the right of the element to hide it from that view:
    hide-show-elements-on-page
  5. When hiding an element from the mobile view, the element will also be hidden in the desktop view:
    hide-show-elements-page-desktop-view-vs-mobile-view

Preview the Mobile Version of your Landing Page

To preview the mobile version of your landing page, navigate to the header of the Smart Builder & click the toggle switch button to turn on the Preview mode.

preview-page-in-smart-builder

Be sure to Save and Publish your page to finalize the changes.

Unbounce made it easy for me to find the information I need.
Strongly DisagreeDisagreeSomewhat DisagreeUndecidedSomewhat AgreeAgreeStrongly Agree

Measuring Customer Effort Score with Nicereply