{"id":20228,"date":"2020-04-06T14:55:44","date_gmt":"2020-04-06T12:55:44","guid":{"rendered":"https:\/\/premiumaddons.com\/?post_type=docs&#038;p=20228"},"modified":"2024-03-05T13:34:32","modified_gmt":"2024-03-05T11:34:32","slug":"flip-box-widget-tutorial","status":"publish","type":"docs","link":"https:\/\/premiumaddons.com\/docs\/flip-box-widget-tutorial\/","title":{"rendered":"Hover Box Widget Tutorial"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\"><strong>Intro<\/strong><\/h3>\n\n\n\n<p>Premium Hover Box Widget allows you to add an eye-catching call to actions or display various types of website content like services or products right on your webpage. This Elementor Widget designed with the attention-grabbing 3D effect.<\/p>\n\n\n\n<p>In this tutorial, we will discuss Elementor Hover Box Widget options in detail.<\/p>\n\n\n\n<p>Click here to check <a href=\"https:\/\/premiumaddons.com\/flip-box-widget-for-elementor-page-builder\/\">Premium Hover Box Widget demo<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Requirements: <\/h3>\n\n\n\n<ul><li>You will need <a rel=\"noreferrer noopener\" href=\"https:\/\/premiumaddons.com\/pro\/\" target=\"_blank\">Premium Addons PRO<\/a> plugin installed and activated on your website.<\/li><li>Also, make sure that this widget\/addon is enabled so you can find it in the Elementor editor. Check <a rel=\"noreferrer noopener\" href=\"https:\/\/premiumaddons.com\/docs\/plugin-settings\/\" target=\"_blank\">this article<\/a> to know how to do that. <\/li><li>Premium Addons works only with <a rel=\"noreferrer noopener\" href=\"https:\/\/bit.ly\/Get-Elementor\" target=\"_blank\">Elementor Page Builder<\/a> plugin so you will need to have it installed and activated as well.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMjAlMkYwNCUyRmVsZW1lbnRvci1ob3Zlci1ib3gtd2lkZ2V0LmpwZyIgZGF0YS13PSIxMDI0IiBkYXRhLWg9IjU5NyIgZGF0YS1iaXA9IiI+PC9zdmc+\" data-spai=\"1\" alt=\"Premium Hover Box Widget for Elementor\" class=\"wp-image-24828\"  \/><figcaption class=\"wp-element-caption\">Premium Hover Box Widget for Elementor<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Key features<\/strong><\/h3>\n\n\n\n<ul>\n<li>Front<\/li>\n\n\n\n<li>Back<\/li>\n\n\n\n<li>Additional settings<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">1. Front<\/h4>\n\n\n\n<p>Select between editing the content and the background.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Content<\/h5>\n\n\n\n<ul>\n<li><strong>Icon:<\/strong> Enable or disable adding an icon that is shown on the front side at the top of the widget, above the title and description.\n<ul>\n<li><strong>Icon Type:<\/strong> Select or upload a custom image via the Media Library, select from a list of Font Awesome Icons or insert Lottie Animations link.\n<ul>\n<li><strong>Loop:<\/strong> Loop option is activated by default. Switching \u201cOff\u201d this option will make the Lottie Animation file work only for just one time.<\/li>\n\n\n\n<li><strong>Reverse:<\/strong> The reverse option will make the Lottie Animation file moves backward.<\/li>\n\n\n\n<li><strong>Render As:<\/strong> Set how to render the Lottie as SVG or Canvas, set render type to canvas if you\u2019re having performance issues on the page. <\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Icon Size:<\/strong> Adjust the icon size in pixels, em or %. The default size is 40 pixels.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<ul>\n<li><strong>Title:<\/strong> Enable or disable a title.\n<ul>\n<li><strong>Title:<\/strong> Add the title text for the front side.<\/li>\n\n\n\n<li><strong>HTML Tag:<\/strong> Select the tag which will be used to display the title. Choose from H1 to H6, where H1 is the largest and H6 is the smallest. The default is H3.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<ul>\n<li><strong>Description:<\/strong> Enable or disable the description. When enabled, the description is shown at the bottom of the front side below the icon and the title.\n<ul>\n<li>You can add your description directly in the Richtext editor as you can edit the text visually or with code and you can add images from the Media Library.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<ul>\n<li><strong>Vertical Position:<\/strong> Select the position of the icon, title and description inside the widget&#8217;s container. Choose from top, middle and bottom. You can preview the setting directly in the editor.<\/li>\n\n\n\n<li><strong>Content Alignment:<\/strong> You can justify the content or align it to the left, center or right.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMjAlMkYwMSUyRnByZW1pdW0tZmxpcC1ib3gtd2lkZ2V0LWZvci1lbGVtZW50b3ItY29udGVudC1mcm9udC0xMDI0eDU5Ny5qcGciIGRhdGEtdz0iMTAyNCIgZGF0YS1oPSI1OTciIGRhdGEtYmlwPSIiPjwvc3ZnPg==\" data-spai=\"1\" alt=\"Screenshot Displays The Available Settings for Premium Hover Box Front Face Content\" class=\"wp-image-20286\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Front Side Settings in Elementor&#8217;s Hover Box Widget <\/figcaption><\/figure>\n\n\n\n<p><em><strong>The background settings affect the background behind the content on the front side<\/strong><\/em>.<\/p>\n\n\n\n<p><strong>Background Type<\/strong><\/p>\n\n\n\n<ul>\n<li>Color or Gradient Colors <\/li>\n\n\n\n<li>Image: Select or upload an image via the Media Library. If an image is selected, the following options become available:\n<ul>\n<li>Position:\n<ul>\n<li>Default<\/li>\n\n\n\n<li>Top Left<\/li>\n\n\n\n<li>Top Center<\/li>\n\n\n\n<li>Top Right<\/li>\n\n\n\n<li>Center Left<\/li>\n\n\n\n<li>Center Center<\/li>\n\n\n\n<li>Center Right<\/li>\n\n\n\n<li>Bottom Left<\/li>\n\n\n\n<li>Bottom Center<\/li>\n\n\n\n<li>Bottom Right<\/li>\n\n\n\n<li>Custom: Adjust the image&#8217;s X and Y positions using pixels, em % or VW. <\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Attachment: Default, Scroll or Fixed.<\/li>\n\n\n\n<li>Repeat:\n<ul>\n<li>Default<\/li>\n\n\n\n<li>No-repeat<\/li>\n\n\n\n<li>Repeat<\/li>\n\n\n\n<li>Repeat-x<\/li>\n\n\n\n<li>Repeat-y<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Size:\n<ul>\n<li>Default<\/li>\n\n\n\n<li>Auto<\/li>\n\n\n\n<li>Cover<\/li>\n\n\n\n<li>Contain<\/li>\n\n\n\n<li>Custom: Adjust the image width using pixels, em % or VW.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Overlay Color:<\/strong> Add an overlay color to cover the background image.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwNyUyRmZyb250LWJhY2tncm91bmQtMTAyNHg1OTcuanBnIiBkYXRhLXc9IjEwMjQiIGRhdGEtaD0iNTk3IiBkYXRhLWJpcD0iIj48L3N2Zz4=\" data-spai=\"1\" alt=\"Screenshot Shows The Available Background Options in Elementor Hover Box Front Face\" class=\"wp-image-15124\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">The Available Background Settings in Hover Box Widget&#8217;s Front Face<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">2. Back<\/h4>\n\n\n\n<p><em>The backside of the Premium Hover Box Widget has the same options as the front, but with an addition of an optional link button.<\/em><\/p>\n\n\n\n<ul>\n<li><strong>Icon:<\/strong> Enable or disable an icon.\n<ul>\n<li><strong>Icon Type:<\/strong> Select or upload a custom image via the Media Library, or select from a list of Font Awesome Icons.<\/li>\n\n\n\n<li><strong>Icon Size:<\/strong> Adjust the icon size in pixels, em or %.  The default is 40 pixels.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Title:<\/strong> Add a title to the back face of the Hover Box widget.\n<ul>\n<li><strong>HTML Tag:<\/strong> Select a tag that will be used to display the title.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<ul>\n<li><strong>Description:<\/strong> Enable or disable the description and add the content in the Richtext editor.<\/li>\n\n\n\n<li><strong>Link:<\/strong> Enable or disable adding a button link to the backside of the hover box. If enabled, the following options will be available:\n<ul>\n<li>Apply on: Select whether if you want the link to be applied on the button only, or on the whole box.<\/li>\n\n\n\n<li>Link Type: Select from a list of existing pages, or enter a custom URL.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Vertical position:<\/strong> Select the position of the content inside the widget&#8217;s container. Choose from top, middle and bottom.<\/li>\n\n\n\n<li><strong>Content Alignment:<\/strong> You can justify the content or align it to the left, center or right.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMjAlMkYwMSUyRnByZW1pdW0tZmxpcC1ib3gtd2lkZ2V0LWZvci1lbGVtZW50b3ItY29udGVudC1iYWNrLTEwMjR4NTk3LmpwZyIgZGF0YS13PSIxMDI0IiBkYXRhLWg9IjU5NyIgZGF0YS1iaXA9IiI+PC9zdmc+\" data-spai=\"1\" alt=\"Screenshot Displays The Available Settings for Hover Box Back Face Content\" class=\"wp-image-20287\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Back Face Settings in Premium Hover Box Widget for Elementor<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMjAlMkYwMSUyRnByZW1pdW0tZmxpcC1ib3gtd2lkZ2V0LWZyb250LWNvbnRlbnQtMTAyNHg1OTcuanBnIiBkYXRhLXc9IjEwMjQiIGRhdGEtaD0iNTk3IiBkYXRhLWJpcD0iIj48L3N2Zz4=\" data-spai=\"1\" alt=\"Screenshots, [Left] Shows Elementor Hover Box Widget Content Settings, [Right] Text Says &quot;Overlay Color&quot; with Car Image on The Background\" class=\"wp-image-20367\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Elementor Hover Box Widget, Content Settings for Hover Box Front Face<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMjAlMkYwMSUyRmVsZW1lbnRvci1mbGlwLWJveC1mcm9udC1iYWNrZ3JvdW5kLWltYWdlLW92ZXJsYXktc3R5bGluZy1zZXR0aW5ncy0xMDI0eDU5Ny5qcGciIGRhdGEtdz0iMTAyNCIgZGF0YS1oPSI1OTciIGRhdGEtYmlwPSIiPjwvc3ZnPg==\" data-spai=\"1\" alt=\"Screenshots, [Left] Displays Elementor Hover Box Widget Background Settings, [Right] Result Silver Car &quot;Honda&quot; With Semi Transparent Overlay Color\" class=\"wp-image-20361\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Elementor Hover Box Widget Front Face Background Settings<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMjAlMkYwMSUyRnByZW1pdW0tZnJvbnQtc2lkZS1iYWNrZ3JvdW5kLWltYWdlLWZsaXAtYm94LWVsZW1lbnRvci13aWRnZXQtLTEwMjR4NTk3LmpwZyIgZGF0YS13PSIxMDI0IiBkYXRhLWg9IjU5NyIgZGF0YS1iaXA9IiI+PC9zdmc+\" data-spai=\"1\" alt=\"Screenshots [Left] Shows Background Image and Blue Overlay, [Right] Elementor Hover Box Background Image of a Girl Wearing Sunglasses and Summer Outfit\" class=\"wp-image-20355\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Available Background Options for Front Face of Elementor Hover Box<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMjAlMkYwMSUyRnByZW1pdW0tZmxpcC1ib3gtd2lkZ2V0LWVsZW1lbnRvci1wb3NpdGlvbm5pbmctYWxpZ25tZW50LTEwMjR4NTk3LmpwZyIgZGF0YS13PSIxMDI0IiBkYXRhLWg9IjU5NyIgZGF0YS1iaXA9IiI+PC9zdmc+\" data-spai=\"1\" alt=\"Screenshots Display Available Styling Options for Content Positioning and Alignment of Elementor Hover Box Content\" class=\"wp-image-20326\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Front and Back Sides of the Elementor Hover Box Widget Clarifies The Content Positioning and Alignment<\/figcaption><\/figure>\n\n\n\n<ul>\n<li><strong>Background Type:<\/strong> Choose whether if you want to upload\/select an image from the Media Library, or you can add a color\/gradient colors.<\/li>\n\n\n\n<li><strong>Overlay Color:<\/strong> Select an overlay color.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwNyUyRmJhY2stYmFja2dyb3VuZC0xMDI0eDU5Ny5qcGciIGRhdGEtdz0iMTAyNCIgZGF0YS1oPSI1OTciIGRhdGEtYmlwPSIiPjwvc3ZnPg==\" data-spai=\"1\" alt=\"The Available Settings for Hover Box Back Face Shows The Background Options\" class=\"wp-image-15127\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Available Settings for The Back Side of Elementor Hover Box Widget<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">3. Additional settings<\/h4>\n\n\n\n<ul>\n<li><strong>Effect:<\/strong> Select a Hover effect for the Hover Box. Choose from the available effects:\n<ul>\n<li>Fade<\/li>\n\n\n\n<li>Flip<\/li>\n\n\n\n<li>Slide<\/li>\n\n\n\n<li>Push<\/li>\n\n\n\n<li>Zoom<\/li>\n\n\n\n<li>Faded Zoom In<\/li>\n\n\n\n<li>Faded Zoom Out<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Flip Direction <\/strong><em>(Appear If the Effect selected is Flip, Slide, and Push)<\/em><strong>:<\/strong> Select the flip direction. Choose between the following:\n<ul>\n<li>Right to left<\/li>\n\n\n\n<li>Left to Right<\/li>\n\n\n\n<li>Top to Bottom<\/li>\n\n\n\n<li>Bottom to Top<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Hover Text Animation:<\/strong> Enable\/Disable Hover Text Animation allows you to make Text animated when the box is flipped ( It works only with the Flip effect).<\/li>\n\n\n\n<li><strong>Height:<\/strong> Adjust the container&#8217;s height.<\/li>\n\n\n\n<li><strong>Border Type:<\/strong> Select between the following border types, as well as the color and the width of the border on each side of the box:\n<ul>\n<li>None (Default)<\/li>\n\n\n\n<li>Solid<\/li>\n\n\n\n<li>Double<\/li>\n\n\n\n<li>Dotted<\/li>\n\n\n\n<li>Dashed<\/li>\n\n\n\n<li>Groove<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Border Radius:<\/strong> Increasing the border-radius will add circular corners to the area with the background behind the text. You can adjust the border-radius in pixels, % or em.<\/li>\n\n\n\n<li><strong>Advanced Border Radius:<\/strong>&nbsp;Apply custom radius values for Elementor Hover Box widget container. Get the radius value from&nbsp;<a href=\"https:\/\/9elements.github.io\/fancy-border-radius\/\">here<\/a>.<\/li>\n\n\n\n<li><strong>Border Radius:<\/strong>&nbsp;Insert border radius values.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMjAlMkYwMSUyRnByZW1pdW0tZmxpcC1ib3gtd2lkZ2V0LWFkZGl0aW9uYWwtc2V0dGluZ3MtMTAyNHg1OTcuanBnIiBkYXRhLXc9IjEwMjQiIGRhdGEtaD0iNTk3IiBkYXRhLWJpcD0iIj48L3N2Zz4=\" data-spai=\"1\" alt=\"Screenshot Display The Available Additional Settings for Elementor Hover Box Widget\" class=\"wp-image-20254\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Elementor Hover Box Widget Additional Settings [Effect, Flip Direction, Hover Text Animation, Height, Border Type, and Border Radius]<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMjAlMkYwMSUyRnByZW1pdW0tZmxpcC1ib3gtYWRkaXRpb25hbC1zZXR0aW5ncy1ob3Zlci10ZXh0LWFuaW1hdGlvbi1lZmZlY3QtZmxpcC1lbGVtZW50b3ItMTAyNHg1OTcuanBnIiBkYXRhLXc9IjEwMjQiIGRhdGEtaD0iNTk3IiBkYXRhLWJpcD0iIj48L3N2Zz4=\" data-spai=\"1\" alt=\"Screenshots [Left] Shows Additional Settings in Elementor Hover Box, [Right] Front and Back Hover Box Sides Showing a Boat in The Sea With Greenish Overlay Color\" class=\"wp-image-20314\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Displaying The Front and Back Face of Elementor Hover Box Widget<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMjAlMkYwMSUyRnByZW1pdW0tZmxpcC1ib3gtYWRkaXRpb25hbC1zZXR0aW5ncy1lZmZlY3Qtc2xpZGUtMTAyNHg1OTcuanBnIiBkYXRhLXc9IjEwMjQiIGRhdGEtaD0iNTk3IiBkYXRhLWJpcD0iIj48L3N2Zz4=\" data-spai=\"1\" alt=\"Screenshots [Left] Displays Additional Settings in Elementor Hover Box, [Right] Girl Wearing Sunglasses, and Overlay with Icon of &quot;Square Academic Cap&quot;\" class=\"wp-image-20320\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Elementor Hover Box Additional Settings<\/figcaption><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Style<\/strong><\/h3>\n\n\n\n<ul>\n<li>Front<\/li>\n\n\n\n<li>Back<\/li>\n\n\n\n<li>Link<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">1. Front &amp; Back<\/h4>\n\n\n\n<p><em>The style options are identical for the front and back.<\/em><\/p>\n\n\n\n<p><em>Adjust the style settings for the icon, title, and description respectively:<\/em><\/p>\n\n\n\n<ul>\n<li><strong>Box Shadow:<\/strong> Add a shadow around\u00a0the container by controlling the following settings:\n<ul>\n<li>Horizontal Position<\/li>\n\n\n\n<li>Vertical Position<\/li>\n\n\n\n<li>Blur<\/li>\n\n\n\n<li>Spread<\/li>\n\n\n\n<li>Position:\n<ul>\n<li>Outline <\/li>\n\n\n\n<li>Inset<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\">Icon <\/h5>\n\n\n\n<ul>\n<li><strong>Color:<\/strong> Select a color for the icon.<\/li>\n\n\n\n<li><strong>Background Color:<\/strong> Select a background color behind the icon.<\/li>\n\n\n\n<li><strong>Border Type:<\/strong> Select between the following border types, as well as the color and the width of the border on each side of the box:\n<ul>\n<li>None<\/li>\n\n\n\n<li>Solid<\/li>\n\n\n\n<li>Double<\/li>\n\n\n\n<li>Dotted<\/li>\n\n\n\n<li>Dashed<\/li>\n\n\n\n<li>Groove<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Border Radius:<\/strong> Increasing the border-radius will add circular corners to the area with the background behind the text. You can adjust the border-radius in pixels, % or em.<\/li>\n\n\n\n<li><strong>Shadow:<\/strong> Add a shadow behind the icon using the following options:\n<ul>\n<li>Color<\/li>\n\n\n\n<li>Horizontal position<\/li>\n\n\n\n<li>Vertical position<\/li>\n\n\n\n<li>Blur<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Margin:<\/strong> Adjust the margin in pixels, em or %<\/li>\n\n\n\n<li><strong>Padding:<\/strong> Adjust the padding in pixels, em or %.<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\">Title and Description<\/h5>\n\n\n\n<p><em>The options for the title and description are identical.<\/em><\/p>\n\n\n\n<ul>\n<li><strong>Text Color:<\/strong> Select a text color for the title.<\/li>\n\n\n\n<li>In the Typography settings you can:\n<ul>\n<li>Select from a large number of font families.<\/li>\n\n\n\n<li>Select the font size in either pixel, em, rem or vw.<\/li>\n\n\n\n<li>Select the font-weight:  From 100 (Thin) to 900 (Very Thick), or you can keep it Default, Normal or Bold.<\/li>\n\n\n\n<li>Transform the text to Uppercase, Lowercase, Capitalized, Default or Normal.<\/li>\n\n\n\n<li>Select a font style: Normal, Italic or Oblique.<\/li>\n\n\n\n<li>Select a text-decoration: Default, Underline, Overline, Line Through, or None.<\/li>\n\n\n\n<li>Adjust the line-height.<\/li>\n\n\n\n<li>Adjust the letter spacing. <\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Text Shadow:<\/strong> Add a shadow behind the text by selecting from the following options:\n<ul>\n<li>Color<\/li>\n\n\n\n<li>Horizontal position<\/li>\n\n\n\n<li>Vertical position<\/li>\n\n\n\n<li>Blur<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Background Color:<\/strong> Select a background color behind the text.<\/li>\n\n\n\n<li><strong>Margin:<\/strong> Adjust the margin in pixels, em or %.<\/li>\n\n\n\n<li><strong>Padding:<\/strong> Adjust the padding in pixels, em or %.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwNyUyRnN0eWxlLWZyb250Mi0xMDI0eDU5Ny5qcGciIGRhdGEtdz0iMTAyNCIgZGF0YS1oPSI1OTciIGRhdGEtYmlwPSIiPjwvc3ZnPg==\" data-spai=\"1\" alt=\"Screenshots for Elementor Hover Box Styling Settings That Includes Icon and Title\" class=\"wp-image-15134\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">The Available Styling Options for Elementor Hover Box Widget [Icon and Title]<\/figcaption><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\">2. Link<\/h5>\n\n\n\n<ul>\n<li><strong>Typography<\/strong>.\n<ul>\n<li>Select the styles for the normal and hover states.<\/li>\n\n\n\n<li><strong>Text Color:<\/strong> Select a text color for the link.<\/li>\n\n\n\n<li><strong>Text Shadow:<\/strong> Add a shadow behind the button text. Select from the following options:\n<ul>\n<li>Color<\/li>\n\n\n\n<li>Horizontal position<\/li>\n\n\n\n<li>Vertical position<\/li>\n\n\n\n<li>Blur<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Background color:<\/strong> Select a background color for the button.<\/li>\n\n\n\n<li><strong>Border Type:<\/strong> Select between the following border types, as well as the color and the width of the border on each side of the button:\n<ul>\n<li>None<\/li>\n\n\n\n<li>Solid<\/li>\n\n\n\n<li>Double<\/li>\n\n\n\n<li>Dotted<\/li>\n\n\n\n<li>Dashed<\/li>\n\n\n\n<li>Groove<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Border Radius:<\/strong> Increasing the border-radius will add circular corners to the button. You can adjust the border-radius in pixels, % or em. <\/li>\n\n\n\n<li><strong>Margin:<\/strong> Margin is the space between the button and the rest of the content. Adjust the margin in pixels, em or %.<\/li>\n\n\n\n<li><strong>Padding:<\/strong> Padding is the space between the link text and the edge of the button. Increasing the padding will increase the button size. Adjust the padding in pixels, em or %.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwNyUyRnN0eWxlLWxpbmstMTAyNHg1OTcuanBnIiBkYXRhLXc9IjEwMjQiIGRhdGEtaD0iNTk3IiBkYXRhLWJpcD0iIj48L3N2Zz4=\" data-spai=\"1\" alt=\"Screenshot Displays Available Settings for Elementor Hover Box Back Side Link Styling Options\" class=\"wp-image-15135\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Elementor Hover Box Back Side Link Styling Options <\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMjAlMkYwMSUyRnByZW1pdW0tbGluay1zdHlsZS1ub3JtYWwtc2V0dGluZ3Mtc2NyZWVudHNob3QtMTAyNHg1OTcuanBnIiBkYXRhLXc9IjEwMjQiIGRhdGEtaD0iNTk3IiBkYXRhLWJpcD0iIj48L3N2Zz4=\" data-spai=\"1\" alt=\"Screenshots [Left] Displays Styling Settings for Elementor Hover Box Back Link, [Right] Shows Elementor Hover Box Link\" class=\"wp-image-20416\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Elementor Hover Box Widget, Hover Box Back Link Normal Styling, with Example &#8220;Purchase Now&#8221;<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMjAlMkYwMSUyRnByZW1pdW0tZmxpcC1ib3gtc3R5bGluZy1saW5rLWhvdmVyLWVsZW1lbnRvci13aWRnZXQtMTAyNHg1OTcuanBnIiBkYXRhLXc9IjEwMjQiIGRhdGEtaD0iNTk3IiBkYXRhLWJpcD0iIj48L3N2Zz4=\" data-spai=\"1\" alt=\"Screenshots [Left] Displays Styling Settings for Elementor Hover Box Back Link on Hover, [Right] Shows \nElementor Hover Box Button Link White Background Green\" class=\"wp-image-20417\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Elementor Hover Box Back Link Hover Styling, with Example &#8220;Purchase Now&#8221;<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Intro Premium Hover Box Widget allows you to add an eye-catching call to actions or display various types of website content like services or products right on your webpage. This Elementor Widget designed with the attention-grabbing 3D effect. In this tutorial, we will discuss Elementor Hover Box Widget options in detail. Click here to check [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"Elementor Hover Box Widget Tutorial | Premium Addons for Elementor","_seopress_titles_desc":"Elementor Hover Box widget is a great tool in Premium Addons Pro plugin to create and customize eye-catching call-to-actions.","_seopress_robots_index":"","ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","footnotes":""},"docs_category":[514],"docs_tag":[],"_links":{"self":[{"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/docs\/20228"}],"collection":[{"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/comments?post=20228"}],"version-history":[{"count":1,"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/docs\/20228\/revisions"}],"predecessor-version":[{"id":72859,"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/docs\/20228\/revisions\/72859"}],"wp:attachment":[{"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/media?parent=20228"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/docs_category?post=20228"},{"taxonomy":"docs_tag","embeddable":true,"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/docs_tag?post=20228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}