Custom CSS lets you add custom code to your website to give it a unique look and feel.
What is CSS?
![Image[1] - How to Add and Manage Custom CSS in Elementor to Enhance the Visual Experience of Your Website - Photon Fluctuation Network | Professional WordPress Repair Service, Global Reach, Fast Response](http://gqxi.cn/wp-content/uploads/2024/05/2024050714310291.png)
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
![Image [2] - How to Add and Manage Custom CSS in Elementor to Enhance the Visual Experience of Your Website - Photon Flux | Professional WordPress Repair Service, Global Reach, Fast Response](http://gqxi.cn/wp-content/uploads/2024/05/2024050714324525.png)
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
![Image [3] - How to Add and Manage Custom CSS in Elementor to Enhance the Visual Experience of Your Website - Photonflux.com | Professional WordPress Repair Service, Global Reach, Fast Response](http://gqxi.cn/wp-content/uploads/2024/05/2024050713563159.png)
2. In the panel, click"Advanced"Tab.
![Image [4] - How to Add and Manage Custom CSS in Elementor to Enhance the Visual Experience of Your Website - Photonflux.com | Professional WordPress Repair Service, Global Reach, Fast Response](http://gqxi.cn/wp-content/uploads/2024/05/2024050713570668.png)
3. Scroll down and expand Custom CSS.
![Image [5] - How to Add and Manage Custom CSS in Elementor to Enhance the Visual Experience of Your Website - Photonflux.com | Professional WordPress Repair Service, Global Reach, Fast Response](http://gqxi.cn/wp-content/uploads/2024/05/2024050713585565.png)
4. Enter the CSS code in the open text box.
Adding custom CSS to a page
1. Go to the Page Setup panel.
![Image [6] - How to Add and Manage Custom CSS in Elementor to Enhance the Visual Experience of Your Website - Photonflux.com | Professional WordPress Repair Service, Global Reach, Fast Response](http://gqxi.cn/wp-content/uploads/2024/05/2024050714024981.png)
2. Clickhigh levelTab.
![Image [7] - How to Add and Manage Custom CSS in Elementor to Enhance the Visual Experience of Your Website - Photonflux.com | Professional WordPress Repair Service, Global Reach, Fast Response](http://gqxi.cn/wp-content/uploads/2024/05/2024050714032118.png)
3. Enter the CSS code in the open text box.
Adding custom CSS to a website
1. Go to the Site Settings panel.
![Image [8] - How to Add and Manage Custom CSS in Elementor to Enhance the Visual Experience of Your Website - Photonflux.com | Professional WordPress Repair Service, Global Reach, Fast Response](http://gqxi.cn/wp-content/uploads/2024/05/2024050714050475.png)
2. Select from the listCustom CSS.
![Image [9] - How to Add and Manage Custom CSS in Elementor to Enhance the Visual Experience of Your Website - Photonflux.com | Professional WordPress Repair Service, Global Reach, Fast Response](http://gqxi.cn/wp-content/uploads/2024/05/2024050714053583.png)
3. Enter the CSS code in the open text box.
How to add custom CSS with Elementor AI
![Image [10] - How to Add and Manage Custom CSS in Elementor to Enhance the Visual Experience of Your Website - Photonflux.com | Professional WordPress Repair Service, Global Reach, Fast Response](http://gqxi.cn/wp-content/uploads/2024/05/2024050714361433.png)
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:
![Image [11] - How to Add and Manage Custom CSS in Elementor to Enhance the Visual Experience of Your Website - Photon Fluctuation Network | Professional WordPress Repair Service, Global Reach, Fast Response](http://gqxi.cn/wp-content/uploads/2024/05/2024050713221078.png)
- Select Header Widget
![Image [12] - How to Add and Manage Custom CSS in Elementor to Enhance the Visual Experience of Your Website - Photon Flux | Professional WordPress Repair Service, Global Reach, Fast Response](http://gqxi.cn/wp-content/uploads/2024/05/2024050713224825.png)
- From the "Headings" widget"Advanced"tab, select the"Custom CSS".
![Image [13] - How to Add and Manage Custom CSS in Elementor to Enhance the Visual Experience of Your Website - Photonflux.com | Professional WordPress Repair Service, Global Reach, Fast Response](http://gqxi.cn/wp-content/uploads/2024/05/2024050713232323.png)
- optionCoding with AIThe
![Image [14] - How to Add and Manage Custom CSS in Elementor to Enhance the Visual Experience of Your Website - Photonflux.com | Professional WordPress Repair Service, Global Reach, Fast Response](http://gqxi.cn/wp-content/uploads/2024/05/2024050713265391.png)
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".
![Image [15] - How to Add and Manage Custom CSS in Elementor to Enhance the Visual Experience of Your Website - Photonflux.com | Professional WordPress Repair Service, Global Reach, Fast Response](http://gqxi.cn/wp-content/uploads/2024/05/2024050713283929.png)
- click (using a mouse or other pointing device)Generate CodeThe
![Image [16] - How to Add and Manage Custom CSS in Elementor to Enhance the Visual Experience of Your Website - Photonflux.com | Professional WordPress Repair Service, Global Reach, Fast Response](http://gqxi.cn/wp-content/uploads/2024/05/2024050713304826.png)
This will add the following CSS customization code:
![Image [17] - How to Add and Manage Custom CSS in Elementor to Enhance the Visual Experience of Your Website - Photonflux.com | Professional WordPress Repair Service, Global Reach, Fast Response](http://gqxi.cn/wp-content/uploads/2024/05/2024050713312298.png)
Click Preview to see how custom CSS works.
![Image [18] - How to Add and Manage Custom CSS in Elementor to Enhance the Visual Experience of Your Website - Photonflux.com | Professional WordPress Repair Service, Global Reach, Fast Response](http://gqxi.cn/wp-content/uploads/2024/05/2024050713325211.png)
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:
![Image [19] - How to Add and Manage Custom CSS in Elementor to Enhance the Visual Experience of Your Website - Photonflux.com | Professional WordPress Repair Service, Global Reach, Fast Response](http://gqxi.cn/wp-content/uploads/2024/05/2024050714341941.png)
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.
Link to this article:http://gqxi.cn/en/9388The article is copyrighted and must be reproduced with attribution.
No comments