Customizing Website Header and Footer

LeadCenter.AI Website Builder Pages is where the navigation and title or logo of your website is displayed. The header and footer is same throughout all the pages of your website. The header is positioned at the top of your site's website and the footer is positioned at the bottom of your site's website.
This section describes how to customize or build your site header and footer and display additional features, such as a image or logo, phone number and email ID, social media icons etc. As it is not possible to create a page-specific header, it let you create landing pages without header and footer. See Creating Landing Pages without Website Header and Footer for more information.

The layout page for customizing header and footer is displayed below. See Menus for more information on customizing menus.

To open the Pages page, go to LeadCenter.AI Store Manager > Website Builder, click Pages

The Pages page opens on the right side of your screen. The section allows you to customize the website header and footer for the following;

1. Customizing Image
2. Customizing Link
3. Editing Image
4. Formatting
5. Additional Options
6. Deleting an Element

Customizing Image

To customize the image for the website header or footer;

1. In LeadCenter.AI Store Manager > Website Builder, click Pages.
   The Custom Pages window is displayed
2. Go to Website Header/Footer > Actions and from the Actions drop-down click Edit
   
3. Click on the image or logo that you want to modify and Click on image icon (Add the icon)
   The image or logo should be of 50pixels height and 200width
4. Select and the required image or logo from your system and click Open
   The new image or logo is uploaded by replacing the previous image.
5. Click  to save the changes.

Customizing Link

To customize the link for the website header or footer;

1. In LeadCenter.AI Store Manager > Website Builder, click Pages
   The Custom Pages window is displayed
2. Go to Website Header/Footer > Actions and from the Actions drop-down click Edit
   The Header/Footer customizing page is displayed.
3. Click on the header or footer link that you want to modify and Click on link icon (Add the icon)
   The link dialog box is displayed.
4. Enter the field details and click OK
   1. Source Link: Enter the source link of the image or logo
   2. Title : Enter the title for the image or logo
   3. URL: Enter the URL of the image or logo
   4. Open New Window:
      1. Select the checkbox : Selecting the checkbox opens the link in a new window
      2. Unselect the checkbox: Unselecting the checkbox opens the link in the same window
         
5. Click  to save the changes.

Editing Image

To edit the image for the website header or footer;
@Note: This edit button is applicable only for editing the image or logo;

1. In LeadCenter.AI Store Manager > Website Builder, click Pages
   The Custom Pages window is displayed
2. Go to Website Header/Footer > Actions and from the Actions drop-down click Edit
   The Header/Footer customizing page is displayed.
3. Click on the image or logo that you want to modify and Click on edit icon (Add the icon)
   The image edit dialog box is displayed.
   
4. Select and the required dimension and click Apply
5. Click  to save the changes.

Formatting

The Add option includes basic formatting options like adding paragraph, headline, image, headings, list etc.

To add the formatting options for the website header or footer;

1. In LeadCenter.AI Store Manager > Website Builder, click Pages
   The Custom Pages window is displayed.
2. Go to Website Header/Footer > Actions and from the Actions drop-down click Edit
   The Header/Footer page is displayed.
3. Click on the header or footer to add formatting options and Click on add icon (Add the add icon)
   The link dialog box is displayed.
   
4. Select the required formatting option like for example; paragraph
5. Edit the text for the paragraph Click   to save the changes.

Additional Options

The ..More option includes additional options like move up, move down, duplicate and settings etc.

To add the additional options for the website header or footer;

1. In LeadCenter.AI Store Manager > Website Builder, click Pages
   The Custom Pages window is displayed
2. Go to Website Header/Footer > Actions and from the Actions drop-down click Edit
   The Header/Footer page is displayed.
3. Click on the header or footer to add additional options and Click on ..More icon (Add the More icon)
   The link dialog box is displayed.
   
   
   1. Move Up: Used to move the placeholder for the customized header or footer up.
   2. Move Down: Used to move the placeholder for the customized header or footer down.
   3. Duplicate: Used to duplicate the selected option.
   4. Settings: Used to format the setting options like box, spacing, border text etc.
4. Select the required formatting option like for example; duplicate
5. Edit the options which require formatting options like settings and Click   to save the changes.

Deleting an Element

To delete an element from the website header or footer;

1. In LeadCenter.AI Store Manager > Website Builder, click Pages
   The Custom Pages window is displayed
2.  Go to Website Header/Footer > Actions and from the Actions drop-down click Edit
   The Header/Footer page is displayed.
3. Click on the element that you want to delete and Click on delete icon (Add the icon)
   
   A confirmation message before deleting the element is displayed “Are you sure you want to delete this element?
4. Click Delete and Click   to save the changes.