How to Emphasize Your Image’s Colors Using Patterns (Download 7 Free Patterns!)

Last Updated on September 22, 2022 by 7 Comments

How to Emphasize Your Image’s Colors Using Patterns (Download 7 Free Patterns!)
Blog / Divi Resources / How to Emphasize Your Image’s Colors Using Patterns (Download 7 Free Patterns!)
Play Button

When you’re including images on your website, you want them to draw attention at first sight. One of the things that can bring your image to life is using patterns that emphasize the colors that are being used within the image itself. Not only will it emphasize your image’s colors, it will also take your design up a notch.

Further down this post, you’ll be able to download 7 different patterns for free and use them on any of your designs without restrictions.

Let’s get to it!

Preview

patterns

Download This Tutorial’s Files

To lay your hands on the free image files, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our newsletter 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.

How to Emphasize Your Image’s Colors Using Patterns (Download 7 Free Patterns!)

Subscribe To Our Youtube Channel

Approach

  • The pattern image files that you can find in the downloaded folder contain transparent patterns and a white background
  • We’ll choose two colors from our image & apply them to our image’s gradient background (the gradient background show up through the patterns)
  • We’ll start off by going through the general steps of the design
  • Afterwards, we’ll play around with the product image’s & pattern image’s custom margin to change the pattern placement (top right, bottom right & top left)

General Steps

Add a New Section

Background Color

Start by adding a new section and using ‘#ffffff’ as its background color.

patterns

Custom Padding

We want to create some space at the top and bottom of our section. That’s why we’ll add ‘150px’ to the top and bottom padding options within the Spacing subcategory.

patterns

Add a New Row to Section

Column Structure

Once you’ve applied the previous steps to your section, go ahead and add a row with the following column structure:

patterns

Add Pattern Image Module to Column 1

Gradient Background

Now you can start adding the various modules. We’ll start with column 1 by adding an Image Module. Upload whichever one of the downloaded patterns you want to use. Then, choose the two colors from your product image that you want to use within your pattern as well. Once you do, open the Background subcategory of your Image Module and use these two colors to create a gradient background:

  • Color 1: #ebe2e3
  • Color 2: #94bce0

patterns

Sizing

Move on to the Design tab of this Image Module and use ‘60%’ for the width.

patterns

Add Product Image Module to Column 1

Image Alignment

Right below the pattern Image Module, add another Image Module for your product image. The first thing you’ll need to do, after uploading your image, is disabling the ‘Always Center Image on Mobile’ option within the Alignment subcategory.

patterns

Sizing

Open the Sizing subcategory next and use ‘80%’ for the Width.

patterns

Box Shadow

Lastly, enable the first box shadow option without modifying its default settings.

patterns

Add Title Text Module to Column 2

Background Color

We have all the modules we need in the first column so let’s move on to the second. There, the first thing we’ll need is a title Text Module with ‘#94bce0’ as its background color.

patterns

Text Settings

Go to the Design tab and apply the following text settings to this Text Module next:

  • Text Font Weight: Ultra Bold
  • Text Size: 52px
  • Text Color: #ffffff
  • Text Line Height: 1em
  • Text Orientation: Center

patterns

Sizing

Continue by opening the Sizing subcategory and applying the following settings to it:

  • Width: 83%
  • Module Alignment: Left

patterns

Custom Padding

To create some extra space at the top and bottom, we’ll also apply the following custom padding:

  • Top: 30px
  • Bottom: 30px

patterns

Border

Lastly, we’ll create rounded corners for the top left and top right by adding ’20px’.

patterns

Add Description Text Module to Column 2

Text Settings

Right below the title Text Module, go ahead and add a description Text Module using the following text settings:

  • Text Size: 17px
  • Text Color: #6b8ea5

patterns

Add Button Module to Column 2

Button Settings

The last module in this column is a Button Module containing the following button settings:

  • Use Custom Styles for Button: Yes
  • Button Text Color: #6b8ea5
  • Button Background Color: #ebe2e3
  • Button Border Width: 0px
  • Font Weight: Bold
  • Font Style: Uppercase
  • Show Button Icon: Yes
  • Button Icon Placement: Left
  • Only Show Icon on Hover for Button: No

patterns

patterns

Custom Padding

We’ll create some space on the left and right by adding the following custom padding as well:

  • Right: 30px
  • Left: 50px

patterns

Temporary Result

Up until this point, we’ve reached the following result:

patterns

Now, depending on where you want your pattern to show up:

  • Top Right
  • Bottom Right
  • Top Left

You can apply different custom margin values to both the pattern image and product image. In the next part of this post, we’ll go through all three possibilities and how to set them up.

Top Right Pattern Position

Pattern Image Module Custom Margin

If you want your image to show up on the top right, add the following custom margin to your pattern Image Module:

  • Left Margin: 250px (Desktop, Tablet & Phone)

patterns

Product Image Module Custom Margin

Then, open the product Image Module and apply the following custom margin to it:

  • Top Margin: -240px (Desktop), -220px (Tablet), -100px (Phone)

patterns

Bottom Right Pattern Position

Pattern Image Module Custom Margin

To make the pattern Image Module appear on the bottom right, open the pattern Image Module and apply the following custom margin to it:

  • Top Margin: 200px (Desktop), 0px (Tablet & Phone)
  • Left Margin: 330px (Desktop & Tablet), 200px (Phone)

patterns

Product Image Module Custom Margin

Open the product Image Module next, and add the following custom margin values:

  • Top: -450px (Desktop), -400px (Tablet), -300px (Phone)

patterns

Top Left Pattern Position

Pattern Image Module Custom Margin

Now, the last pattern position needs the following custom margin:

  • Left Margin: -100px (Desktop, Tablet & Phone)

patterns

Product Image Module Custom Margin

Lastly, open the product Image Module and use the following custom margin:

  • Top Margin: -250px (Desktop), -230px (Tablet), -150px (Phone)

patterns

Preview

Now that we’ve gone through all the steps, let’s take a final look at the result.

patterns

Final Thoughts

Highlighting your images with patterns can really help you enhance the overall look and feel of your design. In this post, we’ve shared 7 different patterns which you download for free and use without restrictions. We’ve also shown you how to add these to your design using Divi’s built-in options. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

New Divi Starter Site for Spas (Quick Install)

New Divi Starter Site for Spas (Quick Install)

Posted on July 16, 2024 in Divi Resources

Divi empowers you to build the best websites possible, and now, Divi Quick Sites takes website creation to a whole new level! This revolutionary tool lets anyone, regardless of skill level, generate a complete website in under two minutes! Divi Quick Sites provides everything you need to launch...

View Full Post
How To Use Divi’s New Starter Sites (Guide)

How To Use Divi’s New Starter Sites (Guide)

Posted on July 15, 2024 in Divi Resources

Creating a website with Divi is now easier and faster than ever before. With the release of Divi Quick Sites, users can automatically generate a complete website in 2 minutes. To do this, users have two options: generate their site with Divi AI or with Divi Starter Sites. In this post, we are going...

View Full Post
New Divi Starter Site for Non Profits (Quick Install)

New Divi Starter Site for Non Profits (Quick Install)

Posted on July 12, 2024 in Divi Resources

Divi empowers you to build the best websites possible, and now, Divi Quick Sites takes website creation to a whole new level! This revolutionary tool lets anyone, regardless of skill level, generate a complete website in under two minutes! Divi Quick Sites provides everything you need to launch...

View Full Post

7 Comments

  1. This is a great tutorial Donjete. I got the concept down… now to experiment with variations. And thanks for using the visual builder. I’m not so good with it but your expert presentation has helped me become more comfortable using it.

  2. great tips (Y) help thanks

  3. Great job! how appear in movil devices?

  4. Ohhhh, I am really loving this tutorial Donjete! I’m not fond of creating most of my graphic effects outside of WordPress because if I’m unhappy, it’s this back and forth tweaking thing that just gobbles up too much time. This method just makes complete sense! The design options are endless… thanks so much!

  5. ONLY because you are awesome and included the layout packs into Divi, how about including these and those cool motion images from an earlier post into the modules? Instead of just selecting Icon, we can select Divi Background or whatever you call it. You can create a vector sprite to keep file size to near nothing.

    Anyway, thanks for the continued effort!!

  6. Is there a particular reason to doing this this way, as opposed to just adding the pattern to the image when designing it?

    • It’s a valid comment Christina but doing it this way you will be able to control different pattern background elements on different viewports for one thing – very useful. Also you can change your entire look and feel just by changing a single background image if you wanted to. No need to re-edit in the background to all your images. Separating out the elements gives you more control ultimately. On the face of it it’s seems basic but this is actually a very useful feature with many design possibilities.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today