Optimize your ActiveCampaign landing page for mobile

Learn how to design your landing page for mobile devices.

Pages is available on the following plans:

  • Plus
  • Professional
  • Enterprise 

Mobile styling lets you optimize your page design for mobile view.

Design your ActiveCampaign pages for mobile

To begin designing your pages for mobile, you'll need to access the mobile preview mode.

1. From the page editor, hover your mouse over the "Desktop" preview mode located in the top left bar.

Desktop icon

2. A modal window will appear. Click the "Mobile" option.

The preview mode will switch to mobile. You can begin to add, remove, and edit blocks on your page.

About mobile style overrides

With mobile styling, you can choose to make mobile style overrides. Mobile style overrides are design changes that are only visible on a mobile device.

Visibility

You can choose to make any block visible or invisible in mobile view. You can also make any block visible or invisible in desktop view.

Page block styles

You can edit the following block styles to only be different within mobile view:

  • Width
  • Background
  • Inner spacing
  • Border
  • Corners
  • Shadows
  • Opacity

You cannot edit the following styles to be different only in mobile view. Any edits you make on the following will automatically change on desktop and mobile view:

  • Adding text
  • Adding content
  • Changing theme colors
  • Text styling (bold, italic, size, etc.)

Add mobile style overrides

Any edits you make while in mobile preview mode add mobile style overrides. If an element has a mobile override, a red "X" icon will appear in the right pane next to the style:

Style override

Make blocks visible or invisible in mobile view

You can make blocks and even entire sections of your page visible or invisible in mobile view by clicking the "Visibility" icons located in the right pane.

Visibility icons

By default, both icons will be selected. To make a block or section visible on mobile only:

1. Click the section in the page editor you wish to work with.

2. Click the "Desktop" icon to unselect it.

The "Desktop" icon will turn from blue to grey; the "Mobile" icon will remain blue. This means that the block or section is only visible on mobile.

Visibility icons

Rearranging page blocks can only be done in desktop mode. Any changes you make with your page layout on desktop will reflect on mobile by default.

Remove mobile style overrides

To remove mobile style overrides, click the mobile style override icon. This is located in the right pane for the selected block.

Remove override

Removing the mobile style override reverts the block styles to match the desktop design.

Have more questions? Submit a request