Möchten Sie ein WordPress-Bilderkarussell in Ihre Website einbinden?
In den mehr als 10 Jahren, in denen ich mit WordPress arbeite, habe ich festgestellt, dass Bildkarussells eine visuell beeindruckende Möglichkeit sind, das Engagement auf jeder Website zu erhöhen. Aber es ist oft schwer, ein WordPress-Karussell-Plugin zu finden, das sowohl leistungsstark als auch einfach zu bedienen ist, wenn Sie ein Anfänger sind.
In diesem Artikel zeige ich Ihnen, wie Sie ganz einfach ein Bildkarussell auf Ihrer WordPress-Website erstellen können. Sie werden sehen, wie Sie ein responsives Bildkarussell, einen einfachen Slider oder eine vollständige Produktgalerie erstellen können, je nachdem, was Sie benötigen.
🧠 Kurze Zusammenfassung: Wie man ein WordPress-Bilderkarussell erstellt
- SeedProd verwenden 🧩 - Hinzufügen von Karussells zu jeder Seite mit dem Image Carousel Block
- Jetpack ausprobieren 📸 - Aktivieren Sie Vollbild-Galerie-Karussells in Beiträgen und Seiten
- Produktkarussells hinzufügen 🛒 - Verwenden Sie ein kostenloses Plugin zur Erstellung von WooCommerce-Bildschiebern
Wie man Bildkarussells für benutzerdefinierte WordPress-Seiten erstellt
SeedProd ist der beste WordPress-Website-Builder mit über 1 Million Nutzern. Es enthält ein integriertes WordPress-Karussell-Plugin, das das Hinzufügen von Bildschiebern ohne Code erleichtert. Mit dem Drag-and-Drop-Seitenersteller können Sie mehrere Bildkarussells und Schieberegler zu jeder Seite Ihrer Website hinzufügen, ohne zu kodieren.
Sie können SeedProd auch verwenden, um:
- Erstellen Sie ein benutzerdefiniertes WordPress-Theme
- Vergrößern Sie Ihre E-Mail-Liste mit Opt-in-Formularen
- Zeigen Sie Ihren physischen Standort mit Google Maps
- Mit Countdown-Timern Dringlichkeit erzeugen
- Erhöhen Sie das Engagement mit Einbettungen in sozialen Medien
- Erregen Sie Aufmerksamkeit mit animierten Überschriften
- Binden Sie Besucher mit Videoeinbettungen ein
- Schaffen Sie Vertrauen und Glaubwürdigkeit mit Testimonials
Vor diesem Hintergrund wollen wir uns ansehen, wie Sie mit SeedProd ein Bildkarussell in Ihre Website einbauen können.
Schritt 1: Installieren und aktivieren Sie das SeedProd Plugin
Der erste Schritt besteht darin, eine Kopie des SeedProd-Plugins herunterzuladen. Während SeedProd eine kostenlose Version für die Erstellung einfacher Landing Pages hat, werden wir die Pro-Version verwenden, um alle erweiterten Funktionen zu nutzen.
Als Nächstes müssen Sie das Plugin auf Ihre WordPress-Website hochladen, installieren und aktivieren. Wenn Sie dabei Hilfe benötigen, folgen Sie diesen Anweisungen für die Installation eines WordPress-Plugins.
Nachdem Sie das Plugin aktiviert haben, gehen Sie zu SeedProd " Einstellungen, wo Sie Ihren SeedProd-Lizenzschlüssel eingeben können. Sie finden Ihren Lizenzschlüssel in Ihrem SeedProd-Kontobereich im Bereich "Downloads".
Schritt 2: Erstellen einer WordPress Landing Page
Der nächste Schritt ist, zu SeedProd " Seiten zu navigieren, um eine neue Landing Page zu erstellen.
Oben auf dieser Seite finden Sie 4 verschiedene Seitenmodi, die Sie mit einem einzigen Klick aktivieren können, darunter:
- Demnächst - Aktivieren Sie eine "Demnächst"-Seite, um Besucher (und Google) über Ihre neue Website zu informieren.
- Wartungsmodus - Lassen Sie Ihre Besucher wissen, dass Sie wegen Wartungsarbeiten vorübergehend nicht erreichbar sind.
- Login - Aktivieren und erstellen Sie eine benutzerdefinierte WordPress-Login-Seite.
- 404 - Aktivieren Sie eine benutzerdefinierte 404-Fehlerseite auf Ihrer WordPress-Website.
Unter dem Abschnitt Seitenmodus sehen Sie jede Landing Page, die Sie mit dem SeedProd-Plugin erstellen. Sie können so viele benutzerdefinierte WordPress-Seiten erstellen, wie Sie möchten.
Klicken Sie auf die Schaltfläche Neue Landing Page erstellen, um eine neue Seite zu erstellen. Dadurch wird die Bibliothek von SeedProd mit responsiven Landing Page-Vorlagen angezeigt.
Sie können ein beliebiges Design für Ihre Landing Page wählen, aber wir empfehlen Ihnen, eine Vorlage zu wählen, die dem gewünschten Aussehen Ihrer Seite sehr nahe kommt. Auf diese Weise müssen Sie nicht zu viele Änderungen vornehmen.
Für diesen Beitrag habe ich die Vorlage für die Reise-Webinar-Seite verwendet, die Sie finden, wenn Sie oben auf dem Bildschirm auf die Registerkarte Webinar klicken.
Um diese Vorlage auszuwählen, fahren Sie mit der Maus über die Miniaturansicht und klicken Sie auf das orangefarbene Häkchensymbol.
Als nächstes wird ein Popup-Fenster angezeigt, in dem Sie einen Seitennamen hinzufügen können. Der Seitenname wird nicht im Design Ihrer Landing Page angezeigt, legt aber die URL Ihrer Seite fest. Wählen Sie also einen Namen, der für Ihre Besucher Sinn macht, wenn sie Ihre Seite besuchen.
Klicken Sie nun auf die Schaltfläche Speichern und mit der Bearbeitung der Seite beginnen.
Schritt 3: Passen Sie den Inhalt Ihrer Landing Page an
Nachdem Sie Ihre Vorlage gestartet haben, sehen Sie den Seitenerstellungsbildschirm von SeedProd. Mit der Drag-and-Drop-Schnittstelle können Sie jeden Teil Ihrer Vorlage bearbeiten.
In der linken Seitenleiste finden Sie eine große Auswahl an Blöcken, die Sie per Drag & Drop auf Ihre Seite ziehen können. Sobald sich ein Block auf Ihrer Seite befindet, können Sie auf ihn klicken, um den Inhalt, die Vorlagen und die erweiterten Anpassungseinstellungen anzuzeigen.
Wenn Sie Ihrer Landing Page beispielsweise Ihr Logo hinzufügen möchten, ziehen Sie einfach den Bildblock aus dem linken Bedienfeld und legen ihn auf Ihrer Seite ab.
Von dort aus können Sie ein neues Bild hochladen oder ein Logo aus Ihrer WordPress-Mediathek auswählen. Sie können auch die Größe und Ausrichtung anpassen und einen Link hinzufügen.
Wenn Sie die Farben, Schriftarten und Hintergründe Ihrer Seite anpassen möchten, ist das genauso einfach. Klicken Sie im unteren linken Bereich Ihres Page Builders auf das Zahnradsymbol, um das Panel " Globale Einstellungen" und die Anpassungsoptionen anzuzeigen.
Sie können auf die Registerkarten Schriftarten, Farben oder Hintergrund klicken, um Ihre Landing Page anzupassen. Wenn Sie z. B. auf die Registerkarte Hintergrund klicken, können Sie ein benutzerdefiniertes Hintergrundbild hochladen oder den Farbverlauf oder die Farbüberlagerung ändern.
Sie haben auch die Möglichkeit, einen Videohintergrund oder eine Hintergrund-Diashow zu verwenden.
Schritt 4: Hinzufügen des WordPress Image Carousel Blocks
Aber der Grund, warum Sie hier sind, ist, dass Sie Ihrer Seite ganz einfach ein Karussell hinzufügen können. Dazu können Sie den Image Carousel Block von SeedProd verwenden.
In diesem Beispiel werden Sie das Hauptbild des Helden durch ein verschiebbares Karussell ersetzen. Bewegen Sie also zunächst den Mauszeiger über das vorhandene Bild und klicken Sie auf das Mülleimersymbol, um es zu entfernen.
Wählen Sie als Nächstes den Block Bildkarussell aus dem Bedienfeld Erweiterte Blöcke und ziehen Sie ihn auf Ihre Seite.
Sie können auf den Block auf Ihrer Seite klicken, um die Karussell-Einstellungen zu sehen. Wenn Sie beispielsweise auf den Abschnitt " Bild 1 " klicken, haben Sie die Möglichkeit, ein eigenes Bild von Ihrem Computer oder aus Ihrer Mediathek zu verwenden oder ein lizenzfreies Archivbild auszuwählen.
Ihr Bildkarussell anpassen
Nachdem Sie ein Bild zum Karussell hinzugefügt haben, können Sie eine Bildunterschrift eingeben und auf die Schaltfläche Bilder hinzufügen klicken, um weitere Fotos in den Karussell-Slider einzufügen.
Um sicherzustellen, dass Ihr Karussell auf jedem Gerät gut aussieht, passt SeedProd Ihre Bilder automatisch für Desktops, Tablets und Smartphones an.
Im Bedienfeld Karussell-Einstellungen können Sie Ihren Bildschieberegler weiter anpassen. Zum Beispiel können Sie:
- Wählen Sie eine dunkle oder helle Navigationsfarbe
- Wählen Sie die automatische Wiedergabe Ihrer Karussell-Galerie
- Wählen Sie die Autoplay-Geschwindigkeit in Sekunden
- Bildunterschriften anzeigen oder ausblenden
- Wählen Sie die Ausrichtung der Galerie
Wenn Ihnen das noch nicht reicht, können Sie auf die Registerkarte Vorlagen klicken, um den Stil Ihres Galeriebildes mit weniger Klicks zu ändern. Ich habe zum Beispiel einen Stil mit einem Schlagschatten für das Bild gewählt.
Auf der Registerkarte " Erweitert" können Sie die Typografie, die Ränder und die Abstände der Beschriftungen anpassen sowie Farben und Stile auswählen, die zu Ihrer Marke passen.
Wenn Sie mit dem Aussehen Ihres Landing Page-Karussells zufrieden sind , klicken Sie auf die grüne Schaltfläche Speichern in der oberen rechten Ecke des Bildschirms.
Schritt 5: Konfigurieren Sie Ihre Landing Page-Einstellungen
Nachdem Sie das Design Ihrer Landing Page perfektioniert haben, können Sie verschiedene Einstellungen konfigurieren.
Zunächst können Sie auf die Registerkarte " Verbinden" oben auf Ihrem Bildschirm klicken, um Ihren bevorzugten E-Mail-Marketingdienst zu verbinden. Auf diese Weise können Sie sicherstellen, dass alle neuen Leads automatisch zu Ihrer E-Mail-Liste hinzugefügt werden.
SeedProd lässt sich mit allen wichtigen E-Mail-Marketinganbietern integrieren, darunter:
- MailerLite
- Sendy
- Ständiger Kontakt
- GetResponse
- Mad Mimi
- Und mehr
In der Dokumentation zur E-Mail-Integration finden Sie Hilfe bei der Anbindung Ihrer E-Mail-Liste.
Klicken Sie anschließend auf die Registerkarte Seiteneinstellungen, um weitere Einstellungen zu sehen, die Sie in SeedProd konfigurieren können. Die Einstellungsseite hat normalerweise 5 Abschnitte, aber das hängt von der Art der Seite, die Sie erstellen, und Ihrem SeedProd-Plan ab.
Sie können zum Beispiel Ihre allgemeinen Einstellungen bearbeiten und Ihrer Seite einen neuen Namen und eine neue URL geben oder sie auf Entwurf oder Veröffentlichung setzen.
Sie können auch ein Google Analytics-Plugin und WordPress-SEO-Plugins anschließen, um die Leistung Ihrer Seite zu verfolgen und zu verbessern.
Und im Bereich Skripte können Sie benutzerdefinierte Skripte und Codeschnipsel hinzufügen, z. B. Cookies und Zählpixel.
Mit dem Abschnitt Benutzerdefinierte Domäne schließlich können Sie Ihre Seite mit einem beliebigen Domänennamen verbinden, ohne WordPress darauf zu installieren.
Vergessen Sie nicht, auf die Schaltfläche Speichern zu klicken, wenn Sie die Konfiguration Ihrer Seiteneinstellungen abgeschlossen haben.
Schritt 6: Veröffentlichen Sie Ihre Bildkarussell-Seite
Bevor Sie Ihre Landing Page veröffentlichen, sollten Sie eine Vorschau auf dem Handy anzeigen, um sicherzustellen, dass Ihr Design für mobile Nutzer gut aussieht. Andernfalls kann es die Nutzererfahrung beeinträchtigen.
Um eine Vorschau Ihrer Seite zu sehen, klicken Sie auf das Symbol für die mobile Vorschau am unteren Rand Ihres Bildschirms.
Sie können dann Ihre Seite so sehen, wie sie für jemanden aussieht, der von einem mobilen Gerät aus surft, und mit dem visuellen Editor Änderungen vornehmen.
Außerdem können Sie in jedem Block mit Typografieeinstellungen schnell zwischen Desktop- und mobilen Textelementen wechseln. So können Sie Änderungen an Ihrer mobilen oder Desktop-Seite vornehmen, ohne den Ansichtsmodus zu wechseln.
Wenn Sie mit der mobilen und der Desktop-Version Ihrer Landing Page zufrieden sind, klicken Sie auf den Dropdown-Pfeil auf der grünen Schaltfläche Speichern und wählen Sie Veröffentlichen.
Anschließend können Sie auf dem folgenden Bildschirm auf die Schaltfläche Live-Seite anzeigen klicken, um eine Vorschau Ihrer Landing Page anzuzeigen.
So sieht mein Bildkarussell auf meiner Test-Website aus:
Ihre Seite ist nun live, komplett mit einem vollständig responsiven WordPress-Bilderkarussell, um mehrere Bilder auf einmal zu präsentieren.
Wie man Bildkarussells zu WordPress-Beiträgen hinzufügt
Ich empfehle Anfängern oft Jetpack, weil es einfach zu bedienen ist und einen integrierten Bildslider für WordPress-Beiträge und -Seiten enthält.
Jetpack ist ein kostenloses Plugin, das Ihrer WordPress-Website eine Vielzahl nützlicher Funktionen hinzufügt.
So kann es beispielsweise Ihre Website auf Sicherheitsprobleme prüfen und einen Brute-Force-Schutz vor Bots und Hackern bieten. Außerdem können Sie damit Bilder verzögert laden, Inhalte auf sozialen Medien teilen und vieles mehr.
Noch wichtiger ist, dass Jetpack über eine Funktion verfügt, mit der Sie Karussell-Galerien im Vollbildmodus sowohl in Beiträgen als auch auf Seiten anzeigen können. Diese Funktion funktioniert perfekt mit dem Block-Editor (Gutenberg-Editor) und macht es einfach, Karussells direkt zu Ihren Beiträgen und Seiten hinzuzufügen.
Lesen Sie weiter, um herauszufinden, wie Sie die kostenlose WordPress-Bildkarussell-Funktion von Jetpack nutzen können.
Schritt 1: Installieren und Aktivieren des Jetpack-Plugins
Der erste Schritt besteht darin, Jetpack zu installieren und zu aktivieren. Gehen Sie dazu in Ihren WordPress-Adminbereich und klicken Sie auf Plugins " Neu hinzufügen.
Scrollen Sie von dort aus nach unten, bis Sie das Jetpack-Plugin sehen, und klicken Sie auf Jetzt installieren und dann auf Aktivieren.
Schritt 2: Aktivieren der Vollbild-Karussell-Galerie
Im nächsten Schritt gehen Sie in der linken Navigationsleiste auf Jetpack " Einstellungen und klicken auf die Registerkarte Schreiben.
Am oberen Rand des folgenden Bildschirms sehen Sie den Bereich Medien. Klicken Sie in diesem Bereich auf den Schalter Bilder in einer bildschirmfüllenden Karussell-Galerie anzeigen, um die Option einzuschalten.
Sie können auch wählen:
- Foto-Exif-Metadaten im Karussell anzeigen
- Den Kommentarbereich im Karussell anzeigen
Und wählen Sie ein weißes oder schwarzes Farbschema.
Stellen Sie sicher, dass Sie auf die Schaltfläche Änderungen speichern klicken, bevor Sie fortfahren.
Schritt 3: Fügen Sie eine Diashow zu Ihrem WordPress-Post oder Ihren Seiten hinzu
Jetzt können Sie in jedem WordPress-Beitrag oder auf jeder Seite kostenlos ein Bildkarussell erstellen.
Um einem WordPress-Beitrag ganz einfach ein Karussell hinzuzufügen, erstellen Sie einen neuen Beitrag oder bearbeiten Sie einen bestehenden Beitrag. Klicken Sie dann auf das Plus-Symbol im Block-Editor, um einen neuen WordPress-Block hinzuzufügen, und klicken Sie auf den Diashow-Block, um ihn zu Ihrem Beitrag hinzuzufügen.
Dann können Sie auf die Schaltfläche Hochladen klicken, um Bilder von Ihrem Computer in Ihre Galerie hochzuladen. Oder Sie können auf die Schaltfläche Medienbibliothek klicken, um Bilder einzufügen, die sich bereits in Ihrer WordPress-Medienbibliothek befinden.
Wählen Sie nun die Bilder aus, die Sie hinzufügen möchten, und klicken Sie auf die Schaltfläche Neue Galerie erstellen.
Auf dem nächsten Bildschirm können Sie Ihren Fotos Bildunterschriften hinzufügen, um zu erklären, worum es bei den einzelnen Bildern geht. Klicken Sie dann einfach auf die Schaltfläche Galerie einfügen, um sie Ihrem Beitrag hinzuzufügen.
Schritt 4: Veröffentlichen Sie Ihr WordPress-Bilderkarussell
Sie sollten nun eine Vorschau Ihres Bildkarussells in Ihrem WordPress-Beitrag sehen. Es hat Pfeile, mit denen Sie zwischen den Fotos navigieren können, und Paginierungspunkte, die die Anzahl der Bilder in der Galerie anzeigen.
Im Diashow-Einstellungsfeld auf der rechten Seite können Sie Ihr Publikum mit Übergangseffekten fesseln. Eine Reihe von Animationen ermöglicht es Ihnen, zwischen Bildern zu gleiten oder sie zu überblenden und so ein dynamisches visuelles Erlebnis zu schaffen, das Ihre Besucher fesselt.
Sie können auch die Bildgröße ändern, die Folien automatisch abspielen lassen und Übergänge verzögern.
Wenn Sie mit dem Aussehen Ihres Bildkarussells zufrieden sind, klicken Sie auf die Schaltfläche Veröffentlichen oder Aktualisieren. Jetzt können Sie Ihren Beitrag in der Vorschau anzeigen, um Ihre Bilderkarussell-Galerie in Aktion zu sehen.
Wie man WooCommerce Produkt Bild Karussells erstellen
Wenn Sie eine Website haben, die WooCommerce verwendet, können Sie Produktfotos ganz einfach in einem attraktiven Bildslider anzeigen. Hierfür verwende ich das kostenlose Product Gallery Slider WordPress Plugin.
Nachdem Sie das Plugin installiert und aktiviert haben, navigieren Sie in Ihrem WordPress-Dashboard zu Codeixer " Produktgalerie. Hier können Sie den Slider-Typ, die Abmessungen, die Navigationsoptionen, das Styling und mehr auswählen.
Gehen Sie dann zu der Produktseite, zu der Sie das Bildkarussell hinzufügen möchten. In der rechten Seitenleiste sehen Sie einen neuen Bereich namens Produktgalerie.
Hier fügen Sie die Bilder für Ihr Produktkarussell hinzu. Klicken Sie einfach auf Bilder hinzufügen, um Bilder aus Ihrer Mediathek auszuwählen, oder ziehen Sie sie per Drag & Drop von Ihrem Computer.
Aktualisieren Sie anschließend das Produkt, und das war's. Jetzt können Sie die Seite anzeigen und Ihr WooCommerce-Bilderkarussell in Aktion sehen.
Dieses Plugin ist eine der einfachsten Möglichkeiten, einen Bildslider zu Ihren WordPress-Produktseiten hinzuzufügen.
Weitere Fragen zu WordPress Bildkarussells
Weiter, mehr WordPress Bild Tipps
Ich hoffe, dieser Beitrag hat Ihnen geholfen zu lernen, wie man ein Bildkarussell in WordPress erstellt.
Das Erstellen und Anpassen jeder WordPress-Seite mit SeedProd ist super einfach. Es ist kein Code erforderlich, Sie müssen keinen Entwickler einstellen und das Ergebnis ist eine Landing Page, die sich darauf konzentriert, Ihren Traffic in Leads und Verkäufe zu konvertieren.
Also, worauf warten Sie noch?
Vielleicht gefallen Ihnen auch die folgenden Anleitungen zur Verbesserung Ihrer WordPress-Bilder:
- Wie man ein Featured Image zu WordPress hinzufügt
- Wie man eine Produktbildgalerie in WooCommerce erstellt
- Wie man eine Galerie zu WordPress-Seiten hinzufügt
- Wie man Hotspot-Bilder zu WordPress hinzufügt
- Wie man Text auf einem Bild in WordPress hinzufügt
- Wie man eine Lightbox in WordPress für Bilder erstellt
- Wie man ein Hintergrundbild in WordPress ohne CSS dimmt
Vielen Dank fürs Lesen! Wir würden uns freuen, Ihre Meinung zu hören. Bitte hinterlassen Sie einen Kommentar mit Ihren Fragen und Ihrem Feedback.
Sie können uns auch auf YouTube, X (früher Twitter) und Facebook folgen, um weitere hilfreiche Inhalte für Ihr Unternehmen zu erhalten.
