Blocks
Pre-built sections of markup you drop into a page, then customize in place.
Click 🧩 Blocks in the editor toolbar to open the block grid. Clicking a tile inserts it into your page at the current cursor position; from there you edit its text and images directly, the same as any other content on the page.
Built-in blocks
The extension ships with a set of ready-made blocks — Hero, Call to Action, Testimonial, Contact, 3-Column Features, Video Embed, and Form Embed. Each is styled for your site's active CSS framework; a block without markup for your current framework shows up disabled rather than disappearing, so you know it exists even before it's available for that framework.
The two embed blocks (Video and Form) wrap an <iframe> for things like a YouTube video or a Zoho Forms embed:
- Video Embed keeps a fixed 16:9 aspect ratio, right for video.
- Form Embed has no forced ratio, since form height varies by content rather than width — it starts at a reasonable minimum height that you adjust to fit.
For either embed block, insert it, switch to Code view, and replace the placeholder src with your real embed URL — an iframe's source isn't something you can retarget by clicking on it in Visual view.
Managing an inserted block
Hover a block on the page to reveal a small toolbar: move it up, move it down, or delete it.
Custom blocks
Add your own by dropping an .html file into .chromesite/blocks/ in your project folder — no editor changes needed. Each file becomes one tile in the block grid, labeled from its filename (pricing-table.html becomes "Pricing Table"). Since it's markup you wrote yourself for your own site, it's used exactly as-is regardless of which CSS framework your site is set to.