From page
builder to blocks
A school website rebuilt from a page-builder stack into a native Gutenberg block system — matching the design file exactly, ten times faster, and editable by staff without touching code.
A purchased theme, a page builder, a paid custom-fields plugin and dynamic-template workarounds — held together by more than 8,000 lines of custom CSS and JavaScript. Slow to load, and impossible for staff to edit safely.
We moved the whole site to Gutenberg with a custom block library and design tokens synced from Figma. It loads ten times faster, and staff change text, colors, spacing and layouts themselves.
A pile of patches, replaced by one clean system.
No page builder.
Ten times faster — because there’s simply less to load.
No page-builder runtime, no shortcode parsing, no stacks of override stylesheets.
Each block ships only the styles it actually uses; images are served as modern formats.
News tabs filter with pure CSS — JavaScript only marks the active tab.
The design file and the site speak the same language.
Imported values show up on the editor canvas right away; WordPress’s own Save publishes them, with undo and redo.
Link any color to a raw color or set a custom one; set separate desktop, tablet and mobile sizes for every text style.
Each school level gets its own color mode — corporate, kindergarten, primary, middle and high school.
Every detail, from the editor — no code, no developer.
Drop in a container and pick a structure — halves, thirds, grids — then fine-tune direction, alignment, spacing and width.
Every style panel has state tabs, so hover effects are set in the editor, not in code.
Switch to tablet or mobile and changes apply only there. Untouched values stay faded, so you can see what’s inherited.
Zoom the canvas, drag its width to any screen size and hide blocks per device.
Built in — no form plugin needed.
Choose what happens after submit: save, email, a second email, redirect or a webhook to any CRM.
Email templates use simple placeholders for all fields, a single field or the form name.
Errors appear right under the field; submissions land in an admin list.
Protected by a hidden honeypot, a signed timestamp and per-visitor rate limits.
The design keeps its proportions on every screen.
One switch makes the whole layout scale proportionally from the design width — with lower and upper limits so text never gets too small or too big.
A summary table shows exactly how the base size and scale behave at common screen widths.
A header that slides in as you scroll down and tucks away on the way up.
A Turkish / English switch that jumps to the same page in the other language.
Sliders, news tabs, alumni cards and admissions forms — all built from the same blocks staff edit.
Design settings, block toggles and submissions are admin-only.
Uploaded SVGs are cleaned of scripts and unsafe links; anything unsafe is rejected.
Style values generated from block settings are sanitised before they reach the page.