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:
Hero-Bereich mit einem GenerateBlocks-Container in Beiträgen erstellen
29.08.2022
Ein GenerateBlocks-Container kann als Hero-Bereich dienen; dabei muss der Abstand zum Standard-Beitragstitel berücksichtigt werden.