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.
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 your website’s user experience, 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 take a look at 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 site. In this case, no upgrade is required.
The first thing you need to do is install and activate the Flipbox – Awesomes Flip Boxes Image Overlay plugin. 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.
This will show the full range of templates.
If that’s not enough, you can click the “Import Templates” menu option to see more templates you can use.
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.
Now it’s 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.
The options 1., 2., 3. “Layouts” correspond to the individual flip boxes in the layout. Once you’ve made your selections, click Save.
It’s important to mention that your final design will be a close match with 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.
You can change the fonts, pads, and margins on any of these tabs. However, we think the standard options already look great.
Next we 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”.
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 be displayed.
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.
Then follow 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.
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.
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.
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 want to create a whole series of flip boxes, click the ‘+’ symbol in the ‘Add new flip boxes’ meta field.
This will bring up a pop-up similar to the one above where you can customize your second Flipbox.
By now you’ve created and customized 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.
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.
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.
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”.
You can then 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”.
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.