Guide

There are multiple ways to add CSS to your projects, but the methods below are usually the safest and cleanest for most use cases.

Option 1: Custom Elements Code

Go to WordPress Dashboard → Elementor → Editor → Custom Elements → Code. Click Add New, then paste your CSS there.

Make sure your CSS is wrapped inside a style tag like this:

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

Choose where it should load. For most CSS snippets, Head is usually the best option. This lets the styles load early, so the page does not flash unstyled before the CSS kicks in.

You can also control where the CSS runs, such as:

• The entire site
• Specific pages
• Certain post types
• Specific categories or taxonomies

This is the cleanest method for reusable CSS that needs to work across multiple pages.

Option 2: Page-specific

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

• Elementor Pro: Open the page, go to Page Settings → Custom CSS, and paste your CSS there.
• Any Elementor version: Add an HTML widget and paste your CSS wrapped inside a <style> tag like this:

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

This is usually the cleaner option for page-specific layouts, interactions, or quick visual tweaks without affecting the rest of the site.