How to achieve text knockout effect in Pro header builder

[rbo0567]

I’m trying to achieve a text knockout effect in my header but I can’t get it to work with the header builder in Pro.
What I need is a full height header with a background and a semi-transparent text layer over it with the text knocked out so you can see the background image clear where the text is.
Is this possible with Pro theme header builder, if so, how can this be achieved? I really hope someone can help me out. Many thanks in advance.

Here is an example of the effect:

[tristup]

Hi Rene,

Thanks for reaching out.
This can be achieved by using two different images using Background Layers. You need to set the background image in the Lower Layer and the top image in the Upper Layer.

You can also check the following article, which may help you with this.

How to create transparent text on non-transparent background

Hope it helps.
Thanks

[rbo0567]

Hi Tristup,
thank you for the quick response.
I realize now that I completely forgot to mention the most crucial part in my question. How silly of me.

My plan is to achieve this effect with a background on the lower layer as you suggested but with some HTML in the upper layer instead of another image.
The HTML looks like this:

NATURE

The CSS code I use is:
.knockouttext {
background-color: rgba(255,255,255,.5);
color: black;
font-size: 10vw;
font-weight: bold;
margin: 0 auto;
width: 50%;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
mix-blend-mode: screen;
}

This works except for the last line (mix-blend-mode: screen;), this line is supposed to make the knocked out text possible so that the background is visible at the place where the text is.

[ruenel]

Hello Rene,

You can accomplish this in the Pro Builder without any coding. Please check this out:

Here’s how to do it:
1.) Your structure will be like this:

2.) In your Text element, it needs to have a white background color and a black text color. You will then have to apply the Effects module setting it to Screen.

You can download and install this block template:

• https://www.dropbox.com/s/qrdmvivv2jr410r/text-knockout.tco?dl=0

If you are not familiar yet with the templates and how you can use it, please check this out:

• https://theme.co/docs/template-manager#using-the-template-manager

Kindly let us know how it goes.

[rbo0567]

Thanks a lot Rue!!

It works perfectly. I only had to ‘translate’ it from Page builder to the Header builder but the mechanism is pretty much the same so it took almost no effort.

This the result:

[prakash_s]

Hello @rbo0567,

Glad that @ruenel was able to help you. Please feel free to open a new thread if you have any more concerns regarding our theme and theme settings.

Thanks