{"id":44129,"date":"2025-07-22T05:08:22","date_gmt":"2025-07-22T03:08:22","guid":{"rendered":"https:\/\/www.markhendriksen.com\/?p=44129"},"modified":"2025-07-22T05:51:22","modified_gmt":"2025-07-22T03:51:22","slug":"how-to-create-interactive-service-boxes-with-hover-effects-in-divi-5","status":"publish","type":"post","link":"https:\/\/www.markhendriksen.com\/how-to-create-interactive-service-boxes-with-hover-effects-in-divi-5\/","title":{"rendered":"How to Create Interactive Service Boxes with Hover Effects in Divi 5"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Create Interactive Service Boxes with Hover Effects in Divi 5  Tutorial + Free Layout)\" width=\"1080\" height=\"608\" src=\"https:\/\/www.youtube.com\/embed\/5dsiLHTiuP0?feature=oembed\"  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><br><strong>Divi 5 is still in alpha<\/strong>, but it already brings some exciting new features \u2014 especially the powerful <strong>interaction options<\/strong>. In this post, I\u2019ll walk you through how to create an <strong>interactive service or project box<\/strong> using Divi 5, with smooth hover animations and a clean, modern design.<\/p>\n\n\n<div class=\"gb-container gb-container-2638d588\">\n\n<p style=\"font-size:16px\">This is a <strong>showcase tutorial<\/strong>, meant to demonstrate what\u2019s possible in Divi 5 Alpha. It\u2019s not yet intended for production use.<\/p>\n\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">What You\u2019ll Learn<\/h2>\n\n\n\n<ul class=\"wp-block-list listsquare listsquare-single new-list-blog\">\n<li>How to <strong>download and import<\/strong> a pre-built layout<\/li>\n\n\n\n<li>How to <strong>customize images and content<\/strong><\/li>\n\n\n\n<li>How the new <strong>Divi 5 interaction system<\/strong> works<\/li>\n\n\n\n<li>How to <strong>add hover effects<\/strong> using custom CSS<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Step 1: Download the Layout<\/h2>\n\n\n\n<p>To get started, log in or sign up below.<\/p>\n\n\n<div class=\"gb-container gb-container-bdba9934 free-membership-post-cta-box\">\n<div class=\"gb-grid-wrapper gb-grid-wrapper-61529723\">\n<div class=\"gb-grid-column gb-grid-column-e62e1ebe\"><div class=\"gb-container gb-container-e62e1ebe free-membership-post-cta-box-column-1\">\n\n<p class=\"free-membership-post-cta-box-tagline\" style=\"font-size:16px;font-style:normal;font-weight:700;letter-spacing:1px;text-transform:uppercase\">Create a free account<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-white-color has-text-color has-link-color wp-elements-65f549de6713ceec6d012cf3e4cc92a8\">Get Access to All of My Free Resources<\/h3>\n\n\n\n<p class=\"free-membership-post-cta-box-paragraph has-text-color has-link-color wp-elements-be881339641a134affde7a3dcdc0c34f\" style=\"color:#ffffffa1;font-size:20px;font-style:normal;font-weight:300\">Join the free membership and start downloading my layout packs<\/p>\n\n\n\n<a class=\"gb-button gb-button-0968ccaf gb-button-text free-membership-post-cta-button\" href=\"https:\/\/www.markhendriksen.com\/join-free-membership\/\" target=\"_blank\" rel=\"noopener noreferrer\">Join the Free Membership<\/a>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-20bb6f77\"><div class=\"gb-container gb-container-20bb6f77 free-membership-post-cta-box-column-2\">\n\n<figure class=\"gb-block-image gb-block-image-841eaedc\"><img loading=\"lazy\" decoding=\"async\" width=\"360\" height=\"225\" class=\"gb-image gb-image-841eaedc\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/free-membership-area.png\" alt=\"Free membership area\" title=\"free-membership-area\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/free-membership-area.png 360w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/free-membership-area-300x188.png 300w\" sizes=\"(max-width: 360px) 100vw, 360px\" \/><\/figure>\n\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n<ol class=\"wp-block-list list-numbers\">\n<li><strong>Log in<\/strong> or <strong>create a free account<\/strong><\/li>\n\n\n\n<li>Click on the <strong>\u201cFree Membership\u201d<\/strong> section<\/li>\n\n\n\n<li>Scroll down and download the <strong>Interactive Boxes<\/strong> layout<\/li>\n\n\n\n<li>Unzip the folder \u2014 inside you\u2019ll find the <code>.json<\/code> layout file<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"230\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2025\/07\/access-free-membership.jpg\" alt=\"Access free membership\" class=\"wp-image-44134\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2025\/07\/access-free-membership.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2025\/07\/access-free-membership-480x162.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 680px, 100vw\" \/><figcaption class=\"wp-element-caption\">Access free membership<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"307\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2025\/07\/Download-layout.jpg\" alt=\"Download layout\" class=\"wp-image-44135\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2025\/07\/Download-layout.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2025\/07\/Download-layout-480x217.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 680px, 100vw\" \/><figcaption class=\"wp-element-caption\">Download layout<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Step 2: Import the Layout into Divi Library<\/h2>\n\n\n\n<ol class=\"wp-block-list list-numbers\">\n<li>Go to your <strong>WordPress Dashboard<\/strong><\/li>\n\n\n\n<li>Navigate to <strong>Divi &gt; Divi Library<\/strong><\/li>\n\n\n\n<li>Click <strong>\u201cImport &amp; Export\u201d<\/strong><\/li>\n\n\n\n<li>Upload the downloaded <code>.json<\/code> file<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"433\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2025\/07\/Import-in-the-Divi-library.jpg\" alt=\"Import in the Divi library\" class=\"wp-image-44136\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2025\/07\/Import-in-the-Divi-library.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2025\/07\/Import-in-the-Divi-library-480x306.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 680px, 100vw\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Step 3: Add the Layout to a Page<\/h2>\n\n\n\n<ol class=\"wp-block-list list-numbers\">\n<li>Open the page where you&#8217;d like to use the interactive boxes<\/li>\n\n\n\n<li>Enable the <strong>Divi Builder<\/strong><\/li>\n\n\n\n<li>Click the blue <strong>\u201c+\u201d<\/strong> to add a new section<\/li>\n\n\n\n<li>Go to the <strong>\u201cAdd From Library\u201d<\/strong> tab<\/li>\n\n\n\n<li>Select the <strong>\u201cInteractive Boxes\u201d<\/strong> layout<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"290\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2025\/07\/Add-layout-to-a-page.jpg\" alt=\"Add layout to a page\" class=\"wp-image-44138\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2025\/07\/Add-layout-to-a-page.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2025\/07\/Add-layout-to-a-page-480x205.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 680px, 100vw\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Step 4: Replace Images and Content<\/h2>\n\n\n\n<ol class=\"wp-block-list list-numbers\">\n<li>Open the <strong>row<\/strong>, then a <strong>column<\/strong><\/li>\n\n\n\n<li>Go to <strong>Background &gt; Image<\/strong> tab<\/li>\n\n\n\n<li>Replace the placeholder with your own image (recommended size: <code>600x800px<\/code>)<\/li>\n\n\n\n<li>Repeat for each column<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"250\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2025\/07\/Change-the-background-image.jpg\" alt=\"Change the background image\" class=\"wp-image-44139\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2025\/07\/Change-the-background-image.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2025\/07\/Change-the-background-image-480x176.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 680px, 100vw\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Edit Hover Content:<\/h3>\n\n\n\n<p>If you can\u2019t click the hover content in the Visual Builder, switch to <strong>Wireframe View<\/strong>.<\/p>\n\n\n\n<ol class=\"wp-block-list list-numbers\">\n<li>Open the <strong>Image Module<\/strong> inside the hover group (recommended size: <code>500x281px<\/code>)<\/li>\n\n\n\n<li>Update the <strong>Heading<\/strong>, <strong>Text<\/strong>, and <strong>Button<\/strong> modules to your content<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"285\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2025\/07\/Change-the-hover-content.jpg\" alt=\"Change the hover content\" class=\"wp-image-44140\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2025\/07\/Change-the-hover-content.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2025\/07\/Change-the-hover-content-480x201.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 680px, 100vw\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Step 5: Add Custom CSS<\/h2>\n\n\n\n<p>In <strong>Wireframe View<\/strong>, you\u2019ll see a <strong>Code Module<\/strong> that contains the custom CSS.<\/p>\n\n\n\n<p>You can either:<\/p>\n\n\n\n<ul class=\"wp-block-list listsquare listsquare-single new-list-blog\">\n<li>Leave it there, or<\/li>\n\n\n\n<li>Move it to <strong>Divi &gt; Theme Options &gt; Custom CSS<\/strong> to keep your layout clean<\/li>\n<\/ul>\n\n\n\n<p>To move it:<\/p>\n\n\n\n<ol class=\"wp-block-list list-numbers\">\n<li>Copy everything between the <code>&lt;style&gt;<\/code> tags<\/li>\n\n\n\n<li>Paste it into <strong>Divi &gt; Theme Options &gt; CSS<\/strong><\/li>\n\n\n\n<li>Delete the original Code Module from the layout<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Step 6: How the Hover Interaction Works in Divi 5<\/h2>\n\n\n\n<p>Divi 5 introduces new <strong>interaction options<\/strong> that let you add advanced behavior without third-party tools. Here&#8217;s how this effect works:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">On Mouse Hover (In):<\/h3>\n\n\n\n<ul class=\"wp-block-list listsquare listsquare-single new-list-blog\">\n<li><strong>Target<\/strong>: The group module with image, text, and button<\/li>\n\n\n\n<li><strong>Action<\/strong>: Add attribute<\/li>\n\n\n\n<li><strong>Attribute Name<\/strong>: <code>class<\/code><\/li>\n\n\n\n<li><strong>Attribute Value<\/strong>: <code>cb-show<\/code><\/li>\n<\/ul>\n\n\n\n<p>This adds the <code>cb-show<\/code> class on hover, which triggers the CSS animation.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"529\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2025\/07\/Divi-5-interactions.jpg\" alt=\"Divi 5 interactions\" class=\"wp-image-44141\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2025\/07\/Divi-5-interactions.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2025\/07\/Divi-5-interactions-480x373.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 680px, 100vw\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">On Mouse Hover (Out):<\/h3>\n\n\n\n<ul class=\"wp-block-list listsquare listsquare-single new-list-blog\">\n<li>Same setup, but this time it <strong>removes<\/strong> the <code>cb-show<\/code> class<\/li>\n<\/ul>\n\n\n\n<p>The CSS handles the slide-in and fade effect, while the interaction just toggles the visibility.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Final Thoughts<\/h2>\n\n\n\n<p>Even though Divi 5 is still in early development, the new interaction features open the door to building creative, interactive components with ease.<\/p>\n\n\n\n<p>This tutorial shows just one possibility \u2014 imagine the animations, toggles, and dynamic sections you could create once Divi 5 is fully released.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Divi 5 is still in alpha, but it already brings some exciting new features \u2014 especially the powerful interaction options. In this post, I\u2019ll walk you through how to create an interactive service or project box using Divi 5, with smooth hover animations and a clean, modern design. This is a showcase tutorial, meant to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":44143,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[133,29],"tags":[],"class_list":["post-44129","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi-5","category-divi-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.1.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create Interactive Service Boxes with Hover Effects in Divi 5<\/title>\n<meta name=\"description\" content=\"Learn how to build interactive service boxes with smooth hover effects using Divi 5&#039;s new interaction features. Includes free layout download and step-by-step tutorial.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.markhendriksen.com\/how-to-create-interactive-service-boxes-with-hover-effects-in-divi-5\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Interactive Service Boxes with Hover Effects in Divi 5\" \/>\n<meta property=\"og:description\" content=\"Learn how to build interactive service boxes with smooth hover effects using Divi 5&#039;s new interaction features. Includes free layout download and step-by-step tutorial.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.markhendriksen.com\/how-to-create-interactive-service-boxes-with-hover-effects-in-divi-5\/\" \/>\n<meta property=\"og:site_name\" content=\"Mark Hendriksen\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/madebymarkhendriksen\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-22T03:08:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-22T03:51:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2025\/07\/Interactive-service-box-with-hover-effect-in-Divi-5-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"720\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mark Hendriksen\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mark Hendriksen\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-interactive-service-boxes-with-hover-effects-in-divi-5\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-interactive-service-boxes-with-hover-effects-in-divi-5\/\"},\"author\":{\"name\":\"Mark Hendriksen\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\"},\"headline\":\"How to Create Interactive Service Boxes with Hover Effects in Divi 5\",\"datePublished\":\"2025-07-22T03:08:22+00:00\",\"dateModified\":\"2025-07-22T03:51:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-interactive-service-boxes-with-hover-effects-in-divi-5\/\"},\"wordCount\":500,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-interactive-service-boxes-with-hover-effects-in-divi-5\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2025\/07\/Interactive-service-box-with-hover-effect-in-Divi-5-1.jpg\",\"articleSection\":[\"Divi 5\",\"Divi tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.markhendriksen.com\/how-to-create-interactive-service-boxes-with-hover-effects-in-divi-5\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-interactive-service-boxes-with-hover-effects-in-divi-5\/\",\"url\":\"https:\/\/www.markhendriksen.com\/how-to-create-interactive-service-boxes-with-hover-effects-in-divi-5\/\",\"name\":\"How to Create Interactive Service Boxes with Hover Effects in Divi 5\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-interactive-service-boxes-with-hover-effects-in-divi-5\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-interactive-service-boxes-with-hover-effects-in-divi-5\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2025\/07\/Interactive-service-box-with-hover-effect-in-Divi-5-1.jpg\",\"datePublished\":\"2025-07-22T03:08:22+00:00\",\"dateModified\":\"2025-07-22T03:51:22+00:00\",\"description\":\"Learn how to build interactive service boxes with smooth hover effects using Divi 5's new interaction features. Includes free layout download and step-by-step tutorial.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-interactive-service-boxes-with-hover-effects-in-divi-5\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.markhendriksen.com\/how-to-create-interactive-service-boxes-with-hover-effects-in-divi-5\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-interactive-service-boxes-with-hover-effects-in-divi-5\/#primaryimage\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2025\/07\/Interactive-service-box-with-hover-effect-in-Divi-5-1.jpg\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2025\/07\/Interactive-service-box-with-hover-effect-in-Divi-5-1.jpg\",\"width\":720,\"height\":400,\"caption\":\"Interactive service box with hover effect in Divi 5\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-interactive-service-boxes-with-hover-effects-in-divi-5\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.markhendriksen.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Divi 5\",\"item\":\"https:\/\/www.markhendriksen.com\/divi-5\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create Interactive Service Boxes with Hover Effects in Divi 5\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.markhendriksen.com\/#website\",\"url\":\"https:\/\/www.markhendriksen.com\/\",\"name\":\"Mark Hendriksen\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.markhendriksen.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\",\"name\":\"Mark Hendriksen\",\"url\":\"https:\/\/www.markhendriksen.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png\",\"width\":354,\"height\":40,\"caption\":\"Mark Hendriksen\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/madebymarkhendriksen\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\",\"name\":\"Mark Hendriksen\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g\",\"caption\":\"Mark Hendriksen\"},\"url\":\"https:\/\/www.markhendriksen.com\/author\/twopixels\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create Interactive Service Boxes with Hover Effects in Divi 5","description":"Learn how to build interactive service boxes with smooth hover effects using Divi 5's new interaction features. Includes free layout download and step-by-step tutorial.","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:\/\/www.markhendriksen.com\/how-to-create-interactive-service-boxes-with-hover-effects-in-divi-5\/","og_locale":"en_US","og_type":"article","og_title":"How to Create Interactive Service Boxes with Hover Effects in Divi 5","og_description":"Learn how to build interactive service boxes with smooth hover effects using Divi 5's new interaction features. Includes free layout download and step-by-step tutorial.","og_url":"https:\/\/www.markhendriksen.com\/how-to-create-interactive-service-boxes-with-hover-effects-in-divi-5\/","og_site_name":"Mark Hendriksen","article_publisher":"https:\/\/www.facebook.com\/madebymarkhendriksen","article_published_time":"2025-07-22T03:08:22+00:00","article_modified_time":"2025-07-22T03:51:22+00:00","og_image":[{"width":720,"height":400,"url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2025\/07\/Interactive-service-box-with-hover-effect-in-Divi-5-1.jpg","type":"image\/jpeg"}],"author":"Mark Hendriksen","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mark Hendriksen","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.markhendriksen.com\/how-to-create-interactive-service-boxes-with-hover-effects-in-divi-5\/#article","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/how-to-create-interactive-service-boxes-with-hover-effects-in-divi-5\/"},"author":{"name":"Mark Hendriksen","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765"},"headline":"How to Create Interactive Service Boxes with Hover Effects in Divi 5","datePublished":"2025-07-22T03:08:22+00:00","dateModified":"2025-07-22T03:51:22+00:00","mainEntityOfPage":{"@id":"https:\/\/www.markhendriksen.com\/how-to-create-interactive-service-boxes-with-hover-effects-in-divi-5\/"},"wordCount":500,"commentCount":0,"publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"image":{"@id":"https:\/\/www.markhendriksen.com\/how-to-create-interactive-service-boxes-with-hover-effects-in-divi-5\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2025\/07\/Interactive-service-box-with-hover-effect-in-Divi-5-1.jpg","articleSection":["Divi 5","Divi tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.markhendriksen.com\/how-to-create-interactive-service-boxes-with-hover-effects-in-divi-5\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.markhendriksen.com\/how-to-create-interactive-service-boxes-with-hover-effects-in-divi-5\/","url":"https:\/\/www.markhendriksen.com\/how-to-create-interactive-service-boxes-with-hover-effects-in-divi-5\/","name":"How to Create Interactive Service Boxes with Hover Effects in Divi 5","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.markhendriksen.com\/how-to-create-interactive-service-boxes-with-hover-effects-in-divi-5\/#primaryimage"},"image":{"@id":"https:\/\/www.markhendriksen.com\/how-to-create-interactive-service-boxes-with-hover-effects-in-divi-5\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2025\/07\/Interactive-service-box-with-hover-effect-in-Divi-5-1.jpg","datePublished":"2025-07-22T03:08:22+00:00","dateModified":"2025-07-22T03:51:22+00:00","description":"Learn how to build interactive service boxes with smooth hover effects using Divi 5's new interaction features. Includes free layout download and step-by-step tutorial.","breadcrumb":{"@id":"https:\/\/www.markhendriksen.com\/how-to-create-interactive-service-boxes-with-hover-effects-in-divi-5\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.markhendriksen.com\/how-to-create-interactive-service-boxes-with-hover-effects-in-divi-5\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/how-to-create-interactive-service-boxes-with-hover-effects-in-divi-5\/#primaryimage","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2025\/07\/Interactive-service-box-with-hover-effect-in-Divi-5-1.jpg","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2025\/07\/Interactive-service-box-with-hover-effect-in-Divi-5-1.jpg","width":720,"height":400,"caption":"Interactive service box with hover effect in Divi 5"},{"@type":"BreadcrumbList","@id":"https:\/\/www.markhendriksen.com\/how-to-create-interactive-service-boxes-with-hover-effects-in-divi-5\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.markhendriksen.com\/"},{"@type":"ListItem","position":2,"name":"Divi 5","item":"https:\/\/www.markhendriksen.com\/divi-5\/"},{"@type":"ListItem","position":3,"name":"How to Create Interactive Service Boxes with Hover Effects in Divi 5"}]},{"@type":"WebSite","@id":"https:\/\/www.markhendriksen.com\/#website","url":"https:\/\/www.markhendriksen.com\/","name":"Mark Hendriksen","description":"","publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.markhendriksen.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.markhendriksen.com\/#organization","name":"Mark Hendriksen","url":"https:\/\/www.markhendriksen.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png","width":354,"height":40,"caption":"Mark Hendriksen"},"image":{"@id":"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/madebymarkhendriksen"]},{"@type":"Person","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765","name":"Mark Hendriksen","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g","caption":"Mark Hendriksen"},"url":"https:\/\/www.markhendriksen.com\/author\/twopixels\/"}]}},"_links":{"self":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/44129","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/comments?post=44129"}],"version-history":[{"count":8,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/44129\/revisions"}],"predecessor-version":[{"id":44197,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/44129\/revisions\/44197"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media\/44143"}],"wp:attachment":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media?parent=44129"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/categories?post=44129"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/tags?post=44129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}