So erstellen Sie einen Bild-Slider in WordPress

Mit WordPress ist das Erstellen einer Website ganz einfach. Eine fesselnde, auffällige Website zu erstellen, ist ein ganz anderer Fisch, und Text allein reicht nicht aus, wenn es nicht an schön gestalteten grafischen Elementen mangelt. In diesem Tutorial zeigen wir Ihnen einen davon: den Bild-Slider.

Einen Bild-Slider in WordPress zu erstellen ist ganz einfach, und wir zeigen Ihnen, wie es mit nur einem der 60 schönen und funktionalen Widgets geht, die mit unseren eigenen Qi Addons für Elementor-Plugin geliefert werden. Aber bevor wir Ihnen zeigen, wie Sie einen beeindruckenden Bild-Slider erstellen, möchten wir uns etwas Zeit nehmen, um die Slider selbst und einige Anwendungsfälle zu besprechen, die Sie möglicherweise in Betracht ziehen sollten. Hier ist, worüber wir sprechen werden.

Was sind Bildschieberegler?

Im Webdesign ist ein Bild-Slider eine Diashow von Bildern, die auf einer Webseite verwendet werden. Sie bestehen aus mehrere Bilder, die Positionen in einer Übergangsanimation verschieben entweder automatisch oder als Reaktion auf eine Benutzeraktion wie ein Klick, ein Scrollen oder auf Mobilgeräten ein Wischen. Unabhängig davon, ob sie automatisch oder durch den Benutzer ausgelöst werden, sind sie in der Regel aufmerksamkeitsstark.

Neben der reinen Ästhetik kann ein Slider aber auch Navigationsfunktionen übernehmen und den Besuchern wichtige Informationen übermitteln.

Wann Sie Bildschieberegler verwenden sollten

Ein Bild-Slider wird normalerweise als Teil einer Portfolio-Website oder einer Unternehmens-Website verwendet, aber es gibt keine wirkliche Grenze, wann ein Slider verwendet werden kann.

Ein gut gestalteter Bildschieberegler enthält normalerweise die meisten der wichtige Informationen eine Website möchte einem Benutzer verpackt in attraktive Grafiken vermitteln. Für eine Unternehmenswebsite könnte es sein ein Leitbild, zum Beispiel. Für eine Buchhandlung oder eine Website mit Filmkritiken könnte dies der Fall sein eine Vitrine mit Neuerscheinungen. Und jeder Shop könnte es verwenden, um ein brandneues zeitlich begrenztes Angebot bewerben oder ein ähnliches Angebot.

Alternativ können Sie einen minimalistischen Ansatz wählen: einfach statten Sie Ihre Website mit schönen Fotos oder Grafiken aus für Ihre Besucher – eine Lösung, die vielleicht am besten für Foto-Websites, Galerien, Künstlerportfolios oder Museen geeignet ist.

Wann Sie keine Bildschieberegler verwenden sollten

Bildschieberegler haben einen Nachteil: ihre Größe. Ein Slider enthält normalerweise viele qualitativ hochwertige Bilder mit hoher Auflösung, die kann zu langsamem Laden führen und langsamer Betrieb Ihrer Website, was zu schlechten Benutzererfahrungen, erhöhten Absprungraten und schlechteren SERP-Rankings führen kann.

Wenn Sie hochauflösende Bilder verwenden, übertreiben Sie es nicht. Und wenn die Nachteile die möglichen Vorteile überwiegen, sollten Sie am besten auf Schieberegler ganz verzichten.

Eine andere zu berücksichtigende Sache sind mobile Geräte. Wenn die Funktionalität Ihres Sliders von großformatigen Grafiken mit vielen feinen Details abhängt, kann er auf mobilen Geräten nutzlos sein und sollte wahrscheinlich für die mobile Version Ihrer Website ausgeschlossen oder modifiziert werden.

So erstellen Sie einen Bild-Slider mit Qi-Add-Ons für Elementor

Wir werden einen Bild-Slider mit Qi Addons für Elementor erstellen, a kostenloses Plugin wir entwickelt haben, um die bereits beeindruckende Palette von Widgets von Elementor zu erweitern. Bevor Sie es jedoch verwenden, müssen Sie die neueste Version von Elementor installieren und dann Qi Addons für Elementor installieren und aktivieren.

Qi-Addons funktioniert mit der kostenlosen Version von Elementor, also müssen Sie das ganze Set und Caboodle keinen Cent kosten. Wichtig ist nur, dass Ihre Version von Elementor auf dem neuesten Stand ist. Wir werden auch unser kostenloses Qi-Theme verwenden, das wir wärmstens empfehlen, aber Qi-Addons funktionieren mit jedem Thema.

Sobald Sie dies getan haben, ist das Hinzufügen eines Bild-Sliders zu Ihrer WordPress-Website einfach und dauert nur wenige Minuten. Wie das geht, seht ihr im Video unten:

Wenn Sie jedoch ein schrittweises Text-Tutorial bevorzugen, sind Sie bei uns richtig. Weiter lesen.

Verwandt :  Was Sie über „dunkle Muster“ wissen müssen und wie sie Benutzer austricksen

Wir werden einen Bild-Slider zu einem Beitrag hinzufügen, aber Sie können ihn genauso einfach zu einer Seite hinzufügen. Das Hinzufügen des Bild-Slider-Widget funktioniert wie bei jedem anderen Elementor-Element: Suchen Sie es einfach im linken Menü und ziehen Sie es an die gewünschte Stelle.

Bild-Slider-Element ziehen

Sie haben jetzt das Element an Ort und Stelle, aber es enthält keine Bilder. Um Bilder hinzuzufügen, klicken Sie auf das Plus Symbol im Bilder Abschnitt der Inhalt/Allgemeines Tab.

Füge Bilder hinzu

Sie können nun Bilder aus Ihrer Mediathek auswählen oder neue hochladen. Wenn Sie Ihre Auswahl getroffen haben, klicken Sie auf Galerie erstellen.

Galerie erstellen

Sie können diese Galerie jetzt überprüfen oder bearbeiten, bevor Sie sie einfügen. Sie können auch die Reihenfolge Ihrer Bilder ändern, während sie im Schieberegler angezeigt werden, indem Sie sie ziehen. Wenn Sie mit Ihrer Galerie zufrieden sind, klicken Sie auf Galerie einfügen.

Galerie einfügen

Sie sollten jetzt Ihren Bildschieberegler im Vorschaubereich sehen können.

Vorschau des Bildschiebereglers

Weiter zum Allgemeine/Slider-Einstellungen Abschnitt finden wir die Steuerelemente für das Verhalten unseres Bildschiebereglers.

Slider-Schleife aktivieren kann eingestellt werden auf ja oder Nein, und es lässt den Schieberegler um sich selbst zurückschleifen. Wir möchten, dass sich unsere Bilder von selbst weiterbewegen, daher belassen wir es auf Ja, was die Standardeinstellung ist. Der Zentrierte Folien aktivieren Control wird zum Zentrieren asymmetrischer Bilder verwendet, während Slider-Autoplay aktivieren lässt den Slider ohne Benutzerinteraktion funktionieren.

Der Foliendauer und das Dauer der Folienanimation werden verwendet, um die Zeit einzustellen, für die ein Bild an Ort und Stelle ist, und die Dauer der Übergangsanimation. Die verwendete Einheit ist Millisekunden. Wir werden unsere Foliendauer zu 2000, aber wir werden die nicht anfassen Steuerung der Animationsdauer.

Der Slider-Navigation aktivieren -Steuerung ermöglicht es dem Benutzer, mit Pfeilen durch den Schieberegler zu navigieren, während die Slider-Paginierung aktivieren regelt die Paginierungspunkte des Schiebereglers. Wir werden die Punkte für diesen Schieberegler, den wir erstellen, nicht verwenden, also ändern wir ihn auf aus.

Slider-Einstellungen

Weiter unten, die Bildproportionen control verfügt über eine Reihe von Optionen, mit denen Sie Ihre Bilder einheitlicher erscheinen lassen können, wenn dies nicht der Fall ist, wie z Miniaturansicht, Quadrat, Hochformat, und andere. Wir belassen es bei der Standardeinstellung Original, wobei die ursprünglichen Proportionen der Bilder beibehalten werden.

Teilspalte aktivieren ermöglicht Ihnen, den Teil der Endspalte anzuzeigen, den Sie eingestellt haben Teilspaltenwert Pro. Der Anzahl der Spalten Im Menü können Sie die Anzahl der Spalten Ihres Schiebereglers auswählen. Wir werden unsere einstellen auf Eins.

Der Responsive Spalten -Menü können Sie unterschiedliche Anzahlen von Spalten für verschiedene Gerätegrößen einrichten, was normalerweise weniger Spalten auf kleineren Geräten bedeutet. Da immer nur ein Bild gleichzeitig angezeigt wird (gemäß unserer Anzahl der Spalten Einstellung), können wir es belassen Vordefiniert da es keine Möglichkeit gibt, weniger als eine Spalte anzuzeigen.

Der Abstand zwischen Elementen Mit dem Schieberegler können Sie zwischen den einzelnen Folien einen Pixelwert eingeben. Wir werden unseren auf 0 setzen, da wir keinen Leerraum zwischen den Bildern haben wollen. Der Slide-Effekt Menü lässt Sie zwischen den Gleiten und Verblassen Übergangsanimationen. Wir lassen unsere bei Gleiten.

Als nächstes finden wir die Lightbox-Popup aktivieren. Wenn aktiviert, wird standardmäßig ein angeklicktes Bild in einer Überlagerung geöffnet. Der Bild-Hover Menü steuert das Verhalten des Schiebereglers beim Bewegen der Maus durch den Benutzer. Sie können wählen zwischen Vergrößern, Verkleinern, Keine, und Umzug. Wir lassen unsere bei Keiner.

Der Overlay-Farbe und das Overlay-Hover-Farbe Einstellungen bieten Ihnen die Möglichkeit, eine Farbüberlagerung für Ihre Bilder auszuwählen, entweder standardmäßig oder beim Hover. Wir werden es nicht für unsere Demonstration verwenden.

Slider-Einstellungen

Weiter zum Stil Tab. Sie sehen zwei Abschnitte: die Slider-Navigationsstil, die sich auf die Navigationspfeile bezieht, und die Slider-Paginierungsstil, was mit Paginierung zu tun hat. Für dieses Design haben wir die Paginierung ausgeschaltet, sodass wir diese Einstellungen nicht verwenden.

Verwandt :  Google Fotos auf dem iPhone erstellt kein Backup? Probieren Sie diese Fixes aus

Im Slider-Navigationsstil Abschnitt die erste Option ist die Navigationsposition Speisekarte. Hier können Sie die Position der Pfeile auswählen, mit denen die Schieberegler Bilder wechseln. Wir werden sie platzieren Außen, aber Sie können auch die Standardeinstellung auswählen Innen und Zusammen, wodurch sie unter dem Bild platziert werden.

Als nächstes finden wir die Navigation ausblenden Option, mit der Sie die Navigationspfeile für Geräte unterhalb einer bestimmten Bildschirmbreite ausblenden können. Wir machen sie für Geräte unsichtbar Unter 768 Pixel weit.

Die Offset-Schieberegler (Vertikaler Navigationsversatz und Horizontaler Navigationsversatz) können Sie die Navigationspfeile von ihren Standardpositionen verschieben. Sie können sie selbst verschieben oder Werte in Pixeln, Ems oder Prozentwerten eingeben. Wir werden den vertikalen Offset-Schieberegler nicht verwenden, aber wir werden den Horizontaler Navigationsversatz zu 6,5 %.

Stilnavigation

Die nächsten beiden Optionen sind die Navigationspfeil Zurück (linker Pfeil) und Navigationspfeil Weiter (Pfeil nach rechts) können Sie die Standardnavigationspfeile ändern. Sie können eines aus Ihrer Symbolbibliothek auswählen oder eine SVG-Datei hochladen. Wir mögen die Pfeile so wie sie sind, deshalb werden wir sie nicht ändern.

Als Nächstes können Sie das Verhalten Ihrer Navigationspfeile ändern, indem Sie die Normal/Hover Umschalten. Festlegen der Attribute der Pfeile im Normal Modus ändert die Pfeile so, wie sie dem Benutzer angezeigt werden, während die Schweben Modus regelt ihr Verhalten beim Mauszeiger.

Die ersten beiden Optionen sind Farbe des Navigationspfeils und Hintergrundfarbe des Navigationspfeils. Hier können Sie die Farbe für Ihre Navigationspfeile oder deren Hintergrund auswählen oder eingeben. Wir werden die Farboptionen für dieses Design nicht verwenden.

Die letzten drei Schieberegler steuern die Abmessungen des Pfeils selbst und seines Halters. Der Größe des Navigationspfeils lässt Sie die Größe des Pfeils steuern, während der „Halter“ in Breite des Navigationspfeilhalters und Höhe des Navigationspfeilhalters bezieht sich auf den Hintergrund des Pfeils. Wenn Sie eine Farbe für . ausgewählt haben Navigationspfeil-Hintergrund, können Sie mit diesen Schiebereglern die Abmessungen ändern. Wir werden die Größe unserer Pfeile erhöhen auf 45 Pixel.

Stilnavigation

Wechsel zum Schweben Abschnitt des Umschalters sehen wir ein zusätzliches Steuerelement: Schwebepfeilbewegung aktivieren. Standardmäßig wird der Pfeil animiert, sobald ein Benutzer mit der Maus darüber fährt. Wir werden es umstellen Nein.

Stil auf Hover

Der Slider-Paginierungsstil Abschnitt bietet ähnliche Optionen: Farben, Versatz, Rahmen und Größe, aber wir mögen unseren Bildschieberegler so wie er ist, nur mit Navigationspfeilen, daher werden wir die Paginierungsoptionen nicht verwenden.

Das heißt, unser Image-Slider ist fertig.

Bild-Slider

So erstellen Sie einen Bildschieberegler mit voller Breite mit Qi-Add-Ons

Angenommen, Sie möchten einen Schieberegler in voller Breite. Mit Qi Addons für Elementor können Sie dies auch tun.

Das erste, was Sie tun müssen, ist zum Einstellungen Abschnitt, indem Sie auf das Gang Symbol unten im linken Menü. Finden Sie die Seitenlayout Menü und wählen Sie Elementor volle Breite als Ihr Layout. Wenn Sie unser Qi-Theme verwenden, können Sie auch auswählen Qi volle Breite.

Seiteneinstellungen Volle Breite

Klicken Sie als Nächstes auf das mittlere Symbol der blauen Abschnittsregisterkarte, um es zu bearbeiten.

Abschnitt bearbeiten

Du solltest das sehen Layout Registerkarte Ihres Abschnitts. Das erste Menü nach oben ist Inhaltsbreite. Es ist eingestellt auf Boxed, aber du musst es ändern in Gesamtbreite. Sobald Sie das ausgewählt haben, sollte das nächste Menü unten das Spaltenlücke Speisekarte. Auswahl Keine Lücke darin bleibt keine Lücke zwischen dem Element und den Rändern des Bildschirms.

Layout in voller Breite

Aber auch wenn Sie mit dem Boxed Layout, können Sie weiterhin die Breite Schieberegler, um die Breite Ihres Widgets zu ändern. Wenn Sie ihn ganz nach rechts ziehen oder die Breite Ihres Layouts in Pixel eingeben, erhalten Sie auch einen Bildschieberegler in voller Breite.

Breite im Karton

Abschließend

Wie Sie sehen, ist das Einrichten eines schönen, fesselnden Bild-Sliders in WordPress einfach und dauert nur ein paar Minuten. Mit Qi Addons für Elementor kann es auch völlig kostenlos sein. Das Widget strotzt nur so vor benutzerfreundlichen Styling-Optionen, wobei die Effekte sofort im Vorschaubereich von Elementor sichtbar sind. Jetzt wissen Sie alles, was Sie wissen müssen, um schöne Bild-Slider für Ihre WordPress-Website zu erstellen, unabhängig vom Stil.