How to change selected text & background color

Welcome back, everyone! In this quick tutorial, I’ll guide you through the process of changing the eyelid color of the text on your WordPress website. It’s a simple task that can be accomplished by pasting a short code snippet. Don’t worry—I’ll provide the code in the description below. However, please note that this feature is only available if you have Elementor Pro. If not, I’ll also show you an alternative method. Let’s get started!

• Step 1: Accessing Site Settings in Elementor Page Builder To begin, log in to your WordPress dashboard and navigate to the Elementor Page Builder. Once you’re inside, locate the “Site Settings” option.

• Step 2: Adding Custom CSS Within the Site Settings, find the “Custom CSS” section. This is where you’ll paste the code snippet to change the highlight color of your text.

::-moz-selection {
    background-color: #DEF6E0;
    color: #232323;
}
::selection {
    background-color: #DEF6E0;
    color: #232323;
}

• Step 3: Pasting the Code Snippet Copy the code snippet provided in the video description or the alternative method below. Paste it into the Custom CSS section.

Please not that the custom CSS section is only available to Elementor Pro users, you can get Elementor Pro license by clicking here.

Alternative Method: Using Additional CSS If you don’t have Elementor Pro, you can still achieve the desired result by following these steps:

1. Visit any page on your WordPress website.
2. Click on “Customize” to access the customization options.
3. Look for “Additional CSS” and click on it.
4. Paste the code snippet into the provided space.

Understanding the Code Snippet: Let’s take a moment to understand the code snippet you just pasted. The code consists of two parts:

1. Background Color: This determines the highlight color. In the example, it’s set to green.
2. Color: This specifies the text color when it’s highlighted. Note that it might not appear different if the original text is already dark.

Customizing the Code: To personalize the text highlight colors, you can change the values of the background color and text color within the code snippet. Feel free to experiment with different colors until you achieve your desired result.

Publish and Review: After making the necessary changes, click on “Publish” to save the settings. Now, visit your website and test the text highlight feature. You should see the changes you made in action.

Conclusion: That’s it! You’ve successfully learned how to change the text highlight color on your WordPress website using Elementor Pro or the alternative method. I hope you found this tutorial useful. If you did, please consider liking this video and subscribing to our channel for more helpful content.

If you found this tutorial useful, please consider subscribing to my channel and giving this video a thumbs up. Don’t forget to share it with anyone who might benefit from it. Thank you and see you in the next tutorial!