Versions Compared


  • This line was added.
  • This line was removed.
  • Formatting was changed.


  • Click Content Pages > Landing Pages 
  • Click the Edit link under the "Actions" column in the table. 

Using the


Classic Landing Page


The visual landing page is an ultra-easy to use drag/drop solution that empowers the most sophisticated landing page designs without sacrificing customization. Just drag/drop the elements under the "Drag and Drop Items" section on the left-menu to the canvas on the right. Click on each element, including backgrounds, the canvas, and more to customize individual pieces of the design element. To begin using the Visual Landing Page Designer do the following:

  • Click New > Landing Page
  • Fill out the short form and select "Visual" as the Design Type

Image Removed

Responsive Design

All contents in the visual landing page designer are responsive. Since the layout is free-form, the contents will be displayed as mobile responsive in the order in which the contents are added to the landing page. If your content is appearing out of order on the mobile device, it is likely due to lower elements loading in before upper elements because of the order they were placed. As such, it's best to create your landing page from the top down (logo on top, contents, form, etc.). 

Adding 3rd Party Code

It might be necessary to add 3rd party JavaScript or HTML code to the landing page. For example, if you have a live chat system. It might help to add the live chat code, usually a block of JavaScript, into the landing page. Case in point, if your landing page is serving up the page for visitors coming from a Google AdWords campaign you want to make sure you do whatever you can to convert the visitor. Placing a web form, phone number and live chat on the page will increase conversion probability. 

 Similarly, you might be using a landing page as the Thank You page after a visitor submits one of your forms on a separate landing page designed to convert pay per click traffic. In this case, you should add the pay per click vendors conversion tracking code into the Thank You page in the same area.

To insert 3rd party code do the following while in the landing page designer:

  • Expand the "Page Properties" section
  • Under SEO Properties double click the area in the "3rd Party Tracking Code" row under the Value column
  • Insert the 3rd party code in the popup box
titleInsertion Location

 Tracking code is inserted above the closing body tag on the landing page.

Image Removed

Saving a Draft of a Landing Page

To save a draft version of your landing page to edit later, do the following:

  • Go to the landing page designer
  • Click "File", which is in the grey menu on top
  • Select "Save As Draft.." from the drop down

Adding a Layout Template

You can add a Layout Template to your landing page to add a header, footer, or other consistant syling and branding. To add a layout template, 

  • Click "File"
  • Select "Save" if this is your first time saving
  • Select "Save As" or "Save As Draft" if you have previously saved
  • Select the appropriate Layout Template in the Template drop-down menu

Image Removed

The content from the Visual Builder will appear where the %%content%% tag is located on your Layout Template. Content styling, such as text and headers, will still be controlled by the styles you used when creating the Landing Page. 


Styles from the Layout Template will override styling in the Landing Page. Make sure to use unique CSS IDs and classes for your Layout Template content or it may cause odd CSS behavior in the Landing Page. As a best practice, always preview your Landing Pages in multiple browsers before publishing.

Publishing a Landing Page

To publish your landing page first save it and then publish it by doing the following:

  • Go to the landing page designer
  • Click "File", which is in the grey menu on top
  • Select "Save..." or "Save As..." from the drop down
  • Click "File" again
  • Choose "Publish"

Cloning a Landing Page

To clone a landing page open an existing landing page (preferably one saved as a template) and choose save as by doing the following:

  • Go to the landing page designer
  • Click "File", which is in the grey menu on top
  • Select "Save As..." from the drop down

You can now save your landing page as another landing page effectively cloning the original one. 

Previewing a Landing Page

To preview your landing page and see how it will look when it's published do the following:

  • Go to Content Pages > Landing Pages
  • Under the Actions column click the gear and select Preview
  • Alternatively, go to the landing page designer, Click "File", which is in the grey menu on top, select "Preview" from the drop down
  • Previewing the landing page opens the landing page in a new browser tab. No views will be recorded on the landing page while in Preview mode.

Using Open Graph Tags

Now that you've designed your landing page to perfection, you'll likely be sharing it on social media. To ensure your social post displays the correct image thumbnails and metadata, you'll need to use Open Graph Tags in your landing page. To learn more about the Open Graph Protocol click here. To add your Open Graph Tags do the following:

  • Expand the SEO Properties section on the left menu
  • Double click to the right of the Edit Head HTML option

Image Removed

Code Block
titleExample Open Graph Tags
<!-- Facebook Open Graph Meta Tags - Sean is Awesome -->
<meta property="og:title" content="My Page Title">
<meta property="og:type" content="article">
<meta property="og:url" content="">
<meta property="og:image" content="">
<meta property="og:site_name" content="Athena">
<meta property="og:description" content="Write one to two sentences that quickly describe your content. Include a call to action at the end.">
<!--Insert Twitter Card Markup - He really is. All hail Sean -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@leadliaison">
<meta name="twitter:domain" content="">
<meta name="twitter:title" content="CONTENT HEADLINE HERE">
<meta name="twitter:description" content="One short sentence describing your content. Include a CTA. Keep it short!">
<meta name="twitter:image" content="">


Use the Classic Landing Page Builder for simple pages, such as page to host a video or form.

Using the HTML Landing Page Designer

HTML landing pages have the benefit of using use Layout Templates to mirror your companies branding and website look and feel. To begin using the HTML Landing Page Designer do the following:

  • Click New > Landing Page
  • Fill out the short form and select "HTML" as the Design Type
  • A design wizard appears with three steps. Each step is covered below:

Step 1: Configure



Step 2: Content

  • The Form, HTML content and 3rd Party Tracking Code will be inserted in place of the %%content%% placeholder in the Layout Template.  3rd Party Tracking Code can be used for any purpose, such as your Google Analytics code. 
  • Use the WYSIWYG editor to add images, code, HTML text and anything else you want to the landing page.
titleWeb Form Placement

The web form will be placed directly below the HTML content in your landing page by default. To place the form info the WYSIWYG editor select your form from the dropdown and click the "Insert Form" button as shown below to insert the %%form%% tag.

Image Removed

Step 3: Publish


Landing Page ROI

Landing pages are tracked as an Activity History event on a prospect's Prospect Profile page. Additionally, total landing page views, conversions and conversion rates are recorded. To view these key statistics for your landing page do the following: