Skip to main content
Skelementor Basic Usage - How to use utility classes in Elementor v4

​
Using Classes in Elementor

Once you’ve imported the utility framework, you can use classes on any Elementor atomic element.

​
Step 1: Add an Atomic Element

In the Elementor editor, add any atomic element:
  • Heading (h1-h6)
  • Text (paragraph)
  • Div Block
  • Button
  • Link
  • Image
  • Container

​
Step 2: Apply Utility Classes

  1. Select the element
  2. Go to the Advanced tab
  3. Find the CSS Classes field
  4. Add your utility classes

​
Step 3: See Instant Results

Your utility classes will apply immediately in the editor preview.

​
Common Class Combinations

​
Typography

<h1 class="text-4xl font-700 text-center mb-6">Main Heading</h1>
<p class="text-lg text-gray leading-relaxed">Body text with good spacing</p>

​
Layout

<div class="flex items-center justify-between p-6 bg-white">
  <h1 class="text-2xl font-700">Logo</h1>
  <nav class="flex gap-6">
    <a href="#" class="text-gray">Home</a>
    <a href="#" class="text-gray">About</a>
  </nav>
</div>

​
Cards

<div class="card p-6 rounded-lg bg-white border border-gray-light">
  <h3 class="text-xl font-600 mb-4">Card Title</h3>
  <p class="text-gray mb-4">Card content</p>
  <button class="btn btn-blue">Action</button>
</div>

​
Best Practices

​
1. Use Semantic HTML

Always use proper HTML elements with utility classes: 
<!-- Good -->
<header class="bg-white p-6">
  <h1 class="text-2xl font-700">Site Title</h1>
</header>

<!-- Avoid -->
<div class="bg-white p-6">
  <div class="text-2xl font-700">Site Title</div>
</div>

​
2. Combine Classes Effectively

Group related utilities together: 
<div class="flex items-center gap-4 p-6 bg-white rounded-lg">
  <img src="avatar.jpg" class="w-12 h-12 rounded-full" />
  <div>
    <h3 class="text-lg font-600">User Name</h3>
    <p class="text-sm text-gray">User description</p>
  </div>
</div>

​
3. Use Consistent Spacing

Follow the 4px spacing scale: 
<div class="p-4 mb-6">
  <h2 class="mb-4">Title</h2>
  <p class="mb-2">Paragraph 1</p>
  <p class="mb-2">Paragraph 2</p>
</div>

Examples

Real-world usage examples

Best Practices

Advanced usage patterns