Knowledge Base Home Landing Pages How to Create a Landing Page
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.
Select the topic you want to know more about:
Let the fun begin, to create your first landing page, log in to your Benchmark account, and follow the steps below:
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.
When the information at every point in the list has been added, the checkmark will turn green.
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 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.
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.
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.
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:
To exit the section mode, click on the Hide Areas button.
Background images are available in the section’s area and in the Global Settings tab.
This option will add a background image to a specific section in your landing page design.
By adding a background image from the Global Styles tab, you will be adding a background image to the entire design of your landing page.
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.
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.
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.
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.
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:
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.
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:
There are three types of Image Caption blocks:
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).
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.
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.
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.
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.
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.
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?
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:
If you want to learn how to upload a video to your video gallery, click here.
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.
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:
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.
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:
Additionally, when hovering your mouse on a social icon, you have the option to move it or delete it.
The navigation bar will allow your visitors to discover more about your business.
If you have questions about the Container tab, please go to the Glossary.
Note: To add any of these links, you must first drag the block to your layout.
Note: For more information about international phone numbers click here.
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.
Follow these instructions if you have already created your embedded signup form. To create an embedded signup form, click here.
Only embedded signup forms are allowed on landing pages.
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.
The Ecommerce block can be used to promote and sell products on your landing pages.
The Ecommerce block includes the following:
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.
If you prefer not to use any of the block elements, simply toggle them off on the Content tab.
Here are a few examples of how the Ecommerce block can be used and styled.
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.
Here are a few examples of how the Shopify Product block can be used and styled.
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.
If there are no saved blocks left you can delete the Saved Block from your design.
Use Google fonts on your landing pages and bring personality to your designs.
To access Google fonts follow these steps:
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:
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.
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.
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.
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.
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.
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.
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:
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.
If you have any questions, please contact our support team.