Hover effects are visual changes that occur when a visitor moves their pointer over an interactive or styled element on a site. They can help draw attention to important elements such as CTA buttons, navigation menu items, hyperlinks, headers, and social media icons, while also reinforcing your site's branding and visual style.
Hover effects can be used to change different visual properties, including:
Font color and style
Background color
Size or dimensions
Text decorations, such as underline, overline, or strike-through
In Zoomforth, hover font styling can be customized through theme variables for elements such as hypertext links, primary and secondary link buttons, navigation menu items, and social media icons.
Change the Hover Font Color
To change the hover font color for an element:
From the Site Editor, select Styling.
Locate the target theme and click Edit. See Access the Theme from the Site Editor.
In the Theme Editor, enter Hover Font Color in the variables search bar.
Expand the relevant variable from the search results. Depending on the element you want to customize, this may include Link Button, Link Interaction, Main Navigation, Submenu Navigation, or other available variables.
In the Hover Font Color field, enter the hexadecimal color value you want to use, or click the color selector to choose a color.
Click Publish to apply the changes.
Tip: Hover styling is applied when a visitor moves their pointer over the relevant element. Choose a hover color that provides sufficient contrast with the default font color and background for better readability.
Need Help?
Contact Zoomforth Customer Support through the in-app chat or email support@zoomforth.com.