Editing Mobile Versions of Landing Pages

When creating or editing a landing page in SharpSpring's Landing Page Builder, you can preview content as it will display on desktop, tablet, and mobile devices. You can also directly edit how content appears on different versions of landing pages. This article will detail how to edit landing pages in order to optimize the content that appears on a specific device. Article Contents Adding Content to Landing Pages Editing Content on Different Devices Modifying Images for Different Devices Hiding Mobile Content Previewing Landing Pages on Different Devices			Available with:
			Marketing Automation	✓
			CRM Ultimate
			CRM PRO
			CRM Free
			Toolbar:
			Users:
			Administrators	✓
			Company Managers	✓
			Marketing Managers	✓
			Sales Managers
			Salespersons
			Jr. Salespersons

Adding Content to Landing Pages

Before you can edit content, you will have to create a landing page and insert block, layout, and element content. To create a landing page and add content, do the following:

In SharpSpring's top toolbar, click Content > Pages. Create or edit a landing page. In the Landing Page Content Editor toolbar, click    Add Content. Click the Blocks tab. Click any desired pre-built content blocks. Click the Layouts tab. Click any of the desired layouts. Click the Elements tab. Click any of the desired element types. In a block or layout, insert the element at a purple line. Continue to add blocks, layouts, and elements as desired. Click Publish.

Click to enlarge.

Editing Content on Different Devices

You can edit landing page content to appear different on different viewing devices. To edit content, do the following:

In SharpSpring's top toolbar, click Content > Pages. Create or edit a landing page. Insert desired layouts or elements. Close the    Add Content menu. Click the inserted layout or element. Click the    Desktop tab. Modify the available settings for the layout or element. Click the    Tablet tab. Modify the available settings for the layout or element. Click the    Mobile tab. Modify the available settings for the layout or element. Click Publish.		Click to enlarge.
		Important: Setting changes to desktop versions of content will overwrite setting changes to tablet and mobile versions of content.
		Note: Certain settings and styles may only be changed in the Desktop tab. These settings will be faded out in the Tablet and Mobile tabs.

Important Information Regarding Desktop Settings Overwriting Other Settings

Making changes to the layout and element settings of the desktop version of a landing page will overwrite changes made to layout and element settings of tablet and mobile versions of the landing page. Make changes to the desktop version of the landing page first before modifying tablet and mobile versions.

However, setting changes made to mobile versions of a landing page do not carry over to tablet or desktop versions of the landing page. In the same way, setting changes made to tablet and mobile versions of a landing page do not carry over to desktop versions of the landing page.

This only applies to content settings. Reordering content in any version of the landing page will reorder that content across all versions of the landing page. Deleting content from any version of the landing page will delete the content from all versions of the landing page.

Modifying Images for Different Devices

Images can only take up so much space on mobile devices, as tablet and mobile screens have only so much available real estate. To compensate, you can edit the settings for images on different devices in the Landing Page Builder. To modify image settings, do the following:

In SharpSpring's top toolbar, click Content > Pages. Create or edit a landing page. Insert desired blocks or layouts. Insert an image element into the landing page. Close the    Add Content menu. Click the inserted image element. Click the    Desktop tab. Modify the desired image style settings. Click the    Tablet tab. Modify the desired image style settings. Click the    Mobile tab. Modify the desired image style settings. Click Publish.		Click to enlarge.
		Important: Setting changes to desktop versions of images will overwrite setting changes to tablet and mobile versions of images. Changing image dimensions, links, and placeholder text in one version will change the same across all versions.

Hiding Mobile Content

You can hide entire sections from displaying on mobile devices. This allows you to create a fully interactive version of your landing page for desktop devices, and streamlined versions of your landing page for tablet and mobile devices.

Hiding content for tablet mobile devices is as much a strategy and courtesy as it is a point of aesthetic design. These devices may have a harder time loading media-heavy content. In addition, data restrictions for phone or Internet data plans may cause page visitors on tablet and mobile devices to avoid making repeat visits to your pages.

To hide content for tablet and mobile devices, do the following:

In SharpSpring's top toolbar, click Content > Pages. Create or edit a landing page. Insert desired blocks or layouts. Insert an image element into the landing page. Close the    Add Content menu. Double-click the section the inserted layout or elements are in. In any of the device setting tabs, click the Hide on Mobile toggle. Click Publish.		Click to enlarge.
		Note: This feature is unavailable for individual blocks, layouts, or elements.

Previewing Landing Pages on Different Devices

You can preview how a landing page appears on different devices. This feature allows you to view content on a desktop, tablet, or mobile device. To preview landing pages on different devices, do the following: In SharpSpring's top toolbar, click Content > Pages. Create or edit a landing page. In the Landing Page Options toolbar, click the Preview drop-down menu. Select one of the following device views:    •     Desktop    •     Tablet    •     Mobile		Click to enlarge.
		Note: Any page sections that had the Hide on Mobile toggle turned on will disappear when using mobile view. These sections will only appear on desktop devices.