In this article:
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.
200+ Design Templates + 1 Kick-ass SuperTheme
6 WordPress Plugins + 2 Essential Services
Everything you need to build and manage WordPress websites in one Central place.