Applying duotone filters to change color effects

In this tutorial, we will explore using the duotone filter to create different effects on your images. We will learn how to apply and clear duotone filters to images, create a custom duotone filter, add duotone to videos, and lastly, add duotone filters globally in the Site Editor.

Learning outcomes

1. Applying and clearing a duotone filter to an image or video.
2. Using shadows or highlights to create a custom duotone filter.
3. Applying duotone filters globally in the Site Editor.

Comprehension questions

1. Why do duotone filters work better on high-contrast images?
2. What are the benefits of using a duotone filter on your site?

Transcript

Introduction

Hi, and welcome to Learn WordPress. Let me show you how to use this really cool feature called duotone. The learning outcomes for today are applying and clearing duotone filters to images, creating a custom duotone filter, adding duotone to videos, and lastly adding duotone filters globally in the Site Editor. 

Defining duotone                                 

Duotone means combining two colors as a filter, then applying applying it to an image or video background. Depending on your needs, duotone can make your images pop and it allows you to further your branding through colors and create even more striking designs. Let’s look at a few examples. With duotone, you can completely change the look and feel of an image. In the next example, we will contrast two different types of duotone filters that I have added to the image at the top. Did you know you can also add the duotone filter to the Post Featured Image block to meet your design requirements? Duotone can be anything from a simple grayscale to a mixture of any two colors. The duotone effect works based on high-contrast images, and don’t be worried, images and videos in your media library will remain unchanged so the image or video is never modified in your library. 

Applying duotone to images

To add a duotone filter, select an image, and then in the block toolbar, click on the Apply duotone filter icon. You will see a few duotone filters that come with your theme. You can easily just click on one of them and it will make the change for you. If you want to change it, click on the image again, select Duotone, and apply a new filter. If you would like to undo the changes you’ve made to the image, go back to Duotone and click on Clear. You can also click on Shadows or Highlights and select one of the colors from your palette. So let’s go ahead and select a color for our shadows and then a custom color for our highlights. In this case, I’ll go for something more purple. 

Adding duotone to videos

A duotone filter can be added to a video in the Cover block. So let’s go ahead and add a Cover block and select a video from our Media Library. Once inserted, I will make sure I select the Cover block and then we can follow the same process as before. Click on Apply duotone filter and then select one of the duotone filters that meet your design needs. 

Adding duotone globally

The last aspect of using duotone we want to discuss is setting duotone filters globally in the Site Editor. So when we make our way to the Site Editor and click on Styles, we can open up the Style Book where we can edit the style of individual blocks on your site. So let’s open up our Style Book and make our way to Media. Here we can add duotone filters to images and the Cover block. So when I select the Image block, I can add a duotone filter that’s provided by my theme and some themes provide more options than others. Once I select the duotone filter, you will notice that it also applies to the Gallery block. Next, we’ll make our way to the Cover block and add the same filter. 

Now all galleries, Image blocks, and Cover blocks will change accordingly on my site. But let’s see this in action on the front end. So as you can see on the front end, the duotone filter has been added to the Cover block, galleries, and individual images. The last important thing to highlight is that when you add an Image, Gallery, or Cover block to your site now, it will automatically add the filter. So let’s for example add an Image block and select an image from our Media Library. Once we select the image, the filter automatically applies. Next, we can add a Cover block, select an image from our Media Library, and once again, the filter has been applied. We can change the opacity of the Cover block to make it lighter or darker. 

Conclusion 

I trust you will find the right duotone filter for your website, and visit Learn WordPress for more tutorials and training material.