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.
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.
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!
is there a way a revslider element can be at underneath wording and searchbar as on my website hero section at frontpage top
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!