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.

What "Other Classes" Covers

The Others tab holds any reusable class that isn't a typography class, cards, buttons, containers, layout wrappers, anything you want to define once and apply everywhere. There's no separate structured button builder, every class here is a plain CSS rule set you write yourself, the same way as any other class on this page. If you want a button-like class with a hover state, write it the normal way, using &:hover as covered below.

Adding a CSS Class

1. Select a Composer widget, click Code at the top of the panel, open the Globals tab, and click any row to open the Globals manager.
2. Under Classes in the left sidebar, select Others (component and button classes live here, separate from Typography).
3. Click + Add at the top of the manager and pick Class (marked Advanced). A new entry appears immediately, named .class-1 by default, with an empty CSS body underneath, there's no separate naming dialog.
4. Click the class name field to rename it (for example uc-blog-card, only letters, numbers, hyphens, and underscores are allowed), then write the CSS body, see the syntax below.

Changes save automatically as you type, a Saved ✓ indicator appears at the bottom of the panel. The class is immediately active in the Elementor editor preview and on the front end.

The Globals Manager: variables, typography classes, and other classes

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 UiChemy 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