How to Add Custom CSS in Elementor

How to Add Custom CSS in Elementor: A Step-by-Step Guide

Adding custom CSS to your Elementor website can be a powerful way to enhance the styling and visual appeal of your pages. Whether you want to change colors, adjust margins, or create unique animations, the ability to add your own CSS is key. In this step-by-step guide, we’ll walk you through the process in a way that’s beginner-friendly yet detailed enough for you to confidently customize your website.

Step 1: Access Your WordPress Dashboard

First things first, login to your WordPress admin panel:

1. Open your web browser and go to yourwebsite.com/wp-admin.
2. Enter your username and password.
3. Click on the Log In button.

Step 2: Open the Elementor Editor

Next, navigate to the page you want to edit:

1. From the WordPress dashboard, go to Pages on the left sidebar.
2. Hover over the page you want to edit and click on Edit with Elementor.

Step 3: Locate Custom CSS Settings

Once you’re in the Elementor editor, follow these steps to access the Custom CSS panel:

1. In the Elementor sidebar, click on the Advanced tab.

2. Scroll down until you see the Custom CSS section.

   • Note: The Custom CSS feature is only available with Elementor Pro.

Step 4: Write Your Custom CSS

Now it’s time to add your CSS code:

1. Click inside the Custom CSS text area.
2. Type or paste your CSS code.

For example, if you want to change the background color of a section, your CSS might look like this:

selector {

    background-color: #ffcc00; /* Change the background color */

}

• Important: Use the selector keyword to target the widget or section you want to style. Elementor automatically handles the correct selectors for you.

Step 5: Preview Your Changes

After entering your custom CSS, it’s essential to preview your changes:

1. Click the Preview Changes icon (the eye icon at the bottom).
2. This opens a new tab where you can visually inspect the changes you’ve made.

If you don’t see the changes you expected, double-check your CSS code for any typos or errors.

Step 6: Publish or Update Your Page

Once you’re satisfied with your new styles, it’s time to save your changes:

1. Click the Update button on the bottom panel to publish your changes.
2. Close the Elementor editor.

Step 7: Clearing Cache (if necessary)

If your website uses a caching plugin, you might need to clear your cache to see the changes reflected on the front end:

1. Go to the plugin settings on your WordPress dashboard (e.g., W3 Total Cache or WP Super Cache).
2. Find the option to Clear Cache or Purge Cache and click on it.

Final Thoughts

Adding custom CSS in Elementor is a straightforward process that can significantly impact your website’s design. With just a few simple steps, you can style your elements to suit your needs and preferences. Don’t be afraid to experiment with different CSS properties to see how they affect your site’s appearance.

Remember to always take a backup of your CSS code and test changes in a staging environment when possible. Happy styling!