Element Customization Properties | Zoho LandingPage User Guide

Customization Properties

Customize your landing page elements has several benefits, including improving user experience, boosting engagement, and increasing conversions. By adjusting the appearance, layout, and functionality, you can create a landing page that better reflects your brand and meets the needs of your audience.

Accessing the properties

  1.  Click on the Properties icon next to the element name to access the element properties bar.


Animation

Adding animation to your landing page enhances visual appeal, captures attention, and improves user experience by guiding visitors smoothly through content. It highlights key features, increases engagement, and helps reduce your landing page bounce rate.
  1.  In the Animation Properties tab, you can select the animation type, animation duration, and enable repeat animation if you want the animation to be played on loop. Additionally, you can also preview the animation to choose the right type for the element.



Cascading Style Sheets

Using CSS in landing pages offers several advantages. It enhances visual appeal by providing control over the landing page layout, colors, and fonts.  Additionally, CSS allows for global style changes and reduces repetitive code.

  1.  In the CSS Properties tab, you can click on Open CSS Editor and enter the CSS for the page/element. To apply a particular style to the element alone. enter the required class name in the field displayed to apply the styling to the element.

Show on device

Enabling and disabling elements for specific devices on landing pages can help improve the user experience by ensuring that only relevant and optimized content is displayed. This approach reduces clutter and provides a more tailored and efficient browsing experience for users on different devices.
  1. In the Show on Device tab, you can show and hide the element for mobile, desktop, and tablet users by clicking on the respective icons


Javascript

Using JavaScript in landing pages  helps improve interactivity through dynamic content and engaging animations. It also provides the ability to customize and personalize content based on user behavior.

  1.  Click on the Configuration icon in the top bar of the landing page builder to add your custom script for the landing page.



  2.  In the Configuration menu, click on the Add Script tab and enter the required script for the landing page.



  3.  In the Javascript properties tab, you can apply the particular function for the element by entering the function name in the field and select the Event type to choose when the function must be called.