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

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

Home Forums Support How to custom 2 color in one line of Headline block?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2169428
    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

    #2169446
    Fernando
    Customer Support

    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! 🙂

    #2170593
    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?

    #2170594
    Fernando
    Customer Support

    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. 🙂

    #2170775
    Trạng

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

    #2170779
    Fernando
    Customer Support

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.