Elegant Themes layouts screenshot hover effect layout & tutorial

This free Divi layout and tutorial recreates the layout pack hover effects from the Elegant Themes website and is available to download from the Elegant Themes blog post “How to Recreate ET’s Layout Pack Previews with Fan-Out Hover Effects in Divi”.

The hover effect is created using the built-in Divi Theme options along with some additional CSS code and the blog post shows you step-by-step how to create the layout. It shows you how to;

  • Create the 3 screenshots using Divi modules and some extra CSS within the modules
  • Use page level CSS to add hover effects for the 3 screenshots

Download Divi layout on the Elegant Themes blog

download divi vertical slider

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.


There are no reviews yet.

Be the first to review “Elegant Themes screenshot effect”

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.