Mixed colors in Elementor header

  • Resolved jlanpheer

    (@jlanpheer)


    1 month, 1 week ago

    Hello, i’m trying to do something really simple for a client, which is to change the color of one word of the heading on a page. There are many videos on how to do this, with the concept being to insert a span tag into the text for a style hint. As an example, (at least according to the videos that i’ve watched), the following in the title of a heading SHOULD create a heading with the word “Company” in RED and the word “Header” in whatever color you’ve chosen in the style picker:

    <span style:”color:red;”>Company</span> Header

    This seems to work within the Elementor plugin itself and once i enter the above, it looks like i’d wish it to be, seemingly indicating that it will work. However, when i ‘preview’ the page or publish it, the styling hint is NOT followed. I’ve tried clearing my cache etc., no dice.

    Can someone explain the error of my ways here or offer another approach? Thank you!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support Richard from Elementor

    (@richardk23)

    Hello!

    Thank you for reaching out. I can confirm that this should normally work without any issue. However, please refer to this comparison: https://prnt.sc/nqzFy71QZV-a.

    It should be an “=” sign instead of a colon. The semicolon is not needed at the need if no other styles are being added.

    This would be the result: https://txadztnt.elementor.cloud/header-span/

    I hope this helps!

    Have a great day!

    Thread Starter jlanpheer

    (@jlanpheer)

    Oooo, thank you for your response. Actually, i DID have an “=” sign where i had originally put a “:”, i mistyped my example. When going back, i did discover that your example worked. However, i DID actually find what was actually causing it not to work. I wasn’t using an English color, i was using an rbga value. As you say, this works:

    <span style:”color:red;”>Company</span> Header

    However, this does NOT:

    <span style:”color:rgba(255,255,255,0.3)”>Company</span> Header

    Is this possible? I would like the color to match the rgba value of the logo on the site as closely as possible. Using the alpha approximation is a fallback, but i’m wondering now if i can do the above. Thank you for your answer! Much appreciated!

    Plugin Support Richard from Elementor

    (@richardk23)

    Hello! Thank you for your feedback.

    I would suggest using HEX instead. This site, for example, will convert it to HEX online.

    Also, again, in your example, there is a colon instead of an “=” sign after the style. And the first quotation mark is somehow the closing one (?).

    <span style=”color: ffffff4d”>Company</span> Header.

    Kind regards,

    .

    Plugin Support Richard from Elementor

    (@richardk23)

    P.S. This was the link: https://rgbacolorpicker.com/rgba-to-hex

    Plugin Support Nemanja

    (@nemanjat)

    Due to inactivity this ticket has been closed!

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