Create your first landing page

Overview

In this guide, we'll help you get started with your first landing page! You only need to complete three simple steps to create your landing page.

  1. Setup
  2. Design
  3. Launch

Before you start, take a moment to learn what landing pages are and how they can help you.

Now, choose the goal of the landing page you will create.

Based on your goal, start by choosing your landing page layout:

  • A single page (and a thank you page).
  • A multi-step page.

You’ll also choose the structure of your call-to-action (CTA):

  • Lead generation landing page: the main focus of your page will be the form to capture a visitor’s information.
  • Promotional landing page: the main focus of your page will be a product.

If you would like to watch a landing page created live, check out this webinar hosted by a landing page conversion expert: 

 

Step 1 - Setup your landing page

Let's go to the Campaigns platform then Landing pages tab in the left navigation.

Good to know: Landing pages are available for Premium plans and above.

Click on the Create a landing page button.

For your new landing page, start by deciding between:

We recommend selecting a template from the gallery as a way to start, then customize it to achieve your goals.

To preview a template, simply click on it.

When you have decided which template to use, click on the Use this template button.

Name your landing page

Type the name of your landing page (the name has to be at least 3 characters); it will be visible to your visitors in the browser’s title. Choose a name that represents your product or company.

Edit optional settings

Optional settings allow you to edit page wide settings.

  • Click on Font Styles to define the font family (between 44 Google fonts) and the size of your landing page for the title, subtitle, heading and text of your landing page.

    _KTekGk_csrYmOoCTd17eJcF4uok4GQC8zSINpVLzobieYgVdC62EOErAlzFs4bWnwHjjh0us6AnSnX4wBSgCVpbmZ4fLySf04CtqxmC6_kjwZK2U0lWxjRtpc35LUnE1vXWOAGo.png

    Note that each section, column, and element can later be individually edited when you are designing your landing page.

  • Click on Brand Logo to import a logo from your computer. Either by drag your file or select it from your computer. Formats that are accepted are jpeg, png, gif.JAEpB2v_XUTcGe_XrEd0N8XQvUo94Ca5JqxNBdy1OklwjF-epOs5AvFVEXa3MDPBfoNHvmxyq2R_YUjVP17zSmoz5lCtrXoSdoaFvjKoT73RYaBbLTTgSASclYiGxVUKb4i5C5qs.png

Click on Next step to go to Step 2 - Design.

Step 2 - Design your landing page

Structure of your landing page

Let’s learn how to structure a landing page created with our builder.

Each page is composed of sections, which makes the builder easy to use and flexible.

  • We offer pre-defined sections that can be added to build your landing page.
  • You also have the option to start a section from scratch to fully customize it.

Inside a section are rows that can be divided into up to four columns.

Inside columns, you can add Elements such as text, image, CTA button, divider, form, icon, video, logo and HTML code. For more information, see our detailed guide to using the page-builder and elements.

Add a form to create a lead generation page

If you are creating a lead generation landing page, start by adding a Form element.

  • Either add a new Section > Filter Sections By Type > Forms then choose a predefined section that can be edited to fit your desire.
  • Or start from scratch by adding a new Element > Form.

On the right side menu, start by naming your form. Note that the form created with the landing page builder will not appear on the API & forms page of your SendinBlue account.

For each form, a corresponding contact list will be created in the Campaigns platform on the Lists page (it is autosaved when you type the name of your form). All lists created by your landing pages can be found in the Landing Pages folder that is automatically created for you. That list will have the same name as the initial name of your form.

Next, for the data you wish to collect, you will add the different fields to your lead generation form.

Click on ADD A CONTACT FIELD in order to display a dropdown list of all your contact attributes.

If the contact attribute does not exist yet, click on CREATE A NEW FIELD.

When you have several fields, simply click on = then drag a field to reorder it.

To edit the settings of a field, click on its name.

  • Label: label is the text displayed above your field. Click on the toggle to display (or not) the label. You can edit the text as you wish.
  • Hidden: click on the toggle to create a hidden field or one that is visible on the form.
  • Required: choose of the field is mandatory to submit the form of not.
  • Placeholder: type the text that is displayed in your field. By default, it is the same text as your label.
  • Help text: type the text that is displayed underneath your field. This can be useful for suggestions.
  • Default value: this is the value that will be synchronized in your SendinBlue contact list if your visitor does not fill the field.
  • URL Param: this is the value that will be automatically inserted into the form field. Your user may override, if they choose.

Redirect options

Configure the Action after the click on your button.

  • Page in the funnel --> Select Funnel page in the dropdown list
  • External URL -> Type the link of the page.

Design

Move the cursor to choose the width of your form.

The dropdown list allows you to choose the design of your fields: none, outlined, curved outline, underlined with background, underlined no background.

Good to know: Your form can also be displayed as a horizontal form.

If you choose a horizontal form, we recommend removing the labels of your fields.

Add a CTA button to create a promotional landing page

If you are creating a promotional landing page, start by adding a Button element.

  • Either add a new Section > Filter Sections By Type > Call to action then choose a predefined section that can be edited to fit your desire.
  • Or start from scratch by adding a new Element > Button.

Click on the button you want to change the text on and you will see the right hand menu appear. In the Text field, change the content.

Now, under Propertieschange the Action drop down to choose where your call to action button takes the visitor to.

  • Link to a URL (Note: You can also highlight text and hyperlink it the same way.)
    • Under Opens in, specify if the link opens in the current window or a new tab.
    • Under URL (link), specify the link you want the button to go to.
  • Anchor to a section
    • Under Anchor to, select the section you want to take your visitor to when they click on the button.
  • Link to a page in this funnel
    • Under Funnel Page, select which page of your multi-pages landing page you want to take your visitor to when they click on the button.

Here is a detailed guide to edit the settings of your CTA button.

Multi pages landing page

If you want to add additional pages to create a funnel, go to the left sidebar and click on the Manage pages tab, then click on + CREATE A BLANK PAGE.

Device based rendering

Once your landing page is complete, the desktop, tablet and smartphone icons at the top right allow you to test your landing page rendering on different devices.

You’ll find more details on customizing mobile display in the Use the landing page builder tutorial.

If you are happy with the rendering, click on NEXT at the bottom right corner to go to Step 3 - Launch.

Step 3 - Launch your landing page

Click on GO LIVE to publish your page.

52ItHmZqN6IzkdJBxpVOCfE-kFLAbOJotGw5qabnqhHmw6w-87XoL34nlypiBCdP-0VZrO_phtnIKn8hjmw0C-0yVj-up5nIO-AbqnkRuuJ3BaKD0wJNurRL2VPxmnLGc1QA2KDN.png

You have successfully launched your landing page and published it.

You’ll find more details on launching and sharing your landing page in the guide to Publish your landing page.