Überschriften mit dekorativen Akzentlinien gestalten
Mit Pseudoelementen und Flexbox ergänzt du links und rechts einer Überschrift dekorative Linien, die sich an deine globalen Farben anpassen.
Code-Snippets
Dynamische Template-Tags in Meta Box und GeneratePress ergänzen
Technische Notizen zur Erweiterung dynamischer Template-Tags für WordPress mit Meta Box und GeneratePress. Prüfe den Code gegen deine aktuelle Plugin-Version.
Organisch gezeichnete Boxen mit CSS gestalten
Unregelmäßige, handgezeichnet wirkende Ecken lassen sich mit unterschiedlich kombinierten border-radius-Werten simulieren.
Endlose Ken-Burns-Animation für ein Container-Hintergrundbild mit CSS
So animierst du ein Hintergrundbild in einem GenerateBlocks-Container mit einem langsamen Ken-Burns-Effekt.
GeneratePress-Farben in RGB-Werte umwandeln
Ein Ansatz, um globale GeneratePress-Farben zusätzlich als RGB-Komponenten bereitzustellen und sie anschließend mit Transparenz in rgba() zu verwenden.
Regenbogen-Effekt mit einem Code-Snippet umsetzen
Ein Verweis auf einen Regenbogen-Effekt aus einer Code-Snippet-Sammlung. Vor dem Einsatz solltest du den Originalcode und seine Abhängigkeiten prüfen.
WooCommerce: „Weiter einkaufen“-Button anpassen
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.
WooCommerce: Einen Button im Bereich „Mein Konto“ ergänzen
So planst du einen zusätzlichen Button im WooCommerce-Kundenkonto und entscheidest, ob ein Hook, ein Template oder CSS der passende Ansatz ist.
Konditionale Layout-Breite mit GP-Elements & per Child-Theme (Full Width)
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 …
WooCommerce-Buttons mit CSS anpassen
Mit CSS kannst du die Darstellung von WooCommerce-Buttons an das Design deiner Website anpassen, ohne Plugin-Dateien zu bearbeiten.
GenerateBlocks-Container links oder rechts über den Inhaltsbereich hinaus erweitern
Ein Layout-Trick für asymmetrische Abschnitte: Ein Container reicht bis zum Bildschirmrand, während der restliche Inhalt im zentrierten Seitenraster bleibt.
Einheitliche Karten: Buttons in Spalten am unteren Rand ausrichten
So richtest du Buttons in gleich hohen Karten am unteren Rand aus, auch wenn die Texte der einzelnen Karten unterschiedlich lang sind.
Text mit einem Bild- bzw. Farbverlauf als Hintergrund gestalten
Mit CSS kannst du einen Farbverlauf auf Text anwenden, sodass der Hintergrund des Textes transparent bleibt und der Verlauf durch die Buchstaben sichtbar wird.
Animierte Unterstreichung für Navigationslinks mit CSS
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
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
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
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
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
Ein Timeline-Layout lässt sich mit strukturierten GenerateBlocks-Containern und CSS aufbauen, ohne ein separates Timeline-Plugin einzusetzen.
Einen Toggle-Switch mit GenerateBlocks umsetzen
Ein Beispiel für einen Umschalter, der zwischen zwei Inhaltsbereichen wechselt. Die Umsetzung kombiniert GenerateBlocks mit CSS und JavaScript.