Elementor ist Deutschlands beliebtester WordPress Page Builder — aber die meisten Nutzer kratzen nur an der Oberfläche. Mit Custom CSS kannst du Effekte erzielen, die mit den Standard-Einstellungen unmöglich sind: Hover-Animationen, Glassmorphism, Parallax-Effekte und vieles mehr. In diesem Artikel zeige ich dir meine liebsten CSS-Tricks für Elementor — alle praxiserprobt aus echten Kundenprojekten.
Wo füge ich Custom CSS in Elementor ein?
Elementor Pro bietet ein „Custom CSS"-Feld in den erweiterten Einstellungen jedes Widgets. Dort schreibst du CSS mit dem Selektor selector als Platzhalter für das aktuelle Element. In der kostenlosen Version kannst du Custom CSS über den WordPress Customizer (Design → Customizer → Zusätzliches CSS) oder ein Child-Theme einfügen.
Mein Tipp: Für seitenweite Effekte nutze den Customizer, für einzelne Elemente das Widget-eigene CSS-Feld. So bleibt der Code übersichtlich und wartbar.
Effekt 1: Smooth Hover-Zoom auf Bilder
Ein dezenter Zoom-Effekt beim Hover über Bilder — der Klassiker für Portfolio- und Team-Seiten:
selector img {
transition: transform 0.4s ease, filter 0.4s ease;
}
selector:hover img {
transform: scale(1.05);
filter: brightness(1.1);
}Der Trick ist die ease-Timing-Function und die moderate Skalierung von 1.05. Mehr als 1.08 wirkt unruhig, weniger als 1.03 fällt kaum auf. Der zusätzliche brightness-Filter gibt dem Effekt mehr Tiefe. Wichtig: Setze overflow: hidden auf den Container, damit das gezoomte Bild nicht über den Rand hinausragt.
Effekt 2: Glassmorphism-Karten
Der angesagteste Design-Trend: halbtransparente, milchig verschwommene Karten, die über einem farbigen Hintergrund schweben:
selector {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}Glassmorphism funktioniert am besten auf dunklen oder farbigen Hintergründen mit Gradienten. Auf weißem Hintergrund geht der Effekt verloren. Browser-Support ist 2026 bei über 95 % — nur sehr alte Browser haben Probleme mit backdrop-filter.
Effekt 3: Text-Gradient (Farbverlauf auf Text)
Ein Farbverlauf auf Überschriften — eye-catching und modern:
selector .elementor-heading-title {
background: linear-gradient(135deg, #6366f1, #8b5cf6, #a855f7);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}Nutze für den Gradient Farben, die zu deiner Marke passen. Der 135-Grad-Winkel wirkt dynamischer als ein horizontaler Verlauf. Mein Gradient Generator hilft dir, den perfekten Farbverlauf zu finden.
Effekt 4: Animierte Unterstreichung bei Links
Statt der langweiligen Standard-Unterstreichung — eine animierte Linie, die von links einfährt:
selector a {
text-decoration: none;
position: relative;
}
selector a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: currentColor;
transition: width 0.3s ease;
}
selector a:hover::after {
width: 100%;
}Dieser Effekt funktioniert in Textblöcken, Navigationen und CTAs. Tipp: Ändere left: 0 zu right: 0 und die Linie fährt von rechts ein — oder nutze left: 50%; transform: translateX(-50%) für eine Expansion aus der Mitte.
Effekt 5: Scroll-basierte Reveal-Animation
Elemente, die beim Scrollen sanft einblenden — ohne JavaScript-Plugin:
/* Im Customizer oder Theme CSS */
.reveal-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-on-scroll.visible {
opacity: 1;
transform: translateY(0);
}Dafür brauchst du ein kleines JavaScript-Snippet (im Elementor HTML-Widget oder Theme):
const observer = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) e.target.classList.add('visible');
});
}, { threshold: 0.1 });
document.querySelectorAll('.reveal-on-scroll')
.forEach(el => observer.observe(el));Der IntersectionObserver ist deutlich performanter als Scroll-Event-Listener und verursacht keine Layout-Shifts. Füge die CSS-Klasse reveal-on-scroll über Elementor's „CSS-Klassen"-Feld hinzu.
Performance-Tipp: Custom CSS vs. Plugins
Jedes Animations-Plugin (Animate.css, WOW.js etc.) lädt eine zusätzliche CSS- und/oder JavaScript-Datei — auf jeder Seite, ob genutzt oder nicht. Die Custom-CSS-Lösung oben ist leichtgewichtiger: kein zusätzlicher HTTP-Request, kein ungenutzter Code. Für Core Web Vitals kann das den entscheidenden Unterschied machen.
Du willst Custom-Effekte auf deiner Elementor-Website, aber CSS ist nicht dein Ding? Ich helfe dir gerne — von einzelnen Effekten bis zum kompletten Custom-Design.
Passende Leistungen & Tools
