Welcome to Act-On's new Landing Page Composer!

More styling and formatting options, improved mobile responsiveness, and a sleek interface offer a better Landing Page-building experience. This walkthrough is designed as a step-by-step guide to familiarize you with the new Landing Page Composer.

Let's get started. The steps here will probably take you a little under an hour to complete. We recommend that you open this guide in a separate tab so that you can see the instructions while you work through the steps.

Start a New Landing Page

1. When signed into Act-On, go to Content > Landing Pages & at the top right, click + Create landing page.
2. In the dialog that appears, select Start from scratch & click Next:

3. Enter a Landing page title, for example, "LP Walkthru". This is the Landing Page's name within Act-On & is not visible in the published version.
4. For the Location, select Default Folder & click Add here.
5. Click Create. A new browser tab opens with the Landing Page Composer for your design:

Design

In the following steps, we'll design a Landing Page like the one in the picture above, taking you through many of the features of the Landing Page Composer.

1. At the top left, click the Design tab.

Global Styles

Establish design elements that Rows and Content Blocks will inherit.

2. At the top right, click the Global styles tab. We'll set some colors and the font used across the Landing Page.
3. Set:
   • Content area width to 800px
   • Content area alignment to Center
   • Background color to #ffffff white.
   • Content area background color to transparent.
   • Background image off.
   • Default font to 'Open Sans'.
   • Link color to #0068a5 a blue.

Rows & Columns

Each row has 12 equally sized divisions for arranging columns that line up correctly (learn more about columns here). Our Landing Page design will use a 2-column layout, so let's add some rows for this.

When done, your row design should look like this. Notice how the first 2-column rows line up so the Landing Page content will match:

4. On the right, click the Rows tab. We'll leave the first, single-column row as it is for the logo.
5. Our second row will be a 2-column, split 7-5.
   • Add any 2-column row directly below the first row.
   • Click the left or right side of the row to select it & in the sidebar, scroll down to Columns Structure, & resize the columns to be split 7-5:

6. Now, click the Rows tab again to return to the row selector & under your first two rows, add a single column row.
7. Select & duplicate the 2-column row & drag from the left to move the duplicate to the bottom:

8. To finish the rows, add:
   • A single column row.
   • A 2-column row, split 6-6.
   • A single column row.
9. Our design has the top content with a black background, so we'll set that at the row level. Select the top row & in the sidebar, under Backgrounds, set the Row background color to black #000000
10. Repeat this for the second, 2-column row.

Content Blocks

Next, let's add content blocks to the rows.

11. At the top of the sidebar, click the Content tab.
12. Add an Image block to the top row for the logo:

13. To add your logo to this block, either drag and drop a logo image from your desktop, click Browse to access Act-On's image library, or in the sidebar, enter an image URL (Learn how to upload images & Organize the Image Library).
    As the background is black, we selected a white logo with a transparent background.
14. With the Image block selected, in the sidebar, Align the picture left, toggle off Auto width & set the Width to 15%:

That's the first 'logo' row done. Now on to the rest of the top content.

15. In the second, 2-column row, add these content blocks: Title, Paragraph, Button, & Image.
16. Select the Title block & in the sidebar, set the Text color to white #ffffff. Repeat this for the Paragraph block, so the row looks like this:

17. In the Title block, type an engaging title for the Landing Page & set the Font size to 30.
18. In the Image block, add an eye-catching picture relevant to the Landing Page content.
19. In the Paragraph block, type your introduction (here we added the event date).
20. In the Button block, enter the text "Register Now", Align the button left, & set the Border radius to 20. We'll add the button's action later.

The top content should look like this:

Next, we'll add the main content of the Landing Page.

21. In the row immediately below the top content, add a Divider content block.
22. In the row below that, add four Paragraph content blocks, an Image & a List content block, so this part of the design looks like this:

23. In the next two rows, add Image & Paragraph content blocks, & in the bottom row add an HTML content block so the bottom of the design looks like this:

24. Select the Divider block. Toggle on Transparent, set the Height to 5, & remove Padding:

25. In the row below the divider, in the Paragraph, Image & List blocks, enter the first main Landing Page content, for example:

• • The right column is gray:
    Select the row > Columns Structure (in the sidebar, scroll down) > select the right column > Column background #eef3fa
  • The top left & right paragraphs are Font weight Bold & Font size 22px.
  • The Font size for body text is 16px, including the list.
  • The List items' spacing is 16.
  • The image is a supporting brand image, set to the left:
    Auto width off, Width set to 20%, Align left.

26. In the next two rows, in the three Image & Paragraph blocks, enter the rest of the main Landing Page content, for example:

• • The top image is the same supporting brand image as used above:
    Auto width off, Width set to 10% (so the two supporting brand images match), Align left.
  • The top paragraph is Font weight Bold & Font size 22px.
  • The lower images are head-shots; we've used placeholders here.
  • The bottom left & right paragraphs are Font family Arial, Align center, to align with the head-shots.

Now, we'll add a Form to the Landing Page design to capture the details of those who register.

27. In the sidebar, click the Content tab.
28. Scroll down & add a Form block in the gray column, below the text.
29. Click Manage form & Select a Form to use. If you don't have a relevant Form available, you can create a new Form or use one from the content catalog. For example, go to Content > Catalog > Forms tab > select Basic Event.

The Form used here has a background color (set in the Form's properties) that matches the area on the Landing Page where it was inserted. We also selected Show prefilled to include hints in the fields & Exclude CSS so the Landing Page ignores any CSS added via the Form editor.

30. Select the Form block & in the sidebar, toggle on Block identifier & edit the ID to be "Form".
31. Now, select the Button block. In the sidebar, set Link type to Internal link & in the Scroll to list, select Form (the block identifier set in the previous step). Clicking the button takes users directly to the Form; useful when viewing on a mobile device.

Footer

32. At the bottom of your design, select the HTML block.
33. Add HTML code for the Landing Page footer. This can include copyright information, links to relevant agreements & policies, & so on. For example:

That's the content finished. Now we'll apply some finishing touches.

Padding

34. For both of the supporting brand Image blocks (the four colored dots in our example), set the padding on All sides to 10 so they line up with the text.
35. In the gray column, set the padding so the Form shows neatly in the column:
    Select the row that contains the Form (not the Form block). In the sidebar, scroll down & under Columns Structure, select the right column & set Padding Right & Left to 20:

36. In the Paragraph block above the Form (with the text "Join us..."), remove the left padding so it lines up with the Form contents, for example:
    Select block > Block options (in the sidebar, scroll down) >toggle on More options > Padding Left set to 0.

Hide on Mobile or Desktop

Let's set the picture in the top content to hide on mobile, to make scrolling quicker on mobile devices.

37. Select the Image block in the top content.
38. In the sidebar, scroll down & under Block options, click Hide on mobile:

39. To see this in action, at the top left, click the Desktop & Mobile buttons & also the Visibility toggle:

Congratulations!
Your Landing Page design is complete and should look similar to the picture above.

Preview

At the top right, click Preview to see your Landing Page as it will appear to visitors. Notice how the columns line up so the content matches throughout.

• Click Desktop / Mobile (top center) to see how your Landing Page will display on desktop or mobile devices. Click Rotate screen to view the mobile device in portrait or landscape. This is useful to see how elements stack on mobile (such as the main content & the Form), & demonstrates any hidden elements (the picture in the top content).

Click Done (top right) when you are finished.

Publish

To publish the Landing Page, at the top right, click Publish page.

Now, the URL shown in Settings > Public URL Manager > Public URL will access the Landing Page on any device.

• For our example, if viewed on a mobile device, notice how the 'Register Now' button links directly to the registration Form.

When you have finished viewing the published Landing Page, go to Settings > Page Status & click Unpublish. Confirm when prompted.