hallowebsite Dot Backgrounds
Ergänzt Gutenberg- und Kadence-Blöcke direkt in der Block-Seitenleiste um ein einstellbares Punkteraster. Farbe, Größe, Abstand, Form, Fläche und Position legst du selbst fest – mit eigenen Mobil-Werten und wiederverwendbaren Presets.
Download v2.5.3Überblick
hallowebsite Dot Backgrounds ergänzt Gutenberg- und Kadence-Blöcke um ein einstellbares Punkteraster – ein beliebter dekorativer Akzent hinter Bildern, Bereichen oder Überschriften. Du aktivierst es in der Block-Seitenleiste und legst Farbe, Punktgröße, Abstand, Form, Fläche und Position fest. Für Mobilgeräte sind eigene Werte möglich, Lieblingseinstellungen speicherst du als wiederverwendbare Presets. Das Muster ist reines CSS, ohne Bilder.
Funktionen
- Panel Dot Background in der Block-Seitenleiste.
- Unterstützte Blöcke: Gruppe, Spalten/Spalte, Cover, Medien & Text, Buttons/Button, Bild, Absatz, Überschrift, Abstandshalter, Trennzeichen, Kadence Row Layout/Column und GenerateBlocks Container.
- Farbe (Standard: deine Kadence-Akzentfarbe
var(--global-palette1)), Punktgröße, Abstand und Deckkraft. - Formen: Kreis, Quadrat, abgerundetes Quadrat (mit Radius).
- Musterfläche: Breite/Höhe als CSS-Wert oder als Anzahl Punkte, ausgerichtet links/mitte/rechts × oben/mitte/unten mit X/Y-Versatz.
- Außenabstände, optional aus der Abstands-Skala des Themes.
- Mobile Abweichungen für jeden Wert – oder das Muster auf Mobilgeräten ausschalten.
- Wiederverwendbare Presets, gespeichert in deinem Browser.
Verwendung
- Einen unterstützten Block auswählen.
- In der Seitenleiste Dot Background öffnen und Enable dot background aktivieren.
- Farbe, Größe, Abstand, Form, Fläche und Position anpassen.
- Optional: unter Mobile overrides abweichende Werte setzen oder das Muster mobil ausschalten.
- Optional: die Einstellung unter Reusable preset als Preset speichern.
Standardwerte
| Einstellung | Standard |
|---|---|
| Farbe | var(--global-palette1) |
| Punktgröße | 4px |
| Abstand | 20px |
| Fläche | 100% × 100% |
| Position | links / oben, Versatz 0px |
| Form | Kreis |
| Deckkraft | 1 |
Tipps
- Eine Musterfläche kleiner als der Block (z. B. 6 × 4 Punkte unten rechts) ergibt den klassischen versetzten Akzent hinter Bildern.
- Eine Farbe aus deiner Kadence-Palette wählen, z. B.
var(--global-palette7), für einen dezenten Effekt. - Presets liegen im localStorage deines Browsers und werden nicht in andere Browser übernommen.
Changelog
Changed: - Rebranding: neuer Name „hallowebsite Dot Backgrounds“, Autor hallowebsite, Plugin-URI https://hallowebsite.de/plugins/dot-backgrounds/ - Keine funktionalen Änderungen.