Skip to main content

​
Elementor Reserved Names

Cannot use these class names as they are reserved by Elementor:

​
Primary Reserved Names

  • container - Reserved by Elementor
  • widget - Reserved by Elementor
  • element - Reserved by Elementor

​
Common Reserved Patterns

  • elementor-* - All Elementor-specific classes
  • e-* - Elementor shorthand classes
  • element-* - Element-specific classes

​
Alternative Names

​
Instead of container

Use these alternatives: 
/* Good alternatives */
.cont {
  max-width: 1200px;
  margin: 0 auto;
}
.wrapper {
  max-width: 1200px;
  margin: 0 auto;
}
.site-container {
  max-width: 1200px;
  margin: 0 auto;
}
.page-container {
  max-width: 1200px;
  margin: 0 auto;
}
.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

​
Instead of widget

Use these alternatives: 
/* Good alternatives */
.component {
  /* widget styles */
}
.block {
  /* widget styles */
}
.card {
  /* widget styles */
}
.panel {
  /* widget styles */
}

​
Instead of element

Use these alternatives: 
/* Good alternatives */
.item {
  /* element styles */
}
.part {
  /* element styles */
}
.section {
  /* element styles */
}
.unit {
  /* element styles */
}

​
Naming Best Practices

​
Use Descriptive Names

Choose names that clearly describe the purpose: 
/* Good: Descriptive */
.header-nav {
  /* navigation styles */
}
.hero-section {
  /* hero styles */
}
.card-featured {
  /* featured card styles */
}

/* Avoid: Generic */
.nav {
  /* too generic */
}
.hero {
  /* too generic */
}
.card {
  /* too generic */
}

​
Use Prefixes

Add prefixes to avoid conflicts: 
/* Brand prefix */
.brand-header {
  /* brand header styles */
}
.brand-button {
  /* brand button styles */
}

/* Project prefix */
.project-nav {
  /* project navigation */
}
.project-card {
  /* project card styles */
}

​
Use Semantic Names

Choose names based on function: 
/* Function-based */
.primary-button {
  /* primary action button */
}
.secondary-button {
  /* secondary action button */
}
.danger-button {
  /* destructive action button */
}

/* Size-based */
.small-text {
  /* small text size */
}
.large-text {
  /* large text size */
}

​
Testing Class Names

​
Check Before Import

Before importing, verify your class names:
  1. Search Elementor documentation for reserved names
  2. Test in a small batch first
  3. Check for conflicts with existing classes

​
Common Conflicts

Watch out for these common conflicts: 
/* These might conflict */
.nav {
  /* might conflict with navigation */
}
.btn {
  /* might conflict with buttons */
}
.card {
  /* might conflict with cards */
}

/* Use more specific names */
.main-nav {
  /* specific navigation */
}
.primary-btn {
  /* specific button */
}
.feature-card {
  /* specific card */
}

​
Error Messages

​
”reserved_class_name” Error

If you get this error:
1

Identify the Reserved Name

Check which class name is causing the error
2

Choose Alternative

Pick a different, non-reserved name
3

Update CSS

Replace the reserved name in your CSS
4

Re-import

Import the updated CSS

​
Prevention Tips

  • Use descriptive prefixes (brand-, project-, custom-)
  • Avoid generic names (container, widget, element)
  • Test small batches before importing large CSS files
  • Check documentation for reserved names

Writing CSS

CSS writing guidelines

Supported Properties

Complete property reference