In this tutorial you'll learn how to edit the settings of the elements in your landing page:
- Image, Background image, and Logo
- Background color
You'll also learn to edit component specific settings:
On the left-hand side of the page builder, the Manage layout tab allows you to rearrange items on a page.
If you click on the gear, a sidebar will appear on the right for you to edit the settings.
Typography of your text
- 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.
- 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 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).
- 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 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.
Click on Background Color to display background color settings.
You can choose a preset color, clear color or add a new color.
Transparency allows you to custom how transparent the background color is.
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 a URL, Anchor to a section or link to a page in this funnel.
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.
- 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.
Under the Style tab, Choose how thick your divider is: Thin, Thick or Thickest
Settings of your icon
- 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.
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.
Add your own HTML code. The code inserted in the editor here can be tested in "preview" and "published" pages only.
Click on Spacing to display and edit spacing settings.
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.
Click on Alignment to left align, center or right align your component.
Edit the settings of a section
Properties of your section
Name your section to help you navigate between all sections.
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.
- 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.