Now that you've arranged your sections on your landing page, it's time to fill them with elements such as Text, Images, or buttons. In this article, you will learn more about how to set up the sections, rows, columns and elements to create the best landing page!

We've created a series of articles to help you build your landing pages. 

• Preface: What is a Landing Page?
• Part 1: Setup your Landing Page
• Part 2: Define the structure on your Landing Page 
• Part 3: Edit the settings of all the elements of your Landing Page - YOU ARE HERE
• Part 4: Add a form & use advanced options 
• Part 5: Publish your Landing Page

In this tutorial:

Common settings Sections Rows Columns Text Image, Background image, and Logo Background color

Button Divider Icon Video Code Spacing Alignment

Common settings

Some settings are common between sections, rows and columns (and even elements). We'll first describe the common settings, and then more specific ones.

Spacing

First, choose if you want to edit Vertical or Horizontal padding and margin.  A margin is a space outside something, whereas padding is the space inside something. Margin: This creates space around your component, outside of any defined borders. Padding: This creates space inside your component, between the icon and the border. You can choose between different types of spacings between XS (smaller) to XL (bigger).

Visibility

These settings have no visual impact in the editor. They only affect published pages to prevent you from losing track of content within the editor.

• Hide on Tablet: For each section of your landing page, you can control its visibility by device, within the edit section. 
• Hide on Mobile: For each section of your landing page, you can control its visibility by device, within the edit section.

Background Color and Background Image

From here you can add a background color and add transparency.

For the background image you can add an image from your computer, our image gallery or using an URL. Our image gallery gathers hundreds of stock photos (royalty-free) that you can use to illustrate your landing page.

Sections

Properties of your section

Here you can name your section. The name will appear when you navigate in Layout from the left panel.

Style

Click on Style to display style settings:

Edge to Edge: This affects the horizontal spacing on the sides of the section. Full Height: This displays the image as a full image. Background Parallax: Parallax scrolling is a technique in computer graphics where background image scrolls slower than foreground content.

Rows

You can edit the settings of a row navigating in the Layout tab from the left panel as we saw in Landing pages - Part 2: Define the structure on your Landing Page. You can also use the breadcrumb trail that appears at the top of your screen when you click an element.

Background color, Spacing & Visibility

The first parameters are the same as in Common settings above. 

Advanced

Hide gutters between columns: This sets the size of the gap (gutter) between your row’s columns. Border radius: This lets you round the corners of your row.

Columns

Style

Under the Style tab, you'll be able to:

Resize: Choose how large your column is. Mobile size: Choose how large your column is on mobile. Edit border radius: This lets you round the corners of your column.

Background color/image, Spacing & Visibility

The other parameters are the same as in Common settings above. 

Text

You can modify the style of your text using the formatting bar. Just select the text you want to edit to display the bar. You'll have access to other options clicking the 3 dots on the right end.

Image and Logo

Images and logos are a perfect way to customize the design of your emails and make it more engaging.

To add an image or a logo, either type your URL or click on ADD (or REPLACE) in the right sidebar. A file manager pop up will appear.

• Select a file from your computer.
• Pick from the image gallery: on the left of the builder, a menu will display for you to search for royalty-free images. You can browse by category (business, coaching, consulting, fitness, marketing, office, services).

Once you have selected your image, you have different options:

Resize: choose how large your image is displayed. ALT: add an alt tag to give descriptive information about your image. Link: add a redirection link.

Style your images and logos

• Drop shadow: add a shadow to your image.
• Border radius: define how rounded are the borders of your image.
• Alignment: you can place your image on the left, middle or right

Button

You can use our Button element to link to a website or other section. Adding buttons to your landing are great to highlight specific links that you want people to click. 

Properties

Call to action: Type the text that you want to display in your call to action button. Pick an action: Choose between the three actions link to a URL, Anchor to a section or link to a page in this funnel. If you Anchor to a section, select in the drop-down list which section it is anchored to. If you link to a page in this funnel, select in the drop-down list which page it is linked to. Pick a target: choose to open the link in the current window of new tab URL (link): add the link where your button will point at

Style your button

Click on Style to change the style of your button.

Color: pick the color of your button Full width: define if the button width is the full column or not. Fill: choose if your button is Full or Hollow: Size: how large do you want your button to be. Shape: choose if your button is Square, Round or a Pill shape. Shadow: add a light or dark shadow.

Spacing and visibility

The other parameters are the same as in Common settings above. 

Divider

Under the Style tab, choose how thick your divider is: Thin, Thick or Thickest.

Form

Please read our dedicated section in the next part Part 4: Add a form & use advanced options.

Icon

Settings of your icon

Replace icon: if you click on the icon or on the replace button, a pop up with the icon library will be displayed. There are over 1400 different icons that you can choose from. You can search icons by name thanks to the search bar. You can also filter by set. Resize: you can resize the icon the way you like it. Alignment: you can place your image on the left, middle or right Link: add an URL here.

Spacing

The other parameters are the same as in Common settings above. 

Video

Under the URL tab, add a link to your video here. You can use a video hosted on YouTube, Vimeo, Dailymotion, Canal+, Wista, Twitch, Youku, and Coub.

Code

Add your own HTML code. The code inserted in the editor here can be tested in "preview" and "published" pages only.

⏩ What's next?

• Part 4: Add a form & use advanced options 
• Part 5: Publish your Landing Page
• Are landing pages SEO friendly?
• Duplicate an existing landing page
• Manage sub-pages within your landing page

🤔 Have a question?

If you have a question, feel free to contact our support team by creating a ticket from your account. If you don't have an account yet, you can contact us here.