Reusable CSS Classes

Reusable CSS classes are named style definitions you write once and apply as a class name anywhere on your site. Unlike CSS variables, which store a single value, a class stores a full set of rules: layout, spacing, color, hover state, media queries. Change the class definition once and every element using it updates.

Classes vs. Buttons

The Classes area of Global Style holds two kinds of entries. A class is a plain CSS rule set you build from scratch, everything on this page describes those. A button is a separate, compound token: background, text, icon, border, shadow, and spacing, plus a full hover state, defined through structured fields rather than raw CSS, and compiled to .your-id { … } and .your-id:hover { … }. Use a button token for anything that behaves like a button across your site; use a plain class for everything else. Buttons count toward the same "1 other class" free-plan cap as component classes.

Adding a CSS Class

1. Open a Composer widget, switch the Editor tab to Developer, go to Code → Globals, and click Open Globals Manager.
2. Under Classes in the left sidebar, select Others (component and button classes live here, separate from Typography).
3. Click Add Class, then enter:
   • Name, a display label (for example "Blog Card").
   • ID, the actual class name used in HTML (for example uc-blog-card). Only letters, numbers, hyphens, and underscores are allowed.
   • CSS, the style body for the class, see the syntax below.
4. Save your changes.

The class is immediately active in the Elementor editor preview and on the front end.

CSS Syntax

The CSS body you write is compiled and emitted as .your-class-name { … }. It supports the full range of standard CSS patterns.

Plain declarations:

display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
padding: var(--space-lg);
border-radius: var(--radius-card);
background: var(--color-bg-alt);

Pseudo-classes and pseudo-elements. Use & to reference the class itself, or start with : and the class name is prepended automatically:

&:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

&:focus-within {
  outline: 2px solid var(--color-brand);
}

/* Starting with : is equivalent */
:hover {
  transform: translateY(-4px);
}

Nested child selectors:

& .card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: calc(var(--radius-card) - 4px);
}

& .card-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  margin-block: 0.75rem 0.5rem;
}

Media queries:

padding: var(--space-lg);

@media (max-width: 768px) {
  padding: var(--space-md);
  grid-template-columns: 1fr;
}

@media (max-width: 480px) {
  padding: var(--space-sm);
}

Comments (disabled declarations). Wrap a property in a CSS comment to disable it, the class editor preserves these:

background: var(--color-bg-alt);
/* border: 1px solid var(--color-border); */
padding: var(--space-md);

Practical Examples

Layout container, .uc-boxed:

max-width: 1200px;
margin-inline: auto;
padding-inline: var(--space-md);

@media (max-width: 768px) {
  padding-inline: var(--space-sm);
}

Apply it to any wrapper to keep content within the site's max width and centered:

<section class="uc-boxed">
  <!-- content -->
</section>

Content container, .uc-content-width, for articles, blog posts, and any prose content that needs a narrower column:

max-width: 680px;
margin-inline: auto;

Blog card, .uc-blog-card:

display: flex;
flex-direction: column;
background: var(--color-bg);
border-radius: var(--radius-card);
overflow: hidden;
box-shadow: var(--shadow-card);
transition: transform 0.2s ease, box-shadow 0.2s ease;

&:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

& img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

& .card-body {
  padding: var(--space-md);
  flex: 1;
  display: flex;
  flex-direction: column;
}

Grid layout, .uc-grid-3:

display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);

@media (max-width: 900px) {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 600px) {
  grid-template-columns: 1fr;
}

Section padding, .uc-section:

padding-block: var(--space-xl);

@media (max-width: 768px) {
  padding-block: var(--space-lg);
}

Applying Classes in a Composer Widget

Use the class name directly in the HTML panel:

<section class="uc-section">
  <div class="uc-boxed">
    <div class="uc-grid-3">
      {% for post in get_posts({ posts_per_page: 6 }) %}
        <article class="uc-blog-card">
          <img src="{{ post.thumbnail.src('medium') }}" alt="{{ post.thumbnail.alt }}">
          <div class="card-body">
            <span class="text-label">{{ post.categories.name }}</span>
            <h2 class="text-heading-h3">{{ post.title }}</h2>
            <p class="card-excerpt">{{ post.excerpt|truncate(100) }}</p>
            <a href="{{ post.link }}" class="text-label">Read More →</a>
          </div>
        </article>
      {% endfor %}
    </div>
  </div>
</section>

You can also add widget-scoped overrides in the CSS panel if you need to vary a global class for one specific widget:

/* Only applies inside this widget */
.uc-blog-card {
  background: var(--color-brand-light);
}

Because a Composer widget's CSS is auto-scoped, this override doesn't change the global .uc-blog-card definition, it only affects cards inside this widget.

Classes vs. CSS Variables

Use both together: define your spacing and color values as variables, then use those variables inside your component classes.

Editing and Deleting Classes

• To edit a class, click its name in the Classes tab, update the CSS body, and click Save.
• To rename a class ID, delete the old one and create a new one, then update the HTML in any Composer widgets that referenced the old name.
• To delete a class, click the trash icon. This doesn't update widget HTML that already has the class name, those elements simply receive no styling for that class.
• To temporarily disable a class, comment out its declarations in the CSS body without deleting the class definition.

Frequently Asked Questions

Related