Flexa Block Pro

The Circle Info Block: Turn A Process Into A Circle People Can Click

Arrange the steps of a process around a ring and show the selected one in the middle — all of it editable text.

Part of Flexa Block Pro

The process diagram nobody wants to open twice

You’re building a client site and the brief includes a process — five steps, a service model, a value wheel. It gets drawn elsewhere, exported as a picture, dropped on the page. Then the client renames step three, and every edit goes back through whoever made the file. None of the words inside it reach a screen reader or a search result.

The Circle Info block builds that diagram out of the content itself. Each step is a point on a ring; select one and its heading, description and link appear in the middle — so the client renames step three themselves.

Five points, opened by click, numbered markers. The project process a visitor meets on a real services page.

Brief

Brief

We agree the pages, the content and what finished looks like before anything is designed.
We agree the pages, the content and what finished looks like before anything is designed.
Layouts for every template, reviewed on a phone as carefully as on a desktop.
The design becomes real blocks in the editor, so the site is editable the day it opens.
You walk the site, we fix what you flag, and nothing goes live until you say it can.
Go live, then a handover session so your own team can change any of it later.

Set it up the way the section needs

Add a point per step, each with its own ring caption, heading, description and link.
Set the diameter, where the first point starts, and which way the sequence runs.
Draw the ring solid, dashed or hidden, show a number or your own icon on each point, open one on click or hover, and place the captions outside, inside or out of sight per screen size.
Let it advance on its own once the section scrolls into view, with a countdown around the running point, switched on or off per device.
On a phone the ring folds into a vertical accordion, so captions never overlap and points stay easy to tap.
Plus the usual spacing, colour and responsive controls.

Finished, not just featureful

The parts you only notice when they’re missing.

The ring works from the keyboard like a set of tabs — arrow keys between points, Home and End to the ends — and a screen reader is told which is selected.
Visitors who ask for reduced motion never get the automatic advance, and anything folded away is properly closed, not just hidden.
Every colour here — points, ring, arc, captions, the centre — has a light and a dark counterpart.
The styling is worked out when you save the page, so a visitor’s browser has nothing to calculate.

The same block, dressed two other ways

Icons instead of numbers, opening on hover, running anticlockwise. A solid ring and a new start angle, same content.

Collect

Collect

Copy, images and brand files gathered in one place before the build starts.
See what you can set
Copy, images and brand files gathered in one place before the build starts.
See what you can set
Keyboard, screen reader, phone and page weight all reviewed before anyone else sees it.
See what you can set
You get the site, the logins and a walkthrough of how to change any of it.
See what you can set
Small changes each month, without opening a whole new project every time.
See what you can set

Advancing on its own, with a countdown around the live point. It waits for the section to scroll into view, then stops once a visitor picks a point.

Plan

Plan

Decide what the next month of the site is actually for.
Decide what the next month of the site is actually for.
Write it, build it, publish it — in the editor, not in a ticket queue.
Look at what people did with it once it was live.
Change the part that didn’t land, and start the loop again.

Building one takes about a minute. Drop the block in, add a point per step, type its caption, heading and description, then set the diameter. The canvas redraws as you go. No CSS, no shortcode, nothing to remember.

It sits in the same editor, beside the blocks you already build with, and shares the same spacing, colour and responsive controls — it just needs Flexa Block switched on alongside it.

Give the next process page a circle instead of a picture

Circle Info is one of the blocks in Flexa Block Pro. Have a look at what it does.

See Flexa Block Pro
More articles

Keep reading

Other guides from the Flexa Blocks library.

48 posts found