Last updated on

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.

Hover Box Example

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
    Change Column Background
  • Click Add Media to upload an image or choose from the Media Library
    Hover Box Standard Background
  • You can also click Color or Pattern if you do not want to use an image for the Standard Background
    Hover Box Color or Pattern 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
    Hover Box Effects Panel
  • Use the Mobile Visibility control to set which background shows on a device that can’t hover, like a phone
    Hover Box Mobile Visibility Controls

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
    hover box element advanced control
  • Near the bottom click the option for Hover Visibility
    Hover Box Element 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.

 

SIGNUP FOR

BOLDGRID CENTRAL  

   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.

Leave a Reply

Your email address will not be published.