So erstellen Sie ein Bildkarussell in Elementor

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 Free und Master Addons kostenlos. Das eigene Bildkarussell von Elementor deckt die Grundlagen (Beschriftungen, einen Leuchtkasten und Folien pro Gerät) ab, aber es hat kein Coverflow-Layout oder eine Navigation im Fortschrittsstil. Daher verwendet diese exemplarische Vorgehensweise 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 (Skalierung, Überlagerung, Beschriftung) gelten für den gesamten Satz, nicht pro Folie. Halten Sie die Skala unter 1,05. Eine Folie, die um 15% auf Schwebeflugzeug wächst, drückt in ihre Nachbarn und sieht aus wie ein Layout-Fehler. Für eine andere Hover-Animation auf jedem Bild platzieren Bild-Hover-Effekte Widgets in einem Raster.

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.

Dies ist der Grund, ein Karussell anstelle eines Rasters für die Fotografie zu verwenden. Das Karussell ist der Index, der Lightbox der Betrachter. Der Bildtitel und die Beschriftung für die Medienbibliothek werden mit dem Foto im Leuchtkasten angezeigt. Füllen Sie diese also vor der Veröffentlichung aus. Wenn der Index auf der Seite als Miniaturansicht angezeigt werden soll, anstatt hinter einem Klick versteckt zu sein, ist dies 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-Platten-Galerie 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.

Kategorie-Tab statt einer verschiebbaren Reihe wünschen? das ist ein anderes Widget Die Filterbare Bildergalerie Stellt die Bilder in ein Raster und filtert sie, wenn jemand auf eine Registerkarte klickt.

Live-Demo

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 Slider für Sockelheld„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.

Jedes Bild auf gleicher Höhe halten

Das Karussell zeigt jedes Bild in einem eigenen Verhältnis, so dass ein Porträtfoto neben einer Landschaft eine Lücke unter der kürzeren Folie hinterlässt. Die saubere Lösung besteht darin, die Bilder auf ein Verhältnis zuzuschneiden, bevor Sie sie hochladen. Wenn Sie dies nicht können, fügen Sie dem Widget beispielsweise eine CSS-Klasse hinzu same-height, und fügen Sie dies in Ihr benutzerdefiniertes CSS ein:

.same-height .swiper-slide img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

Jede Folie ist dann 260 Pixel groß und der Browser schneidet, was nicht passt.

Wenn Sie eine kontinuierliche Schriftrolle wünschen

Ein Bildkarussell bewegt sich Schritt für Schritt, auch wenn Autoplay eingeschaltet ist. Ein Streifen, der ohne anzuhalten gleitet, ist ein Festzelt, und Der Elementor-Führer-Leitfaden Zeigt drei Möglichkeiten, einen zu bauen.

Geben Sie jedem Bild einen eigenen Link

Die Bild Karussell Widget Öffnet jedes Bild im Lightbox und hat kein Linkfeld. Das eigene Karussell von Elementor hat eine benutzerdefinierte URL-Einstellung, sendet jedoch jede Folie an dieselbe Adresse. Wenn jeder Artikel sein eigenes Ziel benötigt, z. B. Kundenlogos oder Partner-Badges, erstellen Sie die Zeile mit dem Logo-Slider.

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