Overview - Using the Drag and Drop Landing Page Builder

Introduction

Our Drag & Drop Landing Page Builder makes it easy to create beautiful "landing" pages. When visitors "land" on your page, the page can do all sorts of things, such as promote your product & solutions, ask people to register for upcoming events, and house downloadable assets.

It combines great ease of use with many features that give you full control on the design of your web page. Its drag & drop interface enables you to design a nice-looking web page without any knowledge of HTML, and produces code that adapts automatically to small screens, such as that of a smartphone.

 

The Structure of a Drag and Drop Landing Page

For maximum design flexibility, a web page built by the Drag and Drop Landing Page Builder consists of ROWS and inside the rows, you place your CONTENT. The rows of the web page are independent from their contents.

This means, for example, that you can have rows of content that use different designs for different sections of the message (e.g. full-width background colors, a different number of columns, etc.) without negatively impacting the responsiveness of the message on mobile devices.

Place your Rows First

Under the ROWS tab, you drag and drop a row structure onto your page. The builder has a number of row structures to choose from, so play and experiment until you find an overall structure that you like. You can delete a row structure by clicking on it, then clicking the trash icon.


Example screenshot of dragging and dropping Row Structures Onto the Page

The Rows panel includes different types of structural elements for your page. They allow you to create different sections of the page. Why different sections? Can’t you just have different content blocks within the same section? You can, but that won’t always work. Rows allow you to create a structured page where each row has different content than the one preceding it and following it.

For instance, you may need…

  • a single-column structure with a hero image to introduce your online store’s new promotion
  • a two-column structure below it to display some of the store’s best-selling products;

Whenever you need to switch to a different number of columns, that’s when you will introduce a new section by using the Rows panel.

Put Content Inside the Rows

Once you have your rows laid out, click the CONTENT tab. Drag the type of content you want inside your row structures.

Example screenshot of dragging and dropping various Content elements into the rows

 

Available Content Blocks

  • Text: Simple text with formatting options.
  • Image: You can drag an image from the desktop or browse your DemandCenter account's content library to insert an image.
  • Button: Adds a simple customizable button.
  • Divider: Dragging this element adds a horizontal grey line to where it is placed.
  • Social: This element consist of three icons: Facebook, Twitter, and Google+.
  • HTML: This allows you to add custom HTML to your page.
  • Video: Embed a video onto your page.

Content Properties

Clicking on a content element inside the page will make the content panel switch to Content properties mode, so you can change the settings of that particular content block. If you click outside of a content element, instead, the row in which the content element is located will be selected and its properties will be available (more on this under Rows below).

The Content properties area changes depending on the content element that has been selected.

If you select a button, for example, you will see a number of tools to help you style the button and link it to your desired action (open a web page, send an email, make a phone call, etc.). In the example shown below, for instance, the “Gest the ticket” button has been selected.

The properties panel switches to button mode and allows you to set the button’s width, background color, text color, alignment, roundness of the corners, padding around the text, … you name it. When the properties panel is longer then the height of the screen, a scroll bar appears on the right side.

With buttons as well as many other content items, the editor gives you great control on the design of your web pages. Some of the controls, including Content padding and Borders have both a simple editing mode – where only one setting is shown – and an advanced editing mode, where more control is provided (e.g. specifying padding for the four sides of the object independently of each other).

Text editing

If you click inside a text content block, the text editor toolbar will appear directing on the editing stage. It gives you access to a number of text editing tools: font family, font size, basic formatting, text alignment, numbered and non-numbered bullets, font color, links, etc.

Note that if you set the font family to Global Font, it will inherit the font family selected under the SETTINGS tab. This allows you to change the font family for multiple elements at once just by changing that property in the Settings tab.

Settings

From this tab you can modify general settings that apply to the entire message:

  • Content area width: this is the width of the area where content blocks are dropped.
  • Background color: it's the page background color. This setting is effective only for rows (and columns) where a color has not been specified. Otherwise, the background color specified for that content row will be used.
  • Content area background color: it's the background color for the content area. This setting is effective only for rows and columns where a color has not been specified.
  • Default font: it's the default font that will be used when another font family has not been specified. This setting affects all text set to use the global font.
  • Link color: it's the link color. As above, this setting affects all text links set to use the default color.

 

Adding Web Forms

DemandCenter Landing Pages support the use of web forms. You can insert a form on your page, whether it be for gathering visitor information or setting up a simple registration page, easily through the builder. For more information, click here.