Skip to main content
Act-On Software

Using a Custom Landing Page with Act-On Template Language

AUDIENCE: Web Developers, Marketing Users
OBJECTIVES:

The New Landing Page Composer includes the ability to upload a complete HTML file as a template for a landing page that will include placeholders to easily modify images, text, buttons and custom content.

This will allow marketers to receive custom HTML from designers without needing to understand code to change these common assets.

Screen Shot 2015-10-21 at 8.18.50 AM.png

Setup

To Do:

  • Using the code blocks in the accordions below, you will want to place these within any portion of your landing page that you will want to use the available Act-On content blocks.
  • Once the code has been added, navigate to Content > Landing Pages > New Landing Page.
  • Click Upload Page Code and follow the prompts.
  • Under the Design tab you will be able to modify the added blocks by clicking on the placeholder.

HTML code to use:

<div data-aoBlockType="richText"><p>Rich Text Block</p></div>

Example HTML code:

<html>
<head><title>Template Test 1</title></head>
<body>
<div><p>Paragraph above</p></div>
<div data-aoBlockType="richText"><p>Rich Text Block</p></div>
<div><p>Paragraph below</p></div>
</body>
</html>

 

Custom Content

HTML code to use:

<div data-aoBlockType="customContent"></div>

Example HTML code:

<html>
<head><title>Template Test 1</title></head>
<body>
<div><p>Paragraph above</p></div>
<div data-aoBlockType="customContent"></div>
<div><p>Paragraph below</p></div>
</body>
</html>

HTML code to use:

<div data-aoBlockType="button"><p>button</p></div>

Example HTML code:

<html>
<head><title>Template Test 1</title></head>
<body>
<div><p>Paragraph above</p></div>
<div data-aoBlockType="button"><p>button</p></div>
<div><p>Paragraph below</p></div>
</body>
</html>

HTML code to use:

<div data-aoBlockType="image"></div>

Example HTML code:

<html>
<head><title>Template Test 1</title></head>
<body>
<div><p>Paragraph above</p></div>
<div data-aoBlockType="image"></div>
<div><p>Paragraph below</p></div>
</body>
</html>
  • Was this article helpful?