WordPress-Tipp: Wechselbild (Slider) mit Wordpress-Hausmitteln ohne PlugIn

Geschrieben von:

Tech-Writer Thomas am 13.02.2025

Artikel teilen:

Aufrufe seit 14.2.2025

Gesamt: 283
Dieses Jahr: 283
Diesen Monat: 132
Diese Woche: 12
Heute: 4

Post Tags:

In der heutigen Zeit setzen immer mehr Webseiten auf visuelle Elemente, die die Nutzererfahrung bereichern und das Design auflockern. Ein besonders wirkungsvolles Element sind Wechselbilder – Bilder, die sich automatisch ändern, sobald die Seite geladen wird, und fortlaufend eine dynamische Wirkung entfalten. Diese Animationen können dabei helfen, wichtige Inhalte hervorzuheben, zusätzliche Informationen anzuzeigen oder einfach die Ästhetik der Seite zu verstärken. Besonders interessant ist, dass diese Effekte ohne den Einsatz von JavaScript oder jQuery realisiert werden können – allein mit den Möglichkeiten von CSS.

Inhalt:

Wechselbilder und Slider-Plugins in WordPress
Blueflexx Wechselbild Block
Der Code: Wechselbild Block
Fazit

Wechselbilder und Slider-Plugins in WordPress

Für viele WordPress-Nutzer bieten Plugins eine einfache Lösung, um visuelle Effekte wie Wechselbilder oder Slider auf ihrer Seite zu integrieren. Diese Plugins ermöglichen es, mehrere Bilder in einem rotierenden Slider oder als Wechselbild darzustellen, ohne dass man viel Code schreiben muss. Hier eine kurze Übersicht über einige beliebte Plugins, die diese Funktionalität bieten:

MetaSlider
Smart Slider 3
Solis Slider
Slider Revolution

Vorteile:

Einfache Handhabung: Plugins bieten oft benutzerfreundliche Drag-and-Drop-Interfaces, die das Erstellen und Verwalten von Slidern erleichtern.
Vielseitigkeit: Viele Plugins bieten umfangreiche Anpassungsoptionen und vorgefertigte Designs, die sich leicht anpassen lassen.
Zusätzliche Funktionen: Einige Plugins bieten fortgeschrittene Funktionen wie Animationen, Lazy-Loading oder Anpassungen der Übergangseffekte, die die Benutzererfahrung verbessern können.

Nachteile:

Abhängigkeit von Plugins: Mit Plugins kommt immer auch das Risiko, dass sie nicht regelmäßig aktualisiert werden oder inkompatibel mit zukünftigen WordPress-Versionen sind.
Kosten: Viele der leistungsfähigeren Plugins bieten nur in der kostenpflichtigen Version den vollen Funktionsumfang, wie etwa erweiterte Designoptionen, unbegrenzte Bilderanzahl oder zusätzliche Animationseffekte.
Performance: Plugins können die Ladegeschwindigkeit der Seite beeinträchtigen, besonders wenn sie viele Ressourcen benötigen oder schlecht optimiert sind.

Auch wenn Plugins eine schnelle und unkomplizierte Lösung bieten, kann es sich manchmal lohnen, eine leichtere, codebasierte Lösung zu wählen, besonders wenn du mehr Kontrolle über das Design und die Performance deiner Seite haben möchtest.

Blueflexx Wechselbild Block

Die Verwendung von Gutenberg-Blöcken für die Erstellung eines Wechselbildes bringt zahlreiche Vorteile mit sich. Im Gegensatz zu traditionellen Methoden, bei denen oft auf komplexe Plugins oder externe Tools zurückgegriffen wird, bietet Gutenberg eine direkte und benutzerfreundliche Lösung. Ein großer Vorteil der Gutenberg-Blocks liegt in ihrer einfachen Integration und Anpassbarkeit innerhalb des WordPress-Editors. Du kannst das Layout und Design eines Wechselbildes ganz nach deinen Vorstellungen gestalten, ohne tief in den Code eintauchen zu müssen.

Besonders hervorzuheben ist die Flexibilität von Gutenberg, die es ermöglicht, das Wechselbild mit verschiedenen Stilen, Abständen und Animationen direkt im Editor zu konfigurieren. So kannst du ein ansprechendes und dynamisches Design erstellen, das sich perfekt in das Gesamtkonzept deiner Seite einfügt. Mit Gutenberg hast du zudem die Möglichkeit, direkt in die Block-Struktur einzugreifen und eigene Anpassungen vorzunehmen, ohne auf externe Lösungen angewiesen zu sein. Diese benutzerfreundliche Art der Umsetzung spart Zeit und sorgt dafür, dass du die volle Kontrolle über das Design und die Funktionalität behältst.

Da Gutenberg von Haus aus in WordPress integriert ist, entfällt die Notwendigkeit, zusätzliche Plugins zu installieren, was nicht nur die Ladegeschwindigkeit der Seite verbessert, sondern auch die Wartung vereinfacht. Zudem kannst du das Wechselbild mit minimalem Aufwand auch später anpassen oder erweitern. Diese Lösung bietet eine ideale Balance aus Einfachheit und Funktionalität – eine perfekte Möglichkeit, ein dynamisches Wechselbild zu integrieren, ohne die Performance deiner Seite zu beeinträchtigen.

Der Code: Wechselbild Block

Der Wechselbild-Block im Gutenberg-Editor nutzt eine geschachtelte Struktur, um eine animierte Bildüberblendung zu erzeugen. Die gesamte Anordnung befindet sich in einer Gruppierung, die neben einer H1-Überschrift auch zwei Cover-Blöcke enthält. Der eigentliche Effekt wird durch einen Individuellen HTML-Block gesteuert, der das benötigte JavaScript für die Animation und Formatierung bereitstellt.

Bildunterschrift / Copyright und Lizenz: Blueflexx-WebDesign

Ein entscheidender Bestandteil ist der zweite Cover-Block, der die zusätzliche CSS-Klasse „blueflexx_changepic“ enthält. Diese Klasse wird im Zusammenspiel mit dem CSS-Code genutzt, um den Wechselbildeffekt zu realisieren, indem das Bild dynamisch verändert oder überblendet wird. Gleiches gilt für die Animation der Überschrift. Diese Kombination ermöglicht eine flexible und visuell ansprechende Gestaltung innerhalb des Gutenberg-Editors.

Zusätzliche CSS Klasse für-2ten Cover-Block

Bildunterschrift / Copyright und Lizenz: Blueflexx-WebDesing

Der komplette WordPress-Code

Der individuelle Wechselbild-Block kann manuell in WordPress nachgebaut werden oder aber der folgende Code komplett kopiert werden.

<div class="wp-block-group alignfull">
<style type="text/css">
/* Stylesheet für den Blueflexx-Wechselbild-Block - www.blueflexx.com */
/* Textformatierung H1-Überschrift */
.blueflexx_changepic h1 {
position:absolute;
text-align: center;
width: 100%;
color: white;
text-shadow: 1px 1px 5px #000, -1px -1px 5px #000;
animation: SlideShowHeader 20s linear infinite 0s;
}

@keyframes SlideShowHeader {
0% { top:-5rem; }
5% { top:3rem; }
95% { top:3rem; }
100% { top:-5rem; }
}

/* Wechselbild */
.blueflexx_changepic img {
opacity:0;
animation: SlideShow2Picture 20s linear infinite 0s;
}

@keyframes SlideShow2Picture {
   0% { opacity: 0; }
   5% { opacity: 1; }
   50% { opacity: 1; }
   55% { opacity: 0; }
}
</style>

<div class="wp-block-cover alignfull" style="margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;min-height:80vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="https://blueflexx.com/grafic/logos_w1200.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container">
<div class="wp-block-cover alignfull is-light has-custom-content-position is-position-top-center blueflexx_changepic" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--50);padding-right:0;padding-bottom:var(--wp--preset--spacing--50);padding-left:0;min-height:100%"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="https://blueflexx.com/grafik/highlights_w1200.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container">
<h1 class="wp-block-heading alignfull has-text-align-center">Blueflexx Wechselbild Block</h1>
</div></div>
</div></div>
</div>

In diesem Beispiel ist der benötigte CSS-Stylesheet-Code direkt auf der Seite eingebunden. Dies bietet den Vorteil, dass er individuell angepasst und gezielt nur auf den entsprechenden Seiten verwendet wird. Durch diese maßgeschneiderte Einbindung kann die Ladegeschwindigkeit optimiert werden, da unnötiger Code auf Seiten, auf denen das Wechselbild nicht benötigt wird, vermieden wird. Falls das Wechselbild jedoch auf mehreren Seiten der Website zum Einsatz kommt, empfiehlt es sich, den Code direkt in die style.css-Datei des Child-Themes einzufügen. Dadurch wird der Code global verfügbar und optimiert die Wartung der Seite.

Neben den Formatierungen sind auch die 2 folgenden linearen Keyframe-Animationen enthalten:

@keyframes SlideShowHeader: Die Überschrift fließt von oben ein- und heraus!
@keyframes SlideShow2Picture: Das 2. Bild wird ein- und ausgeblendet!

Alle Formatierungen und Animationen können individuell angepasst werden. Zudem können die Block-Eigenschaften in WordPress individuell gesetzt werden, z. B. wie die Höhe der bilder oder das Seitenverhältnis der Bilder (Bildratio).

Ergebnis

Folgend ist das Ergebnis dieses individuellen WordPress Codeschnipsel als Video zu sehen:

Fazit

Die Verwendung von Gutenberg-Blöcken für die Erstellung eines eigenen Wechselbildes bietet eine einfache und effiziente Lösung, um dynamische und ansprechende visuelle Elemente in deine Webseite zu integrieren. Ohne den Einsatz zusätzlicher Plugins behältst du die volle Kontrolle über das Design und die Performance deiner Seite. Diese Methode ist nicht nur benutzerfreundlich, sondern auch flexibel und leicht anpassbar. Sollte dir dennoch Unterstützung bei der Umsetzung oder Anpassung fehlen, steht BlueFlexx WebDesign gerne mit fachkundigem Rat zur Seite, um dir bei der Realisierung deiner Projekte zu helfen.

Impessum des Autor Kontakt zum Autor