# The Circle Info Block: Turn A Process Into A Circle People Can Click URL: https://pro.flexablock.com/the-circle-info-block-turn-a-process-into-a-circle-people-can-click/ Published: 2026-08-04T15:37:58+00:00 Updated: 2026-08-06T08:17:34+00:00 Author: admin # 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](https://pro.flexablock.com/) ## 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. Design ### Design Layouts for every template, reviewed on a phone as carefully as on a desktop. Build ### Build The design becomes real blocks in the editor, so the site is editable the day it opens. Review ### Review You walk the site, we fix what you flag, and nothing goes live until you say it can. Launch ### Launch Go live, then a handover session so your own team can change any of it later. 01Brief 02Design 03Build 04Review 05Launch 01Brief We agree the pages, the content and what finished looks like before anything is designed. 02Design Layouts for every template, reviewed on a phone as carefully as on a desktop. 03Build The design becomes real blocks in the editor, so the site is editable the day it opens. 04Review You walk the site, we fix what you flag, and nothing goes live until you say it can. 05Launch 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](#features) Check ### Check Keyboard, screen reader, phone and page weight all reviewed before anyone else sees it. [See what you can set](#features) Hand over ### Hand over You get the site, the logins and a walkthrough of how to change any of it. [See what you can set](#features) Keep going ### Keep going Small changes each month, without opening a whole new project every time. [See what you can set](#features) Collect Check Hand over Keep going 01Collect Copy, images and brand files gathered in one place before the build starts. [See what you can set](#features) 02Check Keyboard, screen reader, phone and page weight all reviewed before anyone else sees it. [See what you can set](#features) 03Hand over You get the site, the logins and a walkthrough of how to change any of it. [See what you can set](#features) 04Keep going Small changes each month, without opening a whole new project every time. [See what you can set](#features) **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. Make ### Make Write it, build it, publish it — in the editor, not in a ticket queue. Measure ### Measure Look at what people did with it once it was live. Adjust ### Adjust Change the part that didn’t land, and start the loop again. 01Plan 02Make 03Measure 04Adjust 01Plan Decide what the next month of the site is actually for. 02Make Write it, build it, publish it — in the editor, not in a ticket queue. 03Measure Look at what people did with it once it was live. 04Adjust 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](https://pro.flexablock.com/)