A Landing Page is where a visitor “lands” after they click a link in an email. Act-On's latest Landing Page Composer offers more advanced styling and building options, mobile-focused formatting, and enhanced usability, similar to the latest Email Composer.

To Get You Started

Try our walkthrough to familiarize yourself.

New Landing Page

1. Go to Content > Landing Pages & at the top right, click + Create landing page:

During the beta phase, toggle on Use the new page builder:


Note: Some features will be unavailable at the beginning of the open beta. Keep an eye out for additional functionality being released to the beta here.

2. Choose Start from scratch & click Next.
3. Enter a Landing page title, & optionally set the Location & add Tags (Learn more about tags).
4. Click Create.

A new Landing Page opens in the composer with three tabs on the left: Settings, Design, & Custom Code.

You can also:

• Start with a template & select a previously saved Landing Page template. Learn more
• Under Additional options, you can upload your custom code or code from a URL. Learn more
• Select Use the legacy composer check box to create a Landing Page with the legacy composer.
• Duplicate an existing Landing Page or template:
  1. Go to Content > Landing Pages & find the Landing Page you want using filters on the left, or search at the top right.
  2. Hover over the Landing Page in the list & from the menu on the right, select Duplicate:

1. 3. In Save as, enter a Landing Page title, & optionally set the Location, add Tags & click Duplicate.

Settings

Begin building your new Landing Page in the Settings tab of the composer:

Design

Create your Landing Page in the Design tab. Set Global Styles for the design, drag and drop Rows and Content Blocks to the your layout from the sidebar, and then fine-tune your design elements like colors, fonts, and more. The options available in the sidebar reflect what is selected in the layout.

Global Styles

The Global styles tab is your starting point for any design, allowing you to establish global design elements that both Rows and Content Blocks will inherit. Here, you can manage the following:

• Content area width and alignment
• Background colors
• A background image
• Default font and link colors

These settings bring cohesion to your design, ensuring elements like font families are consistent throughout unless overridden by custom settings in Rows or Content Blocks. Learn more

Rows

Rows are the foundational layout elements defining the horizontal arrangement of sections within your design. Features include:

• Up to six columns, accommodating various content elements side by side. See Column Management.
• Ability to choose different column configurations.
• Customizable features like background color, border, and mobile behavior for each row. See Row Properties.
• Add new columns and resize existing columns.
• Individual column settings like background color, padding, and border are accessible by clicking on the column in the sidebar.
• Save Rows: Save a Row design to use again. Learn more

Content Blocks

Content Blocks add specific elements to your design.

Essentials

Additional Content

Other Design Features

• Content Blocks auto-adjust to the column width when dragged into a Row. See Content Block Selection.
• Individual settings for each Content Block, like custom Padding & Hide on desktop or mobile, are accessible via Block options at the bottom of the sidebar once the block is selected. Learn more
• Popup formatting options are available for selected text in Title, Paragraph, Button, List, Table, & AI Create blocks. Learn more

• Copy & delete options are available at the bottom right of any selected Content Block.
• To move a Content Block, use at the right of the block.
• Undo, Redo, and History are available at the bottom left. Learn more

Block Identifier for Links

Linking directly to a Call to Action (such as a registration Form) on a Landing Page is a great way to make it easier for users to respond. Every Landing Page Content Block has a Block identifier option so it can be linked to from a Button, Image, or from a text link in a Title, Paragraph, List, or Table block elsewhere on the Landing Page.

1. In your Landing Page design, select the content block you want to link to.
2. At the bottom of the sidebar, toggle on Block identifier.
3. Rename the ID to something relevant for that block. For example:

4. Link to the block from:
   • A button or image: Select it & in the sidebar under Action, set the Link type to Internal link & from to Scroll to list, select the ID you set above. For example:

• • Link text in a Title, Paragraph, List, or Table:
    1. Select (highlight) the text you want to use as a link & from the popup options, click
    2. In Link Type, select Internal link & in Scroll to, select the ID you set above.
    3. Text to display is the highlighted text.
    4. In the Title box, enter the popup text that appears when hovering over the link.
    5. Select Target 'None' & click OK. For example:

Now, in your Landing Page, clicking the button, image, or text link takes you to the content block you want.

Use Block Identifiers in Landing Page URLs

You can also append block identifiers to Landing Page URLs. For example, for the Landing Page URL https://a12345.actonservice.com/acton/.../0, the URL https://a12345.actonservice.com/acton/.../0#Registration
takes you directly to the block ID Registration on your Landing Page.

Custom Code

Add custom JavaScript & CSS code to your Landing Page in the Custom Code tab.

JavaScript

1. In the Javascript tab in the sidebar, click +Select scripts & select scripts to add.
   Scripts are added to the top of the page code and load in the order they are set.
2. Add custom JavaScript in the Custom javascript area below (copy, undo, & redo options are available at the bottom right). This custom JavaScript will load last.

CSS

1. In the CSS tab in the sidebar, click +Select CSS & select CSS files to add.
   CSS files are added to the top of the page code and load in the order they are set.
2. Add custom CSS in the Custom CSS area below (copy, undo, & redo options are available at the bottom right). This custom CSS will load last.

Also see Upload Page Code.

Preview, Test, Publish, & Save

Preview Mode

At the top right of the Landing Page Composer, click Preview to see what your Landing Page will look like. When you have finished, click Done at the top right to close.

Desktop/Mobile

At the top center, switch between an approximation of how your Landing Page will look on a Desktop or Mobile client. In the Mobile view, rotate the screen to see a landscape view.

Test Links

At the top right of the Landing Page Composer, click Test links to validate the links in your Landing Page design. A Landing page link results dialog opens with details for each link.

• On the right of each link, click to go to the links destination.
• At the bottom left, click Check again to retry link validation.
• Click Close when you are finished.

Publish Page

Publish

When you have completed, previewed, & tested your Landing Page design & you are ready to publish, at the top right, click Publish page & confirm when prompted. A confirmation appears.

In the Settings tab, the Page Status area also shows the Landing Page as Live & your Landing Page is now available at the URL shown in the Public URL Manager area (also see Landing Page Public URLs):

Also, in the Landing Pages list (go to Content > Landing Pages), live Landing Pages are shown with a green bullet, & a grey bullet if draft (unpublished):

Publish Changes

You can edit a published Landing Page & then click Publish Changes (top right) to make the changes public immediately.

Unpublish

To unpublish a Landing Page, in the Settings tab in the Page Status area, click Unpublish & confirm when prompted. A confirmation appears.

Visitors are now redirected as set in the Draft page redirect URL. For more information, see the Settings section above.

Restore

When a Landing Page has been unpublished & edits are made, you can still republish the previously published version. Any saved changes made since then remain unpublished (& can be published in the future). The previous version of the page goes live & is visible to the public at the URL(s) you have defined.

1. In the Settings tab, in the Page Status area, click Restore.
2. Confirm when prompted.

Autosave

All your changes are autosaved in the Landing Page Composer, showing the saved status at the top right:

Saving Options

At the top right, there are the following save options:

• Save and close: Closes the tab in the current saved state.
• Save as copy / template: Create a copy or template of your design in the current saved state. This is useful when updating an existing design when you want to keep a copy of the original.
  • Enter a title, (optionally set a location & tags), & click Save / Create.
• Discard changes: Close the design, removing all changes made since it was last published. This may include changes made before your current editing session. Check the last published date in Settings > Page Status.
  Discarding changes reverts the design to its last published state. All unpublished changes will be lost. This action cannot be undone.