Overview

The modern landing page builder is a drag-and-drop WYSIWYG editor. You can use it to quickly build professional-looking landing pages hosted on Lead Liaison's server. These pages can integrate directly with Lead Liaison forms, personalize content using data merge fields, and even help with A/B testing through variants. 

Creating a Landing Page

To get started with the modern landing page builder, navigate to Content > Pages from the main menu and click the New button. Select the Modern design type. 

Open

Drag widgets from the right to the preview on the left. 

Open

To undo and redo changes to your landing page, use the back and forward arrows at the top of the builder:

Open

Use the preview mode by clicking the eye icon to see how your page will look on different devices (smart phones, tablets, desktops, and more). You can also edit your page in by toggling the Preview setting. Doing so adds the device resize bar to the top of the page as shown below:

Open

Publishing a Landing Page

To publish a landing page do the following:

• Click the gear at the top of the page:

Open

• In the Settings popup, configure your page accordingly:

  • Name: Internal name of your page. 

  • Vanity URL: CNAME that you've configured to use for your landing pages. Learn more about Vanity URLs here. 

  • Vanity Name: The name of your page. 

  • Page URL: How your final landing page URL will be constructed. The landing page URL is a combination of your Vanity URL followed by your Vanity Name. 

  • Campaign: Lead Liaison Campaign. A Campaign touch will be recorded every time a prospect visits your landing page. 

  • Description: Any description for your page. 

Open

• Once you click Save a green Publish button appears at the top. Click the Publish button to make your landing page live on the internet!

Open

Page Styling

Global Styling

Background color, images, text, links, and buttons can be globally styled across your landing page by using the Style tab. Each widget, as described in the section below, also has its own styling options when clicking on the widget once added to the canvas on the left. 

Open

Element Styling

Click on an element to the left once it's added to the canvas. A configuration panel will open on the right-hand side (1). Double click any text inside the element to open a WYSIWYG editor (2) to individually change font size, color, and more as shown below. 

Open

Search Engine Optimization (SEO)

For SEO fanatics, the landing page builder includes a Meta Data section. In the Meta Data section, you can customize the cover image, favicon, meta title/description, and add more custom meta data. 

Open

Open

Analytics and Tracking Code

Inside the builder a code section exists to add tracking code such as Google Analytics. Note, landing pages are automatically tracked if using Lead Liaison's Lead Management Automation solution. There is no need to add your Lead Liaison tracking code into this section. 

Open

Widgets

Use the drop-down menu at the top of the widgets to select a widget type. There are four types of widgets:

• Basic Elements

• Free Images (from Unsplash)

• Icons

• Ready Made

Basic Elements

Use basic elements to customize your landing page. Basic elements are grouped together by function.

Container

Containers size and position other elements. Landing pages in the design builder dynamically resize by default, and elements could move based on the user's screen resolution. Use containers to keep content in the same relative location regardless of the user's screen resolution. Below are two examples, one using a container and one not.

Open

Open

Notice that without containers, the header has spread the full width of the page, and the text and video aren't aligned. 

Once you've placed a container, click on it to edit its dimensions and other properties. In the Style menu, add a background color, a background image, or a border. Click the Unsplash button to choose a stock image from Unsplash. 

Open

Click the Settings tab to adjust the container's dimensions, margins, and padding.

Open

You are able to adjust both the default width of the container and the maximum width.

• Width – set either the percentage of the screen or a specific width in pixels the container should use

• Max Width – set the maximum width the container should use (only applies if the Width is a percentage)

If you are placing a grid (multi-column) container, you will also be able to adjust column percentages. Use the sliders to adjust the relative width of each column.

Open

When you are done editing the container, click the blue Save button in the top-right corner of the container options. 

Multimedia

Use multimedia elements to add text, images, and video to your landing page.

Images

With images, click Browse to insert an image file from either computer or the media manager. Click Unsplash to search for a free image from Unsplash.

Open

Once your image is inserted, you can make adjustments by clicking the image again.

Videos

Drag and drop the video element into the canvas on the left. Change the code on the right for different embed options. 

Open

Image Point

The Image Point or Image hotspot content type allows you to place an overlay of hotspots on images and graphics. The user presses the hotspots to reveal an associated text.

Image hotspots can be useful for creating infographics fast and simple. Use any image and enrich it with points of interest and in-depth information about the details depicted. The user is activated by interacting with the image. 

You can use your own custom text as well as a logo in the image point. There are various styling options available as well.

Open

Image Point has the following types:

• Border

• Border Plus

• Plus

• Target

Here is how these various types of image points would look like: