Download 9 FREE Shaped Image Overlays for Divi

January 9, 2019

The way you show images on your website can really make a difference in the overall design you’re creating. With Divi’s built-in options, you can already apply various design settings that’ll help you display images in a stunning way, think of borders and box shadows, for instance. But if you’re looking to give your images a more unique shape, this post will help you out. We’re going to share 9 FREE shaped image overlays that you can download and use on any website you create. After sharing these shaped image overlays, we’re also going to show you how to take advantage of them while building a website with Divi. We hope this tutorial will inspire you to create your own kind of shaped image overlays as well.

Let’s get to it!


Before we dive into the tutorial and download, let’s take a quick look at the outcome you can expect across different screen sizes.


download-9-free-shaped-image-overlays-for-divi Theme Builder Layout


download-9-free-shaped-image-overlays-for-divi-1 Theme Builder Layout

Download The Shaped Image Overlays for FREE

To lay your hands on the shaped image overlays, you will first need to download them 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 and Friday! 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.

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


  • The shaped image overlays that you can find in the download folder are ready for use if you’re combining them with a white row and/or section background color
  • If you want to adjust the shaped image overlays according to another background color, you’ll need to export the shaped image overlays in another color using the illustrator file that is included in the download above
  • We’ll show you how to change the shaped image overlay color in the first part of the tutorial (using Adobe Illustrator)
  • Then, we’ll move on to Divi and upload one of the shaped image overlays to an Image Module
  • We’ll also add a background image and gradient background to the Image Module that’ll show through the shaped image overlay

Modifying Shaped Image Overlays to Section Background Color with Adobe Illustrator

Open the Illustrator File in Download Folder

As mentioned in the approach section of this post, if you want to use the image shaped overlays on a white background, you’re ready to go by just using the PNG files that you can find in the download folder. However, if you want to use the shaped image overlays on a different row and/or section background color, you will need to change the color manually using the Adobe Illustrator file that is included in the download folder as well. Changing the color takes little to no time and allows you to use the shaped image overlays on literally any website you build, so let’s go through the steps. First of all, you will need to open the Adobe Illustrator file.

download-9-free-shaped-image-overlays-for-divi-2 Theme Builder Layout

Select Image Shape Overlay of Choice

Once you’ve opened the file, you’ll find 9 different artboards with the shaped image overlays that you are free to use for any kind of purpose. Select the one you want to edit.

download-9-free-shaped-image-overlays-for-divi-3 Theme Builder Layout

Change Color to Match Section Background Color

Continue by changing the color of the shape into the same background color you’re planning on using for your row and/or section.

download-9-free-shaped-image-overlays-for-divi-4 Theme Builder Layout

download-9-free-shaped-image-overlays-for-divi-5 Theme Builder Layout

Select Artboard

Once the color is modified, you can select the entire artboard containing the shaped image overlay.

download-9-free-shaped-image-overlays-for-divi-6 Theme Builder Layout

Save PNG Shaped Image Overlay for Web

And save it as a PNG image file for web by going to File > Export > Save for Web.

download-9-free-shaped-image-overlays-for-divi-7 Theme Builder Layout

download-9-free-shaped-image-overlays-for-divi-8 Theme Builder Layout

Let’s Start Creating!

Add New Section

Time to switch over to Divi and create the outcome! Create a new page or open an existing one and add a new regular section.

download-9-free-shaped-image-overlays-for-divi-9 Theme Builder Layout

Add New Row

Column Structure

Continue by adding a new row to the section using the following column structure:

download-9-free-shaped-image-overlays-for-divi-10 Theme Builder Layout

Add Image Module to Column 1

Upload Shaped Image Overlay

The only module we’ll need in column 1 is an Image Module. This is where all the magic will happen. We’ll start off by uploading the shaped image overlay. You’ll notice that one part of the image is completely transparent. This will allow the background image and gradient background to show through in the upcoming steps.

download-9-free-shaped-image-overlays-for-divi-11 Theme Builder Layout

Gradient Background

Go ahead and add a gradient background of your choice next.

  • Color 1: #aa2bff
  • Color 2: #09f7eb

download-9-free-shaped-image-overlays-for-divi-12 Theme Builder Layout

Background Image

And upload a PNG background image, or just a regular one if you don’t want the gradient background to show through. You can also download the illustrations that we’re using by going to the following post we’ve created on how to change a gradient background on hover.

  • Background Image Size: Cover
  • Background Image Position: Bottom Center
  • Background Image Repeat: No Repeat

download-9-free-shaped-image-overlays-for-divi-13 Theme Builder Layout


Another important step to make this tutorial work is enabling the ‘Force Fullwidth’ option in the sizing settings of the Image Module. This will make sure the gradient background and background image will only show through the transparent area of the shaped image overlay.

  • Force Fullwidth: Yes

download-9-free-shaped-image-overlays-for-divi-14 Theme Builder Layout

Add Title Text Module to Column 2

Add Content

Let’s move on to the second column. Here, the first module we’ll need is a title Text Module. Add some content of choice.

download-9-free-shaped-image-overlays-for-divi-15 Theme Builder Layout

Text Settings

Then, go to the heading text settings and make some changes.

  • Heading 2 Font: Antic Didone
  • Heading 2 Font Weight: Bold
  • Heading 2 Text Size: 45px
  • Heading 2 Letter Spacing: -2px

download-9-free-shaped-image-overlays-for-divi-16 Theme Builder Layout


Add some custom top margin as well.

  • Top Margin: 100px

download-9-free-shaped-image-overlays-for-divi-17 Theme Builder Layout

Add Description Text Module to Column 2

Add Content

The second module we’ll need is a description Text Module. Enter some content of choice.

download-9-free-shaped-image-overlays-for-divi-18 Theme Builder Layout

Text Settings

Then, go to the text settings and change the text orientation of the module.

  • Text Orientation: Justify

download-9-free-shaped-image-overlays-for-divi-19 Theme Builder Layout


Change the width in the sizing settings as well.

  • Width: 63%

download-9-free-shaped-image-overlays-for-divi-20 Theme Builder Layout

Add Button Module to Column 2

Add Copy

The next and last module we’ll need is a Button Module. Enter some content of choice.

download-9-free-shaped-image-overlays-for-divi-21 Theme Builder Layout

Button Settings

Continue by going to the button settings and changing the appearance of the button.

  • Use Custom Styles for Button: Yes
  • Button Text Size: 17px
  • Button Text Color: #ffffff
  • Gradient Color 1: #aa2bff
  • Gradient Color 2: #09f7eb
  • Gradient Direction: 111deg

download-9-free-shaped-image-overlays-for-divi-22 Theme Builder Layout

  • Button Border Width: 0px
  • Button Border Radius: 100px
  • Button Letter Spacing: -2px
  • Font Weight: Ultra Bold
  • Font Style: Uppercase

download-9-free-shaped-image-overlays-for-divi-23 Theme Builder Layout


Add some extra custom padding to the button as well.

  • Top Padding: 10px
  • Bottom Padding: 10px
  • Left Padding: 50px
  • Right Padding: 50px

download-9-free-shaped-image-overlays-for-divi-24 Theme Builder Layout

Box Shadow

Last but not least, complete the design by adding a subtle bow shadow to the button.

  • Box Shadow Blur Strength: 50px
  • Box Shadow Spread Strength: -5px

download-9-free-shaped-image-overlays-for-divi-25 Theme Builder Layout


Now that we’ve gone through all the steps, let’s take a final look at the outcome across different screen sizes.


download-9-free-shaped-image-overlays-for-divi Theme Builder Layout


download-9-free-shaped-image-overlays-for-divi-1 Theme Builder Layout

Final Thoughts

In this post, we’ve shared 9 FREE shaped image overlays for Divi that you can use for any kind of website you’re building. We hope this tutorial inspired you to create your own unique shaped image overlays that you can constantly reuse. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

By Donjete Vuniqi

Donjetë is a freelance content writer who is fascinated by content marketing, design, and technology. She helps clients bring the right content to the right people. If you’re looking for someone to help you tell your company’s story, she’ll know how to handle it.

Share this article:

eHost-square-ad Theme Builder Layout

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:


Related Posts

how-to-create-a-404-page-template-with-divis-theme-builder Theme Builder Layout

How to Create a 404 Page Template with Divi’s Theme Builder

Divi’s Theme Builder and the built-in design options have opened a ton of new doors. More than ever before, you’re now able to customize every single page your customers land on. This includes setting up a 404 page. In this tutorial, we’ll show you how to create a...

how-to-land-your-next-client-with-a-well-designed-proposal Theme Builder Layout

How To Land Your Next Client With a Well Designed Proposal

Closing a new project usually depends on how you present yourself and your work. One of the most influential moments with a new prospect is when they receive your proposal. It can be a make-or-break moment. When your proposal creates a positive impression with the...

Get ALL Your SEO, WordPress & Divi News

Join Our Daily Roundup

SEO News and More

SEO News and More

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.