If you already have custom HTML for a Landing Page -- maybe a designer built it for you -- you can upload that file as a template and mark specific spots as editable blocks. Once it's set up, you can modify the images, text, buttons, and custom content right in the Landing Page composer, and reuse the same custom HTML across all your Landing Pages.
Why this matters: This bridges the gap between custom-designed HTML and Act-On's drag-and-drop editor. Your team keeps full control over the page's design, while marketers can still update copy and images themselves without waiting on a developer for every change.
Who does this: A developer adds the placeholder code blocks to your custom HTML file. After that, marketing can edit the placeholders directly in the Landing Page composer -- no code required for day-to-day changes.
Quick Reference (Advanced Users)
- Upload code at Content > Landing Pages > + Create Landing Page > Additional options > Upload page code.
- Block types:
richText,customContent,button,image. - Edit blocks afterward from the Design tab by clicking the placeholder.
Setup
- Work with a developer to add the code blocks below to your Landing Pages.
- Once the code has been added, go to Content > Landing Pages, and at the top right, click + Create Landing Page.
- In the dialog that opens, click Additional options and select Upload page code:
- Click Next and follow the prompts.
- In the Design tab of the Landing Page composer, you will be able to modify the added blocks by clicking on the placeholder:
HTML code to insert:
<div data-aoBlockType="richText"><p>Rich Text Block</p></div>
Example of usage:
<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 insert:
<div data-aoBlockType="customContent"></div>
Example of usage:
<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 insert:
<div data-aoBlockType="button"><p>button</p></div>
Example of usage:
<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 insert:
<div data-aoBlockType="image"></div>
Example of usage:
<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>