Pop-out Blurbs

Pop-out Blurbs hover layout & tutorial

This free Divi layout and tutorial is from the Elegant Themes website blog post “Creating Pop-Out Service Descriptions on Hover with Divi”.

This cool hover effect for your Divi Blurb modules is created using the built-in Divi options and the blog post shows you step-by-step how to create the layout. It shows you how to;

• Add a Blurb module and 2 call-to-action modules either side for the pop-out content.
• Set a narrow row width so the 2 CTA stack behind the Blurb module
• Use z-index to keep the Blurb module sitting above the CTA modules
• Use the hover settings for the row to change its width and trigger the animation
• Change the width of the row on row hover so there is room for all 3 modules to sit inline.

Download Divi layout on the Elegant Themes blog

To download the free JSON layout file you will need to enter your email into the subscription box on the blog post. If you are already signed up to the Elegant Themes mailing list you will not be re-added. This sign-up form is found just below the layout Demos near the top of the post.

To import the layout to your Divi website you will need to extract the zip file and drag-and-drop the JSON file into your Divi Builder page.

Affiliate disclosure* –  Links to layouts on Elegant Themes and 3rd party websites may contain affiliate code. You will never pay any extra for using these links. Thanks for supporting Divi Theme Examples.