Edit landing page component settings

Overview

In this tutorial you'll learn how to edit the settings of the elements in your landing page:

You'll also learn to edit component specific settings:

On the lleft-handside of the page builder, the Manage layout tab allows you to re-arrange items on a page.

If you click on the gear, a sidebar will appear on the right for you to edit the settings.

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

Text

Typography of your text

modify-1.png

  • Font style: the font style defined at Step 1 - Setup, under Font styles will be displayed here. You can change the Font Style, Font Family and Font Size of your text to fit your needs.
  • List style
    • Bulleted: add a bulleted list
    • Ordered: add a numbered list
  • Hyperlink: if you want to redirect to a link, add an URL here.
  • Formatting modify-2.png
    • 1. Your text will appear in bold: example.
    • 2. Your text will appear in italic: example.
    • 3. Your text will appear underlined: example.
    • 4. Your text will appear striked: example.
    • 5. Remove formatting of your text.

Image, Background image and Logo

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

  • Import a file from your computer.
  • Pick from 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).
  • Search company images.

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 a descriptive information about your image.
  • Link: add a redirection link.

Style your image

  • Drop shadow: add a shadow to your image.
  • Border radius: define how rounded are the borders of your image.

Background color

Click on Background Color to display background color settings.

g0i5SBDqluzl2JxLrW89UADCVJgyNJTCKq2SxkDPt--7-kY5pbeSyorGO-hQ9L2V1FIdTR0NOmscLPGCYcXXgswZUEfesHPGoRppvUYAobSCZPbH35GpB8buPryjzCtnsBazWDzr.png

You can choose a preset color, clear color or add a new color.

Transparency allows you to custom how transparent the background color is.

Good to know: The color of your text will automatically change depending on the background color.

Button

Properties of your button

  • Text: Type the text that you want to display in your CTA button.
  • Action: Choose between the three actions link to an URL, Anchor to a section or Link to a page in this funnel.

modify-3.png

If you Link to a URL, define:

  • Opens in: current windows or new tab.
  • URL (link): add an URL here.

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.

Style your button

Click on Style to change the style of your button.

modify-4.png

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

Divider

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

modify-5.png

Good to know: Only a horizontal divider can be added.

Icon

Settings of your icon

modify-6.png

  • Resize: you can resize the icon the way you like it.
  • Link: add an URL here.
  • 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.

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.

Spacing

Click on Spacing to display and edit spacing settings.

modify-7.png

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.

Alignment

Click on Alignment to left align, center or right align your component.

2UILG1N-0oN_k6yWWufaBxJuu8HQgJdZqWH8MEriepEgXxr-JO8DJ95lhdH4JK8zoqdkRVGQVSN7rAQDAX1pQgcR3FkjKerba3xT_ScfCeD27bvfTqpiTwP3DpO_H7eiffckZmkV.png

Edit the settings of a section

Properties of your section

Name your section to help you navigate between all sections.

Style

Click on Style to display style settings.

7x3BOrBtX428orO22CVh2OHuDPEapkyjdnWnFDbi_MTjIadSc9q8Up1yPzoDVL4kG7JXd3ZFizTm74AmI7CkTlemQcgXvSRlltK-F3JPbPxBuHxN-PkMFsCFVQi3QlAY8Yu5JQOe.png

  • Edge to Edge: This affects the horizontal spacing on the sides of the section.
  • Full Height: This displays the image as a full image.
  • Hide on Tablet: For each section of your landing page, you can control its visibility by device within the edit section. See Customize mobile display in the Use the landing page builder tutorial.
  • Hide on Mobile: For each section of your landing page, you can control its visibility by device within the edit section. See Customize mobile display in the Use the landing page builder tutorial.
  • Background Parallax: Parallax scrolling is a technique in computer graphics where background image scrolls slower than foreground content.
    • When the background Parallax is ON
    • When the background Parallax is OFF

Edit the settings of a row

Advanced settings of your row

Click on Advanced to display advanced settings.

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

Edit the settings of a column

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.