Offset-Karussell mit Transparenz
In diesem Tutorial lernst du, wie du mit Elementor-Karussell baust, das durch Offset Slides mit transparentem Effekt super modern ist. Dabei verwenden wir einen Container, das Nested Karussell Widget und etwas CSS (keine Sorge, der Code wird einfach einsetzbar sein!). Dieses Design lenkt den Fokus auf die mittlere Slide, während die angrenzenden Slides leicht sichtbar bleiben und durch Transparenz und Skalierung einen eleganten Effekt erzeugen.
Schau dir das Tutorial auf Youtube an:
Was du brauchst
- Elementor Pro und das Nested Karussell Widget
- CSS-Zugriff für individuelle Anpassungen
- Bilder oder Grafiken für dein Karussell (du kannst es aber auch mit jeglichen anderen Elementen befüllen)
Endergebnis: Das erwartet dich
Das Karussell wird folgende Merkmale haben:
- Offset Slides zu beiden Seiten, die die angrenzenden Inhalte leicht sichtbar machen.
- Transparenz- und Skalierungseffekt für die Slides, um den Fokus auf die Haupt-Slide zu lenken.
- Glatte Übergänge und individuell angepasste Navigationspfeile.
Schritt-für-Schritt-Anleitung
1. Elemente hinzufügen
- Starte eine neue Seite oder einen Abschnitt in Elementor.
- Ziehe einen Container in den Editor und stelle das Layout auf Boxed ein.
- Unter Layout > Zusätzliche Optionen > Overflow stellst du nun Ausgeblendet ein
- Ziehe das Nested Karussell Widget in den Container.
- Konfiguriere das Karussell:
- Slides Offset: Stelle „Beide Seiten“ ein, damit angrenzende Slides sichtbar bleiben.
- Slides on display: Wähle die Anzahl der sichtbaren Slides (z. B. 2).
- Aktiviere die Navigationspfeile und deaktiviere die Pagination
- Optional: Aktiviere Autoplay für ein sich automatisch bewegendes Karussell.
- Füge Inhalte zu den Slides hinzu:
- In jede Slide kannst du ein Bild-Widget oder andere Inhalte wie Titel und Text platzieren.
- Achte darauf, dass alle Bilder die gleiche Größe haben, um ein einheitliches Layout zu gewährleisten.
2. Schritt: Offset- und Transparenzeffekte mit CSS hinzufügen
Um den modernen Look mit transparenten Offset Slides zu erzeugen, fügst du einen benutzerdefinierten CSS-Code ein. Dieser sorgt dafür, dass:
- Die Haupt-Slide im Fokus bleibt.
- Die Offset Slides an den Seiten bis zum Bildschirmrand sichtbar sind.
CSS hinzufügen:
- Klicke auf den Container, in dem das Karussell liegt.
- Gehe zu Advanced > Custom CSS.
- Füge den folgenden CSS-Code ein:
selector .e-n-carousel {
overflow: visible;
}
selector .swiper-slide[aria-hidden="true"]::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*Anpassen auf die Hintergrundfarbe deiner Sektion*/
background-color: #1A1919;
opacity: 0.7;
pointer-events: none;
}
Je nachdem, welche Hintergrundfarbe deine Sektion hast musst du den Hexcode der „background-color“ auf diese Farbe setzen, damit der Transparenz-Effekt funktioniert.
3. Schritt: Navigationspfeile stylen + responsive Anpassung
Passe die Navigationspfeile an, damit sie ins Design deines Karussells passen.
- Gehe zu den Nested Karussell Einstellungen > Style > Navigation.
- Stelle die Größe, Farbe und Position der Pfeile ein.
Damit das Karussell auch auf Mobilgeräten perfekt aussieht:
- Passe in den Karussell-Einstellungen die Anzahl der Slides on display an (z. B. 1 für Mobilgeräte).
- Überprüfe die Darstellung der Offset Slides und navigiere bei Bedarf zu den responsiven Optionen in Elementor.
Fazit
Mit Offset Slides und einem transparenten Effekt kannst du ein Elementor-Karussell erstellen, das modern und professionell wirkt. Dieses Design hebt die Haupt-Slide hervor und schafft gleichzeitig einen eleganten Rahmen durch die angrenzenden Slides.
Das Beste daran: Mit Elementor und etwas CSS ist dieses Design nicht nur einfach umzusetzen, sondern auch flexibel anpassbar. Probiere es aus und verwandle deine Website in einen echten Hingucker! 🚀
