Search

Landing pages - Part 3: Edit the settings of all the elements of your landing page

đź’ˇ Good to know
Landing pages are available for Business and Enterprise offers.

In this article, we will explain how to set up the sections and elements on your landing page. 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.

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

Common settings

Some settings are common between sections and elements. We'll first describe the common settings, and then the ones specific to each.

Alignment

The Alignment setting allows you to choose how you want to align an element (horizontally and vertically).

Spacing

The Spacing setting allows you to define the vertical and horizontal space around and inside sections and elements:

  • Margin creates space around a component, outside of any defined borders.
  • Padding creates space inside a component, between the section or element and its borders.

You can choose between different sizes of spacing from XS (smaller) to XL (bigger).

Visibility

For sections:

  • The Visibility setting allows you to control the visibility of the sections of your landing page based on the device used to view it. You can choose to Hide on Mobile and/or Hide on Desktop.
  • When choosing to hide a section on a certain device, the section will appear as crossed out in the editor and the following message will appear: "This section is not visible on mobile/desktop" depending on the selected option.

For elements:

  • The Visibility setting allows you to control the visibility of some elements of your landing page based on the device used to view it. You can choose to Hide on Mobile and/or Hide on Desktop.
  • This setting has no visual impact in the editor and only affects published landing pages to prevent you from losing track of content within the editor.

 

Background Color

The Background Color setting allows you to add a background color to a section or element and manage its transparency.
đź’ˇ Good to know
The color of the text will automatically change based on the background color of the section.

Background Image

The Background Image setting allows you to add an image from our image library, from a URL, or from your computer as the background of a section or element:

  • Caption: add a caption for the background image.
  • Remove: delete the current background image.
  • Replace: choose a new background image to replace the current one.
  • Background size: select how the background image should fit the section or element.
  • Background Repeat: select if you want to repeat the background image throughout the section or element.
  • Color Overlay: select a color to add above the content of the section or element and manage its transparency.

Section

Properties

 The Properties setting allows you to rename the section. The name of your sections appears when you navigate the Layout panel.
đź’ˇ Good to know
We recommend naming your sections to help you keep track of and navigate through them more easily.

Style

The Style setting allows you to customize the appearance of the section:

  • Edge to Edge: affects the horizontal spacing on the sides of the section.
  • Full Height: displays the image as a full image.
  • Background Parallax: use Parallax scrolling to make the background image of the section scroll slower than the foreground content.

Background Color, Background Image, and Spacing

The Background Color, Background Image, and Spacing settings are described in the Common settings section of this article.

Row

Rows are only available in the Classic landing page editor.

You can edit the settings of a row by navigating to 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, Background Image, Spacing, and Visibility

The Background Color, Background Image, Spacing, and Visibility settings are described in the Common settings section of this article.

Advanced

  • Hide gutters between columns: set the size of the gap (gutter) between the columns of your row.
  • Border radius: round the corners of your row. 

Column

Columns are only available in the Classic landing page editor.

You can edit the settings of a column by navigating to 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.

mceclip11.png

Style

  • Resize: choose how large your column should be.
  • Mobile size: choose how large your column should be on mobile.
  • Border radius: round the corners of your column. 

Background Color, Background Image, Spacing, and Visibility

The Background Color, Background Image, Spacing, and Visibility settings are described in the Common settings section of this article.

Text

New landing page editor
Classic landing page editor

You can use a Text element to add and format text on your landing page. 

Formatting bar

The formatting bar allows you to modify the style of your text. Select the text that you want to edit to display the formatting bar and click on the 3 dots on the right end to access more options.

Alignment and Spacing

The Alignment and Spacing settings are described in the Common settings section of this article.

Image

New landing page editor
Classic landing page editor

Images are a perfect way to customize the design of your landing page and make it more engaging. You can select an image from our image library, from a URL, or from your computer.

Alignment and Spacing

The Alignment and Spacing settings are described in the Common settings section of this article.

Image

The Image settings allow you to select an image and change its size:

  • Img URL: enter the URL of the image you want to add.
  • Remove: delete the current image.
  • Replace: choose a new image to replace the current one.
  • Resize: choose how large the image should be.

Style

The Style setting allows you to define the appearance of the image:

  • Drop shadow: add a shadow to the image.
  • Border radius: define how rounded the image should be.
  • Border style and color: add a border to the image and select its color.
  • Border width: define how wide the border of the image should be.
  • Border radius: select how rounded the border of the image should be.

Logo

New landing page editor
Classic landing page editor

Logos are a perfect way to display your brand on your landing page.

Alignment and Spacing

The Alignment and Spacing settings are described in the Common settings section of this article.

Image

mceclip1.png

The Image setting allows you to select a logo and change its size:

  • Caption: add a caption to the logo.
  • Img URL: enter the URL of the logo.
  • Remove: delete the current logo.
  • Replace: choose a new logo to replace the current one.
  • Crop logo: crop the logo to the desired size.
  • Alt: add an alt tag to give descriptive information about the logo.
  • Link: add a redirection link to the logo.

Style

The Style setting is only available in the New landing page editor.

The Style setting allows you to define the appearance of the logo:

  • Border style and color: add a border to the logo and select its color.
  • Border width: define how wide the border of the logo should be.
  • Border radius: select how rounded the border of the logo should be.

Button

New landing page editor

Classic landing page editor

You can use a Button element to link to a website or to another sub-page of your landing page. Adding buttons to your landing page is great to highlight specific links that you want people to click on. 

Alignment, Spacing, and Visibility

The Alignment, Spacing, and Visibility settings are described in the Common settings section of this article.

Properties

The Properties setting allows you to define where the button should link to:

  • Call to action: enter the text that you want to display in the 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 a new tab.
  • URL (link): add the link where the button should point to.

Style

The Style setting allows you to customize the appearance of the button:

  • Color: pick the color of the button.
  • Outline style and color: choose a type of outline for the button and its color.
  • Outline width: define how wide the outline of the button should be.
  • Full width: choose if the button should be as wide as your page.
  • Fill: choose if the button should be full or hollow:
    mceclip0.png
  • Shape: choose if the button should be square, round, or pill-shaped.
  • Shadow: add a light or dark shadow to the button.
  • Button icon: add an icon to the button and choose its position.

Divider

đź’ˇ Good to know
Only a horizontal divider can be added.
New landing page editor

Classic landing page editor

You can use a Divider element to add a visual separation between the different elements and sections of your landing page. 

Spacing

The Spacing setting is described in the Common settings section of this article.

Style

Choose the level of thickness of the divider: Thin, Thick, or Thickest.

Color

Choose the color of the divider.

Form

New landing page editor

Classic landing page editor

You can use a Form element to create a lead-generation landing page. To learn more about forms in a landing page, check our dedicated article Part 4: Add a form in your landing page and use advanced options.

Icon

New landing page editor

Classic landing page editor
mceclip24.png

You can use an Icon element to add some visual content and illustrate your landing page.

Alignment and Spacing

The Alignment and Spacing settings are described in the Common settings section of this article.

Settings

The Settings of an icon allow you to select an icon and customize its appearance:

  • Replace: choose a new icon to replace the current one.
  • Resize: choose how large the icon should be.
  • Background: add a background color to the icon.
  • Foreground: add a foreground color to the icon.
  • Border style and color: add a border to the icon and select its color.
  • Border width: define how wide the border of the icon should be.
  • Border radius: select how rounded the border of the icon should be.
  • Link: add a redirection link to the icon.

Video

New landing page editor

Classic landing page editor

You can use a Video element in your landing page to showcase your brand or products without using too much text.

Spacing

The Spacing setting is described in the Common settings section of this article.

URL

The URL setting allows you to add the link to the video. You can use a video hosted on YouTube, Vimeo, Dailymotion, Canal+, Wista, Twitch, Youku, or Coub.

Style

The Style setting allows you to manage the appearance of the video:

  • Border style and color: add a border to the video and select its color.
  • Border width: define how wide the border of the video should be.
  • Border radius: define how rounded the border of the video should be.

Container

The Container element is only available in the New landing page editor.

You can use a Container element to group several elements and move or resize them all at once.

Background Image, Spacing, and Visibility

The Background Image, Spacing, and Visibility settings are described in the Common settings section of this article.

Style

The Style setting allows you to customize the appearance of the container:

  • Background color and transparency: add a background color to the container and manage its transparency.
  • Border style and color: add a border to the container and select its color.
  • Border position: define on which side of the container to add a border.
  • Border width: define how wide the border of the container should be.
  • Border radius: select how rounded the border of the container should be.
  • Drop shadow: add a shadow to the container.

Code

New landing page editor

Classic landing page editor

You can use a Code element to add code snippets to your landing page, such as a Facebook comment section. 

đź’ˇ Good to know
The code inserted in the editor can be tested on published landing pages only.

⏩ What's next?

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

If you’re looking for help with a project using Brevo, we can match you with the right certified Brevo expert partner.

đź’¬ Was this article helpful?

0 out of 11 found this helpful