# Pro Blocks URL: https://pro.flexablock.com/ Published: 2026-07-20T02:08:36+00:00 Updated: 2026-09-13T03:43:47+00:00 Author: admin **Flexa Block Pro** — ten premium blocks, one licence. This page runs every one of them live. [Get Pro](#pro-blocks-cta) 1. [Home](#)/ 2. [Category](#)/ 3. Current page # The Pro block library Ten premium blocks that pick up where the free Flexa Block library stops — motion and 3D interaction, live data, multi-step conversion and site-wide widgets. Everything below this line is the real block, rendered live. [Get Flexa Block Pro](#pro-blocks-cta) ## The Pro library Add headings to the page to build the table of contents. 01 — Category Interaction & motion Pro · flexa-pro/animated-headline ## Animated Headline One part of a heading keeps changing while the rest stays put — typed out character by character with a blinking caret, or flipped, faded and slid through a word list you write. In Highlight mode it draws a marker, an underline, a circle or a strikethrough over one phrase as the headline scrolls into view. Typing · word rotation · drawn SVG stroke · width lock · reduced-motion aware ### We build websitesWe build websiteslanding pagesonline shopswebsites Pro · flexa-pro/flip-box ## Flip Box A two-sided card that turns in 3D on hover or tap. Each face is a real InnerBlocks canvas — drop a heading, an icon, a button, anything. Pick the flip axis, the card shape and per-face colours or gradients. 3D flip · hover or tap · per-face gradients · reduced-motion aware #### Hover to flip The front face holds any blocks you like — a heading, an icon, a short teaser. #### The other side Reveal the detail here and invite the visitor to act. [Learn more](#pro-blocks-cta) Pro · flexa-pro/image-hotspot ## Image Hotspot Pin interactive markers onto an image — a diagram, a product shot, a floor plan. Each marker pulses to draw the eye and opens a tooltip with its own title, description and optional link on hover or tap. Drag-to-place editing · percentage coordinates · numbered markers · keyboard reachable ![Forest floor with mushrooms, used to demonstrate hotspot markers](https://pro.flexablock.com/wp-content/uploads/2026/07/guvo59-mushrooms-7505404_1920-1.jpg) 1Hover a markerEach hotspot opens a tooltip with its own title and description. 2Place it anywhereDrag markers straight onto the image in the editor — coordinates are stored as percentages, so they stay put at every screen size. 3Add a linkA hotspot can point anywhere — a product page, a section further down, an external site.[Learn more](/example) Pro · flexa-pro/circle-info ## Circle Info Lay a process, a service model or a set of values out as points around a circle, with the open one shown in the middle. A highlight arc travels to whichever point you pick, autoplay can walk through them on its own, and the circle shrinks to fit its column instead of spilling out of it. Highlight arc · autoplay with countdown · click or hover · mobile accordion · keyboard tabs Plan ### Plan the page Decide what the page has to do before a single block is placed: one goal, one call to action, and the sections that lead to it. [See the Pro licence](#pro-blocks-cta) Build ### Build it from blocks Containers, headings and Pro blocks. Nothing is hard-coded, so anything placed today can be moved or restyled tomorrow. [See the Pro licence](#pro-blocks-cta) Style ### Style it once Colours, spacing and typography are set per device, each with a light and a dark value, through the same controls on every block. [See the Pro licence](#pro-blocks-cta) Test ### Check every screen Desktop, tablet and 390px; keyboard and screen reader; light mode and dark — before the page goes anywhere near a visitor. [See the Pro licence](#pro-blocks-cta) Ship ### Publish and measure The CSS is baked into the post the moment you save, so the front end has nothing left to work out. Then watch what the page actually does. [See the Pro licence](#pro-blocks-cta) Improve ### Improve on the numbers Change one thing at a time, ship it, and compare it against the numbers you had — not against a guess. [See the Pro licence](#pro-blocks-cta) 01Plan 02Build 03Style 04Test 05Ship 06Improve 01Plan the page Decide what the page has to do before a single block is placed: one goal, one call to action, and the sections that lead to it. [See the Pro licence](#pro-blocks-cta) 02Build it from blocks Containers, headings and Pro blocks. Nothing is hard-coded, so anything placed today can be moved or restyled tomorrow. [See the Pro licence](#pro-blocks-cta) 03Style it once Colours, spacing and typography are set per device, each with a light and a dark value, through the same controls on every block. [See the Pro licence](#pro-blocks-cta) 04Check every screen Desktop, tablet and 390px; keyboard and screen reader; light mode and dark — before the page goes anywhere near a visitor. [See the Pro licence](#pro-blocks-cta) 05Publish and measure The CSS is baked into the post the moment you save, so the front end has nothing left to work out. Then watch what the page actually does. [See the Pro licence](#pro-blocks-cta) 06Improve on the numbers Change one thing at a time, ship it, and compare it against the numbers you had — not against a guess. [See the Pro licence](#pro-blocks-cta) 02 — Category Data & conversion Pro · flexa-pro/chart-block ## Chart One Chart.js engine, eight chart types — bar, horizontal bar, line, area, pie, donut, radar and gauge. Type the numbers in by hand or import a CSV; add a target line, a second axis, number formatting and a legend without touching code. 8 chart types · CSV import · target line · dual axis · animates on view Licences sold Pro vs. free upgrades, first six months ProFree upgradesJan6240Feb7844Mar9651Apr11858May14066Jun16679 Pro · flexa-pro/multi-step-form ## Multi-Step Form Break a long form into short steps with a progress bar, per-step validation, a review screen before submit and a thank-you state. It reuses the free field blocks, stores every submission in your own database before the mail goes out, and can save a visitor’s progress so they can come back later. Step validation · review & edit · saved drafts · stored submissions · captcha 1Your details2What you need3Confirm4Review your answers ### Your details Name Email * Phone ### What you need ChooseSelect…Option 1Option 2Option 3 Message ### Confirm Consent * I agree to receive emails. ### Review your answers Back NextSubmit Leave this field empty ### Thanks — we have it. This demo does not send anywhere. On a real site the submission is stored first, then emailed. 03 — Category Social proof & business info Pro · flexa-pro/client-logo-carousel ## Client Logo Carousel Run partner or customer logos across the page in a seamless marquee. Logos sit in grayscale and take their colour back on hover, the strip pauses when a visitor points at it, and the whole track fades in the first time it enters the viewport. Seamless loop · pause on hover · grayscale to colour · edge fade · reduced-motion aware ![Flexa](https://pro.flexablock.com/wp-content/uploads/2026/07/tile-team-member.png) ![Icon](https://pro.flexablock.com/wp-content/uploads/2026/07/flexa-block-tabs.png) ![Partner](https://pro.flexablock.com/wp-content/uploads/2026/07/flexa-block-subscribe-form.png) ![Client](https://pro.flexablock.com/wp-content/uploads/2026/07/flexa-tile-taxonomy.png) ![Studio](https://pro.flexablock.com/wp-content/uploads/2026/07/flexa-video-popup.png) ![Agency](https://pro.flexablock.com/wp-content/uploads/2026/07/flexa-tile-social-icon.png) ![](https://pro.flexablock.com/wp-content/uploads/2026/07/tile-team-member.png) ![](https://pro.flexablock.com/wp-content/uploads/2026/07/flexa-block-tabs.png) ![](https://pro.flexablock.com/wp-content/uploads/2026/07/flexa-block-subscribe-form.png) ![](https://pro.flexablock.com/wp-content/uploads/2026/07/flexa-tile-taxonomy.png) ![](https://pro.flexablock.com/wp-content/uploads/2026/07/flexa-video-popup.png) ![](https://pro.flexablock.com/wp-content/uploads/2026/07/flexa-tile-social-icon.png) Pro · flexa-pro/business-hours ## Business Hours Publish your weekly opening hours with a live “Open now” / “Closed” badge. The block reads the current day and time in your business timezone, highlights today, pulses while you are open and tells the visitor when you open or close next — with holiday overrides and Call / Directions buttons. Live open / closed · business timezone · split shifts · holiday overrides · works without JS ClosedOpens at Monday 09:00 - Monday09:00 – 17:30 - Tuesday09:00 – 17:30 - Wednesday09:00 – 17:30 - Thursday09:00 – 17:30 - Friday09:00 – 20:00 - Saturday10:00 – 14:00 - SundayClosed [Call now](tel:+842812345678)[Directions](https://maps.google.com/) 04 — Category Site-wide widgets These two are pinned to the viewport rather than the page flow, so they belong once per page — both are running on this one right now. Pro · flexa-pro/sticky-announcement-bar ## Sticky Announcement Bar The bar pinned to the top of this page is the block itself — scroll up to see it. Announce a launch or a sale, add a call-to-action and an optional countdown, schedule a start and end date, and let visitors dismiss it for the session or for a set number of days. It measures its own height in JavaScript and pushes the page and a fixed header out of the way, so it never covers your menu. Top or bottom · countdown · scheduling · dismiss & remember · fixed-header aware Pro · flexa-pro/fab ## Floating Action Button The round button in the corner of this page is the block — tap it. It fans its actions out vertically, horizontally or along an arc: a phone call, SMS, Zalo, Messenger, WhatsApp, email, a map, any link, back-to-top, or opening a Modal block. It can reveal itself only after a scroll, collapse on its own, pulse for attention, and show a live open / closed badge on the same schedule engine as Business Hours. Four corners · vertical, horizontal or arc · reveal on scroll · live status · back to top Ten blocks. One licence. Animated Headline, Flip Box, Image Hotspot, Circle Info, Chart, Multi-Step Form, Client Logo Carousel, Business Hours, Sticky Announcement Bar and the Floating Action Button — all of them install next to the free Flexa Block library and use the same controls you already know. [Get Flexa Block Pro](#)[Browse free blocks](/example)