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