Editing the Mobile, Desktop, or Tablet 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 responsive! 

This article will explain how to: 

About Responsiveness in Smart Builder

At this time, there are three breakpoints in Smart Builder. This way, visitors on different devices such as mobile phones, tablets, and desktops, will see a landing page custom to their screen size. The three breakpoints are: 

  1. 425px or smaller (e.g., mobile devices), 
  2. 426-768px (e.g., tablet devices), and
  3. 769px or higher (e.g., desktop devices). 

Toggle Between Different Screen Sizes in Smart Builder

  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 Tablet or Mobile mobile-version icon:
    toggle-between-desktop-and-mobile-views
  4. To toggle back to the desktop version, click the arrow again and select the Desktop desktop-version icon from the drop-down menu.

Editing of the Mobile or Tablet Version

  1. Navigate to the mobile or tablet version of your landing page in Smart Builder.
  2. Locate the section 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 current version of your page.
    choose-from-section-templates
    Changing the template in the mobile version or tablet 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.

Will making edits to the mobile or tablet version impact the desktop version?

At this time, the following edits made to the mobile or tablet 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. 

All other changes will not. 

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 or tablet version, but show them 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 or tablet version of your landing page in Smart Builder.
  2. Navigate to the Content  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 one view, the element will be hidden in another view:
    hide-show-elements-page-desktop-view-vs-mobile-view

Preview the Different Versions of your Landing Page

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

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