Beitragskarten mit GenerateBlocks horizontal scrollbar machen

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:

Wann nutzt du Elements, Patterns oder Synced Patterns?

11.12.2024

Webdesign mit dem GenerateStack Als WordPress-Entwickler oder in einer Agentur brauchst du klare Richtlinien für die Verwendung verschiedener Komponenten-Typen. Besonders wenn du mit GeneratePress und GenerateBlocks arbeitest, ist die richtige Wahl zwischen Elements, Patterns und Synced Patterns entscheidend für eine effiziente Website-Entwicklung. Das Fundament: Customizer und Global Styles WordPress Customizer Der GeneratePress Customizer ist deine

Wiederverwendbare Blöcke, globale Stile und lokale Muster: die Unterschiede

11.12.2024

Eine kurze Orientierung zu wiederverwendbaren Inhalten, globalen Stilen und lokalen Blockmustern in WordPress mit GeneratePress und GenerateBlocks.

Dynamische Template-Tags in Meta Box und GeneratePress ergänzen

02.10.2023

Technische Notizen zur Erweiterung dynamischer Template-Tags für WordPress mit Meta Box und GeneratePress. Prüfe den Code gegen deine aktuelle Plugin-Version.

Elementhöhen steuern: min-height oder Padding?

16.08.2023

Wann du für GenerateBlocks-Layouts besser min-height verwendest und wann Innenabstände ausreichen, um eine gewünschte Höhe zu erreichen.

GeneratePress-Farben in RGB-Werte umwandeln

27.04.2023

Ein Ansatz, um globale GeneratePress-Farben zusätzlich als RGB-Komponenten bereitzustellen und sie anschließend mit Transparenz in rgba() zu verwenden.

Tool für responsive Schriftgrößen: Simple Responsive Font Size Calculator

21.04.2023

Ein Werkzeug zur Berechnung flexibler Schriftgrößen. Prüfe, ob es zu deinem responsiven Typografie-System passt.

Konditionale Layout-Breite mit GP-Elements & per Child-Theme (Full Width)

08.04.2023

Mit GeneratePress und GenerateBlocks ist es möglich, nahezu jegliche Layout-Anforderungen umzusetzen. Häufig sollen beispielsweise Landingpages erstellt werden, auf denen sich ein farbiger Hintergrund einzelner Sektionen über die gesamte Bildschirmbreite erstreckt. Der Content soll aber in den Sektionen innerhalb der global definierten Content-Width bleiben. GP & GB ermöglichen solche Layouts, indem Content-Width (per Theme & Editor)

Previous Next