Blending Modes 101: Discover the new feature in Newspaper Theme

With the arrival of Newspaper 10, so comes the arrival of a new feature straight into the Flex Block’s Settings panel. Get the magic of Photoshop layer blending modes straight into your tagDiv Composer, with no editing skills needed. The new “Blending Modes” uses advanced CSS to give you a spark of magic on every page made. Everything is done on the front-end of your browser! Turn your simple images into a wow-factor for your audience with this new feature.

Develop your own aesthetic with the new Blending Modes

How do the Blending Modes work?

If you add a background color behind an image and then use a new CSS property, you get a mix between the color and the image. Choose the type of effect you need, whether it’s color, screen, multiply, overlay, hue, lighten, darken, hard-light, saturation, color-burn, color-dodge, difference, exclusion, or luminosity.

The result is composed of the value between the foreground and backdrop. It is an overlap between each pixel of the image and the color chosen. The tagDiv team has added this code straight into the backend of your Newspaper Theme, so you don’t have to do it yourself.

How do you use the new Blending Modes?

Open our front-end page builder, the tagDiv Composer, on an existing or new page. Drag and drop “Flex Block 1” and then navigate to the “Style” settings panel. Scroll down to the “Image Effects / Blend Modes” section. This is where the fun begins.

The first line allows you to specify a color or gradient for the backdrop, and then picking one of the blend modes from the dropdown menu gives your block a whole new look! Moreover, you get three new settings that alter the appearance of the photos the brightness, contrast, and saturation sliders. If you drag one of the sliders to the left or right, you can see how they affect the photo. Should you want to go back to normal, all you have to do is drag the slider back to the numerical value of “1”, and choose “Off” from the blend modes dropdown menu.

Discover what each Blending Mode does!

The second part of this section refers to the image effects on hover. However, this is only available for the desktop version of your website. It improves your overall page speed. So go ahead and test it out!

Reasons behind using Blend Modes

How does this all benefit you? Let’s answer that question:

  • If you have multiple images of varying colors and contrasts, you can add a Blend Mode effect to them and match the rest of your website’s hues.
  • With the rise of Gradients as a web design trend, add more color to each image by creating a gradient overlay.
  • If you have text overlapping any images, you can make it easily readable by separating it from its background with the new blend modes.
  • No need to spend hours editing your Featured Images in Photoshop, you can now do it all on the front-end of your website! No Photoshop knowledge required.

Still not convinced? Then take a look at how easy it was to obtain this beautiful result by watching the following video.

Test, experiment, and have fun!

Each blend mode modifies the overall result differently. Test all of them to find the perfect result. Keep in mind that the color or gradient you choose also alters the way a blend mode works. So, modify the colors for each blend mode to discover how it changes the value of every pixel. You can also use the sliders to get the exact photo you want.

Moreover, the new blend mode settings appear not only on Flex Blocks, but also on Flex Grids, Featured Article Images, Category Background Images, Inline Single Image, and Single Images. Create a beautiful page or template with Newspaper Theme within just a few clicks! Become a photo editing Master in no time, all on the front-end of your website.

Have you experimented with the new blend modes? Show us your results in the comment box below!

Subscribe For More!

If you want to be the first to find out more about our themes
please subscribe to our newsletter

Alexandra I.
Alexandra I.
As an artist and designer, I aim to create something brilliant daily. Eager to learn more, I use my free time to get better at what interests me, whether it's photography, painting, or even something entirely new.

Do you need any help with the Newspaper or Newsmag WordPress Themes? Please send us all the necessary details via email or create a new topic on our online forum. We’re always happy to assist you.

2 COMMENTS

    • Hi,

      Thank you for reaching us! Yes, please note that you have to edit your page with TD Composer and add the Rev Slider element and add it where you want. Unfortunately, this account is not assigned to our support forum and that’s why, if you need more technical assistance, you have to open a new support ticket at our support forum from here -> https://forum.tagdiv.com/forum/newspaper/ where you need to provide more details about your problem and we are ready to help you.

      All the best!

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Check out our latest

Articles