Bild Karussell

Eine Reihe statischer Bilder frisst Platz und fordert die Besucher auf, an jedem vorbei zu scrollenEin Karussell zeigt in einem kompakten, wischbaren Schieberegler das gleiche Set, das die Leute tatsächlich berühren Die Bild Karussell Widget in Master-Addons für Elementor Erstellen Sie diesen Schieberegler aus einer normalen WordPress-Galerie und fügen Sie dann Autoplay, eine Lightbox, mehrere Navigationsstile und einen Coverflow-Modus hinzu, alle aus dem Elementor-Panel.

Sie wählen die Bilder aus, wählen aus, wie viele gleichzeitig angezeigt werden, und entscheiden, wie sich Besucher zwischen ihnen bewegen Keine Shortcodes, kein separates Slider-Plugin Diese Anleitung durchläuft jede Einstellung im Widget, vom Laden der Galerie bis zum Styling der Pfeile.

Bevorzugen, zuerst anzusehen? dieses kurze Tutorial behandelt das Image Carousel von der Galerie bis zum Styling:

Was das Image Carousel Widget macht #

Das Widget verwandelt eine Auswahl von Bildern in ein verschiebbares Karussell, es zeigt ein oder mehrere Bilder pro Ansicht, schreitet alleine oder auf Klick voran und öffnet jedes Bild in einer Lightbox für einen Full-Size-Look Bildunterschriften, Ränder, Overlays und Pfeilstyling sind alle integriert.

Es läuft auf dem Swiper-Motor, so dass der Schieber von Anfang an berührungsfreundlich und ansprechbar ist, auf einem Telefon fliegt das gleiche Karussell auf weniger Spalten zurück, und Sie können die Pfeile auf Mobilgeräten verstecken, wenn sie im Weg sind.

Bevor Sie beginnen #

• WordPress Mit Elementor Installiert und aktiv.
• Master-Addons für Elementor Installiert und aktiv Neu im Plugin? siehe die Installationsführung.
• Eine Handvoll Bilder, die in Ihre Mediathek hochgeladen wurden oder zum Hochladen bereit sind.

So fügen Sie das Widget Bildkarussell hinzu #

Öffnen Sie im Elementor-Editor die Elemente Panel und suchen nach Bild Karussell‘oder scrollen Sie in den Abschnitt Master Addons Ziehen Sie das Widget auf Ihre Seite Es lädt leer, bis Sie Bilder hinzufügen, so dass die Galerie immer der erste Schritt ist.

Fügen Sie Ihre Bilder hinzu und bestellen Sie sie #

In der Inhalt Tab, öffnen Sie die Bilder Abschnitt und klicken Sie auf das Galeriefeld, um den WordPress Media Picker zu starten Wählen Sie die gewünschten Bilder aus und verwenden Sie dann Galerie bearbeiten Um sie in Ordnung zu ziehen, fügen Sie Untertitel hinzu oder legen Sie sie mit dem X-Symbol ab.

Zurück im Panel finden Sie im Abschnitt Bilder drei weitere Bedienelemente:

• Bildauflösung: Wählen Sie die Größe aus, die WordPress serviert, von Miniaturansicht bis Voll, oder legen Sie eine benutzerdefinierte Größe fest. Mittel oder Groß hält die Seite hell und sieht im Schieberegler dennoch scharf aus.
• Lightbox-Galerie aktivieren: Schalten Sie dies ein, damit Besucher auf ein Bild klicken können, um es in voller Größe in einem Popup zu öffnen. Wenn es ausgeschaltet ist, werden die Bilder nur angezeigt.
• Lightbox-bibliothek: Wählen Sie die Popup-Engine, entweder Fancybox oder Elementors eigene Lightbox. Beide gruppieren die Karussellbilder, damit Besucher sie im Popup durchgehen können.

Navigation einrichten #

Die Navigation Abschnitt steuert, wie sich Personen durch die Folien bewegen Beginnen Sie mit der Navigation Dropdown, der den Kontrollstil festlegt: Pfeile und Punkte, Pfeile und Brüche, Pfeile, Punkte, Fortschritt oder Keine.

• Scrollbar anzeigen: Fügt eine ausziehbare Fortschrittsleiste unter dem Schieberegler hinzu.
• Pfeilposition: Platzieren Sie die Pfeile oben, in der Mitte oder unten und links, in der Mitte oder rechts darin.
• Vermittlung: Stellen Sie die Pfeile innerhalb des Schiebers oder außerhalb ein.
• Pfeil auf Mobilgeräten ausblenden: Lassen Sie die Pfeile auf kleinen Bildschirmen fallen, wo Wischen die natürliche Geste ist.
• Nächstes Symbol und vorheriges Symbol: Tauschen Sie die Standardpfeile gegen ein beliebiges Symbol aus der Elementor-Symbolbibliothek aus.

Das Karussellverhalten abstimmen #

Die Karusselleinstellungen Abschnitt ist, wo der Schieberegler seine Bewegung bekommt Dies ist der Teil, der entscheidet, wie viele Bilder angezeigt werden, wie schnell sie sich bewegen und ob der Schieberegler Schleifen.

• Folien pro Spalte: Die Anzahl der Reihen, wenn Sie den Schieberegler in vertikaler Richtung ausführen.
• Layout: Wählen Sie Carousel für einen Standard-Flachschieber oder Coverflow für einen 3 D-Effekt.
• Autohöhe: Schieberhöhe an das aktuelle Bild anpassen lassen.
• Autoplay- und Autoplay-Geschwindigkeit: Schalten Sie das automatische Schieben ein und stellen Sie die Verzögerung zwischen den Schlitten in Millisekunden ein (5000 sind fünf Sekunden).
• Pause bei Hover: Autoplay stoppen, während sich der Cursor über dem Schieberegler befindet.
• Folien zum Scrollen: Wie viele Bilder pro Schritt voranschreiten.
• Mittelfolie, Greif-Cursor, Drag Free-Modus: Optionen zum Zentrieren der aktiven Folie, zum Anzeigen eines Greifercursors und zum frei fließenden Scrollen des Ziehens.
• Schleife: Karussell als Endlosschleife laufen lassen, statt beim letzten Bild anzuhalten.

Verwenden Sie das Coverflow-Layout für einen 3 D-Effekt #

Schalter Layout zu Deckungsstrom und die Dias neigen sich zu einem 3 D-Stack, wobei das aktive Bild flach in der Mitte liegt und die Nachbarn nach hinten abgewinkelt sind A Deckungsflusseffekt Steuerung angezeigt, damit Sie die Tiefe und Drehung fein abstimmen können Es passt zu Fotografie und Portfolio-Abschnitten, in denen der Schieberegler selbst Teil des Designs ist.

Stil das Karussell #

Die Stil Tab-Aufschlüsselung in vier Abschnitte: Karussellartikel, Leuchtkasten, Navigation, und Muster (eine Pro-Option).Zusammen decken sie das Aussehen der Folien, das Popup und die Pfeile ab.

Karussellartikel #

Dieser Abschnitt gestaltet die Bildfolien. Es verfügt über Normal-, Hover- und Aktivzustände, sodass Sie die zentrierte Folie vom Rest abheben können.

• Hintergrund, Grenztyp, Grenzradius, Kastenschatten: Standard-Framing für jede Folie Der Randradius rundet die Bildecken ab.
• Polsterung und Artikellücke: Platz innerhalb jeder Folie und der Lücke zwischen den Folien.
• Schattenmodus und Opazität: Zusätzliche Tiefe und Transparenz für die inaktiven Folien.

Lightbox, Overlay und Untertitel #

Die Leuchtkasten Abschnitt Stilt das Vorschausymbol, das auf jedem Bild sitzt, und das Overlay dahinter sowie den Beschriftungstext.

• Benutzerdefiniertes Vorschau-Symbol: Ersetzen Sie das Standard-Zoom-Symbol und legen Sie Farbe, Schwebefarbe, Größe und Position mit Symbollücke nach links und oben fest.
• Overlay: Fügen Sie dem Bild eine Hintergrundtönung hinzu, die hilft, wenn das Symbol und die Bildunterschrift lesbar bleiben sollen.
• Titel der Bildunterschrift: Typografie, Hintergrund, Farbe und Schwebefarbe für die Bildunterschriften, die Sie in der Galerie hinzugefügt haben.

Navigationspfeile #

Die Navigation Der Stilabschnitt steuert das Aussehen der Pfeile mit Normal- und Hover-Zuständen.

• Farbe und Hintergrund: Pfeilsymbolfarbe und der Knopf dahinter.
• Randtyp, Randradius, Polsterung, Größe: Form und Größe der Pfeiltasten, einschließlich runder Tasten mit vollem Radius.
• Box Shadow und Offset: Tiefe hinzufügen und die Pfeile mit dem horizontalen Versatz ein - oder ausstoßen.

Das Ergebnis auf der Seite #

Veröffentlichen oder Vorschau und das Karussell läuft live: es spielt sich automatisch durch die Bilder, Schleifen, wenn Sie das eingeschaltet haben, und öffnet jedes einzelne in der Lightbox auf Klick Ihr Styling trägt durch, von abgerundeten gerundeten Folien bis zu den benutzerdefinierten Pfeiltasten.

Häufige Anwendungsfälle #

• Fotografie und Portfolio Galerien, in denen die Lightbox Besuchern Aufnahmen in Originalgröße ermöglicht.
• Produktbildschieber Auf einer Landingpage, wobei Autoplay den Blick auf sich zieht.
• Logo - oder Partnerstreifen Verwendung mehrerer Folien pro Ansicht und einer Schleife.
• Zeugnis - oder Ereignisfotos In einem kompakten, wischbaren Block.
• Hero-Deckungsschieber Für einen Design-Forward-Abschnitt.

Tipps für die Arbeit mit dem Image Carousel #

• Passen Sie die Bildauflösung an die Objektträgergröße an. Das Servieren von Dateien in Originalgröße in kleinen Folien verlangsamt die Seite; Mittel oder Groß ist normalerweise reichlich vorhanden.
• Halten Sie die Geschwindigkeit der automatischen Wiedergabe angenehm. Etwa 4000 bis 6000 ms geben den Menschen Zeit zum Schauen, ohne sich gehetzt zu fühlen.
• Schalten Sie Pause auf Hover mit Autoplay ein. Es verhindert, dass der Schieberegler unter jemandem hervorrutscht, der eine Bildunterschrift liest.
• Pfeile auf dem Handy ausblenden. Wischen ist die natürliche Geste auf Touchscreens, da sind die Pfeile oft nur Unordnung.
• Verwenden Sie den Aktiven Zustand, um die mittlere Folie hervorzuheben. Eine dezente Umrandung oder volle Deckkraft auf der aktiven Folie führt das Auge.

Häufig gestellte Fragen #

Einwickelnd #

Das Image Carousel Widget baut einen voll ausgestatteten Elementor-Bild-Slider ohne separates Plugin: Laden Sie eine Galerie, stellen Sie Autoplay und Schleife ein, schalten Sie die Lightbox ein und gestalten Sie die Folien und Pfeile so, dass sie Ihrem Design entsprechen. Für andere Möglichkeiten, Bilder anzuzeigen, schauen Sie sich die an Galerie-schieber und Filterbare Galerie Widgets. Durchsuchen Sie das Ganze Master Addons Widgets und Erweiterungen Um zu sehen, was noch enthalten ist, und überprüfen Sie die Preisseite Für Pro-Funktionen wie Karussellmuster.