Das Loop Carousel ist das dynamische Karussell von Elementor Pro, statt Folien von Hand hinzuzufügen, baut man eine Folie als Vorlage und richtet das Widget auf eine Abfrage (Beiträge, Produkte, oder irgendein benutzerdefinierter Posttyp) und es füllt sich selbst, einen Beitrag hinzufügen, das Karussell aktualisiert Keine Bearbeitung erforderlich.
Es ist in Elementor 3.11 angekommen und es ist die Elementarkarussell-Widget Die meisten suchen tatsächlich, wenn sie nach einem Postkarussell oder einem Produktschieber suchen Es ist auch Pro-only, ohne kostenloses Äquivalent im Elementor-Kern, daher deckt die zweite Hälfte dieses Beitrags die ab Kostenlose Karussell Widgets Das bringt Sie näher, wenn Sie keine Lizenz haben.
Was dieser Leitfaden abdeckt
- Loop Carousel vs. Loop Grid: welches verwendet werden soll
- Was Sie brauchen, bevor Sie beginnen
- So erstellen Sie ein Schleifenkarussell in Elementor
- Die Einstellungen, die die Leute auf den Kopf stellen
- Loop Carousel für WooCommerce Produkte
- Kein Elementor Pro? der freie Weg
- Wenn ein Loop Carousel die falsche Wahl ist
- Häufig gestellte Fragen
Loop Carousel vs Loop Grid: welches
Gleicher Motor, gleiche Loop Item Vorlage, andere Präsentation Das Gitter stapelt vertikal, Das Karussell legt die gleichen Items auf eine horizontale Spur.
Wählen Sie das Karussell, wenn die Artikel optional sind: ein “Sie könnten auch mögen” Streifen, verwandte Beiträge, vorgestellte Produkte Niemand muss Punkt sieben sehen, damit die Seite einen Sinn ergibt.
Wählen Sie das Raster, wenn es sich bei den Artikeln um die Seite handelt Ein Archiv, eine Shop-Kategorie, ein Blog-Index, Zwei Drittel eines Kategorien-Listings hinter einem Pfeil zu verstecken kostet Sie Conversions, denn ein Shopper, der klicken muss, um mehr Produkte zu sehen, tut es in der Regel nicht.
Die Regel, die ich einem Client geben würde: wenn der Abschnitt eine Überschrift wie “Mehr vom Blog,” Karussell hat, Wenn die Überschrift der Seitentitel ist, Raster.
Was Sie brauchen, bevor Sie beginnen
- Elementor Pro. Loop Carousel ist nicht im kostenlosen Plugin enthalten und es gibt keine Teilversion davon.
- Eine Loop-Element-Vorlage. Dies ist das Single-Dia-Design: Featured-Bild, Titel, Auszug, Button Einmal gebaut in Theme Builder, überall wiederverwendet.
- Abzufragender Inhalt. Beiträge, Produkte oder ein registrierter benutzerdefinierter Posttyp.
Bei älteren Installationen müssen Sie es möglicherweise auch unter Elementor → Einstellungen → Funktionen aktivieren. Es wurde hinter einem Experiment-Flag ausgeliefert und blieb dort für ein paar Versionen, bevor es stabil blieb.
So erstellen Sie ein Schleifenkarussell in Elementor
Bauen Sie zuerst die Folie, dann das Karussell Umgekehrt machen bedeutet, innerhalb einer engen Vorschau zu gestalten.
- Erstellen Sie die Loop-Element-Vorlage. Vorlagen → Theme Builder → Loop Item → Neu hinzufügen Wählen Sie den Beitragstyp, den es rendern wird Sie entwerfen eine Karte, keine Liste, und Elementor zeigt ein einzelnes Element an und wiederholt es später.
- Bauen Sie die Karte mit dynamischen Tags. Fügen Sie ein Bild-Widget hinzu und stellen Sie seine Quelle auf Dynamic → Featured Image. Überschriften-Widget → Dynamic → Post Title. Texteditor → Post Excerpt. Button → Dynamic → Post URL. Hier ist nichts fest codiert; jedes Feld zieht von dem Beitrag, der in diesem Slot landet.
- Veröffentlichen Sie die Vorlage Und überspringen Sie die Eingabeaufforderung für Anzeigebedingungen. Schleifenelemente benötigen keine Bedingungen, da sie von einem Widget aufgerufen und nicht einem Standort zugewiesen werden.
- Lassen Sie das Loop Carousel-Widget fallen Wählen Sie auf Ihrer Seite die Vorlage aus, die Sie gerade erstellt haben, unter Wählen Sie eine Vorlage.
- Stellen Sie die Abfrage. Quelle (Beiträge, Produkte, oder Ihr CPT), dann verengen Sie es: nach Taxonomie einbinden, den aktuellen Beitrag ausschließen, Beiträge pro Seite setzen Schalten Sie “Duplikate vermeiden” ein, wenn sich auf derselben Seite eine weitere Schleife befindet, sonst wiederholt Ihr Related-Posts-Streifen, was sich bereits in der Seitenleiste befindet.
- Das Karussell konfigurieren. Folien pro Ansicht, Folien zum Scrollen, Autoplay, Endlosschleife, Geschwindigkeit, Pause beim Hover Folien pro Ansicht separat für Desktop, Tablet und Mobil mit den Gerätesymbolen oben im Panel einstellen.
- Stylen Sie die Navigation. Pfeile, Punkte oder Bruch. Größe, Farbe, Position und Schwebezustand sitzen alle in der Registerkarte Stil.
Die Einstellungen, die die Leute auf den Kopf stellen
Infinite Loop braucht genug Items. Elementorklone rutschen, um den Wrap-Around vorzutäuschen, und es braucht mindestens das Doppelte Ihrer Slides pro Ansicht, um es unsichtbar zu machen Vier Beiträge bei Three-per-View springen sichtbar, wenn es wickelt Entweder Posts pro Seite anheben oder die Schleife ausschalten.
Posts-per-Page ist ein Abfragelimit, kein Displaylimit. Stellen Sie es auf 6 und das Karussell fasst insgesamt sechs Gegenstände, von denen jedoch viele sichtbar sind. Die Leute stellen es auf 3, um es mit Dias pro Ansicht zu vergleichen, und fragen sich dann, warum es nichts gibt, zu dem man scrollen kann.
Kantenlücke ändert den Hinweis. Ein Karussell, das bündig am Behälterrand endet, sieht fertig aus Fügen Sie einen kleinen Kantenspalt hinzu, damit die nächste Folie einspäht und die Leute wissen, dass sie wischen müssen. Es sind ein paar Pixel und es ändert messbar die Interaktionsrate.
Autoplay plus Links ist ein schlechtes Paar. Wenn Ihre Folien anklickbar sind und sich das Karussell auf einem Timer bewegt, greift jemand nach einer Karte und klickt auf die, die sie ersetzt hat Pause-on-hover fixiert das Desktop-Gehäuse Bei Berührung gibt es keinen Hover, also für Klickbare Karten Ich würde das Autoplay vollständig ausschalten.
Loop Carousel für WooCommerce Produkte
Gleicher Vorgang, ein Unterschied: Stellen Sie die Quelle auf Produkte und Sie erhalten WooCommerce-spezifische Abfragesteuerungen Filtern Sie nach Kategorie, Tag oder Attribut, sortieren Sie nach Preis, Beliebtheit oder Datum und schließen Sie nicht vorrätige Artikel aus.
Die Loop Item Vorlage für Produkte sollte den Preis und eine Add-to-Cart-Taste als dynamische Elemente tragen, nicht als statischen Text. Miss das und jede Karte im Karussell zeigt den gleichen Preis, was genau die Art von Bug ist, der bis zur Produktion überlebt, weil es in der Editorvorschau gut aussieht.
Verwandte Produkte, kürzlich angesehen, und “komplettieren Sie den Look” Streifen sind alle das gleiche Widget mit einer anderen Abfrage Und wenn Sie nur ein Produkt aufgerufen brauchen, anstatt einen Streifen, die Ausgewähltes Produkt-Widget Macht das ganz ohne Abfrage Es ist ein Pro Widget, und es ist das einzige WooCommerce Produkt Widget Master Addons ships.
Kein Elementor Pro? hier der freie Weg
Loop Carousel ist Pro. Wenn Sie auf kostenlosem Elementor sind, erhalten Sie es nicht und kein kostenloses Addon führt das Loop Item-Vorlagensystem neu ein.
Was man kostenlos bekommen kann, ist das Ergebnis: ein dynamisches Karussell, das Beiträge oder Produkte zieht und sich selbst aktualisiert Master Addons' Blog-widget Karussellmodus im kostenlosen Plugin hat Abfrage nach Posttyp, Kategorie, Tag oder Autor, Auswahl eines Layouts, Umschaltung der Anzeige auf Karussell, Konfiguration der gleichen Pfeile, Punkte, Autoplay und Per-Breakpoint-Steuerelemente.
Der Kompromiss ist ehrlich: Du gestaltest die Karte nicht Das Blog-Widget gibt dir Layout-Voreinstellungen und einen Style-Tab statt einer leeren Loop Item-Leinwand, wenn du Pixelkontrolle über die Folie brauchst, ist der Ansatz von Elementor Pro besser, wenn du “die letzten sechs Beiträge in einem Slider brauchst, der anständig aussieht”, kommt das kostenlose Widget schneller an.
Produkte sind dünner, und es lohnt sich, klar zu sagen: es gibt kein kostenloses Produktkarussell-Widget Ein verschiebbarer, sich selbst aktualisierender Produktstreifen braucht das Schleifenkarussell von Elementor Pro, oder ein handgefülltes Layout wie das unten stehende Die Produkt Karussell Ratgeber Funktioniert durch beide Und wenn Ihre Folien feste Bilder sind und keine Abfrage, ist die freie Bild Karussell Widget Ist die kürzere Route, allerdings baut man an diesem Punkt einen Schieberegler und keine Schleife.
Es gibt noch eine dritte kostenlose Option, die es wert ist, darüber informiert zu werden Master Addons Schiffe 20 benannte Karussell- und Schieberkonstruktionen Als einführbar Widget-builder Dateien, und 8 davon importieren kostenlos Sie sind nicht abfragegesteuert, also füllen Sie die Elemente von Hand aus, aber zwei sitzen in der Nähe dessen, was ein Loop Carousel produziert. Quadranten-Paged-Katalog Seiten ein Raster von neun Artikelfeldern jeweils drei Stück mit jeweils einem Bild, einer Kategorie, einem Titel und einer Kopie, was einer ausgelagerten Produktschleife am nächsten kommt. Ledger Index Schieber Legt einen anklickbaren Index der Einträge neben eine Anzeigeplatte, die für Archive und Werklisten erstellt wurde. Alle 20 werden auf der gesammelt Karussell Widgets Hub.
Wenn ein Loop Carousel die falsche Wahl ist
Drei Fälle, und ich habe beobachtet, wie alle drei auf Kundenseiten schiefgehen.
Ihre Archivseite. Ein Kategorieneintrag in einem Karussell bedeutet, dass Googles Crawler sechs Produkte sieht, bei denen Sie sechzig haben. Der Rest befindet sich im DOM, aber das Signal an einen Benutzer und an jeden, der die Tiefe der Seite beurteilt, ist, dass diese Kategorie dünn ist.
Über der Falte auf dem Handy. Ein dynamisches Karussell ist eine Abfrage, ein Template-Render und ein Schieberinitialisierung Bevor irgendetwas malt Setzen Sie das oben auf eine Telefonseite und Ihre größte zufriedenstellende Farbe ist ein Spinner.
Weniger als fünf Artikel. Ein Karussell mit drei Rutschen ist ein Raster, das die Leute arbeiten lässt Zeige einfach alle drei.
Häufig gestellte Fragen
Ist Elementor Loop Carousel kostenlos?
No. Loop Carousel benötigt Elementor Pro, und es gibt keine reduzierte kostenlose Version Die kostenlose Alternative ist ein abfragegesteuertes Karussell-Widget aus einem Addon, und das Blog-Widget von Master Addons hat in seiner freien Stufe einen Karussellmodus, der Beiträge dynamisch zieht Für handgefüllte Layouts sind 8 der 20 importierbaren Karusselldesigns von Master Addons ebenfalls kostenlos.
Was ist der Unterschied zwischen Loop Grid und Loop Carousel?
Sie teilen sich die gleiche Loop Item Vorlage und Abfragesteuerung Das Loop Grid ordnet Ergebnisse in Zeilen und Spalten an; das Loop Carousel legt sie auf eine horizontale Gleitbahn mit Pfeilen und Punkten Verwenden Sie das Raster für Archive und Listings, das Karussell für optionale “verwandte” oder “vorgestellte” Streifen.
Wie füge ich ein Loop Carousel in Elementor hinzu?
Erstellen Sie zuerst eine Loop-Element-Vorlage im Theme Builder, indem Sie dynamische Tags für das Bild, den Titel und den Auszug verwenden. Veröffentlichen Sie sie, ziehen Sie dann das Loop-Karussell-Widget auf Ihre Seite, wählen Sie diese Vorlage aus, legen Sie die Abfragequelle und die Filter fest und konfigurieren Sie Folien pro Ansicht und automatische Wiedergabe unter den Karusselleinstellungen.
Warum zeigt mein Loop Carousel keine Beiträge an?
Normalerweise die Abfrage Überprüfen Sie, ob der Beitragstyp der Loop Item-Vorlage mit der Abfragequelle des Widgets übereinstimmt, da eine für Beiträge erstellte Vorlage keine Produkte rendert. Die zweithäufigste Ursache ist ein Taxonomiefilter ohne passenden Inhalt. Drittens ist der Posts-per-Page-Satz niedriger als Sie denken.
Kann Loop Carousel benutzerdefinierte Posttypen anzeigen?
Ja. Jeder registrierte öffentliche Posttyp wird im Abfragequellen-Dropdown angezeigt und seine benutzerdefinierten Felder sind als dynamische Tags verfügbar, wenn Sie ACF, Meta Box oder Pods verwenden. Erstellen Sie die Loop-Elementvorlage für diesen Posttyp und das Karussell erledigt den Rest.
Wie mache ich ein Loop Carousel reaktionsfähig?
Setzen Sie Dias-per-View separat auf jeden Haltepunkt mit den Gerätesymbolen oben in der Einstellung Drei auf dem Desktop, zwei auf dem Tablet, einer auf dem Handy ist die sichere Voreinstellung Überprüfen Sie auch die Pfeilgröße auf dem Handy, denn die Desktop-Voreinstellung ist oft zu klein, um ein komfortables Tippziel zu sein.
Wohin von hier aus
Wenn Sie Pro haben, bauen Sie zuerst die Loop Item-Vorlage und behandeln Sie sie als Design-Asset, das Sie für den Rest der Website über Gitter und Karussells wiederverwenden werden. Es ist das Stück, das sich auszahlt.
Wenn Sie die Karte lieber als wiederverwendbares Widget als als Vorlage bauen möchten, ist das Erstellen Ihres eigenen Widgets ist für, und die Preisseite Deckt die Ebene ab, in der es sitzt.
Wenn nicht, dann fange mit den kostenlosen abfragegesteuerten Widgets an und schaue, ob die Layout-Voreinstellungen dich nah genug bringen Beide Pfade werden auf der Elementorkarussell-Widgets Seite, nebst den restlichen Karussell-Optionen Noch über Format entscheiden? Karussell gegen Schieber Legt fest, welche Form Ihr Abschnitt tatsächlich benötigt, und Das Slider Plugin Roundup Deckt die Plugins ab, die es erstellen.
