{"id":1071,"date":"2019-01-31T09:50:09","date_gmt":"2019-01-31T09:50:09","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=1071"},"modified":"2023-02-03T11:49:54","modified_gmt":"2023-02-03T11:49:54","slug":"how-to-showcase-your-services-in-the-form-of-a-flip-box-with-jetelements-animated-box-widget","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-showcase-your-services-in-the-form-of-a-flip-box-with-jetelements-animated-box-widget\/","title":{"rendered":"Animated Box Widget Overview"},"content":{"rendered":"\n<p>With the Animated Box widget of the JetElements plugin, you will be able to present information in an attractive way in a flip box form.<\/p>\n\n\n\n<p class=\"style-title-numecal\"><b><span>1<\/span> Step<\/b> <strong>\u2014 Add the Animated Box widget to the page<\/strong><\/p>\n\n\n\n<p>Firstly, open the page where you need to add a flip box with the Elementor page builder. Find the <strong>Animated Box<\/strong> widget in the widget panel on the left and drag it to the section.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/01\/animated-box-widget-1.png\" alt=\"Animated Box widget\" class=\"wp-image-20970\"\/><\/div>\n\n\n\n<p class=\"style-title-numecal\"><b><span>2<\/span> Step<\/b> <strong>\u2014 Customize the front side of a box<\/strong><\/p>\n\n\n\n<p>Open the <strong>Content<\/strong> menu tab and unfold the <strong>Front Side Content<\/strong> section.<\/p>\n\n\n\n<ul>\n<li><strong>Content Type<\/strong>. This feature defines how the content will be displayed on the flip box. <strong>Default <\/strong>means that it will be determined by available options in Elementor and the <strong>Template<\/strong> means that a certain template is applied. The template can be created in the <strong><em>Templates &gt; Saved Templates<\/em><\/strong> submenu option of your website&#8217;s Dashboard;<\/li>\n\n\n\n<li><strong>Icon<\/strong>. You can choose it from the Icon Library or upload your own SVG file;<\/li>\n\n\n\n<li><strong>Title<\/strong>, <strong>Subtitle<\/strong>, and <strong>Description <\/strong>present the main text content of the flip box. You can type it the data or leave the fields empty (in that case, they will disappear from the flip box). Besides that, you can also add the content from a custom meta field there by using the &#8220;<strong>Dynamic Tags<\/strong>&#8221; button to the right.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/01\/fron-side-content-settings.png\" alt=\"Front Side Content settings\" class=\"wp-image-20971\"\/><\/div>\n\n\n\n<p class=\"style-title-numecal\"><b><span>3<\/span> Step<\/b> <strong>\u2014 Customize the back side of a box<\/strong><\/p>\n\n\n\n<p>Open the <strong>Back Side Content<\/strong> section. The settings here are the same as in the Front Side Content section. The only special feature here is a clickable button. You can set up the <strong>Button text<\/strong> and <strong>Button link<\/strong> here. <\/p>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/01\/back-side-content.png\" alt=\"back side content settings\" class=\"wp-image-16594\"\/><\/div>\n\n\n\n<p class=\"style-title-numecal\"><b><span>4<\/span> Step<\/b> <strong>\u2014 Deal with the settings<\/strong><\/p>\n\n\n\n<p>Now it is time to go through the <strong>Settings <\/strong>section of the <strong>Content<\/strong> menu tab. <\/p>\n\n\n\n<ul>\n<li><strong>Height<\/strong>. It can be set manually by moving a slider. Besides that, you can insert the value directly into the field. There are three measurement units you can use. <strong>PX <\/strong>is for pixels, <strong>REM <\/strong>sets the height in a value that is connected to the size of the HTML element&#8217;s font, and <strong>VH <\/strong>sets the height in a value that is connected to the size of the browser window. If you need a more detailed explanation, check out <a href=\"https:\/\/docs.elementor.com\/article\/595-difference-between-px-em-rem-percentage-vw-vh?utm_expid=.wa6kQ53URcOefevNGQ3BIA.0&amp;utm_referrer=https%3A%2F%2Fwww.google.com%2F\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">this link<\/a>;<\/li>\n\n\n\n<li><strong>Switch Type<\/strong>. Here you define what action the user has to do to flip the animated box over.\n<ul>\n<li><strong>Hover <\/strong>&#8211; the user hovers the pointer over the animated box;<\/li>\n\n\n\n<li><strong>Click <\/strong>&#8211; to flip the box, the user has to click on it;<\/li>\n\n\n\n<li><strong>Toggle Button<\/strong> &#8211; in this case, a button appears on the front side of the box, and the user has to click it to flip it over;<\/li>\n\n\n\n<li><strong>Scratch <\/strong>&#8211; to reveal the back side of the box, the user has to click on the surface and move the pointer holding the left mouse button, &#8220;scratching&#8221; the front side off;<\/li>\n\n\n\n<li><strong>Paper Fold<\/strong>, <strong>Peel<\/strong>, <strong>Slide Out<\/strong> &#8211; those three types have the same essence and different animation. To open the back side of the box, the user has to click on the surface and pull the pointer in one direction holding the left mouse button. If you choose Paper Fold, the front side will fold. If you choose Peel,<strong> <\/strong>it will peel off, and if you choose<strong> Slide Out<\/strong> &#8211; just move it aside.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Animation Effect<\/strong>. If you choose &#8220;Hover&#8221;, &#8220;Click,&#8221; or &#8220;Toggle Button&#8221; <strong>Switch Type,<\/strong> you will be offered to choose the animation type. It is the way the animated box flips over. Play with the different effects to choose the one that fits you most;<\/li>\n\n\n\n<li><strong>Title HTML Tag<\/strong>. In this drop-down menu, you can choose the size of the Title element;<\/li>\n\n\n\n<li><strong>Subtitle HTML Tag<\/strong>. the same thing is here &#8211; you can choose the size of the Subtitle element.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/01\/settings-block-in-the-animated-box-settings-2.png\" alt=\"settings block\" class=\"wp-image-16599\"\/><\/div>\n\n\n\n<p>Finally, customize the appearance of the widget as a whole and include separate elements in the <strong>Style<\/strong> block.<\/p>\n\n\n\n<p>When you are done, click the &#8220;<strong>Update<\/strong>&#8221; button to save the changes and check the result.<\/p>\n\n\n\n<p>Congrats! Now you\u2019re able to add appealing flip boxes to your Elementor-built pages.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial reveals the process of creating a flip box using Animated Box, which is a part of the JetElements plugin.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[516],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JetElements: How to Add Stylish Animated Box | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn the process of creating and customizing the Animated Box widget from JetElements and spice up your webpage with animation.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-showcase-your-services-in-the-form-of-a-flip-box-with-jetelements-animated-box-widget\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JetElements: How to Add Stylish Animated Box | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn the process of creating and customizing the Animated Box widget from JetElements and spice up your webpage with animation.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-showcase-your-services-in-the-form-of-a-flip-box-with-jetelements-animated-box-widget\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-03T11:49:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/01\/animated-box-widget-1.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-showcase-your-services-in-the-form-of-a-flip-box-with-jetelements-animated-box-widget\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-showcase-your-services-in-the-form-of-a-flip-box-with-jetelements-animated-box-widget\/\",\"name\":\"JetElements: How to Add Stylish Animated Box | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-01-31T09:50:09+00:00\",\"dateModified\":\"2023-02-03T11:49:54+00:00\",\"description\":\"Learn the process of creating and customizing the Animated Box widget from JetElements and spice up your webpage with animation.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-showcase-your-services-in-the-form-of-a-flip-box-with-jetelements-animated-box-widget\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-showcase-your-services-in-the-form-of-a-flip-box-with-jetelements-animated-box-widget\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-showcase-your-services-in-the-form-of-a-flip-box-with-jetelements-animated-box-widget\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Animated Box Widget Overview\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JetElements: How to Add Stylish Animated Box | Crocoblock","description":"Learn the process of creating and customizing the Animated Box widget from JetElements and spice up your webpage with animation.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-showcase-your-services-in-the-form-of-a-flip-box-with-jetelements-animated-box-widget\/","og_locale":"en_US","og_type":"article","og_title":"JetElements: How to Add Stylish Animated Box | Crocoblock","og_description":"Learn the process of creating and customizing the Animated Box widget from JetElements and spice up your webpage with animation.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-showcase-your-services-in-the-form-of-a-flip-box-with-jetelements-animated-box-widget\/","og_site_name":"Help Center","article_modified_time":"2023-02-03T11:49:54+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/01\/animated-box-widget-1.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-showcase-your-services-in-the-form-of-a-flip-box-with-jetelements-animated-box-widget\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-showcase-your-services-in-the-form-of-a-flip-box-with-jetelements-animated-box-widget\/","name":"JetElements: How to Add Stylish Animated Box | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-01-31T09:50:09+00:00","dateModified":"2023-02-03T11:49:54+00:00","description":"Learn the process of creating and customizing the Animated Box widget from JetElements and spice up your webpage with animation.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-showcase-your-services-in-the-form-of-a-flip-box-with-jetelements-animated-box-widget\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-showcase-your-services-in-the-form-of-a-flip-box-with-jetelements-animated-box-widget\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-showcase-your-services-in-the-form-of-a-flip-box-with-jetelements-animated-box-widget\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"Animated Box Widget Overview"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/1071"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=1071"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=1071"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=1071"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}