Karussell & Loop Karussell mit Elementor erstellen

Bei den Elementen Karussell und dem neuen Loop Karussell verliert man schnell die Kontrolle über die Abstände zwischen den einzelnen Elementen. Mit den nachfolgenden Einstellungen bleiben Ihre Karussell-Elemente in Elementor einheitlich und gut steuerbar.

Einstellungen im äußersten Container

1. Der äußerste Container sollte keinen Außenabstand haben. Der Innenabstand oben und unten ist üblicherweise 0, links und rechts entspricht dem mobilen Seitenrand (beispielsweise 20px). Damit stößt das Karussell auf Mobile nicht an die Ränder an.
2. Innerhalb des äußersten Containers sollte möglichst sofort das Karussell-Element folgen, eine tiefere Verschachtelung in weitere Container macht die Steuerung unnötig kompliziert.

Einstellungen im Karussell-Element

1. Die horizontale Position des Previous Arrow und Next Arrow wird auf den gewünschten Wert eingestellt, beispielsweise -50px. Damit befinden sich die Pfeile außerhalb der Contentbreite der Seite.
2. Im Karussell-Element selbst sollte der Wert Gap between slides auf den gewünschten Abstand eingestellt werden, beispielsweise 16px. Alle anderen Zwischenabstände werden später auf 0 gesetzt, damit diese Einstellung die tatsächliche Gap bestimmt.
3. Die Innen- und Außenabstände des Karussell-Elements werden allesamt auf 0 gesetzt.

Einstellungen in den Slides oder dem Loop Item Template

Je nachdem, ob Sie ein Karussell oder Loop Karussell verwenden, müssen Sie die Einstellungen auf tiefster Ebene entweder in den einzelnen Slides oder dem Loop Item Template vornehmen.

1. Alle Innen- und Außenabstände setzen Sie auf 0.

Responsive Optimierung

Im Laptop-Breakpoint sollten die Pfeile weiter nach innen verschoben werden, beispielsweise über einen Wert von -10px.