Need a hand? We've got you covered.

Knowledge Base Home aero-right Landing Pages aero-right How to create a landing page

How to create a landing page

Landing Pages Updated on February 11, 2020

Discover what our landing page builder can do for your business. Create landing pages like a PRO and make your users land on amazing pages.

landing-page-builder

Select the topic you want to know more about:

  1. First Steps: Creating your first landing page
  2. Sections
  3. Blocks
  4. Signup Forms
  5. Glossary

 


First Steps: Creating your landing page

Let the fun begin, to create your first landing page, log in to your Benchmark account, and follow the steps below:

  1. From your dashboard click on the Landing Pages option and then select Landing Pages.
  2. Click on the Create New Landing Page button.
  3. Add a name for your landing page. This name is for your reference. Visitors won’t be able to see it. Click on Next when done.
  4. Now you can see the checklist. You will notice the Publish button is not active. It will only be activated once the checklist is completed.
  5. Fill the Page Info with your landing page information, title, and description. Your landing page title and description can help boost the performance of your page, click here to learn more.  Note: When the information in every point in the list has been added, the checkmark will turn green.
  6. Now, let’s focus on the Design step.

It’s time to customize your landing page. In the checklist, click on the Design Landing Page button.

 

The landing page editor is almost a replica of our email editor, and if you are familiar with the email editor, then creating a landing page will be a piece of cake. However, if you are not, please continue reading below to learn how to use the drag & drop editor.

 

On the top left, you will see three tabs. The first one selected by default is Layouts. You can start your landing page from scratch by choosing a Blank Layouts, or you can go to our Templates section and choose one of the predesigned templates. Any choice is great, and both options are mobile-friendly and easy to use.

Once a layout is selected, this is the screen you will see.

  1. Layouts: This option will return you to the layout options, where you can change to a predesigned template or use a blank one. If you choose to change templates, you’ll permanently delete any content created on your current landing page. This action is not reversible.
  2. Blocks: In this tab, you will find two options:
    1. Sections
    2. Blocks
  3. Global Styles: Under this tab, you can find the Background color option. Here you can change the background color for your landing page.
  4. Show Areas button: This button will show the sections in your landing page and the number of columns in each section.
  5. Show Blocks button: By clicking here, a green frame will be placed over each block, and you will see the options to Move, Copy, and Delete your blocks.
  6. Mobile View button:You are working with a responsive editor that automatically organizes the blocks to optimize the view of your landing page in mobile devices. However, this option gives you the control of how your page is viewed on a mobile device. If you don’t like mobile layout, you can customize sections to adapt your content better. Keep in mind that making changes here also changes the desktop view.
  7. Title bar: On the top right corner, you will see your landing page’s name, this is not the page title.
  8. Back to Checklist: By selecting this option, you’ll go back to the main checklist, where you can complete other sections needed.
  9. Landing page layout: This is where your landing page design happens. Drag and drop blocks to this area to customize your landing page.
  10. Save options bar: Benchmark protects your work by keeping a backup copy every few seconds. You can see the time of the last copy saved in this bar. 
  11. Preview: This option lets you see what your landing page will look like on your browser.
  12. Save & Next: By clicking this option, you are saving your work, and moving to the main checklist to publish or continue at a later time.

Hide options

This option allows you to hide some elements in some devices. To use it, click on the element you want to hide, go to the Container tab, then toggle the bar from grey to blue into the hide option needed. You can hide some elements from mobile devices or desktop.

 

Back to the top


 

Sections

Sections are the parts into which the layout of your landing page is divided. A landing page can have multiple sections, and each section can have different blocks. 

You can find the Sections option behind the Blocks tab. You can add as many sections as you want into your landing page.

The available sections are divided into columns, from one to four columns. 

To add a section to your landing page, simply drag and drop the block with the desired number of columns, as shown in the following gif.

To see the sections in your layout, click on the Show Areas button.

By clicking on Show Areas, you can see the landing page divided into sections, and each section will have the information on the number of columns per section as well as the following options:

  1. Arrow(s): This option will allow you to move a section up or down.
  2. Gear: This opens the section settings where you can change the background color of the specific section.
  3. Copy: Will allow you to copy an entire section. 
  4. Trash: This option deletes the entire section. This action is not reversible.

To exit the section mode, click on the Hide Areas button.

 

Back to the top


Blocks

Blocks can be design elements and also functionalities. By clicking on the Blocks tab, you will have two options: Sections and Content. To find the available blocks, click on the Content option below the Blocks tab.

To add a block to your layout, click on the desired block and drag it where you want it to be placed, as shown in the following gif.

 

The following are the available blocks. Keep reading to understand how to use them.

 

Back to the top


 

 

Image block & Image card block

With these blocks, you can upload an image or select from images already in your gallery. To use any of these blocks, drag it into your landing page, then you have two options to add your images:

  1. Drag & Drop an image from your computer. If choosing this option, make sure the block is open before dropping the image.
  2. Browse for a file. Choosing this option lets you select from an image already in your gallery. You can also upload new images or use images hosted on other websites. If you have an image URL, click on the Insert Image from URL option and paste in the image URL.
  3. Once you have your image in the landing page layout, you will see in the left panel some options to customize your image.

An image block will add an image to your layout, while the Image Card block will add an image and text within a frame to your layout.

Here you see an image block on the left and image card block on the right.

Which to use?

Use the image block when you need to add a simple image.

Use the image card block when you need to add a description to your image if you move this block, the description will move as well.

To learn how to add an image card block, click here, and for an image block, click here.

It may interest you:

 

Back to blocks menu


 

Image Caption Blocks

There are three types of Image Caption blocks:

  • Right text block
  • Left text block and,
  • Bottom block

To learn how to add an Image Caption block, click here.

An image caption block is a block that allows you to add a text within an image. The main difference between caption blocks and image card blocks is that the image caption block has no frame or container, you can adjust the padding to the edge of your layout as the example below (caption block at left, image card block at right).

 

Back to blocks menu


 

Text block

You can add text to your landing page through the text block. To use this block, simply drag it to the desired place. Once there, click on it and replace the default text with yours.

Review the glossary to understand the Container and Content options in the text block settings located on the left panel.

To edit your text, use the toolbar located above your landing page. There you will find the common text editing options. You also have other editing options, such as converting text to an anchor, adding a link, an image, or even linking a document.

Copy and Paste

If you have text you’d like to copy and paste to your landing page, we recommend you use the Paste   option. Using this option removes any hidden characters in your text that could interfere with your text design. 

Source Code To add source code, click on the code  icon, and paste in your code.

If you don’t see the options mentioned above, please click on the More icon from your toolbar.

What kind of text should I add to my landing page?

  • A headline. This could be your landing page name or a brief sentence of what the visitor will find on your landing page. Very important to make the headline big and clear.
  • A header and subheaders per section, and also you can add a description for every section. Those should be smaller than the main headline.
  • Write about your recommendations and who you are.
  • Write about your features and what makes you the best in your field.
  • Don’t forget to mention what you are selling!

 

Back to blocks menu


 

Video block

Videos are very effective visual tools. Through video, you can show the qualities of a product or the reasons why they should choose you instead of other competitors. Don’t miss out on the opportunity to use videos on your landing page.

To add a video to your landing page, go through the following steps:

  1. Drag the video block to your landing page and place it in the desired location.
  2. In the block added, you will see the Link to video option, click on it.
  3. You can choose a video from your video gallery or upload a new one by clicking the Insert video from URL option, paste the video URL in the box and then click on Insert.
  4. The video will display in your layout. Now you can customize the video block. To know more about the video block editing options, please check the glossary.

If you want to learn how to upload a video to your video gallery, click here.

 

Back to blocks menu


 

Divider block

Use dividers to create spaces between elements on your landing page. Dividers can be a great design solution to separate sections or topics in your landing page. Dividers don’t have to be blank spaces, to add a divider block drag it into the desired section. Discover all the divider possibilities here.

 

Back to blocks menu


 

Button block

The CTA (call to action) is the most interesting part of your landing page. Here is where it is decided if the landing design and all of the work was fruitful. Therefore, adding a call to action with our editor is extremely simple.

To add a button, drag it to the desired location. In the left panel, you will see the options to customize your button. To learn more about the editing options for buttons, please see our glossary. Keep reading to configure the button Content.

  1. In this box, you will add the button text better known as Call To Action. Your landing has a target or a marketing objective. The CTA will help you to achieve that objective. Make your text catchy to attract your visitor’s attention.
  2. Add the URL where you want to redirect your visitors. Note this could be an external URL or also a place on the same landing page. For example, if the button says REGISTER, it can be redirected to a signup form on the same landing page. To add an alternative link:
    1. Click on the link option in the text editing bar.
    2. In the popup, click on the link type dropdown menu and select the option desired. Note: To add an anchor, you have to create the anchor first.
  3. Text editing bar. Find in this bar the options to customize your text and also the link option.
  4. If you have multiple buttons on your landing page, you don’t have to go one by one to customize them. Customize one button and then simply check the Apply styling to all buttons. The rest of the buttons on your landing page will copy the same styling.

 

Back to blocks menu


 

Social follow & Social share block

The social media blocks are essential. Our editor offers you two types of blocks to add your social networks. To use any of the blocks, drag it to the place of your choice.

The social follow block allows you to add your social media icon, or the icon plus the text. This block will allow you up to 20 different services, including Facebook, Twitter, Linkedin, YouTube, Pinterest, RSS, Vimeo, TripAdvisor, among others.

The social share block will allow you to add: Facebook, Twitter, Linkedin, Myspace, and instapaper. This block will allow users to share your landing page with the mentioned social networks directly.

Which to use?

If you want to redirect your landing page visitors to your social networks, use the Social Follow button. So they can click on the desired social media and like it or add it to their preferences.

Now, if you want the users to share your content, use the Social Share block.

To learn how to use container settings, go to the glossary.

Follow these instructions to add a service in both blocks:

  1. Drag the desired block or click on an existing social block in your layout.
  2. In the left panel, go to the Content tab. 
  3. Click on the Add a service dropdown menu and select a service, then click on the plus icon next to the box.
  4. In your layout, click on the new service icon recently added. The options to customize will display in the left panel.
  5. Add a link URL and customize your icons. When done, you can use the Apply radius to all buttons in the block option to add the same radius to all the buttons.

Additionally, when hovering your mouse on a social icon, you have the option to move it or delete it.

 

Back to blocks menu


 

 

Navigation bar

The navigation bar will allow your visitors to discover more about your business. 

How to add a navigation bar

How to customize a navigation bar

Ideas for links

What kind of links can you add to the navigation bar?

Note: To add any of these links, you must first drag  the block to your layout.

 

How to add a navigation bar
  1. Drag and drop the navigation bar icon into your layout. Most users prefer to show this bar at the top of the landing page.
  2. By default your navigation bar will look something like this:
  3. Now, click on a link in the navigation bar. The link options will be displayed at the left panel.
  4. Add the link type you need and customize it. You can always remove links by clicking in the Remove link option inside the link you need to remove.
  5. By clicking on a link, you can also modify the color and appearance of the dividing border. This border is optional if you don’t want it, just change its color to transparent or the thickness of the line to zero.

 

How to customize a navigation bar

If you have questions about the Container tab, please go to the Glossary.

  1. To add a link, simply click on the plus icon. To customize the link, click on it, and the link options will display on the left panel. You can add up to six links. There are two link options; text or image; you can choose any option. To know more about what kind of links you can add, click on the options of the link types menu.
  2. There are three types of layouts available for your navigation bar links. You can combine images and text. Click on all styles and choose the one that best suits your design.
  3. Use the vertical and horizontal alignment options to format your bar. The gutter size determines the space between each link.
  4. Mobile Styling allows you to choose between the default option, vertical stack, and vertical stack and center. You can choose how you want your design to look on a mobile device.

 

Back to links type menu

Website URL
  1. To add a website URL, copy the URL link.
  2. Go to your landing page builder and click on the link desired in your navigation bar.
  3. Chose the link type you want to use: Text or image
  4. Add a name to the link in case you choose text or add the image.
  5. In the link URL box, paste the previously URL copied.
  6. Customize your link and navigation bar
  7. Don’t forget to click Save when done.

 

Back to links type menu

 

Anchor
  1. First, you will have to create the anchor. Go to the Glossary to find out how to create an anchor.
  2. Once the anchor is ready to use, go to your navigation bar and click on the link desired.
  3. Go to the upper bar and click on the link  icon.
  4. The insert link popup will be prompted. Select anchor from the dropdown menu and select the anchor previously created.
  5. Click on Insert to finish.

 

Back to links type menu

Phone number
  1. Go to your landing page builder and click on the link desired in your navigation bar.
  2. Choose the link type you want to use: Text or image
  3. Add a name to the link in case you choose text or add the image.
  4. Go to the upper bar and click on the link icon.
  5. The insert link popup will be prompted. Select Phone number from the dropdown menu and in the box behind add the number.
  6. Click on Insert to finish.

 

Back to links type menu

 

Email Address
  1. Go to your landing page builder and click on the link desired in your navigation bar.
  2. Choose the link type you want to use: Text or image
  3. Add a name to the link in case you choose text or add the image.
  4. Go to the upper bar and click on the link icon.
  5. The insert link popup will be prompted. Select Email Address from the dropdown menu and in the box behind write the email address.
  6. Click on Insert to finish.

 

Back to links type menu

 

Whatsapp click to chat
  1. Go to your landing page builder and click on the link desired in your navigation bar.
  2. Chose the link type you want to use: Text or image
  3. Add a name to the link in case you choose text or add the image.
  4. In the link URL box, paste: https://wa.me/<number> where the <number> is the full phone number in international format, e.g. https://wa.me/15551234567 Note: For more information about international phone numbers click here.
  5. Customize your link and navigation bar
  6. Don’t forget to click Save when done.

 

Back to links type menu

Here are some ideas for links:
  • Home or main page to your website: this can be done through your logo or the word HOME.
  • Subscribe: You can use an anchor to send your visitors to a signup form on the same landing page or add a link to an external page.
  • Services or products: Create another landing page with this information, or if you already have it on your website, send your visitors there.
  • Contact: Visitors may want to contact you. Add a form for this or add a link to your phone number or email.
  • About the company or the team: This is an excellent opportunity for your customers to know more about your history, your team or your company.

 

Back to blocks menu


 

Signup form

Use landing pages to collect subscribers. The more subscribers you have, the more your information will reach more people, and you will get more sales.

Here is how to add a signup form to your landing page.

Follow these instructions if you have already created your embedded signup form. To create an embedded signup form, click here.

  1. Drag the Signup form icon to your layout to the place desired.
  2. Go to the left panel and select an existing signup form from the dropdown menu. NOTE: Only embedded signup forms are allowed on landing pages.
  3. Your signup form will display in the selected area. In the landing page editor, you can customize the signup form width by sliding the Custom width toggle from grey to blue. If you need to customize the signup form, click on the Open form editor option. This will open a new window where you can make changes to your form. When done, click on Save & Publish and Confirm.
  4. The changes won’t be reflected in your landing page, yet. To see the new changes, delete the signup form from your landing page (to delete hover your mouse on the form, then click the on the delete icon).
  5. Now, add the same form again by repeating steps.

Note: You can change your signup form anytime by selecting a new form from the dropdown menu. To know more about the container options, go to the Glossary.

Back to blocks menu


 

Glossary

Background color

With this option, you can set the background color of an element. To use it, click on the color circle and select a color from the color bar. If you have the Hex code, paste it directly into the box. Click on Save when done. The reset option will return the item to its original appearance.

Border and line style

Some elements have the border option available. You can set a color border by clicking in the color circle, then select a color from the color bar. You can use Hex codes here too. For the border style, choose from the nine available line styles and then add a thickness from 0 to 99. just change its color to transparent or the thickness of the line to zero. The reset option will return the item to its original appearance.

Corner Radius

Some elements have the corner radius option available. This option set how rounded the corners of an element could be. You can set the radius from 0 to 20. When done, you can check on the Apply to all elements options; this will make all elements of the same type have the same radius.

Gutter Size

The gutter size is an option available in some blocks like the navigation bar, social follow, and social share block. This option defines the space between one element and another. To set the gutter size, slide the green point from 0 to 20.

Padding and Margin

Paddings and margin usually are options available under the Content tab. Both are relative to the space surrounding an element. You can set the padding or margin by sliding the bar from 0 to 100 or by adding a number from 0 to 99 in the margin box. 

Alignment

The alignment option is relative to the position of an element. You can set it by clicking in the desired alignment options; center, left, right, bottom, or top.

Line Height

The line height option is available just for text, and it’s used to define the height between two inline elements. The options available are Single, 1.25, 1.5, and Double.

 

Anchor

An anchor is a hyperlink to text. This could be added in the same page or to another location. To add an anchor, follow these steps:

  1. Drag a text block into your layout to the place you want the anchor.
  2. Replace the default text. Then highlight the part of the text you want as an anchor.
  3. Click on the anchor icon located in the upper bar.
  4. Give a name to your anchor.  The anchor name must start with a letter and cannot contain spaces or special characters.
  5. Click Save when done.

Hex Code

Is the value that represents a color. This code starts with a pound sign (#) and is followed by six characters; for example, #CFCFDA the characters could be numbers or letters. Hex codes are used to keep the branding colors. To get your color hex code, you can use a designer software or color picker online.

Back to blocks menu

Back to the top


If you have any questions regarding landing pages please feel free to contact our support team via Email, LiveChat or by phone.

Did this answer your questions?
0 0

Can't find what you're looking for?

Submit a Ticket

view ticket history