Benchmark Email Help Center

or chat with:

smart support, our Benchmark Email expert powered by AI

chat now

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 March 16, 2023

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:


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.
  1. 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.

CONSIDER

To create a duplicate of a previous landing page, click on the more options icon of the landing page you’d like to duplicate. Give your duplicate a new name or leave the default name and then click on Save.

Duplicate landing pages, copy only the content of the original landing page, such as your text, images, and links. You’ll need to complete the landing page checklist to publish your landing page.

  1. 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.
  1. 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 at every point in the list has been added, the checkmark will turn green.

  1. 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.

CONSIDER

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 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.

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.

Blocks: In this tab, you will find two options:

Global Styles: Under this tab, you can find the Background color option. Here you can change the background color for your landing page. You can also find the Background image option, this option will add an image as a background to your entire landing page design. To learn how to add a background image click here. Finally, you can also set your landing page typography for headers and body.

Show Areas button: This button will show the sections on your landing page and the number of columns in each section. Among these options you will find arrows to change the section, the duplicate, delete, and the gear option, which will allow you to access to change the background of the section and the content layout.

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.

Mobile View button: You are working with a responsive editor that automatically organizes the blocks to optimize the view of your landing page on mobile devices. However, this option gives you control over 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.

Title bar: On the top right corner, you will see your landing page’s name, this is not the page title.

Back to Checklist: By selecting this option, you’ll go back to the main checklist, where you can complete other sections needed.

Landing page layout: This is where your landing page design happens. Drag and drop blocks to this area to customize your landing page.

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.

Preview: This option lets you see what your landing page will look like on your browser.

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 desktops.

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 to 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 or add a background image to the specific section.
  3. Copy: This 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 ↑


How to add an image as a background

Background images are available in the section’s area and in the Global Settings tab.

To add a background image in a section
To add a background image to the entire design

For both options:

Now, you will see your Image Gallery. There you can choose an already existing image or add a new one.

Once the image is inserted new settings will be displayed.

Background styles. 

  1. Fill. The image will fill the screen size covering the entire section. When scrolling the image will remain still.Example of a landing page using the Fill style background. For this landing page, we used 1 background in the beginning and another at the end of the landing page. In the middle section, we added a color that matches the end of the first image and the beginning of the last image, creating a gradient effect.
  1. Tile. The image will be tiled based on its size. The images will build something similar to a mosaic wall. The number of copies will be adjusted according to the screen size.

Parallax. This option will fix your image and will give the effect of a dynamic movement when scrolling your landing page. The image will take 100% of the screen, you can also set the position of the image.

Please note: The parallax effect is most appreciated when scrolling up and down. You can go from one section to another with the appearance that the previous image disappears while the new image completely covers it. Like the wine in this example.

Image position. These controls allow you to change the image position very easily. Select the option that best fits.

Edit options

  • Edit: Use our image editor to resize or add an effect to your image.
  • Replace: If the image is not what you need and you want to replace it.
  • Reset: This option will delete the image allowing you to use another image or a background color.

Content Layout

Framed Background: This option also called boxed, has padding on the sides as well as a background color applied to it. The content will be centered.

Full-width Background: This option will display the content with no added padding around the content.

When done, don’t forget to click Save & Close.

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.

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 into 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 an 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.

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 text to 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 in 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.

SUGGESTION

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.

More Text Block Options

Spell Check

The Benchmark Spell Check feature checks your content to ensure that your spelling is correct. The language for the Spell Check will default to your account’s preferred language. You can change the language or turn off the Spell Check feature in the Landing Page top menu bar.

To see the Spell Checker in action, open any text block and begin writing. Misspelled words are underlined in red. You can right-click on the word to select the correct spelling or to ignore the warning. The More option will open another list of words available. 

IMPORTANT

Right click not working: Some operating systems have default settings for right-click gestures. Check your mouse or trackpad settings if right-clicking does not prompt the spelling suggestions.

CONSIDER

Choosing the Ignore option saves the preference during that instance. If you close the block and return to it later, the misspelled word will show as misspelled.

The Spell Check feature is currently available in the following languages.

  • English
  • Spanish
  • Deutsch (German)
  • Italian
  • Portuguese (BR)
  • French

Easy Paste

Copy and paste your content from other sources using the Easy Paste feature. The Easy Paste feature makes copying and pasting content from other sources like your website, Google, and Microsoft Documents fast and easy. You can remove the original formatting or keep it to match your other pages.

To use the Easy Paste feature, follow the steps below.

  1. Copy your content from one of your sources.
  2. Then Paste the content to one of your text blocks.
  3. In the popup window, select Keep or Remove format.
    • Remove format, removes inline styles, and keeps some formatting like bold, italics, indentation, numbered lists, and URL links.
    • Keep format, preserves the styling and structure of the original content. Easy Paste will only preserve web-safe HTML and remove unsafe invalid, proprietary styles, attributes, and tags within the contents code.
  1. When you are done with your content, click Save.

IMPORTANT

  • Fonts that are not web-safe will default to Arial font.
  • The Easy Paste feature does not support images.
  • You can use the Text Block Tool Bar or the block’s Code Editor if more styling is needed.
To paste as plain text:
  1. Click on the text block.
  2. In the upper bar, click the paste icon (Depending on your screen size, this icon can be under the More options).
  1. Paste the text in the popup, then click Insert.
  2. In the left panel, click Save & Close.
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.

SUGGESTION

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.

SUGGESTION

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 on 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 were 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.

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.

First, select the Link Type URL, then add the URL in the Website URL box. 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. You can add an alternative link by clicking on the link option in the text editing bar.
  2. OR, directly select the link type in the button block content option. Note: To add an anchor, you have to create the anchor first.

Text editing bar. Find in this bar the options to customize your text and also the link option.

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 Media & Social Share block

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

The social media 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, Whatsapp, 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 Media 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
Here are some 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.

  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.
  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.
  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 a Phone number from the dropdown menu and in the box behind add the number.
  6. Click on Insert to finish.
  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.
  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
  5. Customize your link and navigation bar
  6. Don’t forget to click Save when done.

Note: For more information about international phone numbers click here.

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.

CONSIDER

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.
  1. Go to the left panel and select an existing signup form from the dropdown menu.

CONSIDER

Only embedded signup forms are allowed on landing pages.

  1. 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.
  2. A few seconds later the changes will be reflected on your landing page. If you are not able to see the new changes, delete the signup form from your landing page (to delete hover your mouse on the form, then click on the delete icon) and add the same form again by repeating steps.

CONSIDER

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 ↑


Ecommerce Block

The Ecommerce block can be used to promote and sell products on your landing pages.

The Ecommerce block includes the following:

  1. Image placeholder
  2. Product description
  3. Product price
  4. Button section

To use the product block, click on the block and drag it to a section on the landing page.

To customize your Ecommerce block, follow the steps below. 

  1. Start by adding a product image.
  2. Add a product description; this should be short and descriptive.
  3. Update your product price.
  4. Then, customize the product button with the following.
    • Button text.
    • Button URL, add a URL where your contacts can go to complete their purchase.
    • Lastly, style the button to fit your brand’s identity. To save you repetitive work, you can set the same styling to all of the buttons on your landing page. To learn more about the button styling options, click here.

If you prefer not to use any of the block elements, simply toggle them off on the Content tab.

  1. When finished, click Save and then Save and Next or simply click outside the block to save your work.

Here are a few examples of how the Ecommerce block can be used and styled.

Back to blocks menu ↑


Shopify Product Block

To get started, click and drag the block to the desired section on your landing page.

To use the Shopify Product block, you’ll need an active paid Shopify account. Upon using this block for the first time, you will need to integrate Shopify with your Benchmark account. To learn how to integrate your Shopify store with Benchmark, click here.

Once you have successfully integrated your Shopify account with Benchmark, you’ll see a list of your available Shopify products.

Select one of your available products. The blocks will automatically fill in the product information using the details in Shopify.

The Shopify Product block includes the following:

Product Photo The product photo is pulled from the Shopify product URL. This image will not be saved in your Benchmark Image Gallery. However, If the image is modified using the Benchmark Image editor, the modified image will save as a new image in the Image Gallery.

Product Description The product description will pull the product title from Shopify.

Product Price The product price is the assigned price amount from the Shopify store.

Product Button The Product button automatically links to the product URL in your Shopify store. The product URL can also be used to track Conversion Goals.

IMPORTANT

  • If your Shopify account is not the admin account, you’ll need Product Permissions. To learn more about Shopify User Permissions, click here.
  • You can only connect to one Shopify store at a time. Using the Change Store option removes any previous store products.
  • The Shopify product details are automatically filled with the information provided by Shopify. Therefore, any details changed in Benchmark will not update in Shopify.
  • If a product has already been selected for an email or landing page and is later updated in Shopify, the product details will not automatically update in Benchmark.
  • Archived products will not show in your Available product list.
  • Duplicating a block allows you to keep any formatting previously added to the original block. However, if you select a different product the previous formatting is removed and you’ll need to reformat.

Here are a few examples of how the Shopify Product block can be used and styled.

Back to blocks menu ↑


Saved Block

Cut your design time using Saved blocks. Saved blocks can be saved and stored to reuse in future designs. The block’s styling, text, and images will be saved when you save the block. Once the block is added to your design, you can modify the content, and the original saved block will remain unchanged.

To save a block, hover over the block in your design and click on the save block option. Give the block a name and click Save and Close.

To use a Saved Block
Deleting Saved Blocks

Back to blocks menu ↑


Typography

Use Google fonts on your landing pages and bring personality to your designs.

To access Google fonts follow these steps:

  1. Go to the landing page design step
  2. Click on the Global Styles tab
  3. Locate the Typography option and click on it.
  4. Now you can select the font you want for headers and the body text.

Back to the top ↑


Animated Block

Impress your readers by animating blocks within your landing page, this will make your landing page much more dynamic and fun.

To access animated blocks follow these steps:

  1. Go to the landing page design step.
  2. Drag any block you need into your landing page layout. The animated block option is available in all the blocks.
  3. Once the block is placed in the layout, you will see the setting options for the selected block on the left.
  4. Find the Animated block option at the bottom and select it.

The available animations will be displayed. Select the animation type you would like to use, then the animation Duration. You also can add a Delay which is the time it takes for the animation to appear, and an Offset which repeats the animation.

Back to the top ↑


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 sets 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

A 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 to 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 design software or a color picker online.

Back to blocks menu ↑

Back to the top ↑


If you have any questions, please contact our support team.