The Landing Page builder in your 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 your web application. 

Every landing page in your web application follows this hierarchy:

Section → Row → Column → Elements

This article talks about how to configure an Element in the Landing Page. To learn about the other structural attributes of the Landing Page, refer to the respective articles—Section, Row, and Column.

Configuring an 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 your 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. 
     
    https://freshsales.wistia.com/medias/dwdmie545d 
    
    

  • 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. The custom code will execute on the public page. The code will not execute in the editor or the preview mode. It works only in the live environment. To check whether a code works or not, you’ll have to publish the page and check for the efficacy of the code.