This article was originally published on this site

Sharing video previews on your website can increase interactivity and help visitors understand your products and/or services better and faster. Now, on the Elegant Themes website, we’ve taken on this approach for ourselves and created a straight-forward click video walkthrough design that allows people to navigate through some of our most popular features. We’ve recreated this design inside Divi and today, we’ll show you how to recreate it from scratch. You’ll be able to download the JSON file for free as well!Let’s get to it.
Preview
Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.
Desktop
click video walkthrough
Mobile
click video walkthrough
Download the Click Video Walkthrough Layout for FREE
To lay your hands on the free click video walkthrough layout, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

Download the Files

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Let’s Start Recreating!
Add New Regular Section
Start by adding a new regular section to the page you’re working on.
click video walkthrough
Add New Row
Column Structure
Continue by adding a new row using the following column structure:
click video walkthrough
Sizing
Without adding any modules yet, open the row settings and apply the following sizing settings:

  • Use Custom Gutter Width: Yes
  • Gutter Width: 2
  • Width: 85vw (Desktop), 90% (Tablet & Phone)
  • Max Width: 100%

click video walkthrough
Column 1 Settings
Open the column 1 settings next.
click video walkthrough
Spacing
Go to the spacing settings and add some top padding on desktop.

  • Top Padding: 5vw (Desktop), 0vw (Tablet & Phone)

click video walkthrough
CSS Class
Move on to the advanced tab and add a CSS class. Later on the post, we’re going to use this CSS class to create a grid effect on tablet and mobile.

  • CSS Class: item-responsive-grid

click video walkthrough
Add Blurb Module to Column 1
Add Title
Let’s start adding modules! For each clickable item, we’re going to use a Blurb Module. We’ll start with the first one and reuse it for the remaining click items. Add a new Blurb Module to column 1 and enter a title of your choice.
click video walkthrough
Select Icon
Select an icon next.
click video walkthrough
Default Icon Settings
Move on to the design and change the icon settings accordingly:

  • Icon Color: #e8e9ea
  • Icon Placement: Left
  • Use Icon Font Size: Yes
  • Icon Font Size: 2vw (Desktop), 4.5vw (Tablet), 7vw (Phone)

click video walkthrough
Hover Icon Settings
Modify the icon color on hover.

  • Icon Color: #b0c8ff

click video walkthrough
Title Text Settings
Move on to the title text settings and make some changes there as well.

  • Title Font: Lato
  • Title Font Weight: Bold
  • Title Font Style: Uppercase
  • Title Text Size: 0.8vw (Desktop), 1.7vw (Tablet), 2.5vw (Phone)
  • Title Line Height: 2vw (Desktop), 4.5vw (Tablet), 7vw (Phone)

click video walkthrough
Default Spacing
We’re going to shape the Blurb Module using some custom padding values across different screen sizes.

  • Top Padding: 1vw (Desktop), 2vw (Tablet), 3vw (Phone)
  • Bottom Padding: 0.5vw (Desktop), 1.5vw (Tablet & Phone)
  • Left Padding: 1.2vw (Desktop & Tablet), 5vw (Phone)
  • Right Padding: 1.2vw (Desktop & Tablet), 5vw (Phone)

click video walkthrough
Hover Spacing
Create a highlight hover effect by modifying the hover margin values.

  • Left Margin: -0.5vw
  • Right Margin: -0.5vw

click video walkthrough
Border
Add some rounded corners as well.
click video walkthrough
Default Box Shadow
Along with a subtle box shadow.

  • Box Shadow Vertical Position: 10px
  • Box Shadow Blur Strength: 70px
  • Shadow Color: rgba(0,0,0,0.11)

click video walkthrough
Hover Box Shadow
Change the box shadow color on hover.

  • Shadow Color: rgba(103,151,255,0.22)

click video walkthrough
CSS ID & Class
Last but not least, go to the advanced tab of the Blurb Module and add a CSS ID and class.

  • CSS ID: video-walkthrough-item-1
  • CSS Class: video-item-cursor

click video walkthrough
Clone Blurb Module Three Times
Once you’ve completed the first Blurb Module, you can clone it three times.
click video walkthrough
Change Content
Change the content of each duplicate Blurb Module.
click video walkthrough
Change All Duplicate Blurb Module CSS IDs
Along with the CSS IDs.

  • 1) Build Visually: video-walkthrough-item-1
  • 2) Effects: video-walkthrough-item-2
  • 3) Shape Dividers: video-walkthrough-item-3
  • 4) Bulk Editing: video-walkthrough-item-4

click video walkthrough
Reuse Column 1
Remove Column 3
Once you’ve completed the first column, you can open the row settings and remove the third column.
click video walkthrough
Clone Column 1 & Place at Bottom
Clone the first column (containing the Blurb Modules) and place the duplicate column at the bottom.
click video walkthrough
click video walkthrough
Change Back Column Structure
Change back the column structure to the one that was selected at the beginning of this tutorial.
click video walkthrough
Change All Column 3 Blurb Module Content
Change the Blurb Module title of each duplicate in column 3.
click video walkthrough
Change All Column 3 Blurb Module CSS IDs
Along with the CSS IDs.

  • 5) Layout Library: video-walkthrough-item-5
  • 6) Transforms: video-walkthrough-item-6
  • 7) Hover States: video-walkthrough-item-7
  • 8) Find & Replace: video-walkthrough-item-8

click video walkthrough
Add Text Module to Column 2
Leave Content Box Empty
Time to start adding the different video previews! There are two ways to approach it; using a Video Module or a Text Module. The Video Module requires visitors to press play. Using a Text Module with a video background, on the other hand, plays the video automatically but without sound. For this tutorial, we’ll use a Text Module but feel free to use a Video Module instead. Make sure the Text Module content box remains empty.
click video walkthrough
Video Background
Go to the background settings and upload a video of your choice.

  • Pause Video While Not In View: Yes

click video walkthrough
Sizing
Move on to the design tab and add ‘100%’ to the width.

  • Width: 100%

click video walkthrough
Spacing
Next, we’re going to allow the video background to show through by adding some custom top and bottom padding values across different screen sizes. Note: the values you add need to be adjusted to the dimension set of your video.

  • Top Padding: 15vw (Desktop), 24vw (Tablet), 26vw (Phone)
  • Bottom Padding: 15vw (Desktop), 24vw (Tablet), 26vw (Phone)

click video walkthrough
Border
Continue by adding ’10px’ to each one of the corners.
click video walkthrough
Box Shadow
Along with a subtle box shadow.

  • Box Shadow Blur Strength: 30px
  • Box Shadow Spread Strength: -5px
  • Shadow Color: rgba(0,0,0,0.11)

click video walkthrough
CSS ID
Last but not least, add a CSS ID.

  • CSS ID: video-walkthrough-1

click video walkthrough
Clone Text Module 7 Times
Once you’ve finished the Text Module, you can clone it seven times (one for each Blurb Module).
click video walkthrough
Change All Duplicate Text Module Video Backgrounds
Upload a different video background for each one of the duplicates.
click video walkthrough
Change All Duplicate Text Module CSS IDs & Add CSS Class to All Duplicate Text Modules
Change the CSS IDs too. Make sure you connect each Text Module to the right Blurb Module by using the same number at the end of the CSS ID. We’re also hiding each Text Module, besides the original Text Module, using a CSS class.

  • Text Module 1: video-walkthrough-1
  • Text Module 2: video-walkthrough-2
  • Text Module 3: video-walkthrough-3
  • Text Module 4: video-walkthrough-4
  • Text Module 5: video-walkthrough-5
  • Text Module 6: video-walkthrough-6
  • Text Module 7: video-walkthrough-7
  • Text Module 8: video-walkthrough-8
  • CSS Class: video-not-first

click video walkthrough
Add Code Module #1 to Column 1
Once you’ve completed the second row, it’s time to start adding the code. To make the click function work, we’ll be using some CSS and JQuery code. We’ll place the code in two separate Code Modules. Start by adding the first Code Module to column 1.
click video walkthrough
Insert Page CSS Code
Add the following lines of CSS code:

<style>
.video-not-first {
display: none;
}
.video-item-cursor {
cursor: pointer;
}

@media all and (max-width: 980px) {
.item-responsive-grid {
display: grid;
grid-template-columns: 50% 50%;
grid-column-gap: 2vw;
}
}
.video-walkthrough-active {
background-color:#fff;
margin-right:-0.5vw;
margin-left:-0.5vw;
box-shadow:0 10px 70px 0 rgba(103,151,255,.22),0 15px 105px 0 rgba(103,151,255,.22) !important;
}

.video-walkthrough-active .et-pb-icon{
color: #b0c8ff !important;
}
</style>

click video walkthrough
Add Code Module #2 to Column 3
Continue by adding another Code Module to the third column.
click video walkthrough
Insert Click Function JQuery Code
Enter the following lines of JQuery code:

<script>
jQuery(function($){

$(‘[id*=”video-walkthrough-item”]’).click(function() {
var selector1 = $(this).attr(‘id’).replace(‘-item’, ”);
var $video = $(‘#’ + selector1);

$video.show().siblings().hide();

$(‘[id*=”video-walkthrough-item”]’).removeClass(“video-walkthrough-active”);
$(this).addClass(‘video-walkthrough-active’);

});

});
</script>

Once you’ve gone through this step, you can save your page and exit the Visual Builder!
click video walkthrough
Preview
Now that we’ve gone through all the steps, let’s take a final look at the outcome across different screen sizes.
Desktop
click video walkthrough
Mobile
click video walkthrough
Final Thoughts
In this post, we’ve shown you how to recreate Elegant Themes’ click video walkthrough with Divi. We’ve provided you with the JSON download for free as well! Feel free to use this design for any kind of website you create. It’s a great way to showcase videos and grab your visitors’ attention. If you have any questions or suggestions, feel free to leave a comment in the comment section below!
If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.