How to give DIFFERENT COLOR in SPECIFIC TEXT in Elementor
2 min read
6 months ago
Published on Apr 22, 2024
This response is partially generated with the help of AI. It may contain inaccuracies.
Table of Contents
How to Give Different Color to Specific Text in Elementor
If you want to change the color of a specific text in Elementor without affecting the rest of the content, follow these steps:
-
Identify the Text to Colorize:
- Locate the specific text you want to change the color of within your Elementor editor. In the example provided, the text "Bob" is going to be colorized to pink.
-
Add a Span Tag:
- Before the text you want to colorize, add an opening
<span>tag.
- Before the text you want to colorize, add an opening
-
Assign a Class to the Span Tag:
- Within the opening
<span>tag, add a class attribute with a class name. In the example, the class name used is "pinkish" to represent the pink color.
- Within the opening
-
Set the Color in the Advanced Options:
- Navigate to the advanced options section and locate the custom CSS area.
- Add a dot (.) followed by the class name you assigned earlier (e.g., .pinkish).
- Inside the curly braces, specify the color you want the text to be. In this case, it's pink.
-
Save and Update:
- Once you have set the color, save your changes and update the Elementor editor.
-
Preview the Changes:
- Check the text you colorized in the Elementor editor to see the new color applied.
-
Modify Styling Further (Optional):
- If you want to apply additional styling, you can explore other options within Elementor to enhance the appearance of the text.
-
Finalize and Save:
- Once you are satisfied with the changes, save your work to ensure the colorized text is retained.
By following these steps, you can easily give different colors to specific text within your Elementor website without affecting the overall design of the section.