[Resolved] How to recreate headline with golden colour effect?

[Sascha]

Hi

please allow me to handle this request here, since I use both GPP & GBP and would like to keep all my support tickets here.

I have migrated a clients’ website built with Divi to a staging site here and try to recreate it using GenerateBlocks & GeneratePress.

My first task is to recreate the “golden” headline “Charlotte Mahr”, that you can see on the left column inside the hero-header.

I have added a new page, including a Container, Grid & Headline block. Inside the Headline-block, I have assigned the “Rustic Gold Alt” font successfully, but now I’m stuck when it comes to apply the “gold” colour effect which you can see on the original site or the front-page of the staged site.

The current front-page seems not to apply a colour or gradient, but a “golden” background-image, which will “shine” through the letters. To me, it seems, this is how the effect is achieved. Can you confirm this?

And also, can you please help me to apply this golden colour effect to the headline on my current dev-front-page?

All images are migrated from the original site. I will provide admin-access in private-info-field.

Thank you in advance and kind regards,
Sascha

[Fernando]

Hi Sascha,

Yes, you’re correct, the color is created by adding a background, and clipping it. Specifically, it’s done through this CSS:

h2 {
    color: #c3a343;
    -webkit-text-fill-color: transparent;
    background: -webkit-linear-gradient(transparent,transparent),url(https://charlymahr.com/wp-content/uploads/2020/01/gold_back_dark.jpg) repeat;
    background: -o-linear-gradient(transparent,transparent);
    -webkit-background-clip: text
}

So, if you plan to set this effect for h1s as well for instance, the code would be:

h1, h2 {
    color: #c3a343;
    -webkit-text-fill-color: transparent;
    background: -webkit-linear-gradient(transparent,transparent),url(https://charlymahr.com/wp-content/uploads/2020/01/gold_back_dark.jpg) repeat;
    background: -o-linear-gradient(transparent,transparent);
    -webkit-background-clip: text
}

Adding this through Appearance > Customize > Additional CSS should set the color of the text similar to the one created through Divi.

Hope this helps!

[Author]

Posts