Lassen Sie die fallen Bild Karussell Widget Auf die Seite, wählen Sie Ihre Bilder aus der Mediathek, stellen Sie für jedes Gerät Folien pro Ansicht ein und schalten Sie die automatische Wiedergabe ein Vier Schritte, etwa zwei Minuten, und Keine Lizenz erforderlich.
Das ist die Kurzfassung Der Rest davon umfasst die Einstellungen, die ein Karussell, das funktioniert, von einem, das auf Telefonen leicht falsch aussieht, trennen, dazu das Coverflow-Layout, die Lightbox, und die beiden Bildfehler, die ein ansonsten feines Karussell langsam machen Nicht sicher, ob ein Bildkarussell überhaupt die richtige Form hat? die Vollständige Karussell-Widget-Reihe Vergleicht jeden Typ an einem Ort und die Karussell versus Slider-Panne Legt die Namensgebung fest.
Was Sie brauchen
Elementor frei und Master Addons frei Das elementoreigene Image Carousel deckt die Grundlagen ab (Captions, eine Lightbox und Slides pro Gerät), hat aber kein Coverflow-Layout, keine Zeilen oder eine Navigation im Fortschrittsstil, daher verwendet dieser Walkthrough die Master Addons Bildkarussell, das ebenfalls kostenlos ist und Bildunterschriften, eine Lightbox und ein Coverflow-Layout hinzufügt.
Schritt 1: Das Widget hinzufügen
Öffnen Sie die Seite in Elementor und durchsuchen Sie das Widget-Panel nach “Bildkarussell” Ziehen Sie es in einen Container.
Es rendert mit Platzhalterbildern, damit Sie die Form sehen können, bevor Sie Inhalte festlegen Lassen Sie sie vorerst. Es ist einfacher, das Layout gegen konsistente Platzhalter einzurichten als gegen Ihre echten Fotos, die alle unterschiedliche Größen haben.
Schritt 2: Fügen Sie Ihre Bilder hinzu
Klicken Sie auf das Galeriefeld und wählen Sie aus der Mediathek aus, oder laden Sie es hoch Bestellangelegenheiten und Drag-to-Reorder-Arbeiten, also setzen Sie Ihr stärkstes Bild an die erste Stelle, denn auf dem Handy ist es möglicherweise das einzige, das jemand sieht.
Unter den Inhaltseinstellungen finden Sie Bildgröße, Bildunterschriftquelle und Linkverhalten.
Die Bildgröße ist die Einstellung, die die Leute auf Voll und Bedauern verlassen. Voll bedeutet der ursprüngliche Upload: ein 4000 px Kamera-Export serviert in eine 400 px Folie WordPress hat bereits kleinere Versionen generiert; pick medium_large oder large Und das Gewicht des Karussells wird man um das meiste davon reduzieren, ohne dass ein Unterschied erkennbar ist.
Bildunterschriften Ziehen Sie aus dem Feld Bildunterschrift oder Beschreibung der Mediathek. Wenn die Folien also Text benötigen, schreiben Sie ihn dort, anstatt im Widget nach einem Textfeld pro Folie zu suchen.
Schritt 3: Navigation
Pfeile, Punkte, Bruch oder eine Bildlaufleiste Wählen Sie danach, wie viele Folien Sie haben:
- Unter 8 Folien: Punkte. Die Leute können das ganze Set auf einen Blick sehen und herumspringen.
- 8 bis 20: Nur Pfeile Zwanzig Punkte sind ein Abstrich, keine Kontrolle.
- Über 20: Pfeile plus Bruch (“04 / 32”).Die Zahl ist das einzige, was jemandem sagt, wo er ist.
Überprüfen Sie auf Mobilgeräten die Pfeilgröße. Die Desktop-Voreinstellung ist oft ein 30-Px-Ziel, und das zugängliche Minimum für einen Tipp beträgt 44-Px. Bumpen Sie es vollständig am mobilen Haltepunkt oder lassen Sie die Pfeile fallen und verlassen Sie sich auf Wischen.
Schritt 4: Karussellverhalten
Das ist das Gremium, das entscheidet, ob sich das Karussell richtig anfühlt.
Folien pro Ansicht: dreimal einstellen. Klicken Sie auf die Gerätesymbole oben in der Einstellung und geben Sie Desktop, Tablet und Mobilgerät ihren eigenen Wert an Vier, zwei, eins ist die sichere Voreinstellung Dieser einzige Schritt ist der Unterschied zwischen einem Karussell, das auf Telefonen funktioniert, und einem, das vier gequetschte Miniaturansichten zeigt.
Folien zum Scrollen. Stellen Sie es für ein kontinuierliches Browsing-Feeling auf 1 oder passen Sie Dias pro Ansicht für Seiten-Paging an. Passen Sie besser an, wenn die Folien Gruppen bilden; 1 ist besser für einen langen undifferenzierten Satz.
Autoplay. Schalten Sie es für dekorative Galerien ein Schalten Sie es aus, wenn die Folien anklickbar sind, denn jemand greift nach einem Bild und klickt auf das Bild, das es ersetzt hat. Der Desktop für die Pause-on-hover-Abdeckungen ist jedoch nicht mit dem Mauszeiger verbunden.
Infinite Loop braucht genug Slides. Swiper-Klone rutschen, um den Wrap vorzutäuschen, und er muss mindestens Ihre Dias pro Ansicht verdoppeln. Vier Bilder bei drei Bildern pro Ansicht springen sichtbar. Fügen Sie Bilder hinzu oder schalten Sie die Schleife aus.
Geschwindigkeit. 300 bis 500 ms. Unter 200 sieht es eher wie ein Schnitt als wie ein Übergang aus; über 800 Personen beginnen zweimal zu klicken.
Das Coverflow-Layout
Schalten Sie Layout von Standard auf Coverflow und die Seitenschlitten drehen sich in 3 D weg, dimmen und treten zurück, so dass die mittlere Folie die einzige lesbare bleibt.
Es passt zu Portfolios und Fallstudien, alles, wo ein Bild nach dem anderen der Punkt ist. Es ist falsch für alles, was die Leute vergleichen müssen, denn das gesamte Design dient dazu, einen davon abzuhalten, die Nachbarn anzusehen.
Zwei Einstellungen, um nach rechts zu kommen: Drehen Sie zwischen 30 und 40 Grad (Vergangenheit 50 und die Seitenschlitten werden zu unlesbaren Schlitten) und zentrierte Schlitten auf, oder das aktive Bild sitzt bündig nach links und die Komposition kollabiert.
Coverflow ist einer von vier tiefenbasierten Stilen. Flip, Arc und Orbit sind die anderen drei, und die Elementor 3 D Karussellführung Deckt ab, wofür jeder gut ist.
Styling der Folien
Die Style-Tab-Handles verarbeiten den Abstand zwischen Dias, den Randradius, die Schatten und den Schwebezustand.
Die Einstellung, die einen zweiten Gedanken wert ist, ist Lücke. Null Lücke lässt das Karussell als einen kontinuierlichen Bildstreifen lesen, was für ein Panorama richtig und für verschiedene Elemente falsch ist. 16 bis 24 x ist der Bereich, in dem Folien als separate Karten gelesen werden, ohne dass die Zeile spärlich aussieht.
Hover-Effekte (Skala, Overlay, Bildunterschrift enthüllt) gelten für das gesamte Set, nicht pro Folie. Halten Sie die Skala unter 1,05. Eine Folie, die beim Hover um 15% wächst, drängt in ihre Nachbarn und sieht aus wie ein Layout-Bug.
Lightbox und Bildunterschriften
Schalten Sie die Leuchtbox ein und klicken Sie auf eine Folie, öffnet sich das Bild in Originalgröße über der Seite, wobei die nächsten und vorherigen Bedienelemente durch das gesamte Karussell gehen.
Das ist der Grund, für die Fotografie ein Karussell statt eines Rasters zu verwenden Das Karussell ist der Index; die Lightbox ist der Betrachter Titel und Untertitel tragen sich durch in die Lightbox, also Bildunterschrift einmal und es funktioniert an beiden StellenWenn Sie möchten, dass der Index auf der Seite als Miniaturbildstreifen sichtbar ist und nicht hinter einem Klick versteckt, dann ist das der Galerie-schieber Widget statt, das Pro braucht.
Eine Vorsicht: Die Lightbox bedient das Bild in voller Größe, nicht das Miniaturbild Wenn Sie die Bildgröße auf einstellen medium_large Für das Karussell und Ihre Originale sind 8 MB Kamera-Dateien, die Lightbox wird immer noch die 8 MB-Version holen Komprimieren Sie die Originale beim Upload, nicht nur die Display-Größe.
Wenn Sie Miniaturansicht-Navigation wünschen
Das Bildkarussell ist eine einzelne Reihe. Es gibt keinen Miniaturbildstreifen, der eine große Vorschau ansteuert. Wenn Sie dieses zweiteilige Layout suchen, importieren Sie das Vitrine Plate Gallery Stattdessen ist eines der freien Designs in der Sammlung von Schiebervorlagen: eine einzelne Platte unter einem Miniaturbildstreifen, mit einem Bildunterschriftspanel, das einen bearbeitbaren Bilddatentisch für Ort, Zeit, Objektiv, Blende, Verschluss und ISO enthält. Es wurde für die Fotografie entwickelt. Die gleiche Vorschau-plus-Daumennägel-Form meinen die meisten Menschen, wenn sie nach einem Videokarussell fragen, und die Videokarussell und Galerie-Schieberegler Deckt diese Version ab.
Um es zu importieren: Master Addons → Widget Builder → Widget importieren, ziehen Sie das JSON hinein, und es erscheint in Elementor unter Favoriten Es läuft auf dem kostenlosen Plugin, keine Pro-Lizenz erforderlich Dieselbe Sammlung hat die Plinth Hero Slider„ein Vollblut-Helden-Slider mit Per-Slide-Links, der ebenfalls kostenlos importiert werden kann. Insgesamt zwanzig benannte Entwürfe„Acht davon frei.
Pfeilstyling
Größe, Farbe, Hintergrund, Randradius und Position: innerhalb des Karussells, außerhalb davon oder überlappend mit den Kanten.
Pfeile, die außerhalb des Karussells positioniert sind, brauchen horizontalen Raum, und an einem Behälter über die gesamte Breite gibt es keinen. Sie werden klemmen. Entweder halten Sie den Behälter schmaler als den Aussichtsport oder positionieren Sie die Pfeile darin.
Das Ergebnis
Bevor Sie es fertig aufrufen, laden Sie die Seite auf einem echten Telefon über Mobilfunk Nicht der Geräteemulator des Browsers, der die Größe des Ansichtsfensters ändert, aber die Verbindung und GPU Ihres Desktops beibehält Die meisten Karussellprobleme treten nur auf echter Hardware in einem echten Netzwerk auf.
Zwei Fehler, die ein Karussell langsam machen
Servieren von Bildern in Originalgröße. Oben abgedeckt, und es ist das große Ein Karussell mit zehn Dias in voller Größe auf einer Fotoseite kann 20 MB groß sein Das gleiche Karussell bei large Unter 2 MB liegt und niemand erkennen kann.
Über die Falte legen mit Autoplay auf. Das Karussell wird zu Ihrem größten zufriedenstellenden Lack, und durch Autoplay animiert der Browser während der leistungssensibelsten Sekunde des Seitenladens, muss ein Karussell oben stehen, schalten Sie das Autoplay aus und lassen es still stehen, bis sich die Seite eingependelt hat.
Logos sind eine andere Aufgabe als Fotografien. Sie tauchen in nicht übereinstimmenden Formen und Farben auf und brauchen einen Abend, bevor sie in einer Reihe sitzen, die die Logo-Karussell-Durchgang Durchgeht.
Häufig gestellte Fragen
Hat Elementor ein kostenloses Bildkarussell?
Ja. Das kostenlose Plugin von Elementor beinhaltet ein Image Carousel Widget mit Pfeilen, Punkten, Bildunterschriften, einer Lightbox und Autoplay Das Master Addons Image Carousel, ebenfalls kostenlos, fügt ein Coverflow-Layout, mehrere Zeilen, Fortschritts, Bruch - und Scrollbar-Navigation sowie Styling für normale, Hover - und aktive Folien hinzu Jede Einstellung ist in der aufgeführt Bild Karussell Dokumentation.
Wie mache ich ein Elementor-Bildkarussell responsiv?
Setzen Sie Dias-per-View separat auf jeden Haltepunkt, indem Sie die Gerätesymbole oben in der Einstellung verwenden, anstatt einen Wert für alle Bildschirme zu belassen Vier auf dem Desktop, zwei auf dem Tablet, einer auf dem Handy funktioniert für die meisten Galerien Pfeilgröße überprüfen auch auf dem Handy, weil die Standardeinstellung oft unter dem 44 px zugänglichen Tippziel liegt.
Wie füge ich einem Elementor-Bildkarussell Bildunterschriften hinzu?
Bildunterschriften stammen aus dem Feld Bildunterschrift oder Beschreibung der Mediathek, nicht aus einem Textfeld im Widget, Legen Sie die Bildunterschriftenquelle in den Inhaltseinstellungen des Widgets fest, bearbeiten Sie dann den Text auf jedem Bild in der Mediathek, sie werden automatisch in die Lightbox übertragen.
Kann ich jedes Bild im Karussell mit einer anderen URL verknüpfen?
Ja. Legen Sie das Linkverhalten in den Inhaltseinstellungen auf Benutzerdefinierte URL fest und jede Folie nimmt ihr eigenes Ziel aus dem Linkfeld des Medienelements. Danach sind die Leute, wenn sie nach einem Bildkarussell mit mehreren benutzerdefinierten URLs suchen.
Warum springt mein Bildkarussell, wenn es in einer Schleife läuft?
Nicht genug Folien für die Schleife Swiper-Klone rutschen, um den Wrap-Around zu erstellen, und benötigen mindestens die doppelte Anzahl von Dias pro Ansicht. Vier Bilder, die jeweils drei angezeigt werden, springen jeden Zyklus. Fügen Sie weitere Bilder hinzu oder schalten Sie die Endlosschleife aus.
Warum wird mein Bildkarussell nicht angezeigt, nachdem ich das Cachen aktiviert habe?
Durch das Kombinieren oder Zurückstellen von JavaScript wurde das Laden von Swiper gestoppt, bevor der Init-Code ausgeführt wurde Ausschließen swiper, elementor-frontend und jquery-core Aus JS-Optimierung in Ihrem Cache-Plugin und auf LiteSpeed fügen Sie sie ebenfalls zum Ausschlussfeld für den Gastmodus hinzu. Vollständige Komplettlösung: Fehlerbehebung beim Elementor-Swiper-Schieberegler.
