Learn how to Create Flipbox Overlays and Hovers in WordPress

Do you want to add flipbox overlays and image hover effects to your WordPress site?

Even if you're using a quality WordPress theme, you may feel limited by customization options. Flip boxes and image floats add eye-catching animated effects to your website.

In this article, we are going to show you how to add flip box overlays and image hovers to your WordPress site.

What is a flip box?

A flip box is a box that tips over when you hover over it with the mouse. You can add this hover animation effect to specific sections of your website, including text boxes and images.

Flipbox demo animation

The term comes from the unique "flip" function that occurs when the mouse is moved over the picture. You can control how the image is flipped, as well as the information and design of both sides of the image.

If your website is relatively static, you can use a flipbox effect to make it more interactive.

For example, you can add an image hover flip box to a product price page. This is how the price will show up when users hover over your price tiers.

If you're a freelancer, you can also add logos of the companies you've worked with and link to each project.

While these animated effects can improve the user experience of your website, it's important not to go overboard.

Think of the flipbox effect like adding spices to a meal. It's there to enhance the existing flavors and ingredients, but too much and it will ruin the dish.

Let's see how to add flipbox overlays and image hover effects to your WordPress blog or website.

How to Create Flipbox Overlays and Hover Effects in WordPress

You can add flip boxes and hover effects to your WordPress site by using many methods such as: B. the Elementor page builder or adding custom CSS.

However, we recommend using the Flipbox – Awesomes Flip Boxes Image Overlay plugin. This plugin is flexible and easy to use. It's the best flipbox and image hover WordPress plugin.

The free version of the plugin gives you speed and simplicity. Once the plugin is installed, you can quickly add great looking flip boxes to your site.

If you need more customization options, you may want to upgrade to the premium version of the plugin. This way you can control the colors of your flip boxes and add custom CSS.

Existing templates may already look good when added to your website. In this case, no upgrade is required.

First you have to install and activate the plugin "Flipbox – Awesomes Flip Boxes Image Overlay". For more information, see our step-by-step guide on installing a WordPress plugin.

Once the plugin is installed and activated, you can create your first Flipbox by going to Flip Box »Create New.

Create a new flip box

This will show the full range of templates.

If those aren't enough, you can click the "Import Templates" menu option to get even more templates to use.

Import a Flipbox template

With the free version of the plugin, there are 5 different templates to choose from as well as another 10 templates that you can import.

To import a new customizable template, click the "Import" button next to the style number.

Flipbox Click the Import button

Now is the time to choose and customize your template.

You need to click "Create Style" to load your first Flipbox design.

This will bring up a pop-up menu where you can name your Flipbox and choose which layout to customize.

Select the flip box that you want to customize

The options 1., 2., 3. "Layouts" correspond to the individual flip boxes in the layout. Once you've made your selections, click Save.

It is important to mention that your final design will be exactly the same as the Flipbox template. It is therefore best to choose a template that is similar to the one on your website.

There are three main tabs that you can use to change the look of your Flipbox: General, Front, and Backend.

Flipbox menu for general settings

You can change the fonts, pads, and margins on any of these tabs. However, we think the standard options already look great.

Next we'll change the text on both sides of the flip box.

Move the mouse pointer over the flip box at the bottom of the screen and click on "Edit".

Flipbox preview edit text

This will bring up a pop-up window where you can change the front text, back text, and background image.

To change the title, edit the "Front Title" text box and the "Font Icon:" box if you want a different icon to appear.

Change the title and icon of the Flipbox front panel

If you'd like to add a background image, click "Upload image" to the right of the "Front image" option.

Next, upload a new image or select an image from your existing media library.

Upload the front wallpaper for the Flipbox

Then carry out the same steps for the back of the Flipbox under "Backend settings".

Here you can change the title and text that appears when you flip the card.

Change the backend flipbox text

You can also change the Backend Button Text and Link fields.

These change the button text and the location your users go to when they click on it.

Add the backend flipbox button and link

Finally, click on "Upload Now" to change the background image on the back of the Flipbox.

As above, you can either upload an image or choose one from your media library.

Upload the backend background image

When you're done editing, click the Submit button to save your changes.

You will find that your new changes are immediately reflected in the Preview window.

If you would like to create a whole series of flip boxes, click the "+" symbol in the "Add new flip boxes" meta field.

Add a bunch of flip boxes

This will bring up a pop-up similar to the one above where you can customize your second Flipbox.

In the meantime you have created and adjusted your flip boxes. So, it's time to add them to your WordPress site.

The easiest way to do this is to use the provided shortcode. On the right side of your screen is a meta field called "Shortcode". Copy the shortcode that looks like the following picture.

Copy Flipbox shortcode

Next, navigate to a page or post where you want to add the flip box and paste in your shortcode.

Then click "Publish" or "Update" if your post is already active.

Insert Flipbox shortcode

Your new flip boxes are now live on your website.

Note that when you change the size of your browser window, the flip boxes adapt as they are 100% responsive.

Flipbox Live WordPress Ad

This plugin also includes a Flipbox widget that you can add to any widget area supported by your theme.

To do this, navigate to Appearance »Widgets and find the widget titled "Flipbox – Awesomes Flip Boxes Image Overlay".

Add a Flipbox widget

Then you can drag and drop the widget to your preferred location.

Finally, enter the Style ID, which is located in the main menu of the Flipbox plugin, and click "Save".

Flipbox Widget ID

We hoped this article helped you learn how to add flipbox overlays and hovers to your WordPress site. You may also want to check out our Guide to Optimizing Images for Search Engine Optimization and our Troubleshooting Guide to Fixing Common WordPress Image Problems.

If you enjoyed this article, please subscribe to our YouTube channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Comments are closed.