How to Create Post Carousel Slider on Generatepress Without Plugin

Summary

In diesem Tutorial wird gezeigt, wie man einen dynamischen Post-Slider auf einer G-RED Press-Website erstellt, ohne ein Plugin zu verwenden. Es wird erklärt, wie man ein Child-Theme einrichtet, Elementor verwendet, um benutzerdefinierte Layouts zu erstellen, und die Post-Elemente dynamisch anzeigt. Mit CSS und JavaScript wird der Slider angepasst, einschließlich der Schaltflächen und Navigationspfeile. Am Ende können die erstellten Slider-Elemente exportiert und auf anderen Seiten oder Posts wiederverwendet werden. Ein einfaches, aber leistungsstarkes Tool, um eine ansprechende Blog-Seite zu gestalten.

Takeaways

• 😀 Der GRED Press Child-Theme kann kostenlos von der Website des Autors heruntergeladen werden und enthält vorgefertigte Stile und JavaScript, die die Anpassung der Website erleichtern.
• 😀 Um einen Slider zu erstellen, muss zuerst ein neuer Element-Block mit dem Namen 'Top Slider' in Elementor erstellt werden. Wählen Sie das Template 'Big Hero' aus.
• 😀 Der Slider wird mit einer Abfrage-Schleife erstellt, die es ermöglicht, dynamische Titel und Verlinkungen zu den einzelnen Beiträgen hinzuzufügen.
• 😀 Die Hintergrundbilder des Sliders werden dynamisch gesetzt, wobei das hervorgehobene Bild jedes Beitrags als Hintergrund verwendet wird.
• 😀 Der Post-Template-Bereich muss angepasst werden, indem die Schriftgröße der Titel angepasst und Abstände hinzugefügt werden, um das Design zu optimieren.
• 😀 Um den Slider funktionsfähig zu machen, muss benutzerdefiniertes CSS und JavaScript hinzugefügt werden. Eine spezielle Klasse wie 'top post' sollte erstellt werden.
• 😀 Die Navigation des Sliders kann angepasst werden, indem die Buttons innerhalb des Sliders platziert und das Design der Navigation verändert wird.
• 😀 Benutzerdefinierte Navigationspfeile können durch Ersetzen der Standardbilder für die Pfeile mit eigenen Grafiken angepasst werden.
• 😀 Die Anzeige von Navigationspunkten (Dots) kann auf verschiedenen Geräten gesteuert werden, sodass auf Mobilgeräten Pfeile angezeigt und auf Desktops Punkte verwendet werden können.
• 😀 Es können mehrere Slider erstellt werden, indem die Abfrage-Schleife dupliziert wird. Weitere Anpassungen wie Filter nach Kategorie oder Beitragstyp sind ebenfalls möglich.
• 😀 Am Ende des Tutorials können die erstellten Elemente exportiert und auf der Website des Autors heruntergeladen werden, um sie auf anderen Webseiten zu verwenden.

Q & A

Welche Voraussetzungen müssen erfüllt sein, um den Post-Slider in GRed Press zu erstellen?

Um den Post-Slider zu erstellen, benötigen Sie die Premium-Version von GRed Press sowie ein Child-Theme, das bereits vorgefertigte Styles und JavaScript enthält, um die Erstellung zu erleichtern.

Kann man den Post-Slider ohne Plugin erstellen?

Ja, im Tutorial wird gezeigt, wie man den Post-Slider ohne ein Plugin erstellt, indem man das jQuery Carousel und benutzerdefinierte CSS/JS verwendet.

Wie wird das Child-Theme in GRed Press installiert?

Das Child-Theme wird heruntergeladen und auf der Website installiert. In der Regel müssen Sie das Child-Theme in den WordPress-Theme-Ordner hochladen und aktivieren.

Welche Einstellungen müssen für das Slider-Element vorgenommen werden?

Für das Slider-Element müssen Sie ein neues Element erstellen, es als 'Hero' definieren und dann eine Container-Div mit dem Namen 'Hero Slider' hinzufügen. Innerhalb dieses Containers fügen Sie eine Query Loop ein, um Posts anzuzeigen.

Wie können die Slider-Elemente visuell angepasst werden?

Die visuelle Anpassung erfolgt durch CSS. Sie können die Schriftgröße, Positionierung, Abstände und Hintergründe anpassen, indem Sie benutzerdefinierte CSS-Klassen und Stile verwenden.

Was ist die Funktion der Dynamischen Hintergrundbilder im Post-Slider?

Die dynamischen Hintergrundbilder ermöglichen es, das Beitragsbild automatisch als Hintergrund für jedes einzelne Element im Slider anzuzeigen. Dies wird durch die 'Feature Image' Einstellung in den Elementoptionen ermöglicht.

Wie wird der Button innerhalb des Sliders positioniert?

Der Button wird standardmäßig unter dem Slider angezeigt. Mit benutzerdefiniertem CSS kann der Button jedoch innerhalb des Sliders in einer absoluten Position platziert werden, um ihn beispielsweise am unteren Rand zu positionieren.

Wie können die Navigationspfeile im Slider angepasst werden?

Die Navigationspfeile können angepasst werden, indem man eine benutzerdefinierte Pfeil-Grafik hochlädt und in den CSS-Stilen ersetzt. Ebenso kann die Pfeilfarbe und -größe über CSS modifiziert werden.

Was passiert, wenn die Anzeige auf mobilen Geräten getestet wird?

Auf mobilen Geräten können die Navigationselemente (wie Pfeile oder Punkte) je nach Bedarf ein- oder ausgeblendet werden. Zum Beispiel können Sie die Pfeile auf mobilen Geräten deaktivieren, während sie auf Desktop-Geräten sichtbar bleiben.

Welche weiteren Funktionen können zum Post-Slider hinzugefügt werden?

Zusätzlich zur Bildanzeige und der Navigation können weitere Elemente wie das Veröffentlichungsdatum, der Titel des Beitrags und benutzerdefinierte Steuerelemente hinzugefügt werden, um die Anzeige des Sliders zu erweitern.