The Landing Pages builder allows users to design customized landing pages from an existing set of templates. However, users can also customize these templates to suit their tastes or create their own with elements provided by your web application. 


Every Landing Page in your web application follows this hierarchy:

Section > Row > Column > Elements


This article covers Section. To learn about the other structural attributes, refer to the respective articles— Rows, Column, and Elements

Section 


A Section refers to every fold in your landing page. A section is the element where you can add rows to configure your landing page. Here’s how you can configure your section.
 

  • Section Layout  : Every section in a landing page is arranged vertically. You can change the order of a section by dragging it up or down. You can also clone a section by clicking the Copy  icon.


    To change the properties To add a new section, click . This brings up the sections gallery where you can configure your section.
      

  • Section Gallery: Configure your section using one of two options:

    • Add a Blank Section: Click to add a blank section to the fold. Once a section is added, configure the number of columns you want to add to the section.    



      Once you’ve chosen the number of columns, the section will be filled with a layout where you can choose to add Elements.

    • Choose from a Template: Instead of creating a section from scratch, you can also opt from the templates provided by your web application. You can choose from one of the following templates

      Click  to add the chosen template to the landing page. Now, that the section has been added, you can configure the properties of the section. 

  • Section Settings: Configure the property of each section. Here’s what you can modify for every section:


  • Name: Add a name to each section for easier sorting.


  • Background Color: Change the background by choosing from one of the preset colours.


    You can also choose a colour to match your brand theme by clicking , adding the Hex Code, and click to add the color to your palette.


  • Background Image: You can add or replace a background image in your section. Click Replace Image to upload a new image. This brings up a dialog box where you can choose an image from the computer or a stock image from the internet and add it to the landing page.


    Stock Images: You can search for stock images from the search bar or click the dropdown and choose from the categories offered.


    Once you’ve chosen an image, click to add the image to the background.

  • Style: Configure the style of the section. Choose if you want to stretch the content of the section from end to end, keep the Full Height, and set the background effect to parallax. Use the toggle to enable or disable these styles.


  • Spacing: Toggle between ‘Horizontal’ and ‘Vertical’ to configure the spacing of the sections respectively. In the directions– horizontal or vertical–you can set the Margin and the Padding.
    https://freshsales.wistia.com/medias/pmud9h8drc 

    • Margin is the spacing between the section and other adjacent sections.

    • Padding is the spacing between the elements inside the section.

Choose the amount of spacing that you’d like to set between elements of the sections. You can choose from the following options based on your preferences:

  • XS (Extra Small) - for screens lesser than 576px

  • SM (Small) - for screens equal to or greater than 576px wide - ideally, phones and tablets 

  • MD (Medium) - for screens equal to or greater than 768px wide, tablets and small laptops

  • LG (Large) - for screens equal to or greater than 992px wide - for laptops and desktops 

  • XL (Extra Large) - for screens equal to or greater than 1200px

  • No Padding/ No Margin - Leaves no space for paddings and margins 



  • Visibility: Define the visibility of the section. Opt to show it only on Desktop or Mobile or both.