Eine horizontale Beitragsleiste statt eines klassischen Grids
Eine horizontale Scroll-Leiste eignet sich, wenn du mehrere Beiträge oder Karten kompakt präsentieren möchtest, ohne dass sie auf kleineren Displays zu einem langen Raster werden. Die Beiträge bleiben Teil einer normalen WordPress-Query-Loop-Ausgabe; das Layout wird über CSS angepasst.
Füge dem Looper-Block innerhalb des GenerateBlocks-Query-Blocks die Klasse scroll-grid hinzu. Ergänze anschließend das CSS über den dafür vorgesehenen globalen CSS-Bereich oder dein Child-Theme. Prüfe besonders das Verhalten auf Touch-Geräten und achte darauf, dass die Karten nicht versehentlich den Seiteninhalt horizontal überlaufen lassen.
CSS für den horizontalen Scroller
Create a horizontal scroller with CSS Grid — An instant UI improvement for any blog grid!
From https://www.youtube.com/watch?v=Ipi46aNFyfE
Tutorial
Add CSS Class scroll-grid to the Looper Block inside the Query Block
Add CSS code via Customizer or Child Theme
@media (max-width: 1024px) {
.scroll-grid {
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: 320px;
overflow-x: scroll;
}
scroll-gnap-type: x mandatory;
.scroll-grid > div {
scroll-snap-align: start;
}
}Demo
To see the effect, simply view this post on your mobile device:
Text mit einem Bild- bzw. Farbverlauf als Hintergrund gestalten
19.10.2022
Mit CSS kannst du einen Farbverlauf auf Text anwenden, sodass der Hintergrund des Textes transparent bleibt und der Verlauf durch die Buchstaben sichtbar wird.
WordPress-Seiten um eigene Kategorien erweitern
01.10.2022
WordPress erlaubt eigene Taxonomien nicht nur für Beiträge, sondern auch für Seiten und Custom Post Types. Hier erfährst du, welche Ansätze dafür infrage kommen.
Layouts über Customizer-, Seiten- und Container-Einstellungen erstellen
30.09.2022
Ein Überblick darüber, wie sich Layouts in WordPress über Theme-Einstellungen, Seiteneinstellungen und Container-Optionen strukturieren lassen.
Animierte Unterstreichung für Navigationslinks mit CSS
22.09.2022
Mit einem CSS-Pseudoelement und einer Transition kannst du Links beim Darüberfahren mit einer animierten Unterstreichung versehen.
Den letzten Eintrag im GeneratePress-Menü als Button gestalten
20.09.2022
So markierst du einen Menüeintrag mit einer eigenen CSS-Klasse und gestaltest ihn als hervorgehobenen Button.
Animierte Unterstreichung beim Hover: CSS-Effekte für Links und Menüs
20.09.2022
Mit CSS-Pseudoelementen kannst du Unterstreichungen animieren, die sich beim Darüberfahren über Links oder Menüeinträge aufbauen.
Lightbox oder Modal mit GenerateBlocks: Grenzen und Alternativen
11.09.2022
GenerateBlocks allein bietet nicht automatisch jede Lightbox- oder Modal-Funktion. Für Bildergalerien und Dialoge solltest du die benötigte Funktion gezielt ergänzen.
GenerateBlocks: Grid-Spalten bis zum linken oder rechten Bildschirmrand erweitern
10.09.2022
Mit einem gezielten Grid- und Container-Aufbau kannst du eine Spalte bis an den Viewportrand erweitern und den übrigen Inhalt im normalen Seitenraster belassen.
Eine Timeline ohne zusätzliches Plugin mit GenerateBlocks erstellen
06.09.2022
Ein Timeline-Layout lässt sich mit strukturierten GenerateBlocks-Containern und CSS aufbauen, ohne ein separates Timeline-Plugin einzusetzen.
Hero-Bereich mit dem integrierten WordPress-Cover-Block erstellen
01.09.2022
Ein Beispiel für einen Hero-Bereich mit WordPress-Cover-Block, Hintergrundbild und optionalem Parallax-Effekt.