Adding Header to a Landing Page | Zoho LandingPage User Guide

Page Header

The header section in Zoho LandingPage allows you to add a simple yet effective branding element to your landing pages. It includes a logo and a call-to-action (CTA) button, ensuring a clean and focused design.

Enabling the Header Section

  1. Click on the Insert button on the top bar of your landing page builder to view the menu.



  2. Under Sections, use the toggle option to enable the header.

Customizing the Header

  1. Click anywhere on the header section to access Header Settings.



  2. Here you can modify the header style, on-scroll behavior, and background theme.
  3. You can also adjust the border and spacing using the options.



  4. You can enhance the header with animation options to control its behavior when the page loads.



  5. With the Show on Device option, you can choose to display or hide the header on desktop, tablet, or mobile.



  6. With the custom CSS and JavaScript option, you can use your own code for further customization.
  1. Click on the logo to open the Logo Properties toolbar.



  2. You can modify the logo image, alignment, alt text, and spacing.
  3. To hyperlink the logo, click on the link option and enter the desired URL.


Configuring the Header CTA

  1. Click on the button in the header to open the Button Properties panel.



  2. You can customize the button's text, style, and actions according to your requirements.


  1. In the Link Properties tab, you can add a link to your button. Visitors who click on this button will be redirected to the provided link.



  2.  You can add a link to any landing page in your portal. Choose from the list of landing pages displayed to select the desired destination. You can also add an anchor and tool tip to help make the link more relevant.  Visitors will now be redirected to the landing page when they click on the button in your landing page.



  3. You can add a link to any webpage. Users will be redirected to your webpage when they click on the button in your landing page.

  1. Using the anchor option, you can redirect users to any section in your landing page where you have added an anchor.  The anchors created in your landing page will be displayed in the drop-down list next to Select Anchor.


Linking a Button to a Section on Your Landing Page

To direct visitors to a specific section of your landing page, you can use an anchor. For example, if you want to take visitors to a form at the bottom of the page, you can add an anchor to the heading above the form or any nearby text element.

Steps to Add an Anchor
  1. Select the text where you want to add the anchor.
  2. In the floating toolbar, click the Anchor option.



  3. Enter a name for the anchor and click Save.



Linking the Button to the Anchor
  1. Select the button element.
  2. Choose Anchor as the link type.



  3. Select the anchor you created from the list.
Now, when visitors click the button, they’ll be taken directly to the anchored section!
  1.  To link an email address to your button, you can type in an email address here. You can also add extra details such as Cc, Bcc, Subject, and the message in the fields below. When users click on the button on your landing page, a new email composition window will open with all the details already filled in.



  2.  If you want to link a phone number to your button, you can choose any phone number you like. When users click on the button on your landing page, their phone will open the dialer with the phone number already entered, ready to call.



  3. If you want to link a downloadable file to your button, you can upload the file of your choice here. When users click on the button on your landing page, the file will be downloaded automatically.