How To Change The Color Of Specific Words In Elementor

In this tutorial, we will guide you on how to change the color of specific words in Elementor.

You can also watch the video tutorial:

Having said that, let’s move on to the steps on How To Change The Color Of Specific Words In Elementor.

Step 1: Edit the Page with Elementor

To begin, go to the page where you want to change the color of specific words and click on the “Edit with Elementor” button. This will open the Elementor editor.

Edit page with elementor

Step 2: Access Text Editor Widget Settings

Locate the text editor widget on the page and click on the settings icon for that widget. It usually looks like a small gear icon.

Accessing text editor widget

Step 3: Identify the Words to Change Color

In the text editor, identify the specific words or phrases that you want to change the color of. Move your cursor to the word or phrase.

Step 4: Insert Span Tag with Class

To change the color of the identified word or phrase, enter the following HTML code before and after the word:

html

<span class=”color-class”>

Replace “color-class” with a class name of your choice. This class will be used in the next step to define the color in CSS.

Inserting span tag

Step 5: Define Color in Custom CSS

Switch to the “Advanced” tab within the text editor widget settings. Expand the “Custom CSS” section.

In the CSS code field, enter the following code:

css

.color-class { color: red; }

Replace “color-class” with the class name you used in Step 4. Also, change “red” to the desired color value, such as a color name, hexadecimal code, or RGB value.

Defining color in elemntor

Step 6: Update and Preview the Changes

Click on the “Update” button to save the changes you made in the Elementor editor. Then, click on the “Preview” button to see the updated page with the new color for the specific words.

Change in color in elementor

Congratulations! You have successfully changed the color of specific words in Elementor. By following these steps, you can customize the color of various words or phrases throughout your page.

Feel free to experiment with different colors and class names to achieve the desired visual effect.

If you have any further questions, please let us know.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Need Professional Help?

We can help you with website fixes and ongoing maintenance.