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!

Preview

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

Desktop

download-9-free-shaped-image-overlays-for-divi Download 9 FREE Shaped Image Overlays for Divi

Phone

download-9-free-shaped-image-overlays-for-divi-1 Download 9 FREE Shaped Image Overlays for Divi

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!

Approach

  • 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 Download 9 FREE Shaped Image Overlays for Divi

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 Download 9 FREE Shaped Image Overlays for Divi

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 Download 9 FREE Shaped Image Overlays for Divi

download-9-free-shaped-image-overlays-for-divi-5 Download 9 FREE Shaped Image Overlays for Divi

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 Download 9 FREE Shaped Image Overlays for Divi

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 Download 9 FREE Shaped Image Overlays for Divi

download-9-free-shaped-image-overlays-for-divi-8 Download 9 FREE Shaped Image Overlays for Divi

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 Download 9 FREE Shaped Image Overlays for Divi

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 Download 9 FREE Shaped Image Overlays for Divi

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 Download 9 FREE Shaped Image Overlays for Divi

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 Download 9 FREE Shaped Image Overlays for Divi

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 Download 9 FREE Shaped Image Overlays for Divi

Sizing

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 Download 9 FREE Shaped Image Overlays for Divi

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 Download 9 FREE Shaped Image Overlays for Divi

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 Download 9 FREE Shaped Image Overlays for Divi

Spacing

Add some custom top margin as well.

  • Top Margin: 100px

download-9-free-shaped-image-overlays-for-divi-17 Download 9 FREE Shaped Image Overlays for Divi

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 Download 9 FREE Shaped Image Overlays for Divi

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 Download 9 FREE Shaped Image Overlays for Divi

Sizing

Change the width in the sizing settings as well.

  • Width: 63%

download-9-free-shaped-image-overlays-for-divi-20 Download 9 FREE Shaped Image Overlays for Divi

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 Download 9 FREE Shaped Image Overlays for Divi

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 Download 9 FREE Shaped Image Overlays for Divi

  • 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 Download 9 FREE Shaped Image Overlays for Divi

Spacing

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 Download 9 FREE Shaped Image Overlays for Divi

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 Download 9 FREE Shaped Image Overlays for Divi

Preview

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

Desktop

download-9-free-shaped-image-overlays-for-divi Download 9 FREE Shaped Image Overlays for Divi

Phone

download-9-free-shaped-image-overlays-for-divi-1 Download 9 FREE Shaped Image Overlays for Divi

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.

SEO News and More

SEO News and More