[Resolved] How to custom 2 color in one line of Headline block?

[Trạng]

Hi there,

In my h3 that present for “product name”, I want to make 2 color seperated, one is black for product name & one is red for the tagline of product “Best Overall”… but how can I do that? When I try to selected product name and set for one color, the rest will be applied too!

Screenshot

[Fernando]

Hi Trang,

To achieve something like this, you will need to tweak the HTML structure of the Headline Block.

For instance, I have this Headline Block: https://share.getcloudapp.com/2Nuz0JW6

I added additional CSS class change-span-color.

I then opened the Code Editor and inserted the text I wanted to change the color of inside a <span></span>

After this, I added this code:

.change-span-color span {
	color: rgb(0, 0, 0);
}

Kindly replace rgb(0, 0, 0) with your preferred color.

RGB selector: https://www.w3schools.com/colors/colors_picker.asp

Here is an article with regards to adding CSS: https://docs.generatepress.com/article/adding-css/#additional-css

Adding it through additional CSS should work.

Hope this helps! 🙂

[Trạng]

Hi there,
You meant the code editor, but I use Block editor not classic editor, how can I see the code editor, friend?

[Fernando]

Hi Trang,

You’ll need to click the 3 dots placed on the top right corner when editing: https://share.getcloudapp.com/xQuqY4QN

Hope this clarifies. 🙂

[Trạng]

Ah, got it now! Thank you so much for your nice support 🥰

[Fernando]

You’re welcome Trang! Glad to be of assistance! Feel free to reach out anytime if you’ll need assistance with anything else. 🙂

[Author]

Posts