Galerie-schieber

Ein Galerie-Slider koppelt ein großes Vorschaubild mit einem anklickbaren Satz von Miniaturansichten, sodass Besucher direkt zu dem gewünschten Foto springen können, anstatt sich jeweils durch eine Folie zu klicken Die Galerie-schieber Widget in Master-Addons für Elementor Erstellt dieses Layout in wenigen MinutenSie wählen die Bilder aus, wählen ein Miniaturbild-Raster oder Karussell und stylen jedes Teil aus dem Elementor-Panel.

Dieser Guide geht durch jede Umgebung, sodass Sie eine bauen können Elementor-Galerie-Schieber Ohne zu raten, was die einzelnen Kontrollen tun.

Was das Gallery Slider Widget macht #

Das Widget zeigt eine große Vorschaufolie neben einem Raster oder Karussell von Miniaturansichten Klicken auf ein Miniaturbild oder einen Pfeil ändert die Vorschau Bildunterschriften, Autoplay, Endlosschleife, Fade - oder Slide-Übergänge und separate Hover-Zustände für die Vorschau und Miniaturansichten sind alle eingebaut Es passt zu Portfolios, Produktfotos, Immobilieneinträgen, Eventalben oder jeder Seite, auf der Besucher schnell eine Reihe von Bildern durchsuchen müssen.

Bevor Sie beginnen #

• WordPress Mit Elementor Installiert und aktiv.
• Master-Addons für Elementor Installiert und aktiv Brauchen Sie Hilfe? Sehen Sie sich die Installationsführung.
• Eine Reihe von Bildern, die in Ihre Mediathek hochgeladen werden, idealerweise mit ähnlichen Seitenverhältnissen.

So fügen Sie das Elementor Gallery Slider-Widget hinzu #

Öffnen Sie den Elementor-Editor und suchen Sie nach Galerie-schieber Im Elements-Panel, oder scrollen Sie nach unten zum Abschnitt Master-Addons Jedes Master-Addons-Widget trägt ein kleines MA-Badge, das hilft, wenn Sie mehrere Addon-Packs installiert haben Ziehen Sie das Widget in Ihren Abschnitt.

Bilder im Reiter Inhalt hinzufügen #

Galerie #

Das Widget startet leer In der Inhalt Tab, öffnen Sie die Galerie Abschnitt und klicken Sie auf den Plus-Button unter Bilder hinzufügen.

Das WordPress Medienfenster öffnet sich auf der Galerie erstellen Bildschirm Wählen Sie im Schieberegler die gewünschten Bilder aus, klicken Sie sich dann durch, um die Galerie einzufügen Nehmen Sie sich hier eine Minute Zeit, um Alt-Text und Bildunterschriften für jedes Bild auszufüllen Das Bildunterschriftfeld ist wichtiger als es aussieht: Das Widget kann es später unter dem Vorschaubild ausdrucken, und wenn eine Bildunterschrift im Frontend fehlt, ist dieser Bildschirm der erste Ort, den es zu überprüfen gilt.

Nachdem Sie die Galerie eingefügt haben, zeigt der Editor gleich das vollständige Layout an: die große Vorschau links mit Navigationspfeilen, und das Miniaturbildraster rechts Die ausgewählten Bilder erscheinen auch im Inneren des Bereichs Galerie, wo Sie sie nachbestellen oder entfernen können.

Miniaturansichten #

Die Miniaturansichten Abschnitt steuert die kleinen Bilder neben der Vorschau.

• Miniaturansichten: Den Miniaturbildbereich ganz anzeigen oder ausblenden.
• Karussell/Gitter: Wechseln Sie zwischen einem statischen Gitter und einem scrollenden Karussell.
• Bildauflösung: Die Größe WordPress dient für Miniaturansichten Miniaturansicht (150 x 150) hält die Seite hell.
• Spalten: Wählen Sie 1 bis 12 Spalten für das Gitter. Wenn Sie von 2 auf 3 Spalten wechseln, ändert sich das Gitter von hoch und schmal in einen engeren Block.
• Bestellung: Behalten Sie die Standardreihenfolge bei oder ändern Sie die Sortierung der Bilder.
• Bildunterschrift: Zeigen Sie eine Beschriftung auf Miniaturansichten an oder belassen Sie sie bei Keine.

Umschalten auf Karussell Der Modus ersetzt das Raster durch einen Miniaturansichtsstreifen und fügt eine eigene Gruppe von Einstellungen hinzu: Orientierung (horizontal oder vertikal), Folien pro Ansicht'n Pfeile Mit einem umschalten Pfeilposition Dropdown, zzgl Autoplay, Unendlicher Loop, und Richtung Bedienelemente nur für den Miniaturbildstreifen Raster funktioniert besser für ein Dutzend Bilder oder weniger; darüber hinaus spart das Karussell viel vertikalen Platz.

Vorschau #

Die Vorschau Abschnitt verwaltet die große Folie und wie sie sich verhält.

• Bildauflösung: Die Größe diente für das große Bild Voll sieht am besten aus, wiegt aber am meisten, also komprimieren Sie Ihre Originale.
• Link zu: Verknüpfen Sie das Vorschaubild mit einer URL oder Mediendatei oder behalten Sie es bei Keine.
• Bildunterschrift: Bildunterschrift unter der Vorschau anzeigen.
• Richtung: Nach links nach rechts oder von rechts nach links schieben.
• Unendliche Schleife: Rückkehr zur ersten Folie nach der letzten.
• Autohöhe: Lassen Sie den Schieberegler seine Höhe an jedes Bild anpassen. Praktisch für gemischte Verhältnisse, obwohl sich die Seite bei wechselnden Folien etwas verschiebt.
• Autoplay: Folien automatisch vorschieben Klicken Sie auf das Bearbeitungssymbol, um es anzupassen.
• Wirkung: Wählen Sie den Übergang Folie oder Ausblenden.
• Geschwindigkeit (ms): Wie lange der Übergang dauert Standard ist 1000.
• Pfeile: Zeigen oder verstecken Sie die Navigationspfeile und wählen Sie sie aus Position, wie zum Beispiel oben links.

Gestalten Sie den Schieberegler in der Registerkarte Stil #

Layout #

Die Layout Abschnitt entscheidet, wo die Vorschau im Verhältnis zu den Miniaturansichten sitzt. Vorschauposition Angebote Oben, Rechts, Unten, und Links Bei Oben oder Unten reihen sich die Miniaturansichten unter oder über der Vorschau und einem Horizontal ausrichten Kontrolle erscheint mit einem Karussellbreite Schieberegler. Mit links oder rechts erhalten Sie eine Vorschaubreite (%) Schieberegler statt.

• Aufstapeln: Wählen Sie, wann das Layout vertikal stapelt, z. B. Tablet und Mobilgerät.
• Vorschaubreite (%): Wie viel horizontaler Platz die Vorschau braucht Irgendwo zwischen 60 und 70 Prozent sitzt schön neben einem dreispaltigen Raster.
• Abstand: Die Lücke zwischen der Vorschau und den Miniaturansichten.

Vorschau #

Die Style-Tab's Vorschau Abschnitt gestaltet den großen Folienbehälter.

• Benutzerdefinierte Höhe: Überschreiben Sie die automatische Höhe.
• Hintergrundfarbe: Füllt den Bereich hinter dem Bild.
• Grenztyp: Standardmäßig, Keine, Solid, Double, Dotted, Dotted, Dashed oder Groove, mit Breiten- und Farbsteuerungen, wenn aktiv.
• Grenzradius und Kastenschatten: Die Ecken abrunden und die Folie von der Seite heben.
• Pfeile: Eine engagierte Gruppe mit Größe, Polsterung, Grenzradius, Übergangund getrennt Standard, Schweben, und Behindert Zustände, jeweils mit eigener Farbe und Hintergrundfarbe.

Vorschauunterschriften #

Wenn Sie Untertitel in der Registerkarte Inhalt aktiviert haben, werden diese in diesem Abschnitt positioniert und gestylt. Vertikal ausrichten Platziert die Beschriftung oben, in der Mitte oder unten auf der Folie und Horizontal ausrichten Angebote links, Mitte, rechts, und rechtfertigen Sie erhalten auch Typografie, Polsterung, Marge, Grenztyp, und Grenzradius Kontrollen.

Vorschau Hover-Effekte #

Vorschau Hover-Effekte Animiert die Bildunterschrift, wenn Besucher mit der Maus über die Folie fahren Wählen Sie eine EffektSetzen Sie die ÜbergangDann stylen Sie die Standard und Schweben Zustände mit Farbe, Hintergrundtyp, Deckkraft und Textschatten.

Miniaturansichten #

Die Style-Tab's Miniaturansichten Abschnitt behandelt die kleinen Bilder: Vertikal ausrichten Für den ganzen Block, für Horizontaler Abstand und Vertikaler Abstand Zwischen Thumbnails, zzgl Grenztyp und Grenzradius.

Miniaturansichten-Fover-Effekte #

In diesem Abschnitt werden Miniaturansichten in drei Bundesstaaten erstellt: Standard, Schweben, und Aktiv (das Miniaturbild, das zur aktuellen Folie passt) Die Bilder Gruppe deckt Hintergrundfarbe ab Opazität, Skala, Kastenschatten, und CSS-Filter. Aus dem Kasten heraus sitzen inaktive Thumbnails bei 0,65 Deckkraft, sodass die aktive auffällt Die Überlagerung Gruppe fügt eine Farb - oder Verlaufsschicht mit Mischmodus, Marge, Opazitätund Grenzkontrollen.

Dazu gibt es noch eine Muster Abschnitt unten auf der Registerkarte Stil mit vorgefertigten Stilvoreinstellungen Derselbe Abschnitt wird in vielen Master Addons Widgets angezeigt.

Sehen Sie sich das Live-Ergebnis an #

Klicken Sie auf das Augensymbol, um die Seite anzuzeigen. Besucher sehen das Miniaturbild-Raster neben der großen Vorschau. Wenn Sie auf ein Miniaturbild klicken, wird die Vorschau sofort ausgetauscht, die Pfeile gehen der Reihe nach durch die Folien und die Bildunterschrift folgt jedem Bild.

Häufige Anwendungsfälle #

• Portfolio-Showcases: Ein großes Heldenbild mit dem Rest des Projekts einen Klick entfernt.
• Produktseiten: Das klassische Shop-Layout mit gezoomter Vorschau und Miniaturbildauswahl.
• Immobilienangebote: Käufer durch Räume kippen lassen, ohne die Seite zu verlassen.
• Event - oder Hochzeitsalben: Markieren Sie ein Foto und halten Sie dabei das komplette Set sichtbar.

Tipps für einen besseren Galerie-Slider #

• Bildseitenverhältnisse abgleichen. Auto Height verhindert Zuschneideüberraschungen, aber gleichmäßige Verhältnisse sehen sauberer aus und verhindern, dass das Layout springt.
• Den richtigen Vorsätzen dienen. Voll für die Vorschau, Miniaturansicht (150 x 150) für das Raster Komprimieren Sie vor dem Hochladen; siehe unseren Leitfaden zum Beste WordPress Bildoptimierer Plugins.
• Beschriftungen in der Mediathek schreiben Vor dem Einsetzen der Galerie, damit jede Folie fertig ist.
• Halten Sie die Geschwindigkeit der automatischen Wiedergabe angemessen. Geben Sie den Besuchern Zeit, jedes Bild tatsächlich zu sehen.
• Verwenden Sie den Aktiven Zustand. Die standardmäßige Opazität von 0,65 auf inaktiven Miniaturansichten leitet das Auge bereits; Ein Rand oder eine leichte Skala auf dem aktiven Miniaturbild macht es noch deutlicher.

Video-Tutorial #

Schauen Sie sich lieber das Setup an? Dieses Video deckt den gesamten Prozess ab, vom Ziehen des Widgets in den fertigen Schieberegler auf der Live-Seite:

Häufig gestellte Fragen #

Einwickelnd #

Die Master Addons Galerie-schieber Das Widget deckt das gesamte Vorschau-plus-Daumensegel-Muster ab: Raster- oder Karussell-Daumenschaubilder, die Vorschau auf jeder Seite, Untertitel und das Design pro Bundesstaat, alles von einem Panel aus und ohne benutzerdefinierten Code.

Weitere Möglichkeiten zur Anzeige von Bildern finden Sie unter Bild Karussell, Filterbare Galerie, und Erweitertes Bild Dokumente oder vergleichen Sie Optionen in unserem Elementorbild Karussellführung. Um alles andere im Plugin zu sehen, durchsuchen Sie die Master Addons Widgets und Erweiterungen Sammlung oder der Preispläne.