The landing page builder in the web application 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 the web application. 

To understand this better, let us first understand the structure of a landing page in the web application.

Every landing page in the web application follows this hierarchy:

Section → Row → Column → Elements

Let’s understand these structural attributes.

• Section

A Section refers to every fold in your landing page. A section is an 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: The web application allows you to choose 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 the 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: The web application allows you to 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.

• Row: 

  
  Row is an individual element inside every section. You can configure the row using Row settings. Here’s how you can configure the row:
  

  • Background Color

  • Spacing

  • Visibility
    
    
    

  • Advanced: 
    
    

• Hide Gutters: Gutters are the padding between columns. They can be used to add space responsively and set alignment for the content. By hiding gutters, you can remove the spacing between columns and make the row more compact.
  
  

• Border Radius: Use the slider to increase or decrease corner radius

• Column:
  Column is a vertical subsection inside a row. You can make the following customizations to a column:
  
  • Style

  • Background Image

  • Background Color

  • Spacing

  • Visibility
    
    
    
    

  • Alignment
    You can opt to set the alignment of your column inside the row. You can choose between:

    • Left Alignment

    • Right Alignment

    • Center Alignment

• Element: Users have the following elements to choose from:
  
  
  

  • Text: Drag and drop the Text block to add text to your campaign. The Text block comes with a toolbar that allows you to format the text with font size, font type, alignment, and more. You can also choose to create a bulleted or numbered list, or insert a link. Additionally, you can customize the properties of the block with text colours, and more.
    
    
    

  • Image: The image block allows you to embed images in your email campaign. Drag and drop the block into the section and it adds a placeholder for the image. To add an image to your campaign, click Replace Image. This allows to fetch an image for your campaign in one of three ways:
    
    

    • Upload them from your local storage.
      
      
      

    • Search for stock images offered and click to add the image to the block.
      

Once your image has been uploaded, you can customize the image display and dimensions from the right side panel. You can customize image width, configure spacing, set alignment, add links to the image, and more. You can also add a shadow to the image.

• Button: Drag and drop Button content block to add CTA buttons to your email. Edit your button text, using the editing toolbar. To customize your button, you can use the content properties panel. You can define the CTA of your button– choose between linking to a URL, Anchoring the button to a section, or Link to a page on the funnel– and then customize the alignment, color, spacing, size, and more. You can also choose to hide the button section on desktop or mobile devices or make it visible on both by selecting the option.
  
  
  
  

• Divider: Drag and drop to add a divider to your content section. The divider allows you to clearly set demarcation between the different folds of your landing page. You can customize the divider to define properties such as a size (thickness), colour, and spacing.
  
  
  
  

• Form: Add a form in your landing page to automatically capture contacts to the web application and also get relevant fields filled. Drag and drop the form block to insert a form to the page. You can then follow it up by customizing the form to suit your business use case. Here’s how you can customize the form.
  
  

  • Adding a Contact Field: Click the ‘Add a contact field’ dropdown to add a contact field to your form. This way, you can convert a page visitor into a contact and can also capture relevant information from the visitor. You can also add multiple fields, reorder them, and also add url parameters to the record created. Additionally, you can also add hidden fields to a form.
    
    

  • Redirect options: Once the form is filled, and the call to action is clicked, you can opt to do one of two things:
    
    

    • Redirect to a page in the funnel: Choose this option if the landing page is a part of your funnel and you’d like the visitor to check out the page. This is usually the home page or the thank you page.
      
      

    • Link to an external URL: Choose this option if you’d like the visitor to visit an external page.
      
      
      
      

  • Choose form design: Add a design to your form fields.
     
    

    
    

  • Spacing: Configure the spacing for the form
    
    
    
    

  • Form Submission Controls: Click the checkbox to disable ReCAPTCHA on the form. However, excise caution as this removes the filter on spam or bot.
    
    

  • Button: Configure the CTA button on your form using the BUTTON PROPERTIES section.
    
    
    

• Icon: Drag and drop the icon block to add icons to your landing page. To add the logo, click Replace Icon. This brings up a dialog box which allows you to choose an icon of your choice from the Icon Library.
  
  Here’s how you can customize the icon:
  
  

  • Resize: Use the slider to increase or decrease the size of an icon.
    
    
    

  • Set Alignment: Set the alignment of your Icon inside the content box. You can choose between:

    • Left Alignment

    • Right Alignment

    • Center Alignment
      
      

  • Foreground: Choose the colour of your icon. You can also add colours using hex codes.
    

  • Hyperlink: Add a link to your icon.
    
    
    

• Video: Embed a video into your landing page by adding the link
  
  
  

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

• Code: Add a code snippet to your landing page to run a program while visitors are on the page. Drag and drop the code snippet to the landing page and then fill the code.