In this WPDesigns article, we will discuss about organizing Organizing CSS in Elementor Pro. To start with we will take a look at where you can add it in Elementor and at the end a couple of tips on how to keep you and your team organized with it.
Personalize your website with WordPress Page Builder like Elementor makes it very easy for you to drag and drop using a highly efficient interface. Elementor makes it easy to build a high-end, pixel-perfect website. However, if you want to customize your Elementor design more, you can need more flexibility. So that you can present your company to your target market in a more attractive way. However, by using custom CSS Code in Elementor and customizing them to your site’s needs, you can add your own brand flavor. You can use a Cascading Style Sheet to design the website’s layout and presentation.
It also adds a unique identity according to your imagination to your brand. CSS allows you to define web page structure, insert image or custom animation, add colors, create the correct file format, edit text, create attractive designs and font type properties. CSS explains how elements should be shown on a webpage. Today’s discussion will be about adding CSS code to personalize your website and where to add it to keep it organized.
What is CSS?
CSS is used for quick and convenient control of the layout of a web page. CSS full form is “Cascading Style Sheet“. Cascading Style Sheets is a basic design language that simplifies the process of making web pages accessible. There are few advantages of CSS:
- Create Stunning Web site – CSS manages the web page look and feel. You can monitor text colour, font type, paragraph spacing, column size and design, background images, or colors, layout styles, display changes in various devices and screen sizes, and many other effects with CSS.
- Become a web designer – If you want to start your career as a professional web designer, the design of HTML and CSS is a must.
- Control web -CSS is easy to learn and to understand, but it controls the presentation of an HTML document. CSS is typically paired with HTML or XHTML markup languages.
How to Use Custom CSS
You can easily add custom CSS if you are using Elementor Pro. You will get this option in each widget under the advanced tab. When you will add any CSS here you can see the output instant here. To target a wrapper element for applying CSS, you can use ‘selector’ (without the leading dot).
For example, If you’ve put an image widget(or any other child widget) in a column, you may want to style the wrapper around it or the heading itself.
Let’s see what happens if we put a solid 3px green border around the elements.
To begin, drag an image widget into a column and then from the left-hand side go to the advanced tab of the image widget. Here you can see the custom CSS tab. Click on that and you can see a box where you can apply your codes.
Enter the following in the Custom CSS tab:
selector { border: 3px solid green; }
Since you’re working with the image widget, you may be surprised to discover that the image has no border. Instead, it encircles the wrapper part, which in this case is the column containing the image.
It’s happening because you didn’t specify its child element. The image is under an img tag. So, if you want to specify the image you have to write the code like that:
selector img{ border: 1px solid green; }
Now you can see the border around the image is placed because you have specified the child element.
How to Add Custom CSS Globally
If you want to add any custom CSS globally you can easily do that. To do so, go to your dashboard and then open a page with Elementor. Then click on the toggle icon at the top-left side and then click on-site setting. Here you can see the custom CSS tab. Click on that and you will get a box. Here you can apply your custom CSS globally which will work for the whole website.
How Can Regenerate CSS Stylesheet
Cache causes the layout problem you see very frequently. Most of the time when you want to see the preview it brokes the layout. So, sometimes you can solve this issue by regenerating the stylesheet. If you are using Elementor you can do it easily. To do so, go to your WordPress Dashboard > Elementor > Tools > Regenerate Files. Then you can see here the regenerate files option. Just click on there and it will be regenerated.
Tips for Organizing CSS in Elementor Pro
You can add the CSS where you need it in any of the above-mentioned areas but it is worth making sure that you keep track of where it is, in order to be able to find it in the future and make any adjustments in case of an issue.
- Keep it Logical – If you add it into the Global CSS Style Sheet you will know where to find it all, this is my preferred place to keep it.
- Keep it in the individual Widgets – If you decide to keep it in the individual widgets then ensure you have a logical way to find it. It is incredibly frustrating to have to search through every element, column, and section to try and find a line that is affecting a large number of things on the website.
- Make sure Your Team Knows – If you make a decision about where the CSS will be organized then telling your team is the next step! If you keep it in one place and your team members in another then this is not going to help at all.