Guides
Classes
Classes are reusable styles. Add one to an element in Elementor and it takes that style, with no settings to change by hand.
Use a class
1. Select an element
In Elementor, select the element you want to style.
2. Add the class
In the Style tab, type the class name in the class field, such as card-base, and pick it from the list.
3. Combine classes
Add a few small classes together, such as flex, flex-column and gap-sm, to build a layout.
The categories
Elements
Buttons, links, cards, text styles, media and accordions.
Structure
Sections, page padding and content widths.
Layout
Display, flex, grid, columns and alignment.
Spacing
Gaps and padding.
Typography
Headings, body text, sizes, weights and wrapping.
Colors
Text, background and border colors.
Size
Sizes, widths and heights.
Position
Position, image fit and stacking.
Effects
Opacity, blend modes, shadows and transitions.
Radius
Corner radius, by size and by purpose.
Border
Border widths, styles and sides.
Bento
A bento grid and its tile roles.
Change or add a class
1. Find it
Choose a category on the left, or search for a class by name.
2. Edit it
Change its CSS in the editor under the list, or add a new rule there.
3. Import it
Select Import Classes. Elementor updates every element that uses the class.
Use a simple class selector, such as .card, with at most one state, such as :hover. Media queries with a min-width or max-width in pixels map to Elementor's breakpoints. Anything else is skipped, and the results say why.
Read the results after an import. A style Elementor can't take as a setting is kept in the class's Custom CSS, so nothing is lost.
More tools
Add from Elementor
Brings in classes you made in Elementor itself. It never replaces V4 Studio's own.
Reset a category
The reset icon at the top of the panel brings back the category's defaults, after you confirm.
Common questions
Why was my class skipped?
It used a selector V4 Studio can't import, such as an ID, an element name or two selectors together. The results show the reason.
Can an element have more than one class?
Yes. Most layouts combine a few, each doing one job.
Where do my classes go?
Into Elementor's global classes, so you can use them on every page.
Next
Brand Data
Your company details and logos, as dynamic tags.