Working with Hover Boxes

The Post and Page Builder allows you to create dynamic content by using hover boxes. With hover boxes, a unique set of content shows when a user moves their mouse over the area. In this article you will learn how to create hover boxes in WordPress.

How to Create Hover Boxes in WordPress

Hover boxes have 3 elements to setup:

– Standard Background (shows by default)

– Hover Background (shows on hover)

– Content (set each element to show or hide on hover)

The first step in creating a hover box is to set the backgrounds. In our example we are using a column, but you can add a hover effect to a background on a section, row, column, or column shape.

Set the Standard Background

• Click in the area where you want to create a hover box and choose Change Background
  
• Click Add Media to upload an image or choose from the Media Library
  
• You can also click Color or Pattern if you do not want to use an image for the Standard Background
  

Set the Hover Background

Setting a background to use on hover is what activates the area as a hover box in the Post and Page Builder.

• From the Background panel, click Hover Effects
• Chose a Hover Color or Hover Background Image
  
• Use the Mobile Visibility control to set which background shows on a device that can’t hover, like a phone
  

Add Content to the Hover Box

You can add almost any type of content to a hover box. Due to the dynamic nature of sliders and hover boxes we do not recommend mixing them. It’s important to remember users may miss content only shown on hover if they do not interact with the area. For this reason, try not to put any critical information in a hover box.

• Click in the hover box are and add your desired content
• Click on your content and use the orange popover to click Advanced Control
  
• Near the bottom click the option for Hover Visibility
  
• Choose which background this element will show with
  • Always Show = both Standard and Hover Backgrounds
  • Show Only on Hover = Hover Background
  • Hide Only on Hover = Standard Background
• Repeat for each element in the hover box

3rd Party Theme Integration

Hover boxes work best with our WordPress theme Crio. If you are using another theme and the hover effects do not work as expected, please leave a comment below.