How to add a hoverbox or hover effect onto your website pages


Hover effects can be added to display texts or call-to-action

Here’s how to customise hoverboxes within a page. Hoverboxes are always WebsitePageItems and always live within a page.

  • Log into Webdadi and click Configuration from the left-hand menu
  • Click the drop down menu (beside Manage – pictured above) and select WebsitePageItem. Click List, to the right. Find the WebsitePageItem you would like to add the hover effect to. Or select Add to create a new one.
  • For the Summary, make it something easy to find again in the WebsitePageItems menu. Remember that as you add more testimonials, team members, and other WebsitePageItems, this list will fill up.
  • Add the Title for the WebsitePageItem.
  • Add the Content you would like to display when someone hovers their mouse over the box. Remember not to include too much text or the text will be cut off (approximately 16-18 words).
  • Add a URL for a page within your website if you’d like the hoverbox to direct your audience to another page.
  • Fill in Hover button content, with a word or two if you’d like a button to display over the top of the image and below the text.
  • Finally, enable the hover effect by clicking on the Enable mouse over effect at the bottom. 
  • Select Ok to save.

For more information on how to do this, see the Help Desk guide below, Adding hoverboxes to your website.


Please Download these instructions