The free Copywriter Layout Pack, which is part of our ongoing Divi Design initiative, has illustrations included. These illustrations are part of the entire look and feel of the website that has an orange color as its theme accent color. However, that doesn’t mean this color has to determine the color palette you choose for your website. Of course, you can already change this color throughout your website. But when it comes down to the illustrations, we want them to match with the new color palette as well. Luckily, there are two easy ways that allow you to do exactly that. And in this blog post, we’ll be demonstrating both of them.
How to Change The Colors of Divi’s Copywriter Layout Pack Illustrations
Subscribe To Our Youtube Channel
Option 1: Divi’s New Hue Filter Option
The first option is one that will allow you to make changes really quick, without having to use anything other than the Divi Builder. We’re talking about the hue filter options that allows you to make color adjustments to any image you upload or use on a website. However, by using the hue filter option, your choice of color is limited and will affect all of the colors being used in the illustrations, instead of the accent color only. It is the easiest and fastest way to modify the colors of your illustrations without having to use an external program.
Step 1: Open Page with Visual Builder
The first thing you’ll need to do is open your page that contains the illustrations with the Visual Builder.
Step 2: Open Image Module of Illustration
Then, scroll down and open the Image Module of one of the illustrations.
Step 3: Change the Hue to Your Needs
Move on to the Design tab, open the Filter subcategory and pick a color of choice by playing around with the Hue option.
Step 4: Apply Hue to all The Illustrations on Your Website
Once you’ve chosen a color with the Hue option, go ahead and use that same hue setting on all of your illustrations. That’s it.
Option 2: Global Accent Color in Illustrator
Another thing you could do to change the color of the Copywriter Layout Pack illustrations, is modifying the illustrations directly within the source. Thoughtfully, the design team has provided the Copywriter Layout Pack with the illustration file that contains all of the illustrations that are being used. We can simply change the main color to one we want to match with the entire website. Let’s go through the different steps.
Step 1: Go to the Copywriter Layout Pack Blog Post
Start by going to the following blog post where you can download the Copywriter Layout Pack and the images that are included.
Step 2: Scroll Down & Download the Images Folder
Then, scroll down the blog post until you come across the following button and click on it to start the download.
Step 3: Unzip the Zipped Folder
You’ll get a zipped folder within your downloads folder. Go ahead and unzip that folder right away.
Step 4: Make Sure You Have Illustrator Installed on Your Computer
Next, make sure you have Adobe Illustrator installed on your computer. To color change to your illustrations, you will need it.
Step 5: Open the Illustrator File Included in The Images Folder
Now, go to the unzipped folder and locate your illustrator file by going to divi-copywriter-layout-pack-images > illustrations > source.
Step 6: Enable Swatches in Window
Once you’ve opened the illustrator file, the first thing you will need to do is make the swatches show up by going to Window > Enabling Swatches.
Step 7: Locate Global Accent Color
In the Swatches tab that appears on your screen, you can see orange accent color marked in the print screen below. This is your global accent color so go ahead and click on it.
Step 8: Change Global Accent Color
Then, you can play around with the options and choose a color of choice. Make sure you enable the ‘Preview’ option as well so you can see changes happen in real time.
Step 9: Export for Screens
Once you’ve picked a different color for your illustrations, you can export all illustrations at once by going to File > Export > Export for Screens.
Before you click on the export button, make sure that the format of your images is set to ‘PNG’ so the transparency will remain.
Step 10: Locate the Folder with Your New Illustrations
Once you’ve exported the illustrations, you’ll notice a new folder that contains all of your modified illustrations.
Step 11: Replace Images on Your Website
The last step is replacing all of your illustrations on your Divi website and you’re done!
Final Thoughts
Changing the color palette of the website you’ve created with the Copywriter Layout Pack means having to change the colors of the illustrations as well. In this tutorial, we’ve shown you two quick ways to do that. If you have any questions or suggestions; make sure you leave a comment in the comment section below!
Featured Image by Rvector / shutterstock.com
