Elementor is arguably the best plugin to create a website in WordPress. Especially for those putting design on the emphasis. Elementor is a page builder plugin for everyone. From novice users to advanced users with CSS knowledge.
Although Elementor already offers plenty of design options for its design elements (called widgets), you might want more. If you have CSS knowledge, you can apply certain styling (that is not available in Elementor by default) using custom CSS.
In Elementor, you can apply a certain styling via custom CSS to each widget (and elements of a widget) on your design. Each Elementor widget has a unique CSS class as the selector. To find out the Elementor widget selector, you can simply inspect the widget on your web browser (make sure to run the inspect on a live page).
Acessing Custom CSS Feature in Elementor
The custom CSS feature of Elementor can be accessed on the Advanced tab on the settings panel. Simply go to Advanced -> Custom CSS to access it. You can place your CSS code on the Custom CSS block.
How to Use CSS Selector in Elementor
As mentioned earlier, each Elementor widget (and its elements if it has ones) has a unique class selector. You can find out the class name by inspecting the associated widget on web browser. To inspect a widget, you can right-click on the on a widget and select Inspect.
For example, the selector name of the Heading widget is .elementor-heading-title as you can see on the screenshot below.
After finding the selector name belongs to a widget, you can type the following format on the Custom CSS field.
selector [selector name] {}
You can place your declaration inside the curly brackets. Example:
selector .elementor-button{
border: 4px solid red;
}
The code above will result in the following output.
If a widget has child elements, you can also target a specific element to apply the custom CSS to. For instance, the text element of the Button widget has the selector name of .elementor-button-text. So, if you replace the selector on the code above with the selector of the text element as below,
selector .elementor-button-text{
border: 4px solid red;
}
It will result in the following output.
Each Elementor widget has a parent element (wrapper). To target the wrapper, you can simply type selector {}. Example:
selector {
border: 4px solid red;
}
The code above will result in the following outout.
Top comments (1)
I appreciate the author of this post sharing something special. I am super excited to share that I have found Ezytor. Developers can easily edit their websites with this editor. EZYTOR is a drag-and-drop website builder.