So erstellen Sie einen Homepage-Schieberegler in WordPress [2021]

Im heutigen Beitrag erfahren Sie alles, was Sie zum Erstellen eines Schiebereglers in WordPress wissen müssen.

Wie immer hier der Video Guide:

Ein Slider ist ein sehr verbreitetes Website-Designelement, das Text, Bilder und Videos präsentiert, indem es von einer Folie zur nächsten „schiebt“.

Sie werden häufig auf Geschäfts- und Portfolio-Websites verwendet.

Es gibt eine Menge großartiger kostenloser Schieberegler zur Auswahl, aber Sie können auch einige wirklich schöne kostenpflichtige Schieberegler finden.

Schieberegler können so programmiert werden, dass Diashows automatisch ausgeführt werden, sobald jemand auf Ihre Website zugreift und alle paar Sekunden zur nächsten Folie wechselt.

Oder Schieberegler können statisch sein und den Leser beispielsweise auf einen kleinen Pfeil klicken lassen, um zur nächsten Folie zu wischen.

Einige Websites verwenden Schieberegler, um ihre neuesten Beiträge anzuzeigen. Normalerweise fügen sie den Folien einen Link hinzu, sodass jemand, der den Artikel lesen möchte, einfach auf den Link klicken und zum Inhalt wechseln kann.

Eine Sache, die Sie bei Schiebereglern beachten sollten, ist, dass sie Ihre Website etwas verlangsamen können, wenn sie versuchen, eine Reihe von Bildern oder anderen Inhalten zu laden. Dies kann jedoch durch Beschleunigen der Bildladegeschwindigkeit gemildert werden.

Ein weiteres potenzielles Problem ist die mobile Bereitschaft.

Google priorisiert jetzt Websites, die auf Mobilgeräte reagieren. Stellen Sie daher sicher, dass Ihre Website für Mobilgeräte geeignet ist, unabhängig davon, ob Sie einen Schieberegler verwenden oder nicht.

Wenn Sie jedoch einen Schieberegler verwenden, müssen Sie sicherstellen, dass er auch reagiert, damit er auf Mobilgeräten nicht seltsam aussieht, das Kundenerlebnis ruiniert und nicht den Google-Richtlinien entspricht, wodurch Ihre SEO-Auswirkungen verringert werden.

Aber mit all dem bieten Schieberegler viele Vorteile.

Homepage-Schieberegler können Ihnen dabei helfen, eine Reihe von Dingen zu tun, die Sie ohne sie nicht tun könnten.

Schieberegler können Ihre Produkte für Sie auf Ihrer Homepage präsentieren und Besucher dazu bringen, darauf zu klicken und mehr zu sehen, was bei einer E-Commerce-Website ziemlich üblich ist.

Schieberegler sind optisch ansprechend. Sie erregen Aufmerksamkeit, indem sie interessante Inhalte anzeigen, und können dazu beitragen, dass Ihre Besucher auf Ihrer Website bleiben.

Homepage-Schieberegler können verwendet werden, um wichtige Informationen anzuzeigen. Beispielsweise können Schieberegler verwendet werden, um alle Dienste anzuzeigen, die ein Unternehmen anbietet. Oder es kann verwendet werden, um die Top-Projekte im Portfolio eines Freelancers anzuzeigen.

Schieberegler können wichtige Textinhalte wie Testimonials nacheinander anzeigen. Dies kann sehr hilfreich sein, um Ihren Website-Besuchern zu beweisen, dass sie am richtigen Ort sind und die richtigen Produkte und Dienstleistungen für sie anbieten.

Nun, da Sie wissen, was Homepage-Schieberegler sind und warum Sie einen haben sollten, lesen Sie weiter, um genau zu sehen, wie Sie einen auf Ihre Website stellen.

Schritt #1 – Installieren Sie das WordPress Homepage Slider Plugin

Wir werden ein kostenloses Plugin namens Smart Slider verwenden 3 Das ist super einfach zu bedienen.

Gehen Sie zunächst in Ihr WordPress-Dashboard, suchen Sie im linken Menü die Registerkarte „Plugins“ und klicken Sie auf „Neu hinzufügen“.“

Geben Sie dann in die Suchleiste den Namen des Schiebereglers ein, Schieberegler 3.

Sobald Sie es sehen, klicken Sie auf „Jetzt installieren“ und dann auf „Aktivieren.“

Schritt #2 – Erstellen Sie einen neuen Schieberegler

Nachdem Sie Smart Slider 3 installiert haben, wird es im linken Menü im Dashboard angezeigt.

Scrollen Sie nach unten und klicken Sie darauf.

Sie erhalten 2 Optionen:

1. Erstellen Sie einen neuen Schieberegler von Grund auf neu
2. Verwenden Sie eine Vorlage

Wir sind alle dafür, Ihre eigene Vorlage zu erstellen. Wenn Sie sich damit wohl fühlen, mehr Macht für Sie.

Aber um ganz ehrlich zu sein, wir LIEBEN Vorlagen. Es bietet eine solide Grundlage, um etwas Erstaunliches zu schaffen, das Ihr einzigartiges Flair in einen bewährten Rahmen integriert.

Wenn Sie es eilig haben oder einfach nur faul sind, sind Vorlagen Ihr bester Freund, um Dinge mit viel Zeit zu erledigen.

Für dieses Tutorial klicken wir auf „Vorlagenbibliothek.“

Sie werden mit Tonnen von Vorlagen zur Auswahl präsentiert werden. Über 180, um genau zu sein.

Einige von ihnen werden Sie einen hübschen Cent kosten.

Aber viele von ihnen sind kostenlos. Und wenn Sie nur die kostenlosen Vorlagen sehen möchten, klicken Sie einfach auf die grüne Schaltfläche „Kostenlos“.

Wenn Sie einen der Schieberegler in der Vorschau anzeigen möchten, klicken Sie einfach darauf und Sie erhalten eine Live-Vorschau, wie einer dieser Homepage-Schieberegler aussehen wird und wie er auf Ihrer Website funktionieren kann.

Sobald Sie den Schieberegler ausgewählt haben, den Sie verwenden möchten, bewegen Sie den Mauszeiger über die Vorlage und klicken Sie auf die Schaltfläche „Importieren“, die angezeigt wird.

Nach dem Import sehen Sie, dass Sie jetzt 3 Folien in Ihrem Dashboard haben: Folie 1, 2 und 3, die sich alle addieren, um einen einzelnen Schieberegler zu erstellen.

Sie können jetzt jeden von ihnen bearbeiten, um Text, Bilder und Videos hinzuzufügen.

Um sie zu bearbeiten, bewegen Sie den Mauszeiger über eine der Folien und klicken Sie auf die Schaltfläche „Bearbeiten“.

Sie werden feststellen, dass Sie sich jetzt im visuellen Editor befinden.

Wenn Sie den Text ändern möchten, klicken Sie einfach auf den Text und ein kleines Kästchen erscheint Editor-Box erscheint.

In diesem Editorfeld können Sie das Erscheinungsbild des Textes ändern, indem Sie auf das Farbdosensymbol klicken. Das erlaubt Ihnen:

• Fügen Sie dem Text einen Link hinzu.
• Bearbeiten Sie die Farbe des Textes.
• Ändern Sie die Schriftart.
• Wählen Sie die Größe und das Gewicht der Schriftart.
• Usw.

Sie können dasselbe mit der Schaltfläche unter dem Text tun, indem Sie darauf klicken.

Eine weitere Funktion, die für die Schaltfläche geändert werden muss, ist das Aussehen, wenn jemand den Mauszeiger darüber bewegt.

Wenn Sie auf die Stiftschaltfläche klicken, können Sie den Schaltflächentext ändern und einen Link angeben, zu dem die Schaltfläche den Leser führt.

Sie können sogar die gesamte Schiebereglerbox bearbeiten, nicht nur die Elemente in der Box, indem Sie darauf klicken (ich habe gerade auf den weißen Hintergrund der Box selbst geklickt, um sie auszuwählen).

Hier können Sie Dinge wie die Hintergrundfarbe oder Deckkraft ändern. Wenn Sie die Deckkraft verringern, können Sie die Box etwas transparenter machen, sodass Besucher das Schiff hinter dem Bild sehen können.

Sie haben viele Möglichkeiten zur Anpassung.

Als nächstes ändern wir das Hintergrundbild für diese Folie.

Scrollen Sie also nach oben und klicken Sie auf „Hintergrund.“

Sie werden sehen, dass die Bildschaltfläche bereits ausgewählt ist.“ Daneben sehen Sie „Bild“ und es sollte bereits ein Bild enthalten, das Sie gegen das gewünschte austauschen können.

Entfernen Sie dieses Bild, indem Sie mit der Maus darüber fahren und auf das winzige X klicken, das angezeigt wird.

Fügen Sie dann einfach einen neuen hinzu, indem Sie auf die grüne Schaltfläche klicken. Gehen Sie danach zu „Dateien hochladen“ und klicken Sie auf „Dateien auswählen“.“

Wählen Sie nun einfach das gesuchte Bild aus und klicken Sie auf „Öffnen“ und dann auf „Auswählen“.“

Ihr neues Bild ist jetzt drin!

Gehen Sie dann nach oben und klicken Sie auf die Schaltfläche Speichern in der oberen rechten Ecke und dann auf „Schieberegler“ in der oberen linken Ecke, um zum Haupt-Dashboard zurückzukehren.

Bevor ich weitermache, habe ich noch einen weiteren hilfreichen Tipp für Sie.

Scrollen Sie leicht nach unten und Sie sehen eine Menüleiste mit Registerkarten wie „Veröffentlichen“, „Allgemein“, „Größe“ usw.

Klicken Sie auf „Allgemein.“

Hier finden Sie einige weitere Anpassungsoptionen für das Aussehen Ihres Schiebereglers.

Sie können beispielsweise ändern, wie die Animation des Schiebereglers funktioniert. Die Standardeinstellung ist horizontal. Wenn Sie möchten, können Sie es ändern, um von einem Bild zum anderen zu verblassen, wenn Sie auf die Pfeile klicken.

Aber wir werden es für diesen Leitfaden belassen.

Schritt #3 – Zeigen Sie Ihren Schieberegler auf Ihrer Website an

Ich werde Ihnen zeigen, wie Sie dies mit dem grundlegenden WordPress-Editor sowie dem Element- oder Seitenersteller tun.

Lassen Sie uns zunächst den grundlegenden WordPress-Editor ausführen.

So erstellen Sie einen Homepage-Slider mit WordPress Editor

Alles, was Sie tun müssen, ist einfach zu der Seite zu gehen, auf die Sie sie setzen möchten, und diese zu bearbeiten.

Also gingen wir zum Dashboard im linken Menü, klickten auf „Seiten“ und fügten ein neues hinzu. Aber vielleicht möchten Sie einen Homepage-Schieberegler, also gehen Sie in diesem Fall einfach zu Ihrer Homepage im WordPress-Dashboard.

Um diesen Schieberegler oben auf dieser Seite hinzuzufügen, klicken Sie auf das kleine Pluszeichen in der oberen linken Ecke und suchen Sie nach Smart Slider 3.

Nachdem Sie auf Smart Slider 3 geklickt haben, wird es im Editor Ihrer Seite mit einer großen blauen Schaltfläche mit der Aufschrift „Select Slider“ angezeigt.“ Gehen Sie weiter und klicken Sie darauf.

Wählen Sie dann den Schieberegler aus, den Sie verwenden möchten.

Jetzt müssen Sie nur noch auf „Veröffentlichen“ und dann erneut auf „Veröffentlichen“ klicken. Von dort aus klicken Sie auf „Seite anzeigen“, um zu sehen, wie es aussieht.

Jetzt sollten Sie Ihren Homepage-Schieberegler sehen und er sollte perfekt funktionieren.

Als nächstes erfahren Sie, wie Sie Ihren Schieberegler mit dem Element- oder Seitengenerator anzeigen.

So erstellen Sie einen Homepage-Schieberegler mit Element oder Page Builder

Gehen Sie also zurück zu Ihrem WordPress-Dashboard und navigieren Sie zu der Seite, auf die Sie den Schieberegler setzen möchten, z. B. zu Ihrer Homepage.

Der einfachste Weg, dies zu tun, besteht darin, den Mauszeiger über Ihren Namen in der oberen linken Ecke des WordPress-Dashboards zu bewegen und auf „Website besuchen“ zu klicken.“

Sie sollten sich Ihre Homepage ansehen.

Klicken Sie von hier aus in der kleinen Menüleiste auf der Seite auf „Mit Elementor bearbeiten“.

Wenn Sie also den Slider ganz oben auf der Homepage hinzufügen möchten, klicken Sie einfach auf den kleinen blauen Plus-Button in der Mitte oben auf der Seite.

Suchen Sie dann im Feld links nach Smart Slider 3.

Sie sehen Optionen zur Auswahl, eine mit einem WordPress-Symbol und eine mit dem Schieberegler-Symbol. Wählen Sie die Option mit dem Schieberegler-Symbol und ziehen Sie es in den Raum, wo Sie Ihren Schieberegler wollen und wählen Sie dann den Schieberegler, den Sie verwenden möchten.

Sie sehen Ihren Schieberegler und können ihn direkt im Editor selbst testen.

Wenn Sie wie ich sind, haben Sie möglicherweise diese kleinen weißen Balken oben und unten auf diesem Schieberegler. Wenn Sie diese entfernen möchten, klicken Sie im Editor-Menü auf der linken Seite auf die Registerkarte „Erweitert“.

Ändern Sie dann unter „Margin“ den Wert auf negative 10. Diese weißen Balken sollten an dieser Stelle vollständig verschwunden sein.

Klicken Sie auf „Aktualisieren.“

OK, so erstellen Sie einen Schieberegler in WordPress!