Introduction to Website Page Designer Tool

The LeadCenter.AI Website Builder comes with its in-built Website Page Designer Tool. This is a very easy-to-use formatting tool, that lets you edit and customize your website page. You can drag and drop the blocks, update them with new content, image, links, etc in each of the blocks.

Website Page Designer Tool
The Website Page Designer Tool lets you:

1. Add Content Blocks
2. Formatting Content Blocks
3. Customize Images
4. Additional Formatting Options
5. Operate additional actions from the Left Panel
   1. Edit and update SEO options for the page.
   2. Edit the HTML code for the page.
   3. Edit images from the Image Manager.

Adding Content Blocks

To add content blocks to your website, do the following:

1. In LeadCenter.AI Store Manager > Website Builder, click Pages.
   The Custom Pages window is displayed
2. Select a page to modify the SEO Options
3. Click Actions drop-down and click on Edit
4. Click  Toggle on the left panel
   OR
   Click  Snippet on the right panel
   
   This displays the pre-built in content blocks 
5. Drag and drop the content boxes, wherever you need to add a new block
   Dragging Content Block
   
   Dropping Content Block
   You have successfully dragged and dropped the content block.

Formatting Content Block 

The Formatting Toolbar of Website Page Designer provides the basic formatting options like Bold, Italics, images, texts, symbols, etc.

To format the content block on your website, do the following:

1. In LeadCenter.AI Store Manager > Website Builder, click Pages.
   The Custom Pages window is displayed
2. Select a page, where you want to format the content block
3. Click Actions drop-down and click on Edit
4. Click your mouse on the content or text to be formatted.
   The Formatting Toolbar pane shows up on your left.
   
5. Edit and format the required sections using the Formatting Toolbar.
6. Click   Save Changes on the left side panel.
   You have successfully formatted the page.

Customizing Images

To modify your website images, do the following:

1. In LeadCenter.AI Store Manager > Website Builder, click Pages.
   The Custom Pages window is displayed
2. Select a page to edit and customize images
3. Click Actions drop-down and click on Edit
   The editing page is displayed.
4. Click the image to be modified or updated and click Choose Image.
   
5. Select and upload the image to be replaced with
   Wait for the image to be uploaded.
   
   The latest image will be uploaded.
6. To edit the link for the updated image. do the following:
   1. On the image click 
   2. Enter the details for the Image Data window 
      
   3. Click OK once the field parameters are added.
7. To modify the aspect ratio, do the following:
   1. On the image click 
   2. Select the required aspect ratio and click Apply
      
8. Click on  Save Changes on the left side panel.

Additional Formatting Options

To use the additional format for your website page, do the following:

1. In LeadCenter.AI Store Manager > Website Builder, click Pages.
   The Custom Pages window is displayed
2. Select a page to modify additional formatting options
3. Click Actions drop-down and click on Edit
   The editing page is displayed.
4. Click Add  to use the additional formatting options
   This lets you add the placeholders for paragraphs, images, etc. 
   
5. Click  More to get additional options( like moving a block up, down, duplicating, etc.)
   
6. Click  to move a block, image, etc
   

Editing SEO Options

To edit the SEO Options for a website page, do the following:

1. In LeadCenter.AI Store Manager > Website Builder, click Pages.
   The Custom Pages window is displayed
2. Select a page to modify the SEO Options
3. Click Actions drop-down and click on Edit
   Page Edit
4. Click on Page Options & SEO Editor on the left side panel
   
   
5. Enter the details for the SEO Parameters and click Done
    
   The Page Options & SEO Editor window is closed.
6. Click on  Save Changes on the left side panel.

Editing HTML Code

To edit the HTML code for a website page, do the following:

1. In LeadCenter.AI Store Manager > Website Builder, click Pages.
   The Custom Pages window is displayed
2. Select a page to modify the HTML code
3. Click Actions drop-down and click on Edit 
4. Click on the left side panel
   
   The HTML code of the page is displayed for editing the code
5. Edit the code to be modified and click OK 
   
   The HTML code editor window is closed.
6. Click on  Save Changes on the left side panel.

Editing Images from Image Manager

To edit the Images from Image Manager for a website page, do the following:

1. In LeadCenter.AI Store Manager > Website Builder, click Pages.
   The Custom Pages window is displayed
2. Select a page to modify the Image
3. Click Actions drop-down and click on Edit 
4. Click on the left side panel
   
   The Image Manager window is displayed.
5. Click on Choose File to choose the image and click Upload.
   
6. Click on  Save Changes on the left side panel.