Drag & Drop Builder

From Net-Results Support

Training Video



Getting Started

  • Under Marketing Center > Landing Pages > click Create New (Drag & Drop).
LandingPageNewPage
  • Next you will want to name your landing page. The name entered in this box will be:
    • The identifier used in Net-Results. Landing page names are unique to your Net-Results account, not domain group. For example, pages.your-domain.com/demo_request can only be used once regardless of the domain.
    • The pathname used in the URL.
      • Spaces will be converted into dashes “-”. For example, “Demo Request” will be www.your-domain.com/demo-request
      • Special characters will be removed from the URL.

Important: Choose your landing page name carefully because once a name has been picked for your Landing Page it can’t be changed. You will have to create a clone of the landing page to rename it.

Landing Page Builder Basics

Every great page built using the landing page builder is composed of three core building Blocks: Sections (Blue), Rows (Green), and Modules (Dark Grey). Sections are the largest of the building blocks, and contain groups of rows. Rows are placed in sections and contain modules.


Building Blocks


Sections: Used to group content on your page and the first block you add to your page. Any number of sections can be used to create a landing page. Section types include:

  • Regular Sections - contain rows and columns to place modules in
  • Fullwidth Sections - contain fullwidth modules that fit the entire width of the screen
  • Specialty Sections - used for more complex layout of modules

Rows: Rows are contained in sections, and any number of rows can be placed within a section. Rows can contain between one and four columns of varying widths.

Modules: The blocks used to add and create content on your landing page such as: text blocks, call-to-action buttons, images, videos (and more!). There is no limit to the number of modules within a Row.



Inserting New Blocks

Inserting new blocks in your page is as simple as clicking the (+) icon within the page itself, section, or row you would like to add an additional block to, then select the type of block you would like to insert. When inserting a new section block, you will automatically be prompted to insert the first row block and module in the new section.


InsertNewBlocks.gif


Brand new pages automatically have a regular section block inserted with a simple one column row block contained in the section.



Landing Page Main Menu

The landing page main menu is located at the bottom of your screen. The main menu can be opened and closed by clicking the expand/collapse button.


Main Menu Options.gif


Page Templates: Insert a pre-built landing page standard template or one that you have saved to the library. The option exists to replace all of the existing content, or append the new template to the bottom of the current landing page.

Save Page to My Library: Save the current state of the page as a page template. This is useful if you would like to leverage your current page to make a future landing page with.

Clear Page: Delete all of the content in the current page. You will be asked to confirm once more before the page is deleted.

Page Settings: A menu to apply page-wide styling such as text and background color, and custom CSS for styling capabilities outside of the drag-and-drop options inside the landing page builder.

Editing History: A Menu to view all previous changes and roll the current state of the page back to any state of the page in the current session.

Return to Net-Results: Return to the “My Landing Pages” page in Net-Results. Always save any desired changes prior to leaving the landing page builder.

Save: The save button will appear when expanding the landing page main menu. Save your work frequently to prevent losing any work due to unforeseen internet connectivity issues. Leaving a page without saving will revert the page to the last saved state of the page. A check mark (✔) will indicate a successful save of the page.


Successful save.gif



Display Menu

The display menu allows you to build and preview your landing page in a desktop, tablet, and mobile phone views, and get a overall picture of your page with a zoomed out perspective. You can add, remove, and edit blocks in any of the three views and ensure your landing page will look great on any device.


Display Menu.gif



General Block Options

Blocksettinghover.gif


Hovering over any section, row, or module will display block menus for the block you are hovered over, as well as the parent blocks that it resides in. All blocks have similar menu options:


Blocksettingdetail.gif


Move: Click on the move icon and drag your section, row, or module into a different place on your landing page. Moving a section or row will drag all of the nested blocks with it. rows and modules can be moved into other sections.

Settings: Click on the gear icon to customize the content in your block using the block settings menus. Depending on block type, there are general settings (the block’s content), design settings (how it looks and is laid out), and CSS settings (to customize just about any part of the block in ways not available in the other settings).

Duplicate: Click on the duplicate icon to create a duplicate copy of the block. Duplicating blocks is a great way to quickly create similar blocks that you can then make small changes to instead of re-creating from scratch.

Change Column Structure: This is a unique block option for rows. Change column structure allows you to change the number of columns in your row without deleting any of the modules already built in the row.

Save to Library: Click on the save icon to save the block to your library. If you find yourself needing to re-use blocks, using saved blocks can save you valuable time. Blocks saved to the library can be accessed in any page built using the landing page builder.

Delete: Remove the block from the page. If you accidentally delete a block and wish to revive it, use the editing history menu to roll back the change.



Block Settings Menu

Clicking the gear icon on any block menu brings up the block’s settings menu. The default position of the settings menu is docked to the left of the screen, but can be undocked and moved around if desired by clicking the ‘separate modal’ button at the top right of the menu.


The block settings menu has a general tab (edit the content of the block), a design tab (change the look and feel of the block), and a CSS tab (add any custom CSS to change parts of the block that are not available in the general or design tabs.



Modules

Modules are the blocks that make up the content of your landing page. The landing page builder comes equipped with the following modules to bring your page to life:


These modules should be self-explanatory:

  • Text
  • Image
  • Button
  • Form
  • Call To Action
  • Video
  • Audio


These modules allow further customization to your landing page:

  • Blurb: A pre-built combination of an image/icon and text, great for explaining features and benefits.
  • Slider: Embed a module with rotating background images or videos with overlaid text content and buttons.
  • Divider: Add a simple horizontal line or space to organize your content.
  • Testimonial: A pre-built module consisting of an image, quote, and information used to build trust from your visitors.
  • Map: Embed an interactive Google Maps module and drop a marker on a location of interest.
  • Social Media Follow: Add icon-based links that point to your social media pages and accounts.
  • Bar Counters: Create simple and elegant bar graphs to visualize data on your landing page.
  • Number Counter: Display important numbers and data in an engaging way.
  • Circle Counter: Another visually compelling way to display important statistics.
  • Countdown Timer: Create a timer that counts down to a specific date to build anticipation and excitement for an event.
  • Person: A pre-built module for showcasing a team member, client, or business partner.
  • Tabs: A module to organize and group information in clickable tabs by page visitors.
  • Video Slider: Just like a slider, but with the option to have background video instead of just a still image.
  • Toggle: Consolidate information withexpandable containers.
  • Accordion: Similar to the toggle, but with the condition that opening a container will close the previous one.
  • Pricing Tables: Create multiple pricing tables for your products or services.
  • Code: Embed your own custom content or third party plugins with this block and a bit of programming expertise.


The following modules are specific to fullwidth sections and are similar to the regular modules with the same name:

  • Fullwidth Header: Add captivating headings, background images/videos, and call-to-action buttons. Great for the first section of your landing page.
  • Fullwidth Image
  • Fullwidth Slider
  • Fullwidth Map
  • Fullwidth Code


Margin & Padding

Margin and padding are two characteristics of blocks which you can control in the landing page builder to adjust the position and spacing of content within sections, rows, and modules on your page.


Anytime you add a new section or row, default margin will be applied. However, you have the option to change these characteristics via the click-and-drag method or through the block’s settings menu.


To make changes to a section or row padding, hover over any the edge of the block until the semi-transparent padding appears. Then simply click and drag to increase or decrease the padding.


Margin1.gif


In the settings menu of a block, you also have the option to change the margin and padding by entering a number of pixels or by percentage.


Margin2.gif


Useful Tip: Defining margin and padding by percentages (of the width of the parent block) tends to keep more consistent spacing across desktop, tablet, and mobile displays.

Margin and adding can also be defined differently for each display type. In the custom margin and padding fields, clicking the mobile device icon will allow you to customize them for each device.


Margin3.gif


Drag & Drop FAQs

How can I customize the look of my form on my landing page?

The landing page builder allows you to customize the background color, border, and margin of your form. To further customize the styling of your form, copy the following style sheet into the page settings CSS field, and then make the changes desired within the classes you'd like to change.


/* BEGIN MAFORM Style Overrides */
body form.maForm {
    padding: 20px 23px 0px;
}

body form.maForm label {
    font-weight: normal;
}

body form.maForm input {
	height: 37px;
	width: 100%;
	margin-top: 3px;
	background-color: #fafafa;
	font-size: 14px;
}

body form.maForm input[type="radio"] {
	height: 17px;
	margin: 2px 7px 2px 4px;
}

body form.maForm input[type="checkbox"] {
	float: none;
	position: static;
	opacity: 1;
	width: inherit;
}

body form.maForm select {
	width: 100%;
	height: 39px;
}

form.maForm textarea {
    width: 100%;
}

body form.maForm .maFormElement:last-of-type {
	text-align: center;
}

body form.maForm button {
	font-size: 14px;
	text-shadow: none;
	padding: 10px 15px;
	color: #fff;
	font-weight: 400;
	border: none;
	background-color: #0078e7;
	background-image: none;
	width: 100% !important;
	text-transform: uppercase;
}

body form.maForm button:hover {
	border-width: 2px;
	background-color: #bef128;
}
/* END MAFORM Style Overrides */


How do I make a button link to a form or different section of my current landing page?

Buttons can be used to link to external sites, but they can also be used to jump the user to a particular section or row of the landing page they are on. This is called an anchor link, and it is a great way to quickly link a visitor to content on a different section of the landing page that will move them further down your marketing funnel.


To embed an anchor link, assign the particular section or row a specific CSS ID by navigating to the CSS tab in the section or row’s settings menu.


Anchor 1.gif


Then, return to the button module’s general settings menu and set the button URL to: “#cssidhere”.


Anchor 2.gif


Once set, clicking the button will jump the visitor right to the linked section.


Anchor 3.gif


The builder will not let me leave a field blank, how can I hide it from displaying?

Many modules in the landing page builder come with default content to demonstrate the capabilities of the module. However, if you want to get rid of a specific piece of the module (Sub-title in the fullwidth header for example), you can hide it from displaying by adding custom CSS to the CSS tab of the block’s settings menu.


Hide 1.gif


In the CSS tab, find the element field you want to hide, and enter “Display: none;”. Approve those changes and that element will be hidden from view.


Hide 2.gif


Why won’t my background video play and/or loop?

To ensure a background video plays on all browsers, it is recommended to use both .webm and .mp4 formats. A free online tool to convert video to .webm or .mp4 can be found here.


Because of the dynamic nature of the landing page builder, background videos may not appear to play or loop when in the builder. To ensure that the video will play and loop properly, view the live version of the landing page.