So erstellen Sie eine WordPress-Bilder-Karussell (3 einfache Wege) bsp;

Die meisten WordPress-Karussell-Plugins sehen in Demos beeindruckend aus, dauern aber ewig in der Konfiguration, und die beliebten sind dafür berüchtigt, die Seitenlast zu erhöhen.

Ob Sie ein Portfolio, einen WooCommerce-Shop oder eine Landingpage erstellen, es gibt eine Methode für WordPress-Bilder-Karussells, die für Ihr Setup entwickelt wurde. Ich zeige Ihnen die drei schnellsten Optionen.

Wie erstelle ich ein WordPress-Bilder-Karussell?

Der schnellste Weg ist der Bilder-Karussell-Block von SeedProd. Ziehen Sie ihn auf eine beliebige Seite, laden Sie Ihre Bilder hoch und stellen Sie die automatische Wiedergabegeschwindigkeit in etwa 5 Minuten ein.

Für WordPress-Beiträge fügt Jetpack eine kostenlose Diashow-Funktion hinzu. WooCommerce-Produktseiten können das kostenlose Plugin „Product Gallery Slider“ verwenden.

So erstellen Sie Bilder-Karussells für benutzerdefinierte WordPress-Seiten

SeedProd ist der beste WordPress-Website-Builder mit über 1 Million Nutzern. Es enthält ein integriertes WordPress-Karussell-Plugin, mit dem Sie einfach Bilder-Slider ohne Code hinzufügen können. Mit seinem Drag-and-Drop-Website-Builder können Sie mehrere Bilder-Karussells und Slider zu jeder Seite Ihrer Website hinzufügen, ohne programmieren zu müssen.

Vor diesem Hintergrund sehen wir uns an, wie Sie mit SeedProd ein Bilder-Karussell zu Ihrer Website hinzufügen.

Schritt 1: Installieren und Aktivieren des SeedProd-Plugins

Der erste Schritt ist der Download einer Kopie des SeedProd-Plugins. Während SeedProd eine kostenlose Version zum Erstellen einfacher Landingpages hat, verwenden wir die Pro-Version, um auf alle erweiterten Funktionen zugreifen zu können.

Laden Sie als Nächstes das Plugin auf Ihre WordPress-Website hoch, installieren und aktivieren Sie es. Wenn Sie dabei Hilfe benötigen, folgen Sie dieser Anleitung zum Installieren 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-Konto im Bereich Downloads.

Schritt 2: Erstellen Sie eine WordPress-Landingpage

Der nächste Schritt ist die Navigation zu SeedProd » Seiten, um eine neue Landingpage zu erstellen.

Oben auf dieser Seite befinden sich 4 verschiedene Seitenmodi, die Sie mit einem einzigen Klick aktivieren können, darunter:

• Bald verfügbar – Aktivieren Sie eine „Bald verfügbar“-Seite, um Besucher (und Google) über Ihre neue Website zu informieren.
• Wartungsmodus – Informieren Sie Besucher darüber, dass Sie vorübergehend wegen Wartungsarbeiten nicht erreichbar sind.
• Anmelden – Aktivieren und erstellen Sie eine benutzerdefinierte WordPress-Anmeldeseite.
• 404 – Aktivieren Sie eine benutzerdefinierte 404-Fehlerseite auf Ihrer WordPress-Website.

Unter dem Abschnitt „Seitenmodus“ sehen Sie alle Landingpages, 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 Landingpage erstellen, um eine neue Seite zu erstellen. Dadurch wird die Bibliothek responsiver Landingpage-Vorlagen von SeedProd angezeigt.

Sie können jedes beliebige Landingpage-Design auswählen, aber wir empfehlen, eine Vorlage zu wählen, die dem gewünschten Aussehen Ihrer Seite nahe kommt. Auf diese Weise müssen Sie nicht zu viele Änderungen vornehmen.

Für diesen Beitrag habe ich die Travel Webinar Page-Vorlage verwendet, die Sie finden, indem Sie oben auf dem Bildschirm auf die Registerkarte Webinar klicken.

Um diese Vorlage auszuwählen, bewegen Sie Ihre Maus über die Miniaturansicht und klicken Sie auf das orangefarbene Häkchen-Symbol.

Als Nächstes sehen Sie ein Popup, in dem Sie einen Seitennamen eingeben können. Der Seitenname wird nicht in Ihrem Landingpage-Design angezeigt, aber er legt die URL Ihrer Seite fest. Wählen Sie also einen Namen, der für Ihre Besucher sinnvoll ist, wenn sie Ihre Seite besuchen.

Klicken Sie nun auf die Schaltfläche Speichern und Seite bearbeiten.

Schritt 3: Passen Sie den Inhalt Ihrer Landingpage an

Sobald die Vorlage geladen ist, sehen Sie den Drag-and-Drop-Website-Builder von SeedProd. Springen Sie zu Schritt 4, um den Karussell hinzuzufügen.

Schritt 4: Fügen Sie den WordPress-Bildkarussell-Block hinzu

Im Gegensatz zu eigenständigen Karussell-Plugins ist der Bildkarussell-Block von SeedProd direkt in den Website-Builder integriert. Kein separates Plugin zu installieren und keine zusätzliche JavaScript-Ladung auf Ihrer Seite.

Aber der Grund, warum Sie hier sind, ist, Ihrer Seite einfach ein Karussell hinzuzufügen. Dazu können Sie den Bildkarussell-Block von SeedProd verwenden.

In diesem Beispiel ersetzen Sie das Haupt-Hero-Bild durch ein gleitendes Karussell. Bewegen Sie also zuerst den Mauszeiger über das vorhandene Bild und klicken Sie auf das Papierkorb-Symbol, 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 Einstellungen des Karussells anzuzeigen. Wenn Sie beispielsweise auf den Abschnitt Bild 1 klicken, wird eine Option angezeigt, Ihr eigenes Bild aus Ihrem Computer oder Ihrer Mediathek zu verwenden oder ein lizenzfreies Stockbild auszuwählen.

Anpassen Ihres Bilder-Karussells

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 Ihren Karussell-Slider einzufügen.

Damit Ihr Karussell auf jedem Gerät gut aussieht, passt SeedProd Ihre Bilder automatisch für Desktops, Tablets und Smartphones an.

Im Bedienfeld Karusselleinstellungen können Sie Ihren Bildschieberegler weiter anpassen. Sie können zum Beispiel:

• Eine dunkle oder helle Navigationsfarbe wählen
• Ihr Karussell-Galerie automatisch abspielen lassen
• Die Geschwindigkeit der automatischen Wiedergabe in Sekunden auswählen
• Bildunterschriften ein- oder ausblenden
• Die Ausrichtung der Galerie auswählen

Wenn das nicht ausreicht, können Sie auf die Registerkarte Vorlagen klicken, um den Stil Ihrer Galeriebilder mit weniger Klicks zu ändern. Ich habe zum Beispiel einen Stil mit einem Schatten für das Bild gewählt.

Auf der Registerkarte Erweitert können Sie die Typografie, Rahmen und Abstände der Bildunterschriften anpassen und Farben und Stile auswählen, die zu Ihrer Marke passen.

Wenn Sie mit dem Aussehen Ihres Landingpage-Karussells zufrieden sind, klicken Sie auf die grüne Schaltfläche Speichern in der oberen rechten Ecke Ihres Bildschirms.

Schritt 5: Konfigurieren Sie die Einstellungen Ihrer Landingpage

Klicken Sie auf Seiteneinstellungen, um Ihrer Seite einen Namen zu geben und sie zur Veröffentlichung festzulegen.

Schritt 6: Veröffentlichen Sie Ihre Bilder-Karussell-Seite

Bevor Sie Ihre Landingpage veröffentlichen, sehen Sie sie auf dem Handy in der Vorschau an, um sicherzustellen, dass Ihr Design für Mobilfunknutzer gut aussieht. Andernfalls kann dies ihre Benutzererfahrung beeinträchtigen.

Um eine Vorschau Ihrer Seite anzuzeigen, klicken Sie auf das Symbol Mobile Vorschau am unteren Bildschirmrand.

Sie können dann Ihre Seite so anzeigen, wie sie für jeden aussieht, der von einem mobilen Gerät aus surft, und Änderungen mit dem visuellen Editor vornehmen.

Sie können auch schnell zwischen Desktop- und mobilen Textelementen in jedem Block mit Typografieeinstellungen wechseln. Dies ermöglicht es Ihnen, Änderungen an Ihrer mobilen oder Desktop-Seite vorzunehmen, ohne die Ansicht zu wechseln.

Wenn Sie mit Ihren mobilen und Desktop-Versionen Ihrer Landingpage zufrieden sind, klicken Sie auf den Dropdown-Pfeil der grünen Speichern-Schaltfläche und wählen Sie Veröffentlichen.

Dann können Sie auf der folgenden Seite auf die Schaltfläche Live-Seite anzeigen klicken, um Ihre Landingpage in der Vorschau anzuzeigen.

So sieht mein Bilderkarussell auf meiner Testwebsite aus:

Ihre Seite ist jetzt live, komplett mit einem voll responsiven WordPress-Bilderkarussell, um mehrere Bilder gleichzeitig anzuzeigen.

So fügen Sie Bilderkarussells zu WordPress-Beiträgen hinzu

Ich empfehle Anfängern oft Jetpack, da es einfach zu bedienen ist und einen integrierten Bildschieberegler für WordPress-Beiträge und -Seiten enthält.

Jetpack ist ein kostenloses Plugin, das Ihrer WordPress-Site eine Vielzahl nützlicher Funktionen hinzufügt.

Zum Beispiel kann es Ihre Website auf Sicherheitsprobleme scannen und Brute-Force-Schutz vor Bots und Hackern bieten. Sie können es auch verwenden, um Bilder verzögert zu laden, Inhalte in sozialen Medien zu teilen und mehr.

Wichtiger ist, dass Jetpack eine Funktion hat, mit der Sie Vollbild-Karussell-Galerien sowohl in Beiträgen als auch in 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-Bilderkarussell-Funktion von Jetpack nutzen können.

Schritt 1: Installieren und aktivieren Sie das Jetpack-Plugin

Der erste Schritt ist die Installation und Aktivierung von Jetpack. Gehen Sie dazu in Ihren WordPress-Adminbereich und klicken Sie auf Plugins » Neues Hinzufügen.

Scrollen Sie von dort nach unten, bis Sie das Jetpack-Plugin sehen, und klicken Sie auf Jetzt installieren, dann auf Aktivieren.

Schritt 2: Aktivieren Sie die Vollbild-Karussell-Galerie

Der nächste Schritt ist, im linken Navigationsbereich zu Jetpack » Einstellungen zu gehen und auf die Registerkarte Schreiben zu klicken.

Oben auf dem folgenden Bildschirm sehen Sie das Medien-Panel. Klicken Sie in diesem Bereich auf den Schalter Bilder in einer Vollbild-Karussellgalerie anzeigen, um ihn zu aktivieren.

Sie können auch wählen:

• Exif-Metadaten von Fotos im Karussell anzeigen
• Den Kommentarbereich im Karussell anzeigen

Und ein weißes oder schwarzes Farbschema auswählen.

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-Beitrag oder Ihren Seiten hinzu

Jetzt sind Sie bereit, kostenlos ein Bilderkarussell in jedem WordPress-Beitrag oder jeder Seite zu erstellen.

Um einfach ein Karussell zu einem WordPress-Beitrag hinzuzufügen, erstellen Sie einen neuen Beitrag oder bearbeiten Sie einen vorhandenen Beitrag. Klicken Sie dann auf das Plus-Symbol im Block-Editor, um einen neuen WordPress-Block hinzuzufügen, und klicken Sie auf den Block Diashow, um ihn zu Ihrem Beitrag hinzuzufügen.

Dann können Sie auf die Schaltfläche Hochladen klicken, um mit dem Hochladen von Bildern in Ihre Galerie von Ihrem Computer zu beginnen. Oder Sie können auf die Schaltfläche Mediathek klicken, um Bilder einzufügen, die sich bereits in Ihrer WordPress-Mediathek befinden.

Wählen Sie nun aus, welche Bilder 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 jedem Bild geht. Klicken Sie dann einfach auf die Schaltfläche Galerie einfügen, um sie zu Ihrem Beitrag hinzuzufügen.

Schritt 4: Veröffentlichen Sie Ihr WordPress-Bilder-Karussell

Sie sollten nun eine Vorschau Ihres Bilderkarussells in Ihrem WordPress-Beitrag sehen. Es wird Pfeile geben, mit denen Sie zwischen den Fotos navigieren können, und Paginierungspunkte, die die Anzahl der Bilder in der Galerie anzeigen.

Im Diashow-Einstellungsbereich auf der rechten Seite können Sie Ihr Publikum mit Übergangseffekten fesseln. Eine Reihe von Animationen ermöglicht es Ihnen, zwischen den Bildern zu gleiten oder zu verblassen, wodurch ein dynamisches visuelles Erlebnis entsteht, das Ihre Besucher anspricht.

Sie können auch die Bildgröße ändern, die Folien automatisch abspielen lassen und Übergänge verzögern.

Wenn Sie mit dem Aussehen Ihres Bilderkarussells 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.

So erstellen Sie WooCommerce-Produktbilder-Karussells

Wenn Sie einen Online-Shop mit WooCommerce haben, können Sie Produktfotos ganz einfach in einem attraktiven Bilder-Slider anzeigen. Dazu 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 Ihren Slidertyp, Abmessungen, Navigationsoptionen, Styling und mehr auswählen.

Gehen Sie als Nächstes zu der Produktseite, auf der Sie das Bilderkarussell hinzufügen möchten. In der rechten Seitenleiste sehen Sie ein neues Panel 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.

Von dort aus aktualisieren Sie das Produkt, und das war's. Jetzt können Sie die Seite aufrufen und Ihren WooCommerce-Bilderkarussell in Aktion sehen.

Dieses Plugin ist eine der einfachsten Möglichkeiten, einen Bilder-Slider zu Ihren WooCommerce-Produktseiten hinzuzufügen. Für eine vollständige Produktgalerie mit Lightbox-Unterstützung lesen Sie unseren Leitfaden zum Erstellen einer WooCommerce-Produktbildergalerie.

Weitere Fragen zu WordPress-Bilder-Karussells

Wie füge ich ein Karussell zu WordPress ohne Plugin hinzu?

Der native Galerie-Block von WordPress ermöglicht es Ihnen, mehrere Bilder an einem Ort hinzuzufügen, und unser Leitfaden zum Hinzufügen einer Galerie zu WordPress-Seiten beschreibt die Schritte. Für ein vollständiges Karussell mit Autoplay und Navigationssteuerelementen ist der Bildkarussell-Block von SeedProd die bessere Wahl, ohne dass ein separates Plugin erforderlich ist.

Was ist der Unterschied zwischen einem WordPress-Bilder-Slider und einem Karussell?

Ein Slider zeigt ein Bild nach dem anderen in einem Vollbildbereich an. Ein Karussell zeigt mehrere Bilder nebeneinander an, durch die Benutzer scrollen können. Slider eignen sich gut für Hero-Bereiche und fokussierte Botschaften. Karussells eignen sich besser für Produktgalerien, Portfolios und Sammlungen, bei denen Sie mehrere Elemente gleichzeitig anzeigen möchten.

Was ist die beste Größe für ein WordPress-Bilderkarussell?

Die gebräuchlichste Größe ist 1200×600 Pixel, was die Bildqualität und die Ladegeschwindigkeit ausbalanciert. Wenn Ihr Karussell die gesamte Seitenbreite einnimmt, gehen Sie bis zu 1600 Pixel Breite. Behalten Sie bei allen Bildern in Ihrem Karussell die gleichen Abmessungen bei, damit sie beim Durchlaufen der Galerie nicht verschoben oder zugeschnitten werden.

Bietet SeedProd eine kostenlose Karussell-Funktion?

Der Bildkarussell-Block von SeedProd ist in den kostenpflichtigen Plänen verfügbar. Die kostenlose Version von SeedProd enthält den Bildkarussell-Block nicht. Wenn Sie eine kostenlose Option benötigen, fügt Jetpack WordPress-Beiträgen und -Seiten kostenlos Karussell-Funktionalität hinzu.

Was verlangsamt WordPress-Seiten durch Bilderkarussells?

Die häufigste Ursache sind übergroße Bilder. Das Hochladen von 3000 Pixel breiten Bildern, wenn Ihr Karussell bei 800 Pixel angezeigt wird, zwingt WordPress, weit mehr Daten zu laden als nötig. Karussell-Plugins, die JavaScript und CSS auf jeder Seite laden, auch auf Seiten ohne Karussell, fügen ebenfalls unnötiges Gewicht hinzu. Der Bildkarussell-Block von SeedProd wird nur auf Seiten geladen, auf denen Sie ihn verwenden.

Als Nächstes: Weitere WordPress-Bildtipps

Das Erstellen eines WordPress-Bilderkarussells erfordert keinen Code oder Entwickler. Der Bildkarussell-Block von SeedProd erledigt dies in wenigen Minuten.

Sie könnten auch die folgenden Anleitungen mögen, um Ihre WordPress-Bilder zu verbessern:

• So fügen Sie ein Beitragsbild zu WordPress hinzu
• So erstellen Sie eine Produktbildergalerie in WooCommerce
• So fügen Sie eine Galerie zu WordPress-Seiten hinzu
• So fügen Sie Hotspot-Bilder zu WordPress hinzu
• So fügen Sie Text auf einem Bild in WordPress hinzu
• So erstellen Sie eine Lightbox in WordPress für Bilder
• Hintergrundbild in WordPress ohne CSS abdunkeln

Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.