Mit einer CSS-Klasse und einer kurzen Media Query kannst du in GenerateBlocks jede zweite Feature-Sektion auf größeren Bildschirmen spiegeln – ohne die Blockstruktur doppelt aufzubauen.
So erstellst du einen animierten, mehrfarbigen Rahmen um einen GenerateBlocks-Container. Der Effekt basiert auf einem konischen Farbverlauf und einer CSS-Animation.
Wenn du schon mal genervt warst, an jedem einzelnen Breakpoint deinen Content in GeneratePress mit GenerateBlocks nachzupflegen, habe ich hier die perfekte Anleitung für dich. Du lernst, wie du Padding, Typografie, Karten-Grids und Bildgrößen automatisch responsiv gestaltest, ohne für Tablet und Mobile alles doppelt (und dreifach) zu machen. 1. Padding ohne nervige Einzelanpassungen Statt für … Weiterlesen …
Technische Demo für synchronisierte, seitlich fixierte Sektionen mit Greenshift und GenerateBlocks. Der Beitrag enthält einen umfangreichen Block-Prototyp, der vor der Wiederverwendung auf Plugin-Kompatibilität geprüft werden sollte.
Mit einer CSS-Klasse am Looper-Block und einer kleinen Media Query kannst du eine Query-Loop-Ausgabe in einen horizontalen Scroller verwandeln.
Sammlung von Gestaltungsansätzen und CSS-Anpassungen für Akkordeons und Tabs mit GenerateBlocks. Prüfe die jeweilige Blockstruktur, bevor du Selektoren übernimmst.
Ein Beispiel für eine scroll-gebundene Animation mit GenerateBlocks. Die Browserunterstützung ist nicht einheitlich; teste den Effekt vor dem produktiven Einsatz.
Mit einem Hintergrundbild, einem Container-Overlay und passenden Hover-Einstellungen kannst du Karten gestalten, deren Bild beim Darüberfahren abgedunkelt wird.
Mit Pseudoelementen und Flexbox ergänzt du links und rechts einer Überschrift dekorative Linien, die sich an deine globalen Farben anpassen.
Unregelmäßige, handgezeichnet wirkende Ecken lassen sich mit unterschiedlich kombinierten border-radius-Werten simulieren.
Mit passenden Abmessungen, Border-Radius und Flexbox kannst du runde Container und kreisförmige Buttons mit GenerateBlocks gestalten.
Wann du für GenerateBlocks-Layouts besser min-height verwendest und wann Innenabstände ausreichen, um eine gewünschte Höhe zu erreichen.
So animierst du ein Hintergrundbild in einem GenerateBlocks-Container mit einem langsamen Ken-Burns-Effekt.
Eine dezente, endlos wiederholte Auf-und-ab-Bewegung lässt sich über CSS-Animationen realisieren. Nutze den Effekt zurückhaltend und berücksichtige reduzierte Bewegung.
Ein Ansatz, um globale GeneratePress-Farben zusätzlich als RGB-Komponenten bereitzustellen und sie anschließend mit Transparenz in rgba() zu verwenden.
Eine kuratierte Sammlung von Ideen und Tutorials für Scroll-Effekte, animierte Hintergründe und dezente Eintrittsanimationen.
Mit Such- und Navigations-Plugins findest du Einstellungen und Verwaltungsbereiche im WordPress-Backend schneller, ähnlich wie mit Spotlight auf dem Mac.
Ein Werkzeug zur Berechnung flexibler Schriftgrößen. Prüfe, ob es zu deinem responsiven Typografie-System passt.
Ein Überblick über Möglichkeiten, Popups und modale Dialoge in WordPress umzusetzen – vom Plugin bis zur individuell gestalteten Lösung.
Ein Überblick über mögliche Buchungs-Workflows in WordPress – von einfachen Terminanfragen bis zu bezahlten Reservierungen.
Ein Verweis auf einen Regenbogen-Effekt aus einer Code-Snippet-Sammlung. Vor dem Einsatz solltest du den Originalcode und seine Abhängigkeiten prüfen.
Hinweise zum Übertragen von Beiträgen, Custom Post Types, lokalen GenerateBlocks-Mustern und Beitragsbildern zwischen WordPress-Installationen.
Ein kurzer Hinweis zur Anpassung des „Weiter einkaufen“-Buttons in WooCommerce. Prüfe, ob sich die gewünschte Änderung über Hooks, Templates oder CSS lösen lässt.
So planst du einen zusätzlichen Button im WooCommerce-Kundenkonto und entscheidest, ob ein Hook, ein Template oder CSS der passende Ansatz ist.
Ein Ansatz, um Navigationslinks links auszurichten und den letzten Menüpunkt in GeneratePress als Button rechts hervorzuheben.
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) … Weiterlesen …
So kannst du ein Inhaltsverzeichnis über ein GeneratePress-Block-Element in der Seitenleiste ausgeben und für lange Beiträge nutzbar machen.
Ein Beispiel für ein Sticky-Inhaltsverzeichnis in der Seitenleiste, das beim Lesen eines längeren WordPress-Beitrags sichtbar bleibt.
Mit CSS kannst du die Darstellung von WooCommerce-Buttons an das Design deiner Website anpassen, ohne Plugin-Dateien zu bearbeiten.
Ein Layout-Trick für asymmetrische Abschnitte: Ein Container reicht bis zum Bildschirmrand, während der restliche Inhalt im zentrierten Seitenraster bleibt.
So richtest du Buttons in gleich hohen Karten am unteren Rand aus, auch wenn die Texte der einzelnen Karten unterschiedlich lang sind.
Mit CSS kannst du einen Farbverlauf auf Text anwenden, sodass der Hintergrund des Textes transparent bleibt und der Verlauf durch die Buchstaben sichtbar wird.
Ein Überblick darüber, wie sich Layouts in WordPress über Theme-Einstellungen, Seiteneinstellungen und Container-Optionen strukturieren lassen.
Beispiel für dynamische Beitragskarten, die ein Hintergrundbild und den Beitragstitel kombinieren. Prüfe die Blockstruktur bei deiner GenerateBlocks-Version.
Mit einem CSS-Pseudoelement und einer Transition kannst du Links beim Darüberfahren mit einer animierten Unterstreichung versehen.
So markierst du einen Menüeintrag mit einer eigenen CSS-Klasse und gestaltest ihn als hervorgehobenen Button.
Mit CSS-Pseudoelementen kannst du Unterstreichungen animieren, die sich beim Darüberfahren über Links oder Menüeinträge aufbauen.
GenerateBlocks allein bietet nicht automatisch jede Lightbox- oder Modal-Funktion. Für Bildergalerien und Dialoge solltest du die benötigte Funktion gezielt ergänzen.
Mit einem gezielten Grid- und Container-Aufbau kannst du eine Spalte bis an den Viewportrand erweitern und den übrigen Inhalt im normalen Seitenraster belassen.
Ein Timeline-Layout lässt sich mit strukturierten GenerateBlocks-Containern und CSS aufbauen, ohne ein separates Timeline-Plugin einzusetzen.
Ein Beispiel für einen Umschalter, der zwischen zwei Inhaltsbereichen wechselt. Die Umsetzung kombiniert GenerateBlocks mit CSS und JavaScript.
Ein Layout-Beispiel, bei dem ein Bild als Hintergrund eines Textelements dient. Ergänze die Bild- und Blockeinstellungen passend zu deinem Design.
Ein Beispiel für einen Hero-Bereich mit WordPress-Cover-Block, Hintergrundbild und optionalem Parallax-Effekt.
Ein GenerateBlocks-Container kann als Hero-Bereich dienen; dabei muss der Abstand zum Standard-Beitragstitel berücksichtigt werden.