Inhaltsverzeichnis
Möchten Sie einen responsiven Slider für Ihre WordPress-Website erstellen?
Schieberegler werden häufig auf der Titelseite von Websites verwendet, um Ihre wichtigsten Produkte, Dienstleistungen, Zeugnisse oder andere Inhalte auf interaktive Weise zu präsentieren.
In diesem Artikel zeigen wir Ihnen, wie Sie einen responsiven Slider zu Ihrer WordPress-Website hinzufügen können.
Warum sollten Sie einen responsiven WordPress-Slider zu Ihrer Website hinzufügen?
Ein Slider oder eine Diashow ist eine gute Möglichkeit, Ihre beliebtesten WooCommerce-Produkte, die neuesten YouTube-Videos, Kundenrezensionen und vieles mehr zu präsentieren.
Einige Schieberegler werden automatisch abgespielt, d. h. sie bewegen sich automatisch zwischen den einzelnen Folien. So können Sie viele Informationen auf kleinem Raum anzeigen, was viel Platz für andere Inhalte lässt.
Aus diesem Grund verwenden viele Websites Schieberegler auf ihren wichtigsten Seiten, z. B. einer Landing Page, einer Homepage oder einer Verkaufsseite.
Selbst wenn ein Schieberegler auf automatische Wiedergabe eingestellt ist, können die Besucher in der Regel manuell zwischen den Folien wechseln, indem sie auf die Navigationsschaltflächen klicken. Auf diese Weise ermutigt ein Schieberegler die Besucher, mit Ihrer Website zu interagieren, was sie interessanter macht.
Im folgenden GIF sehen Sie, wie dynamisch ein Schieberegler eine Seite gestalten kann.
Sehen wir uns also an, wie Sie ganz einfach einen responsiven Slider in WordPress erstellen können. Verwenden Sie einfach die unten stehenden Links, um direkt zur gewünschten Methode zu springen.
Methode 1: Erstellen eines responsiven WordPress-Sliders mit einem Plugin (schnell und einfach)
Wenn Sie einen einfachen Slider erstellen möchten, der sowohl auf dem Desktop als auch auf dem Handy gut aussieht, dann empfehlen wir Ihnen das Soliloquy-Plugin.
Mit diesem WordPress-Slider-Plugin können Sie Dias mit Bildern aus Ihrer Mediathek erstellen und auch auf Drittanbieter-Plattformen wie YouTube gehostete Videos anzeigen.
Sie können auch Alt-Text und Beschriftungen zu jeder Folie hinzufügen, was für WordPress SEO von Vorteil ist.
Zuerst müssen Sie sich für ein Soliloquy-Konto anmelden. Danach können Sie das Soliloquy-Plugin auf Ihrer Website installieren und aktivieren. Für weitere Details können Sie unserer Anleitung zur Installation eines WordPress-Plugins folgen.
Nach der Aktivierung gehen Sie zu Soliloquy " Einstellungen im WordPress-Dashboard und geben Sie Ihren Lizenzschlüssel ein.
Sie finden den Schlüssel, indem Sie sich auf der Soliloquy-Website in Ihr Konto einloggen und nach Eingabe dieser Informationen auf die Schaltfläche "Schlüssel überprüfen" klicken.
Danach können Sie einen neuen Slider zu Ihrer WordPress-Website hinzufügen, indem Sie zu Selbstgespräche " Neu hinzufügen .
Sie können mit der Eingabe eines Titels beginnen, der nur als Referenz dient, so dass Sie alles verwenden können, was Ihnen hilft, den Slider in Ihrem WordPress-Dashboard zu identifizieren.
Als Nächstes ist es an der Zeit, Bilder und Videos zum Slider hinzuzufügen. Sie können Dateien entweder per Drag & Drop in den Editor ziehen oder auf "Dateien aus anderen Quellen auswählen" klicken.
Wenn Sie Bilder verwenden möchten, können Sie diese Dateien auf die gleiche Weise wie Bilder im WordPress-Block-Editor hinzufügen.
Wenn Sie Videos einbinden möchten, empfehlen wir Ihnen, diese auf eine Videohosting-Website wie YouTube oder Vimeo hochzuladen. Das direkte Hochladen von Videos auf Ihre Website ist keine gute Idee, da es Ihre Website verlangsamen und viel Speicherplatz beanspruchen kann.
Inzwischen sind Plattformen wie YouTube für Videos optimiert, so dass Sie hochauflösende Videos in Ihren Schiebereglern zeigen können, ohne Ihre Website negativ zu beeinflussen.
Nachdem Sie sich für eine Video-Hosting-Plattform entschieden haben, müssen Sie alle Videos hochladen, die Sie in den WordPress-Slider einbinden möchten. Wenn Sie nicht sicher sind, wie Sie Videos hochladen können, empfehlen wir Ihnen, die offizielle Dokumentation oder das Benutzerhandbuch der von Ihnen gewählten Video-Plattform zu lesen.
Klicken Sie dann einfach auf die Schaltfläche "Dateien aus anderen Quellen auswählen" und wählen Sie dann "Videofolie einfügen".
Sie können nun die URL des Videos in das Feld "Video-URL" einfügen.
Soliloquy zeigt auf der rechten Seite alle unterstützten Linkformate an. Stellen Sie also sicher, dass Ihr Link eines dieser Formate verwendet.
Danach können Sie einen Titel in das Feld "Titel" eingeben. Dieser dient nur als Referenz, Sie können also alles verwenden, was Sie wollen. Sie können auch einen Alt-Text hinzufügen, damit die Suchmaschinen verstehen, worum es bei dieser Folie geht.
Danach können Sie einen optionalen Titel in das Feld "Titel" eingeben, der in einer grauen Leiste am unteren Rand des Videos angezeigt wird, bevor der Besucher auf "Abspielen" drückt.
Wenn Sie diese Leiste nicht anzeigen möchten, lassen Sie das Feld "Beschriftung" einfach leer.
Wenn Sie mit den eingegebenen Informationen zufrieden sind, können Sie weitere Folien erstellen, indem Sie auf "Weitere Videofolie hinzufügen" klicken.
Um diese neue Folie zu konfigurieren, gehen Sie einfach wie oben beschrieben vor.
Wenn Sie alle Ihre Folien erstellt haben, klicken Sie auf "In Slider einfügen".
Sie sehen nun alle Ihre Folien im Abschnitt "Derzeit in Ihrem Slider".
Anschließend können Sie auf die Registerkarte "Konfiguration" klicken und die Einstellungen für die Anzeige des Schiebereglers ändern, z. B. ein neues Thema für den Schieberegler auswählen, die Bildgröße ändern und die Position des Schiebereglers und der Beschriftungen ändern.
Sie können auch die Schiebereglerpfeile und die Pause-/Abspieltaste anpassen, die Übergangsgeschwindigkeit einstellen, die Verzögerungszeit ändern und vieles mehr.
Als nächstes müssen Sie sicherstellen, dass Ihr Slider auf mobilen Geräten genauso gut aussieht wie auf Computern und Laptops.
Klicken Sie also auf die Registerkarte "Mobil" und aktivieren Sie das Kästchen neben "Mobile Slider-Bilder erstellen".
Sie können dann die Größen eingeben, die Sie für die Bilder und Videos auf mobilen Geräten verwenden möchten. Bei diesen Entscheidungen kann es hilfreich sein, sich die mobile Version Ihrer WordPress-Website auf dem Desktop anzusehen.
Standardmäßig blendet Soliloquy Untertitel für mobile Nutzer aus, damit die Folien auf den kleineren Bildschirmen von Smartphones und Tablets besser dargestellt werden können.
Aus diesem Grund empfehlen wir, diese Einstellung deaktiviert zu lassen, aber Sie können das Kästchen neben "Untertitel auf dem Handy anzeigen" ankreuzen, wenn Sie dies wünschen.
Klicken Sie anschließend auf die Registerkarte "Verschiedenes". Hier können Sie Ihrem Schieberegler benutzerdefiniertes CSS hinzufügen, den Schieberegler-Titel und den Slug bearbeiten und den Schieberegler exportieren.
Wenn Sie mit der Einrichtung des Schiebereglers zufrieden sind, klicken Sie auf die Schaltfläche "Veröffentlichen".
Soliloquy erstellt automatisch einen Shortcode, den Sie zu jeder Seite, jedem Beitrag oder Widget-bereiten Bereich hinzufügen können.
Weitere Informationen über die Platzierung des Shortcodes finden Sie in unserer Anleitung zum Hinzufügen eines Shortcodes in WordPress.
Sie werden auch einige Codeschnipsel sehen, die Sie zu Ihrem WordPress-Theme hinzufügen können.
Eine schrittweise Anleitung finden Sie in unserem Leitfaden zum einfachen Hinzufügen von benutzerdefiniertem Code in WordPress.
Am einfachsten fügen Sie den Slider mit Hilfe des Soliloquy-Blocks zu Ihrer Website hinzu: Gehen Sie einfach zu der Seite oder dem Beitrag, auf der/dem Sie den Slider anzeigen möchten, und klicken Sie auf die Schaltfläche "+".
Geben Sie in dem daraufhin erscheinenden Popup 'Soliloquy' ein.
Wenn der richtige Block erscheint, klicken Sie darauf, um ihn zu Ihrem WordPress-Blog oder Ihrer Website hinzuzufügen.
Danach öffnen Sie den Block Soliloquy und wählen den soeben erstellten Schieberegler aus.
Sie können nun auf die Schaltfläche "Aktualisieren" oder "Veröffentlichen" klicken, um den Schieberegler zu aktivieren.
Methode 2: Erstellen eines responsiven Sliders mit einem Page Builder (besser anpassbar)
Wenn Sie einen einfachen Slider erstellen möchten, ist ein Plugin wie Soliloquy eine gute Wahl. Wenn Sie jedoch Landing Pages, benutzerdefinierten Homepages oder sogar Ihrem WordPress-Theme einen fortschrittlichen Slider hinzufügen möchten, empfehlen wir stattdessen die Verwendung eines Plugins für den Seitenaufbau.
SeedProd ist der beste Drag-and-Drop-WordPress-Seitenersteller, mit dem Sie individuelle Landingpages und sogar ein individuelles WordPress-Theme erstellen können, ohne eine einzige Zeile Code schreiben zu müssen.
Außerdem gibt es einen Bildkarussell-Block, mit dem Sie beeindruckende Slider erstellen können.
Sie können diesen vorgefertigten Block einfach an einer beliebigen Stelle auf einer Seite ablegen und ihn dann mit dem leistungsstarken Drag-and-Drop-Editor anpassen.
Zunächst müssen Sie das SeedProd-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.
Anmerkung: Es gibt eine kostenlose Version von SeedProd, mit der Sie professionelle Designs erstellen können, unabhängig von Ihrem Budget. Wir werden jedoch das Premium-Plugin von SeedProd verwenden, da es den Block Image Carousel enthält. Wenn Sie einen Slider erstellen, um Ihre Produkte oder Dienstleistungen zu bewerben, dann ist das Premium-Plugin auch mit WooCommerce und den besten E-Mail-Marketingdiensten integriert.
Nach der Aktivierung des Plugins wird SeedProd Sie nach Ihrem Lizenzschlüssel fragen.
Sie finden diesen Lizenzschlüssel unter Ihrem Konto auf der SeedProd-Website. Nachdem Sie die Informationen eingegeben haben, klicken Sie auf die Schaltfläche "Verify Key".
Wenn Sie das getan haben, gehen Sie zu SeedProd " Landing Pages in Ihrem WordPress-Dashboard.
SeedProd enthält über 180 professionell gestaltete Vorlagen, die in Kategorien gruppiert sind. Entlang der Oberseite sehen Sie Kategorien, mit denen Sie schöne "Coming Soon"-Seiten erstellen, den Wartungsmodus aktivieren, eine benutzerdefinierte Anmeldeseite für WordPress erstellen und vieles mehr.
Alle SeedProd-Vorlagen lassen sich leicht anpassen, so dass Sie jedes beliebige Design verwenden können. Wenn Sie eine Vorlage finden, die Ihnen gefällt, fahren Sie einfach mit der Maus darüber und klicken Sie auf das Häkchensymbol.
Sie können nun einen Namen für Ihre Landing Page in das Feld 'Seitenname' eingeben. SeedProd wird automatisch eine 'Seiten-URL' unter Verwendung des Seitennamens erstellen.
Es ist klug, relevante Schlüsselwörter in diese URL einzubauen, wo immer dies möglich ist, da dies den Suchmaschinen hilft, zu verstehen, worum es auf der Seite geht. Dies kann oft Ihre WordPress-SEO verbessern.
Um die automatisch generierte URL der Seite zu ändern, geben Sie einfach in das Feld "Seiten-URL" ein.
Wenn Sie mit den eingegebenen Informationen zufrieden sind, klicken Sie auf "Speichern und mit der Bearbeitung der Seite beginnen", um die Oberfläche des SeedProd-Seitenerstellungsprogramms zu öffnen.
Dieser einfache Drag-and-Drop-Builder zeigt auf der rechten Seite eine Live-Vorschau Ihres Seitendesigns an. Auf der linken Seite befindet sich ein Menü mit allen verschiedenen Blöcken und Abschnitten, die Sie der Seite hinzufügen können.
Wenn Sie einen Block gefunden haben, den Sie hinzufügen möchten, ziehen Sie ihn einfach per Drag & Drop auf Ihre Vorlage.
Um einen Block anzupassen, klicken Sie einfach auf diesen Block im SeedProd-Editor. Das Menü auf der linken Seite wird nun aktualisiert und zeigt alle Einstellungen an, die Sie zum Anpassen des Blocks verwenden können.
Während Sie die Seite erstellen, können Sie die Blöcke durch Ziehen und Ablegen im Layout verschieben. Ausführlichere Anweisungen finden Sie in unserem Leitfaden zum Erstellen einer Landing Page mit WordPress.
Um einen responsiven Slider mit SeedProd zu erstellen, suchen Sie einfach den Block Image Carousel im linken Menü und ziehen Sie ihn auf Ihr Layout.
Klicken Sie anschließend auf , um den Block Bildkarussell im Seiteneditor auszuwählen.
Sie können nun alle Bilder, die Sie im Schieberegler anzeigen möchten, hinzufügen. Klicken Sie zunächst auf das Element "Bild 1", das SeedProd standardmäßig erstellt.
Sie können nun entweder ein Foto aus der integrierten Bibliothek von SeedProd verwenden oder auf "Eigenes Bild verwenden" klicken und eine Datei aus der WordPress-Mediathek auswählen.
Nachdem Sie ein Bild ausgewählt haben, können Sie eine Beschriftung hinzufügen, die dann unter dem Bild erscheint. SeedProd zeigt standardmäßig keine Beschriftungen an, aber wir zeigen Ihnen später in diesem Beitrag, wie Sie sie aktivieren können.
Wenn Sie mit der Konfiguration der Folie zufrieden sind, klicken Sie auf die Schaltfläche "Bilder hinzufügen", um eine weitere Folie zu erstellen.
Um weitere Folien hinzuzufügen, gehen Sie einfach wie oben beschrieben vor.
Nachdem Sie alle Bilder zu Ihrem Schieberegler hinzugefügt haben, ist es an der Zeit, das Aussehen und die Funktion des Schiebers anzupassen.
Klicken Sie im linken Menü auf den Abschnitt "Karussell-Einstellungen", um ihn zu erweitern.
Zunächst können Sie zwischen hellen und dunklen Modi für die Navigationsschaltflächen des Schiebereglers wechseln.
Um die verschiedenen Modi auszuprobieren, klicken Sie auf die Schaltflächen neben "Navigationsfarbmodus". Die Live-Vorschau wird automatisch aktualisiert, so dass Sie sehen können, welcher Modus Ihnen am besten gefällt.
Standardmäßig zeigt das Karussell ein einziges Dia an, und die Besucher müssen die Navigationssteuerung verwenden, um weitere Inhalte zu sehen.
Sie können jedoch auch mehrere Folien auf einmal anzeigen, indem Sie das Dropdown-Menü "Anzuzeigende Folien" öffnen und eine Zahl aus der Liste auswählen. Dies kann nützlich sein, wenn der Slider viele Inhalte hat und Sie befürchten, dass die Besucher nicht alle Folien durchklicken.
Standardmäßig müssen Besucher auf die nächste Folie klicken, um sie zu sehen. Daher sollten Sie die automatische Wiedergabe aktivieren, da dadurch die Anzahl der Folien, die ein Besucher sieht, oft erhöht wird.
Aktivieren Sie dazu den Schalter "Autoplay" und geben Sie dann unter "Autoplay-Geschwindigkeit" eine Zahl ein, wie lange jedes Dia auf dem Bildschirm bleiben soll.
Wenn Sie Ihren Bildern Bildunterschriften hinzugefügt haben, müssen Sie auf den Schieberegler "Bildunterschrift anzeigen" klicken, um ihn von "Nein" auf "Ja" zu stellen.
Sie können auch die Ausrichtung der Beschriftung ändern.
Je nach Hintergrundfarbe müssen Sie möglicherweise die Farbe der Beschriftung ändern, bevor sie für die Besucher sichtbar ist.
Klicken Sie dazu auf die Registerkarte "Erweitert" und verwenden Sie dann die Einstellungen für "Beschriftungsfarbe".
Sie können den Text weiter gestalten, indem Sie auf die Schaltfläche "Bearbeiten" neben "Beschriftungstypografie" klicken.
Dadurch werden einige Einstellungen hinzugefügt, mit denen Sie die Schriftgröße, die Zeilenhöhe, den Abstand und vieles mehr ändern können.
Wenn Sie mit dem Aussehen der Beschriftungen zufrieden sind, können Sie über das Dropdown-Menü "Bildstile für Schieberegler" verschiedene Rahmenschatten zu den Folien hinzufügen.
Es lohnt sich also, verschiedene Schatten auszuprobieren, um herauszufinden, ob sie zum Design Ihrer Seite passen.
Auf der Registerkarte "Erweitert" finden Sie außerdem Einstellungen, mit denen Sie einen Rahmen hinzufügen, die Abstände ändern und sogar eine Eingangsanimation erstellen können.
Die meisten dieser Einstellungen sind selbsterklärend, so dass es sich lohnt, sie durchzusehen, um zu sehen, welche verschiedenen Arten von Effekten Sie erzeugen können.
Wenn Sie mit dem Aussehen des Schiebereglers zufrieden sind, können Sie mit dem Rest der Seite fortfahren. Ziehen Sie einfach Blöcke auf Ihr Design und passen Sie sie dann mit den Einstellungen im linken Menü an.
Wenn Sie einen Block löschen möchten, fahren Sie einfach mit dem Mauszeiger darüber und klicken Sie auf das Mülleimersymbol, wenn es erscheint.
Wenn Sie gefragt werden, klicken Sie auf "Ja, löschen".
Wenn Sie mit dem Aussehen der Seite zufrieden sind, klicken Sie auf die Schaltfläche "Speichern" und wählen Sie "Veröffentlichen", um den Slider live zu schalten.
Methode 3: Erstellen Sie einen Schieberegler mit Smash Balloon (am besten für Social Posts und Rezensionen) )
Da wir eher dazu neigen, Dinge auszuprobieren, die wir sehen, dass andere Menschen sie kaufen, benutzen oder empfehlen, ist es eine gute Idee, auf Ihrer Website soziale Beweise wie Kundenrezensionen, Erfahrungsberichte oder sogar positive Kommentare in den sozialen Medien zu zeigen.
Der einfachste Weg, Social Proof auf Ihrer Website zu zeigen, ist die Verwendung von Smash Balloon: Smash Balloon bietet Plugins, mit denen Sie Inhalte von Instagram, Facebook, Twitter und YouTube einbetten können.
Außerdem verfügt es über ein Plugin für den Bewertungs-Feed, mit dem Sie Bewertungen von Facebook, Tripadvisor, Yelp und Google anzeigen können.
Wenn Sie jedoch viele positive Kommentare und Bewertungen in Ihrem Online-Shop oder auf Ihrer Website veröffentlichen, kann dies viel Platz in Anspruch nehmen.
Deshalb verfügt Smash Balloon über integrierte Karussell-Layouts und -Vorlagen, mit denen Sie responsive Slider erstellen können, um mit wenigen Klicks Slideshows für soziale Medien und Rezensionen zu erstellen.
Noch besser: Smash Balloon holt neue Inhalte automatisch ab, sodass der Slider immer die neuesten Beiträge anzeigt.
Eine weitere Möglichkeit ist die Anzeige von Inhalten aus Ihren eigenen Konten in den sozialen Medien.
Wenn den Besuchern gefällt, was sie sehen, folgen sie Ihnen vielleicht in den sozialen Medien.
Um mehr Follower zu gewinnen, enthält Smash Balloon vorgefertigte Call-to-Action-Buttons, die Sie zu Ihren Sliders hinzufügen können.
Detaillierte Schritt-für-Schritt-Anleitungen finden Sie in unseren Anleitungen zum Hinzufügen von Social Media Feeds zu WordPress und zur Anzeige von Google-, Facebook- und Yelp-Bewertungen in WordPress.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie einen responsiven WordPress-Slider erstellen können. Vielleicht möchten Sie auch unseren Leitfaden zur Auswahl der besten Design-Software lesen oder unsere Expertenauswahl der besten Live-Chat-Software für kleine Unternehmen sehen.
Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.
