Skip to content

How to Add WordPress Background Text Blend Mode?

Key Takeaways

  • Nexter Blocks Advanced Typography block adds a background blend mode directly in the WordPress block editor, with multiple blend variation options.
  • Advanced Typography uses Normal for a single text element and Multiple for separate text items in a repeater, with Background Blend Mode in each text repeater item.
  • Background blend mode works after adding a background color or image to the section, and the post notes that a background image gives a better blend mode effect.
Table of Contents

Do you want to add a text blend mode to your WordPress website? A background text blend mode blends your text with the background image or color behind it, creating a layered effect where the text appears to merge visually into the background.

The Advanced Typography block in Nexter Blocks lets you add a background blend mode in WordPress directly in the WordPress block editor, with multiple blend variation options to choose from.

To check the complete feature overview documentation of the Nexter Blocks Advanced Typography block, click here.

Requirement  – This block is a part of Nexter Blocks. Make sure it is installed and activated to enjoy all its powers.

To do this, add the Advanced Typography block to the page and follow the steps – 

1. First, add a background color or image to the section containing the Advanced Typography block.

Note: Using a background image will give a better blend mode effect.

2. In the Advanced Typography tab, select Normal or Multiple from the Select Option section. Use Normal to apply blend mode to a single text element. Use Multiple when you need to apply individual blend modes to separate text items in a repeater.

3. Add the text in the Text field.

4. Enable the Blend Mode toggle from the Background Blend Mode tab.

Note: In the Multiple option you’ll find the Background Blend Mode in each text repeater item.

5. From the Variations dropdown, select a blend mode.

Note: The effect will vary based on the section background.

The text will now display a blend effect against the background. Combine the blend mode with other options in the Advanced Typography block, such as the marquee effect, to create animated text overlay designs.

Share your Thoughts

Still in Doubt? Let’s Assist You

Have Feedback or Questions?

Join our WordPress Community on Facebook!