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

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 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.

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!

The post How to Emphasize Your Image’s Colors Using Patterns (Download 7 Free Patterns!) appeared first on Elegant Themes Blog.

Comments are closed.