hallowebsite Dot Backgrounds
Adds a configurable dot-grid pattern to Gutenberg and Kadence blocks, right in the block sidebar. You set the colour, size, gap, shape, area and position, with separate mobile values and reusable presets.
Download v2.5.3Overview
hallowebsite Dot Backgrounds adds a configurable dot-grid pattern to Gutenberg and Kadence blocks, a popular decorative accent behind images, sections or headlines. You turn it on in the block sidebar and set the colour, dot size, spacing, shape, area and position. Mobile settings can be different, and favourite configurations can be saved as reusable presets. The pattern is pure CSS, with no images.
Features
- A Dot Background panel in the block sidebar.
- Supported blocks: Group, Columns/Column, Cover, Media & Text, Buttons/Button, Image, Paragraph, Heading, Spacer, Separator, Kadence Row Layout/Column and GenerateBlocks Container.
- Colour (default: your Kadence accent
var(--global-palette1)), dot size, gap and opacity. - Shapes: circle, square, rounded square (with radius).
- Pattern area: width/height as a CSS value or as a number of dots, aligned left/center/right × top/center/bottom with X/Y offsets.
- Margins, optionally from the theme spacing scale.
- Mobile overrides for every value, or disable the pattern on mobile.
- Reusable presets, saved in your browser.
Usage
- Select a supported block.
- In the sidebar, open Dot Background and enable Enable dot background.
- Adjust the colour, size, gap, shape, area and position.
- Optional: in Mobile overrides, set different values or disable the pattern on mobile.
- Optional: save the setup as a preset under Reusable preset.
Defaults
| Setting | Default |
|---|---|
| Colour | var(--global-palette1) |
| Dot size | 4px |
| Gap | 20px |
| Area | 100% × 100% |
| Position | left / top, offset 0px |
| Shape | Circle |
| Opacity | 1 |
Tips
- Use a pattern area smaller than the block (e.g. 6 × 4 dots, bottom right) for a classic offset accent behind images.
- Pick a colour from your Kadence palette, e.g.
var(--global-palette7), for a subtle effect. - Presets live in your browser's localStorage, so they don't carry over to other browsers.
Changelog
Changed: - Rebranding: neuer Name „hallowebsite Dot Backgrounds“, Autor hallowebsite, Plugin-URI https://hallowebsite.de/plugins/dot-backgrounds/ - Keine funktionalen Änderungen.