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](http://digitalsuncity.com/wp-content/uploads/2023/06/edit-page.png)
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](http://digitalsuncity.com/wp-content/uploads/2023/06/text-editor-widget.png)
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](http://digitalsuncity.com/wp-content/uploads/2023/06/change-color-span-tag.png)
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](http://digitalsuncity.com/wp-content/uploads/2023/06/custom-css-to-change-color.png)
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](http://digitalsuncity.com/wp-content/uploads/2023/06/color-change-in-elementor.png)
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