How to Change the Font Colour on a Specific Piece of Text in Elementor

ElementorCSSFonts

Often when using text, I want to make a specific part of a paragraph or heading stand out more by changing its colour so that it is more noticeable than the rest of the text content. This is not something that can be done out of the box with the heading or paragraph widget.

In this tutorial, I show you how to change the font colour of a specific piece using CSS classes. You will need to target a specific part of the text with a span, and then apply a CSS class to change the colour. If you would like the code used in this video, click the link below to my blog post about this topic, where you can copy and paste it to your website.

Watch The Tutorial

Code Snippet

				
					.green-text {
    font-color:#00fe4c;
}
				
			

Share

How to Create an Advent Calendar with JetEngine, JetPopup & Elementor

How to Create an Advent Calendar with JetEngine, JetPopup & Elementor

Build a festive Advent Calendar with JetEngine & JetPopup by Crocoblock, plus Elementor! Follow this step-by-step tutorial to add holiday magic to your site.
How to Create Scrolling Logos with JetEngine & Elementor

How to Create Scrolling Logos with JetEngine & Elementor

Learn how to create scrolling partner logos in WordPress using JetEngine & Elementor. Step-by-step tutorial for backend management with Listing Grid.
Thumbnail

How to Create Testimonials with JetEngine & Elementor

Learn how to create and display testimonials in WordPress using JetEngine & Elementor. Step-by-step tutorial for easy client management.
How to Create FAQs with JetEngine & Elementor

How to Create FAQs with JetEngine & Elementor

Learn how to create and display FAQs in WordPress with JetEngine & Elementor. Step-by-step tutorial for backend management and easy client updates.
Maintenance page - disable header & footer Thumbnail

How to Hide the Header & Footer in Elementor Maintenance Mode

Discover how to hide Elementor website header and footer during maintenance mode. Keep your maintenance page focused and distraction-free!
How to Set Up a Maintenance Mode Page in Elementor Thumbnail

How to Set Up a Maintenance Mode Page in Elementor

Discover how to set up a maintenance mode page in Elementor to inform visitors and ensure they can't access the website until maintenance is complete.
How to Install Adobe fonts on Elementor Thumbnail

How to Install Adobe Fonts in Elementor

Learn to install Adobe fonts to Elementor websites with ease. Follow steps to integrate and enhance typography seamlessly on your website.
Hide Background Images on Mobile Devices Thumbnail

How to Hide Background Images on Mobile Devices in Elementor

Learn how to hide Elementor background images on mobile devices using custom CSS while keeping them visible on others. Perfect for responsive design!
How to install a custom font in Elementor Thumbnail

How to Install Custom Fonts in Elementor

Learn to install custom fonts in Elementor, covering font types, weights, and frontend integration for enhanced website design.
How to Change the Font Weight on a Specific Piece of Text in Elementor Thumbnail

How to Change the Font Weight on a Specific Piece of Text in Elementor

Learn how to emphasize specific text in Elementor paragraphs or headings by adjusting font weight with CSS classes. Enhance readability with this tutorial!
How to change the favicon in Elementor Thumbnail

How to Add a Favicon to Your Elementor Website

Learn how to add a favicon to your Elementor website for improved branding and user recognition in browsers and search engines.
How to change a global widget on specific elements Thumbnail

How to Style an Individual Instance of a Global Widget in Elementor

Learn how to style specific instances of Elementor global widgets with unique styles using CSS. Perfect for tailored designs without affecting other instances!
How to download files Thumbnail

How to Create a File Download Button in Elementor

Learn to create a file download button in Elementor with dynamic URLs and custom download attributes for seamless user experience.