Creating flipbox overlays and hovers in WordPress is a useful way to enhance your website’s appearance as well as your visitors’ experience. However, many people still don’t know how to use this feature. In this blog, we provide you with a detailed guide to resolve it. Let’s keep reading.
What is a flip box and why should you use it?
A flip box is a common effect that appears when your visitors hover their mouse over it. Using a flip box is an efficient method to add engaging effects to an image. This is especially useful if your website has limited space and you can’t add a description for each image. Using a flip box will help you save a lot of space by displaying more information on the back of the flip box when visitors hover over the image.
In addition, you can show a lot of impressive elements when using a flip box. For example, you can combine the power of an info box and a call to action.
Moreover, this feature brings your site’s visitors the best experience when visiting your website.
How to Create Flipbox Overlays and Hovers in WordPress
There are several ways that allow you to add hover effects in WordPress. If you have good coding knowledge, you can create flipbox overlays and hovers in WordPress by adding CSS code. However, this method may take a lot of time to edit and format. Hence, in today’s tutorial, we are going to show you how to easily create image hover effects using a plugin.
One of the easiest ways to create this effect is to use the Flipbox – Awesomes Flip Boxes Image Overlay plugin. This tool allows you to simply add custom flip box effects to your WordPress images.
To use this plugin, first of all, you need to install and activate it.
Step 1: Install the plugin
As with other plugins, you only need to go to Plugins > Add New from your dashboard menu. Then use the search feature to look for the plugin. Click on the Install Now button and Activate it.
Step 2: Choose a template and customize your flipbox
After you have installed this plugin, go to Flip Box > Create New to start creating your first flip box.
From there, you will see a list of different templates offered by the plugin. The free version of this plugin provides you with 5 templates with various styles to choose from.
If you want to get more styles, you can click on the “Import templates” to open 5 more templates that you can use.
To import a new template, simply click on the “Import” button.
Now, you can select any template to start customizing them. Then click on the “Create Style” button. This will open a popup window where you can give your flip box a name and select which layout you want to customize.
The 1st, 2nd, and 3rd layout options will correspond to the individual flip boxes in the layout, so you can refer to the flip box template before picking a template that you want to use.
After you have made your selection, let’s click on the “Save” button.
From here, you can change the appearance of your flip box with many options. You only need to focus on three main tabs: “General“, “Front“, and “Backend“.
On each tab, the plugin allows you to change the font, padding, color, margin, and much more. You can change them to suit your preferences. However, to save time, you can keep the default template, because it already looks great.
Next, scroll down the screen and you will see the Preview section.
Simply hover over the flip box and click on “Edit“.
This will open a popup where you can change the text on both sides of the flip box and background image.
Let’s edit the “Front Title” text box to change it into your own title. In addition, you can change the “Front icon“, if you want to display another icon.
Next, if you want to add your own background image, let’s click on the “Upload Image” button under the “Front Image” option. This opens your media library where you can choose from your existing images.
Under the Backend Settings, you can change the title and text that appear once the card flips. Besides that, you can also change the “Backend Info” and “Link” fields.
Finally, click on the ” Upload image” button to change the background image on the back of the flip box. This process is the same as for the front image.
Once you are pleased with your editing, don’t forget to click on the “Submit” button to save your changes.
Now, you can see your new changes in the “Preview” section.
Moreover, if you want to create an entire row of flip boxes, click on the “+” symbol in the “Add New Flip Boxes” meta box.
This will open a popup window similar to the one above. Here you can customize your second flip box.
Step 3: Display flip box on your post/page
After you have finished your flip box, have a look at the “Shortcode” meta box on the right-hand side of the screen.
Copy this shortcode and paste it into the page or post where you would like to add the flip box.
Then click on the “Publish” or “Update” button and you will see it in action.
Step 4: Display flip box at your preferred location by using a widget
This plugin also offers you a flip box widget that you can easily add to any area supported by your theme.
To do this, navigate to Appearance > Widgets and find the “Flipbox-Awesomes Flip Boxes Image Overlay“.
Drag and drop this widget to your desired location.
Next, you need to input the style ID that is shown in the main Flipbox plugin menu and then click on the “Save” button.
Summary
Hopefully, through this article, you learned how to create Flipbox overlays and hovers in WordPress. If you encounter any problems while using this method, let us know in the comments below. We are always willing to support you.
Last but not least, you can spend a little time visiting our free WordPress Theme to explore hundreds of SEO-friendly, gorgeous themes and templates for your website.
