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
| Where to enter the code | Insert this code | The effect CSS will have |
| Site Settingskneading board | body { | Provide a red background for all pages on the site |
| Page Setupkneading board | body { | Page background blue. take note of: This page-level CSS overrides any site-level CSS settings, so even if you use the site CSS above, this page will still have a blue background! |
| elementalAdvanced tab | #my-element { | It is based onCSS ID "my-element" for the specific element being targeted and provides a green background for it. Attention:This CSS overrides any site-level or page-level CSS to provide a green background for elements, so even if you use the site and/or page CSS above, this page will still have a blue background. |
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 backup 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.
- Return to Custom CSS and selectCode with AIThe
- In the text box, type "In this header, the text pops up on hover".
- click (using a mouse or other pointing device)Generate CodeThe
- 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:
- optionEdit TitleThe
- Select the container in the header
- optionCustom CSSThe
- optionCoding with AIThe
- Type "Make this container sticky" in the text box.
- 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. - 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.
