{"id":37707,"date":"2022-05-19T15:00:24","date_gmt":"2022-05-19T13:00:24","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=37707"},"modified":"2022-05-19T09:42:28","modified_gmt":"2022-05-19T07:42:28","slug":"how-to-create-flipbox-overlays-and-hovers-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-create-flipbox-overlays-and-hovers-in-wordpress\/","title":{"rendered":"How to Create Flipbox Overlays and Hovers in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Creating visually immersive and engaging sections on your WordPress site can go a long way when it comes to capturing the attention of your visitors. In general, one great way to make your site appear more visually appealing and interactive as a whole is to <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-add-image-hover-effects-in-wordpress\/\">add hover effects<\/a> to your pages. But to truly make the most out of these effects and introduce some interactivity that your site visitors will appreciate, we suggest that you <strong>use a so-called flipbox overlay effect<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This time around, <strong>we will show you how you can easily create and add flipbox overlays and hover effects to your WordPress pages<\/strong> using a plugin. But before we begin, we will <strong>explain what a flipbox actually is and how it can benefit your site<\/strong>. Make sure to keep reading as we talk about:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-is-flipbox\">What Is a Flipbox and How Is It Useful?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#creating-and-estting-up-flipbox\">Creating and Setting Up a Flipbox in WordPress<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#styling-the-front-and-back\">Styling the Front and Back of Your Flipbox<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#editing-the-content\">Editing the Content of Your Flipbox<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-flipbox-to-your-wordpress-site\">Adding a Flipbox to Your WordPress Site<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-is-flipbox\"><\/a>What Is a Flipbox and How Is It Useful?<\/h2>\n<p>[\/vc_column_text][vc_column_text]Just as its name suggests, <strong>a flipbox is a box that has a hover animation effect and is usually filled with various elements<\/strong>. This hover effect makes the box turn, or rather, <strong>it \u201cflips\u201d the box over once you hover over it with your mouse.<\/strong> The flipbox hover animation effect can be used on many different page elements and sections, and it\u2019s usually added to images, various text boxes, etc. Depending on the tool that you use to add this effect, you will be able to set the way your image and\/or other elements will flip (at which speed, in which direction, etc.). You will also be able to set different colors, insert additional intro and\/or outro animations, and add elements such as buttons and icons, among other things.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]A flipbox effect can be particularly beneficial if you want to add more interactivity to a website that mostly has static elements. It can also be great if you simply wish to capture the attention of your audience in a fun and attractive manner and boost their overall user experience. For example, you can use a flipbox image overlay effect to present various different images related to your brand and\/or company. Once the image flips over, a different image with various bits of information about your business can appear on the screen. You can also use this effect to reveal <a href=\"https:\/\/qodeinteractive.com\/magazine\/best-wordpress-pricing-table-plugins\/\">pricing info<\/a> of specific products and\/or services, uncover any important links and\/or call to action buttons, or any other info that will be beneficial for your visitors. In short, the ways in which you can use this effect are limitless.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Without further ado, here\u2019s how you can generate and add flipbox overlays in WordPress.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"creating-and-estting-up-flipbox\"><\/a>Creating and Setting Up a Flipbox in WordPress<\/h2>\n<p>[\/vc_column_text][vc_column_text]One great plugin you can use for creating and adding flipbox image overlays and hover effects is <a href=\"https:\/\/wordpress.org\/plugins\/image-hover-effects-ultimate-visual-composer\/\" target=\"_blank\" rel=\"noopener\">Flipbox \u2013 Awesome Flip Boxes Image Overlay<\/a>. This plugin lets you insert awesome flipbox image overlays to your pages by creating a box that will flip and showcase various elements within the box. Essentially, the plugin combines the info box and call to action element, making the flipbox appear as a regular info box. However, once the user hovers over it, it reveals various elements that will make the user take action. Aside from images, you can add all sorts of elements to your flipbox to help make your site appear more engaging and professional as a whole, including videos, maps, buttons, icons, and so on.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox.jpg\" class=\"attachment-full size-full\" alt=\"Flipbox\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you want even more features, such as the ability to adjust colors, access to 20+ templates, over 100 different effects, and professional support, you can <a href=\"https:\/\/oxilabdemos.com\/flipbox\/\" target=\"_blank\" rel=\"noopener\">upgrade to the premium version<\/a> of the Flipbox Awesome Flip Boxes Image Overlay plugin. The pricing for the Basic plan starts at $19.99.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">install the plugin<\/a> and activate it, you can <strong>head to the <em>Flip Box &gt;&gt; Settings<\/em> page<\/strong> to adjust some of the plugin\u2019s basic options.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Flipbox Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-Settings-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-Settings-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-Settings-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]There, you will be able to pick a <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-user-roles\/\">user role<\/a> that will be able to edit the plugin (Administrator, Editor, Author, etc.), and choose whether you want to enable Font Awesome, <a href=\"https:\/\/qodeinteractive.com\/magazine\/best-google-fonts\/\">Google Font<\/a>, and PreLoader support. Disabling one or more of these options will allow you to load your flipboxes faster, so if you don\u2019t need some of these, we suggest that you disable them.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"673\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-General-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Flipbox General Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-General-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-General-Settings-300x208.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-General-Settings-768x533.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-General-Settings-620x431.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Hit the <em>Create New<\/em> tab to start building your flipbox.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You will see that you can choose from five different styles by default. <strong>Click on <em>Create Style<\/em><\/strong> to begin with your template customization.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"474\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-Create-New.jpg\" class=\"attachment-full size-full\" alt=\"Flipbox Create New\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-Create-New.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-Create-New-300x147.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-Create-New-768x376.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-Create-New-620x303.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]A new box will pop up with the options to select one of the three available layouts (three different layouts can be used per style), and insert the name of your flipbox (this will be the name of your shortcode). You should note that the style of your flipbox will look the closest to the template you choose, so make sure to pick the one that fits your vision the most.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/New-Flipbox-Name-and-Layout.jpg\" class=\"attachment-full size-full\" alt=\"New Flipbox Name and Layout\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/New-Flipbox-Name-and-Layout.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/New-Flipbox-Name-and-Layout-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/New-Flipbox-Name-and-Layout-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/New-Flipbox-Name-and-Layout-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Hit the <em>Save<\/em> button when you\u2019re done.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you want access to more styles, the free version of the plugin also allows you to use the <em>Import Templates<\/em> option and import one of five additional template styles.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"459\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-Import-Templates.jpg\" class=\"attachment-full size-full\" alt=\"Flipbox Import Templates\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-Import-Templates.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-Import-Templates-300x142.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-Import-Templates-768x364.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-Import-Templates-620x294.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"styling-the-front-and-back\"><\/a>Styling the Front and Back of Your Flipbox<\/h2>\n<p>[\/vc_column_text][vc_column_text]Now, with the free version of the Flipbox Awesome Flip Boxes Image Overlay plugin, you will be able to use <strong>three different tabs \u2013 <em>General<\/em>, <em>Front<\/em>, and <em>Backend<\/em>.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/General-Front-and-Backend.jpg\" class=\"attachment-full size-full\" alt=\"General Front and Backend\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/General-Front-and-Backend.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/General-Front-and-Backend-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/General-Front-and-Backend-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/General-Front-and-Backend-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The other two tabs \u2013 <em>Custom CSS<\/em> and <em>Support<\/em> \u2013 will become available if you upgrade to the premium version of the plugin.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Back to the <em>General<\/em> tab \u2013 if you want, here you will be able to change the options related to the Flip Type and Flip Effects. These options will determine the way your flipbox will flip over on hover. You can also set the number of items per row (you can have up to six items), and adjust the width, height, and paddings of your flipbox.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In addition, if you want to take the look of your flipbox to another level, you can also choose from many available entrance and\/or exit animations.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To save the changes to your flipbox, you need to <strong>click the <em>Submit<\/em> button<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"452\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/General-Options-Submit.jpg\" class=\"attachment-full size-full\" alt=\"General Options Submit\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/General-Options-Submit.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/General-Options-Submit-300x140.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/General-Options-Submit-768x358.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/General-Options-Submit-620x289.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you wish to preview your changes, you simply need to find the <em>Preview<\/em> section located at the bottom of the page.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"489\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Preview-Section.jpg\" class=\"attachment-full size-full\" alt=\"Preview Section\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Preview-Section.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Preview-Section-300x151.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Preview-Section-768x388.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Preview-Section-620x313.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]For example, here\u2019s what our flipbox preview looks like when we choose the animation \u201crotateInUpLeft\u201d:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-Animation.gif\" class=\"attachment-full size-full\" alt=\"Flipbox Animation\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We\u2019ve also chosen the \u201cFlip Bottom to Top\u201d flip type and selected the effect called \u201ceasing_easeOutBack\u201d. Here\u2019s what it looks like:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-Animation-Bottom-to-Top.gif\" class=\"attachment-full size-full\" alt=\"Flipbox Animation Bottom to Top\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Of course, you should feel free to adjust all these settings according to your own preferences.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In the <em>Front<\/em> tab, you will be able to adjust all the settings related to the appearance of your flipbox when you\u2019re not hovering over it.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"538\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Front-Options-Submit.jpg\" class=\"attachment-full size-full\" alt=\"Front Options Submit\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Front-Options-Submit.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Front-Options-Submit-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Front-Options-Submit-768x426.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Front-Options-Submit-620x344.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Here you will find the options to <strong>change and set the image height, padding, border color, and size, adjust the Icon<\/strong> (size, width, and border radius), <strong>and Heading settings<\/strong> (related to your text, i.e. font size, font style, font weight, and so on).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Some of the options here will only become available in the Pro version of the plugin, such as the ability to change background and border colors, icon color, and icon background, and choose the title color and font family.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once again, you need to hit the <em>Submit<\/em> button for the changes to take effect.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"599\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Backend-Options-Submit.jpg\" class=\"attachment-full size-full\" alt=\"Backend Options Submit\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Backend-Options-Submit.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Backend-Options-Submit-300x185.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Backend-Options-Submit-768x475.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Backend-Options-Submit-620x383.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em>Backend<\/em> tab allows you to <strong>set the options related to the way your flop box looks when you hover over it.<\/strong> And so, you will get to use this tab to change the padding and border size, change font size, style, weight, etc., as well as adjust the button settings in full detail.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once again, a few of the customization options here (background and border colors, button and text colors, etc.) are only available with the pro version.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"editing-the-content\"><\/a>Editing the Content of Your Flipbox<\/h2>\n<p>[\/vc_column_text][vc_column_text]Now, to change things such as your background image, icon, and custom text of your flipbox (on both sides), you need to hit the <em>Edit<\/em> button located in the <em>Preview<\/em> section. You will <strong>find the <em>Edit<\/em> button when you hover over the flipbox preview itself:<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"504\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Preview-Section-Edit.jpg\" class=\"attachment-full size-full\" alt=\"Preview Section Edit\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Preview-Section-Edit.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Preview-Section-Edit-300x156.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Preview-Section-Edit-768x399.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Preview-Section-Edit-620x322.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]By doing so, you will trigger a new window that will allow you to enter your front and back text, change your background image, etc.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Front-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Front Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Front-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Front-Settings-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Front-Settings-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Front-Settings-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the <em>Front Settings<\/em> section, you will be able to change the<em> Front Title<\/em>, <em>Front Icon<\/em>, and upload your <em>Front Image<\/em>. The <em>Backend Settings<\/em> section allows you to edit the content that will activate once your flipbox \u201cflips over\u201d. Here you will be able to find the options to insert your <em>Backend Info<\/em>, <em>Backend Button Text<\/em>, <em>Link<\/em> (of your button), and <em>Backend Background Image<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"624\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Backend-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Backend Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Backend-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Backend-Settings-300x193.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Backend-Settings-768x495.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Backend-Settings-620x399.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Just make sure to hit the <em>Submit<\/em> button when you\u2019re done.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you wish to create more than one flipbox, you simply need to <strong>select the \u201c+\u201d icon located in the meta box called <em>Add New Flip Boxes<\/em><\/strong> (on the right).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Add-New-Flip-Boxes.jpg\" class=\"attachment-full size-full\" alt=\"Add New Flip Boxes\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Add-New-Flip-Boxes.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Add-New-Flip-Boxes-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Add-New-Flip-Boxes-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Add-New-Flip-Boxes-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you do this, you will open a new pop-up with customization options identical to the ones we\u2019ve mentioned right above.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"adding-flipbox-to-your-wordpress-site\"><\/a>Adding a Flipbox to Your WordPress Site<\/h2>\n<p>[\/vc_column_text][vc_column_text]Once you\u2019re done with adjusting the settings of your flipbox, you can proceed to insert it into your WordPress site.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can do this by simply using the shortcode generated on the right side of your settings screen. <strong>You will find the shortcode under the <em>Shortcode<\/em> meta box:<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-Shortcode.jpg\" class=\"attachment-full size-full\" alt=\"Flipbox Shortcode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-Shortcode.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-Shortcode-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-Shortcode-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-Shortcode-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You should copy this shortcode. Then, head to the page\/post of your choice and paste the shortcode using the shortcode block. To do this, simply <strong>hit the (+) or \u201cAdd Block\u201d icon in your editor and find and add the Shortcode block.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Add-Shortcode-Block.jpg\" class=\"attachment-full size-full\" alt=\"Add Shortcode Block\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Add-Shortcode-Block.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Add-Shortcode-Block-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Add-Shortcode-Block-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Add-Shortcode-Block-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Paste the shortcode into the block, hit the <em>Publish\/Update<\/em> button, and you\u2019re all set.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"462\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Add-Shortcode-and-Publish.jpg\" class=\"attachment-full size-full\" alt=\"Add Shortcode and Publish\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Add-Shortcode-and-Publish.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Add-Shortcode-and-Publish-300x143.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Add-Shortcode-and-Publish-768x366.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Add-Shortcode-and-Publish-620x296.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can click the <em>Preview<\/em> button to see what your flipbox will look like live on your page\/post. Also, you can use the <em>Tablet<\/em> and <em>Mobile<\/em> tabs to <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-view-mobile-version-of-your-website-on-desktop\/\">view what your page looks like on mobile<\/a> and tablet screens.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-Animation-Live.gif\" class=\"attachment-full size-full\" alt=\"Flipbox Animation Live\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you want, you can also insert a flipbox widget into any widget area of your choice (of course, if said widget area is available in the theme you\u2019re using).<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Head to <em>Appearance &gt;&gt; Widgets<\/em> and add the block widget called Flipbox \u2013 Awesome Flip Boxes Image Overlay. Simply drag and drop the widget to your desired widget area.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-Widget.jpg\" class=\"attachment-full size-full\" alt=\"Flipbox Widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-Widget.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-Widget-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-Widget-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-Widget-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You then need to insert the style id, which you will be able to find on the plugin page (<em>Flip Box<\/em> tab).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"526\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-Widget-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Flipbox Widget Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-Widget-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-Widget-Settings-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-Widget-Settings-768x417.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Flipbox-Widget-Settings-620x337.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Hit the <em>Update<\/em> button and that\u2019s it. You will be able to see your flipbox widget in action once you access the widget area that you added your flipbox to.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To learn all about <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-use-new-block-based-widget-editor-in-wordpress\/\">using block widgets in WordPress<\/a>, we suggest that you check out our article on the same subject.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Wrapping Things Up<\/h2>\n<p>[\/vc_column_text][vc_column_text]Flipboxes are rather practical and visually immersive elements you can add to your WordPress site to enhance the overall user experience of your visitors. We recommend using the Flipbox \u2013 Awesome Flip Boxes Image Overlay plugin as it is quite easy to set up and comes with all the features needed to completely customize and stylize the look of your flipbox according to your needs. This includes using different flip effects, using some additional animated effects for that extra oomph, setting the styling of fonts, buttons, and icons, and more. We encourage you to go ahead and create flipboxes that will best fit your brand identity and vision to truly enrich the interactivity of your WordPress site.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Here&#8217;s how you can easily create and add flipbox overlays to your WordPress pages and introduce some interactivity that your website visitors will appreciate.<\/p>\n","protected":false},"author":2,"featured_media":37740,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,4,13],"class_list":["post-37707","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/37707","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=37707"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/37707\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/37740"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=37707"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=37707"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=37707"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}