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 single values, 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.

Adding A CSS Class

1. Go to Protuno → Global Style
2. Click the Classes tab
3. Click Add Class
4. Enter:
   • Name: a display label (e.g. "Blog Card")
   • ID: the actual class name used in HTML (e.g. pr-blog-card). Only letters, numbers, hyphens, and underscores are allowed.
   • CSS: the style body for this class (see syntax below)
5. Click Save

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

CSS Syntax

The CSS body you write is compiled and emitted as .your-class-name { … }. The body 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:

/* Using & */
&: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;
}

& .card-excerpt {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

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)

You can disable a property by wrapping it in a CSS comment. The class editor preserves these:

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

Practical Examples

Layout Container: .pr-boxed

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

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

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

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

Content Container: .pr-content-width

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

For articles, blog posts, and any prose content that needs a narrower column.

Blog Card: .pr-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: .pr-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: .pr-section

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

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

Applying Classes In A Proton Widget

Use the class name directly in the HTML panel:

<section class="pr-section">
  <div class="pr-boxed">
    <div class="pr-grid-3">
      {% for post in get_posts({ posts_per_page: 6 }) %}
        <article class="pr-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 */
.pr-blog-card {
  background: var(--color-brand-light);
}

Because the Proton widget's CSS is auto-scoped, this override does not change the global .pr-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, you must delete the old one and create a new one, then update the HTML in any Proton widgets that referenced the old name.
• To delete a class, click the trash icon. Deleting a class does not update Proton widget HTML that already has the class name, those elements will 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

Do global classes apply inside the Elementor editor? Yes. The classes stylesheet is enqueued inside the Elementor editor preview, so you see the correct styling while editing.

Can I use transition, animation, or @keyframes in a class? Yes. Transitions and animations work normally. For @keyframes, define them in the Raw CSS tab of the Global Style Manager (or in a Proton widget's CSS panel at site scope) and reference the animation name in the class.

Can I use the global classes in non-Proton Elementor widgets? Yes. The classes stylesheet is output on every page. Any Elementor widget (or any HTML element anywhere on the page) can use a global class by adding the class name to the element's CSS Classes field or HTML.

Related

• The Design System
• Variables: Site-Wide Design Tokens
• Typography Classes
• Developer Mode: The Code Editor