How to add and manage custom CSS in Elementor to enhance the visual experience of your website

Custom CSS lets you add custom code to your website to give it a unique look and feel.

What is CSS?

CSS (Cascading Style Sheets) is a way to add styles to web pages, such as colors, fonts, spacing, and position. One of the great things about the Elementor editor is that it allows you to add many of these style elements without knowing CSS. However, Elementor Pro also allows CSS-literate Web creators to add custom CSS to give their pages a unique look and feel.

Where can I add custom CSS using Elementor?

The Elementor editor allows you to add custom CSS at three different levels:

• Site Level: Adding custom CSS here will affect your entire site!
• Page level: adding custom CSS here will only affect specific pages
• Element level: adding custom CSS here will only affect specific elements

Custom CSS Examples

How to add custom CSS

Adding Custom CSS to Elementor

1. By clicking on or from thenavigator (on a computer screen)to select it by choosing an element in the

2. In the panel, click"Advanced"Tab.

3. Scroll down and expand Custom CSS.

4. Enter the CSS code in the open text box.

Adding custom CSS to a page

1. Go to the Page Setup panel.

2. Clickhigh levelTab.

3. Enter the CSS code in the open text box.

Adding custom CSS to a website

1. Go to the Site Settings panel.

2. Select from the listCustom CSS.

3. Enter the CSS code in the open text box.

How to add custom CSS with Elementor AI

Elementor AI not only helps you write website content, it also allows Pro users to add custom CSS styles to pages and elements. Pro users can also add custom code to websites. All users can use Elementor AI to add HTML code to pages through the HTML widget.

When adding custom CSS or code with Elementor AI, follow these recommendations:

• Before adding custom CSS, be sure to save and back up your page in case you accidentally change the page layout.
• When you add CSS to a specific element, make sure you use a "selector" so that the code doesn't affect the rest of the page.
• If you use Elementor AI to regenerate the code, the previous code will be overwritten. Therefore, it is a good idea to back up the original code to another document.
• When inserting multiple code snippets, some codes may conflict with each other.
• We are constantly improving the coding capabilities of Elementor AI, but the code generated may require you to manually adjust it to meet specific needs.
• Please note that Elementor does not provide official technical support for customizing CSS code, users need to check and debug the code by themselves.

Adding Custom Code to Elementor with Elementor AI

The following example adds CSS customization code to the title of this home page:

• Select Header Widget

• From the "Headings" widget"Advanced"tab, select the"Custom CSS".

• optionCoding with AIThe

Note: After using Elementor AI for the first time, theWith AIThe code for the text will be replaced with the Elementor AI icon.

• In the text box, type "Make this heading turn red on hover".

• click (using a mouse or other pointing device)Generate CodeThe

This will add the following CSS customization code:

Click Preview to see how custom CSS works.

Animation Title

Now let's add some animation to the title.

1. Return to Custom CSS and selectCode with AIThe
2. In the text box, type "In this header, the text pops up on hover".
3. click (using a mouse or other pointing device)Generate CodeThe
4. click (using a mouse or other pointing device)"Insert."The

Go to Preview and view the results. When you hover over the text, it should pop up and turn red.

Make Elementor sticky

A common technique used by a designer is to make certain elements of a page visible at all times, even when the visitor scrolls the page. This effect is called "Sticky Elementor", usually used in the header section of a web page. The purpose of this is to make the menu easily accessible to the visitor when navigating anywhere on the page.

Here's an example showing how to keep the title of a web page sticky and make sure it's always displayed at the top of the screen:

1. optionEdit TitleThe
   
2. Select the container in the header
3. optionCustom CSSThe 
4. optionCoding with AIThe 
5. Type "Make this container sticky" in the text box.
6. click (using a mouse or other pointing device)Generate Code. The generated code will look like the following:
   
   Elementor AI provides you with the generated code and in the area below the code box, it will explain what the code is for in plain English.
7. optionInsert CodeThe

Use the preview to view the results and the title will remain at the top of the screen when scrolling down the page.

Summary:

The basic concept of CSS (Cascading Style Sheets), a powerful tool for adding and adjusting styles to web pages, such as colors, fonts, spacing and layout. In particular, Elementor provides the ability to add custom CSS at different levels (site, page and element level), allowing users to fine-tune it for specific needs.

The article also provides specific step-by-step instructions on how to add CSS code to different parts of Elementor, including help with code generation and management through Elementor AI technology. Issues to keep in mind when using custom CSS, such as code backups, using selectors, and dealing with code conflicts, are emphasized to ensure that the site design is both aesthetically pleasing and powerful.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off