help center

On this page

Add custom CSS using Elementor AI

Last Update: January 14, 2024

For Pro users, Elementor AI is not limited to writing text for your website, it can also be used to add custom CSS to both your page and individual elements on the page. 

Pro users can also add custom code to their site.

Note: All users can use Elementor AI to add HTML to their pages using the HTML widget.

General guidelines to using Elementor AI for coding

  • Remember to always save and backup your page before adding custom CSS, as the code may make unexpected changes to the page.
  • When adding custom CSS to an individual element, the code should include the term “selector”, if it doesn’t the code may affect the entire page or other elements.
  • When you regenerate code with Elementor AI without inserting it, the previous code will be overwritten. It may be useful to keep a copy of the previous code in a separate document.
  • When you insert more than one snippet of code, be aware that one snippet may cancel out or conflict with another.
  • We are constantly working on improving Elementor AI and its coding abilities, however the generated code may not come out exactly as you’d like. In some cases you may need to tweak this code.
  • Elementor does not offer support for Custom CSS code. Users are responsible for checking and debugging code produced by Elementor AI.

Using Elementor AI to add custom code to an element

The following example will add CSS custom code to the heading of this home page:

image 31 Add custom CSS using Elementor AI 1
  1. Select the Heading widget.
    image 32 Add custom CSS using Elementor AI 3
  2. Select Custom CSS from the Advanced tab of the Heading widget.
    image 33 Add custom CSS using Elementor AI 5
  3. Select Code with AI.
    image 34 Add custom CSS using Elementor AI 7
    Note: After your first use of Elementor AI, the Code with AI text will be replaced with the Elementor AI icon.
  4. Enter “Make this heading turn red on hover” into the text box.
    image 35 Add custom CSS using Elementor AI 9
  5. Click Generate code.
    image 36 Add custom CSS using Elementor AI 11
    This will add the following CSS Custom code:
    image 37 Add custom CSS using Elementor AI 13

Click Preview to see how the custom CSS works.

image 38 Add custom CSS using Elementor AI 15

Animating the Heading

Now let’s add some animation to the Heading.

  1. Go back to Custom CSS and select Code with AI.
  2. Enter “In this heading, have the text bounce on hover” in the text box.
  3. Click Generate code.
  4. Click Insert.

Go to the preview and see the results. When you hover over the text it should bounce and turn red.

Make an element sticky

Once common effect designers like to implement is to have elements of the page remain visible, even as visitors scroll through the page. This is referred to as making the element “sticky” and is commonly used on headers to keep the menu available to visitors wherever they are on a page.

This example will make the page’s header sticky.

  1. Select Edit Header.
    image 39 Add custom CSS using Elementor AI 17
  2. Select the container in the Header
  3. Select Custom CSS
  4. Select Code with AI
  5. Enter “Make this container sticky” in the text box.
  6. Click Generate code. The generated code will look like this:
    image 40 Add custom CSS using Elementor AI 19
    Elementor AI provides you with generated code and,in the area below the code box, it will explain, in plain English, what the code is doing.
  7. Select Insert code.

Use preview to check out the results, as you scroll down the page, the header will remain at the top of your screen..

Next steps

Now that you’ve learned to add Custom CSS to elements and pages, learn how to add Custom Code to your entire site.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article