SVG art direction for Gutenberg & Kadence

Add decorative SVG accents to your WordPress sections, with an advanced editor preview and clean responsive control from 4K down to mobile.

Download the free plugin See the Pro version
Built for Gutenberg Tested with Kadence Blocks Lightweight Designer-focused
Discover
Editor preview
Section Accent

A real preview, not just an empty placeholder.

Preview content, adjust your SVG accents, and keep the layout readable across desktop, tablet, and mobile.

6 free presets 9 breakpoints Overlay / stacked
Section Front-end
Responsive
Sections that feel designed, not patched together.

Add a decorative accent in seconds, then refine its position with a real responsive system.

Section Accent

A free WordPress Gutenberg plugin for adding decorative SVG accents to your sections. It works with Kadence row layouts and native Group blocks, with an advanced editor preview, 9 breakpoints, and overlay or stacked modes.

6 free SVG presets

Blob, diagonal, chevron, wave, leaf, and grid dots — ready to use right away.

Advanced editor preview

Place accents with more confidence thanks to a readable preview of the scene and content.

9 responsive breakpoints

From 4K down to 375px. Adjust size, position, and layout mode for every screen size.

Pro workflow upgrade

28 premium presets, custom SVGs, drag in preview, copy/paste settings, and subtle entrance animations.

Download the free plugin Pro — €19/year

Coming to WordPress.org soon

What you can build

Section Accent is meant to improve real layouts, not add another gimmick. Here are three places where it makes an immediate visual difference.

More premium hero sections

Add a wave, blob, or organic shape behind a title to give more depth to an intro section or call to action.

Editorial titles and layouts

Accent a heading, intro paragraph, or quote with a stronger shape without hurting readability or typographic balance.

Cultural and event pages

Give agenda, event, and project pages more personality with a lightweight responsive art direction layer.

More tools are coming, but Section Accent stays the priority.

I’m continuing to polish the Section Accent launch while exploring a few other focused WordPress block ideas. Same philosophy every time: clear, lightweight, useful.

Section Separator

A quieter follow-up block designed to guide the eye between two sections with clean, elegant geometric transitions.

In development

Why use SVG accents in WordPress Gutenberg?

SVG accents bring depth to sections that would otherwise feel flat. Whether you need a wave between two blocks, a blob behind a heading, or a geometric overlay inside a hero, Section Accent makes it possible without code. It works like a native Gutenberg block: drop it into a Group block or Kadence row, choose an SVG shape, then adjust size, position, and layout mode across up to 9 responsive breakpoints.

Unlike a simple CSS separator, Section Accent relies on real SVGs and gives you an advanced editor preview to better visualize the composition. Overlay mode floats shapes over the content, while stacked mode places them in flow. The Pro add-on then expands the workflow with your own SVGs, drag in preview, copy/paste settings, and subtle entrance animations.