5 Awesome Ways to Add Images & Videos to Your Screen Mockups with Divi

You come across screen mockups on all kinds of websites, from big ones to small ones. They help showcase previous work, services, and the like. They also contribute to the entire look and feel of your website and emphasize that your company (or your client’s company) is focused on technology. In this post, we’re going to show you 5 awesome ways to add images and videos to your screen mockups with Divi and its built-in options. This post contains two parts; the first part is about customizing your screen mockup with Photoshop. You can download the mockup we’ll be using in this post for free. And in the second part, we’ll show you how to take your mockups to the next level with Divi.

Result

Before we dive into the tutorial, let’s take a look at the different examples we’ll show you how to recreate, step by step.

Example #1

Example #2

Example #3

Example #4

Example #5

5 Awesome Ways to Add Images & Videos to Your Screen Mockups with Divi

Subscribe To Our Youtube Channel

Download This Tutorial’s Free Screen Mockup

To help you bring this tutorial to a good end, we’re going to provide you with the mockup that is being used in this tutorial for free. Actually, we’re providing you with two device mockups and several high-quality images since the resource we’re (re)sharing is actually from our Design Agency Layout Pack. When you download the image resources below, you can unzip the folder and locate the file called MB-purefront.psd to follow along.

Download the Free Screen Mockup

Modify Mockup File in Photoshop

The mockup file we’ll be modifying will only need editing once. Afterwards, you can use the same file to obtain all of the examples in this post using nothing else than Divi and Divi’s built-in options.

Right Click + Merge Device Folder

Once you open the MB-purefont.psd file, the first thing you will need to do is merge the Device folder by right-clicking on it and selecting ‘Merge Group’.

Control/Command + Click on Screen Layer

Once you’ve done that, you can press control or command and click on the screen layer. By doing this, you will select the screen part of your mockup.

Click on Device Layer + Add Layer Mask

While having the screen selected, click on the Device layer and add a layer mask to it.

Control/Command+ i to Inverse

Immediately after adding the mask, press control or command and ‘i’ to invert.

Hide Screen Layer

Next, hide the screen layer. At this point, the screen layer will be removed from your mockup. The following thing we’ll need to do is make our screen part transparent.

Control/Command + Click on Screen Layer

To make that happen, press control or command and click on your screen layer again. The screen area, will again, be selected.

Click on Background Layer + Add Layer Mask

Then, while having the screen layer selected, click on the Background layer and add a mask to it.

Control/Command + i to Inverse

We’ll need to invert the background layer as well so go ahead and press control or command and ‘i’. This will allow us to have a transparent screen while having the surrounding background remain white. The reason why we’re not making the whole image transparent is to make sure the image or video we’ll add within the Divi builder doesn’t appear anywhere else but on the screen.

Crop Image

The last thing we’ll need to do is crop the image. Without cutting off anything from the mockup itself, try to reduce the white background as much as possible. This will help us make sure that the image or video we’ll be adding within the Divi builder doesn’t get lost in the white background.

Save for Web

Now that the image is done, you can save it for web by going to Export > Save for Web. Make sure you’re exporting a PNG image so the transparent background will remain.

General Row Settings for the First Four Examples

To make this tutorial as easy as possible, we’re going to show you the row settings for each one of the first four examples in advance. The fifth one, however, will need other settings. We’ll handle these different settings once we come across the fifth example in this post.

Column Structure

For each one of the first four examples, we’re using a row with one column only.

Background Color

We’re using a white background for each one of the rows as well. That’s because we’re matching it with the background color we’ve chosen for the mockup while making modifications to it in Photoshop. If you want to use another background color, you’ll have to use another background color within Photoshop as well.

Sizing

We’re also going to apply some custom padding to our row. The reason why we’re adding the custom padding to the row and not the Image Module is to make sure the background we add to the mockup doesn’t get affected. The custom padding we’ll be using is the following one:

• Top Padding: 0px
• Right Padding: 200px (Desktop), 20px (Tablet), 10px (Phone)
• Bottom Padding:  0px
• Left Padding: 200px (Desktop), 20px (Tablet), 10px (Phone)

Recreate Example #1

The first example we’ll show you how to recreate allows you to add any type of image to your mockup and modify its colors. You will only need the modified mockup once. From that point on, you can reuse the mockup as many times as you need to add different images or screenshots to it.

Add an Image Module & Upload Mockup

Start by adding an Image Module to your one-column row and upload your mockup image.

Add Background Image

Then, open the Background subcategory within the Content tab and add a background image with the following settings:

• Background Image Size: Cover
• Background Image Position: Center
• Background Image Repeat: No Repeat
• Background Image Blend: Normal

Add Gradient Background Overlay if Needed

You can modify the colors of the image by adding a gradient background, for instance. The gradient background in the image below has the following settings:

• First Color: #0C71C3
• Second Color: #E09900
• Gradient Direction: 180deg
• Start Position: 19%
• End Position: 61%

To add the gradient background to your background image, select ‘Multiply’ as your Background Image Blend.

Use  Filters if Needed

Another option you have is applying filters to your image by going to the Filters subcategory of the Design tab. For the example below, we’ve made the following modifications:

• Saturation: 123%
• Contrast: 121%

Recreate Example #2

The second example we’ll show you how to recreate involves a column gradient background and a parallax background image. With the new blend modes that Divi offers, we’re able to combine both the image and the gradient background to create stunning results.

Add Gradient Background to Column 1

Start by adding the following gradient background to the column of your row:

• First Color: #EDF000
• Second Color: #4D0184
• Column Gradient Type: Linear
• Column Gradient Direction: 180deg
• Column Start Position: 0%
• Column End Position: 50%

Add an Image Module & Upload Mockup

Then, add an Image Module and select the mockup once again.

Add Background Image & Use CSS Parallax Method

Next, open the Background Subcategory, upload the background image, enable the ‘Use Parallax Effect’ option and select ‘CSS’ as the Parallax Method.

Add Blend Mode to Image Module

The last thing you’ll have to do is change the Blend Mode of the Filters subcategory into ‘Hard Light’.

Recreate Example #3

For the next example, we’re simply going to add a video to the mockup instead of an image. You can add all kinds of videos to the mockup, a screen capture being one of them.

Add an Image Module & Upload Mockup

Again, start by adding an Image Module and selecting the mockup we’ve created with Photoshop.

Add Background Video

Then, add a video to the Background subcategory of your Image Module and you’re done!

Recreate Example #4

The next example we’ll be recreating consists of a video background in combination with an image background that changes the look and feel of your mockup.

Add Background Image to Column 1

Start by opening your row settings, add a background image to the Background subcategory and use the following settings for it:

• Column Background Image Size: Cover
• Column Background Image Position: Center
• Column Background Image Repeat: Repeat
• Column Background Image Blend: Normal

Add an Image Module & Upload Mockup

Then, add an Image Module with the mockup we’ve created in the Photoshop part of this post.

Add Background Video

Next, add a video background to the Image Module.

Add Blend Mode to Image Module

And lastly, enable the ‘Lighten’ Blend Mode within the Filters subcategory of the Image Module.

Recreate Example #5

The last example we’ll be recreating allows you to add a background image that takes up the whole width of the screen. The displayed mockup has a video background as well which blends very nicely with the image background that is being used.

Row Settings

Column Structure

The row for the last example has slightly different settings. Start by choosing a row with one column.

Column 1 Background Image

Then, add a background image to the column with the following settings:

• Column Background Image Size: Cover
• Column Background Image Position: Center
• Column Background Image Repeat: Repeat
• Column Background Image Blend: Normal

Sizing

Next, open the Sizing subcategory of your row and apply the following changes:

• Make This Row Fullwidth: Yes
• Use Custom Gutter Width: Yes
• Gutter Width: 0

Spacing

There’s a need for some custom padding and column custom padding as well:

• Top, Right, Bottom & Left Padding: 0px
• Column Top Padding: 70px
• Column Right Padding: 300px (Desktop), 200px (Tablet), 100px (Phone)
• Column Bottom Padding: 70px
• Column Left Padding: 300px (Desktop), 200px (Tablet), 100px (Phone)

Add an Image Module & Upload Mockup

Once you’re done with the row settings, you can add an Image Module and select the mockup we’ve created in the Photoshop part of this post.

Add Background Video

Then, add a video to the Background subcategory of the Image Module.

Add Blend Mode to Image Module

Last but not least, select ‘Multiply’ as the Blend mode within the Filters subcategory of the Design tab and you’re done!

Final Thoughts

In this post, we’ve shown you 5 awesome ways to add images and videos to your screen mockups. We started off by showing you how to make some modifications in Photoshop to a mockup file which you can download for free and continued by showing you how you can modify that mockup file within the Divi builder to show all the image or video content you want to share with your visitors. If you have any questions or suggestions; make sure you leave a comment in the comment section below!