Page Builder

How to Access the Page Builder?

Page Builder allows you to create custom web pages using an interactive design tool. Using this feature, you can design your web page, connect a domain to it, and set up the pages' outlook using simple drag and drop to include elements and forms. Moreover, you can choose from pre-loaded templates or create a blank one to enhance customization. Moving further, let us take a detailed look into the relevant workflows. 1. Upon successful login, click the icon from the top-right side of the screen...

How to Connect a Domain?

ConvertLead > Pages 1. Follow the above-mentioned workflow to land on the Projects screen. 2. From the left-hand menu, click Domains. Doing so takes you to the Domains screen. Figure 10 Domains 3. Here, click the button. This opens the Connect Domain popup. Figure 11 Connect Domain 4. Use the Host field to enter the domain hostname. Figure 12 Host 5. Copy the A record displayed in the blue field to add it to your domain. Figure 13 Add A Record 6. Once the required actions a...

How to Connect a Domain to a Project?

ConvertLead > Pages - Follow the workflow mentioned above to land on the Projects screen. - For a project you want to connect a domain to, hover over the three-dot icon. This reveals a number of options. - From these options, click Settings. Doing so opens the Project Setting popup. - Here, all the created domains are populated in the Site URL dropdown. - Once the domain is selected, click the button. Figure 16 Connect Domain to a Project Note: Only one domain can be conn...

How to Create a Project?

ConvertLead > Pages 1. Follow the above-mentioned workflow to land on the Projects screen. 2. From here, you can either select a template from the ones listed under the Select Template heading or hover over the three-dot icon of a project template and select Edit. Figure 17 Select Template 3. As a result, the Create Project popup is displayed. 4. Here, name your project using the Project field. Figure 18 Project Name 5. Choose a company for which the project is being created using ...

Step 1: General Settings

Once on the visual editor, you can use the top navigation pane to configure the general settings of the project. Hovering over the three-dot icon reveals a menu from where you can Delete, Duplicate, or access SEO Settings of the project. Clicking the icon opens the Create Page popup. Here, you can enter the name of the page in the Page field. Once the name is entered, click the button. Doing so creates a new page. Clicking the icon downloads the project in a .zip file on your system s...

Step 2: Editing Component


To access this section, click the pencil icon from the panel displayed on the right side of the screen. Once selected, you need to click an element from the canvas for the associated components to show up. You can choose the state of the component from the State dropdown. Figure 24 State The associated HTML classes are displayed in the Classes field. To add a class, click the icon. This allows you to enter the name of the class. Figure 25 Add Once recorded, click the icon for th...

Step 3: Setup Component Settings

To access component settings, click the Settings icon from the panel displayed on the right side of the editor. Figure 32 Component Settings Here, the Id and title for the selected component are displayed. You can edit these as per your requirement. Figure 33 Component Settings

Step 4: Configure Sitemap


To access the sitemap, click the pages icon displayed in the panel on the right side of the screen. Figure 34 Sitemap Here, all the components present on the design are listed. Hovering over a component displays grid lines on the corresponding component on the design.

Step 5: Place Elements

To place elements, click the grid icon from the top of the panel displayed on the right side of the screen. Figure 35 Place Elements Here, all available elements that can be placed on the design are segregated into Basic, Content, and Forms. Simply drag the element from the list and drop it on the design for it to appear visually for you to edit. Once the required additions are made, click the Preview button to see how the design looks like. Figure 36 Preview To save the project, cl...