Templates
Create Your Own Templates
Save a landing page as a template directly from your editing session. With the Save As Template option, you can select which folder in the template listing you want to save to.
Use Act-On's Stock Templates
The Content Catalog saves you time and effort by allowing you to select from our library of landing page templates. With a few clicks, you can launch a new web page with a look that's consistent with your brand identity and color scheme.
Create from HTML
The Landing Page Composer now includes the ability to upload an HTML file with placeholders that will allow you to easily modify images, text, buttons and custom content using Act-On’s content block controls. Just make sure your designer uses the following:
- Rich Text Block:
<div data-aoBlockType=”richText”><p>Rich Text Block</p></div> - Button Block:
<div data-aoBlockType=”button”><p>button</p></div> - Image Block:
<div data-aoBlockType=”image”></div> - Custom Content Block:
<div data-aoBlockType=”customContent”><p>Custom Content Block</p></div>
Once uploaded, just click the Content block to edit it.
Properties Tab
This is where you publish or unpublish your landing page, set your redirect URL, and update the SEO information.
Design Tab
This is where you create the page. Make a mistake? Use the Undo/Redo buttons in the bottom right of the screen to easily correct it.
Landing Page Sections
Page sections are used to house the content of your landing page as well as format the layout of your page. All content added to your landing page must be placed within a section.
Think of each section as a separate column, and within each column, you can add up to 12 rows for content, creating a responsive grid that scales on the fly depending on the device or screen size being used. The numbers on the image to the right will show you the order the blocks will appear on mobile devices.
To edit column or row settings, hover over the page section until the controls appear.
- Click the Gear icon above the empty section to edit column settings.
- Click the Gear icon on the right of the Empty Section to edit row settings.
- To add additional rows, click the icon below the Gear. You can add up to 12 rows in each empty section. If you are familiar with the Twitter Bootstrap grid system, you already know how it works.
Static Top Section
Many of the more modern websites out today have a menu or “banner” that will stay at the top of a web page when scrolling through. Now you have this option in the new Landing Page composer with one click!
If you would like to have your top section stay fixed to the top when scrolling, just toggle on the Lock Top Section option under Page Properties.
Tip! To prevent the first section from overlapping the second section initially while using this feature, top padding will need to be added to the second section.
Drag-and-Drop Content Blocks
This functionality lets you design pages fast, rearrange the layout and elements on the fly, and see the edits as they are made. Simply drag your desired block into a section or click an existing block to edit its properties.
Responsive Design
The Landing Page Composer is set up to automatically adapt to the visitor’s screen, no matter which device they are using, without compromising functionality or aesthetics. Still, there are techniques to keep in mind to optimize your pages for mobile viewing.
Page Settings
In the right-side panel of the Design tab, there are several options to customize the overall design of your page.
Review Tab
After designing your landing page, you will want to review it for accuracy and make sure it displays correctly on Desktop, Mobile, and Tablets. From the Review tab, you can view how your landing pages render on desktop, tablet, and mobile.
Additionally, you will be able to preview both vertical and landscape views for tablets and mobile devices. The landscape view for a tablet is the same as the desktop view.
