Most components need a bit of CSS to look and behave exactly right. Here are the easiest ways to add it, depending on whether you want it global, page-only, or element-only.

Option 1: Site wide CSS

Go to WordPress Dashboard → Appearance → Customize → Additional CSS and paste your CSS there. This is great for global styles you want available everywhere.

Option 2: Page specific CSS (two easy ways)

If the CSS is only needed on one page, you can add it directly in Elementor:

• Elementor Pro: open the page, go to Page Settings → Custom CSS, and paste your CSS.

• Any Elementor version: add an HTML widget and paste your CSS wrapped in a <style> tag:

  <style>
  
    /* your CSS here */
  
  </style>
  

Option 3: Element-specific CSS

Use this when the CSS should apply to a specific element, or to multiple elements that share the same class.

• Classic elements: select the element and go to Advanced → Custom CSS.
• Atomic elements (Editor v4): select the element and go to Style → Custom CSS. Use element.style { ... } for this element only, or target a shared class like .my-class { ... } to affect every element using that class.

If you need the same CSS across many sections or pages, it’s usually better to place it in page-level or global CSS so it stays easier to manage and update later.

Option 4: Elementor Custom Code

Go to WordPress Dashboard → Elementor → Custom Code and add a new snippet.

Wrap your CSS in a <style> tag and load it in the Head or Body Start to avoid flashes (FOUC).

<style>

  /* your CSS here */

</style>