Velaro Site: Editing a Page
Velaro Site gives you two separate editing surfaces, and they aren't interchangeable:
- The Pages tab edits one page's full content, as raw HTML, plus that page's SEO fields. This is where you go to change or create an actual page on the site.
- The Blocks tab edits small, reusable pieces of content (a banner, a call-to-action, a legal disclaimer) that get inserted into many pages at once via a placeholder. Blocks have both a raw-HTML mode and a visual drag-and-drop mode (built on the GrapesJS editor).
In short: edit a whole page in the Pages tab. Edit a snippet that's reused across the site in the Blocks tab.
Editing a page (Pages tab)
- Open the Pages tab. Use the search box to filter the page list, or scroll to find the page you want.
- Selecting a page opens it in the editor panel with two sub-tabs: Raw HTML and SEO.
- The Raw HTML sub-tab is a full HTML textarea alongside a live preview, so you can see roughly how your change will render as you type.
- When you're ready, click Publish Now. This immediately creates a new version of the page (see "Publishing, Version History, and Rollback") and pushes it toward staging.
Screenshot callout: the Pages tab with a page selected, Raw HTML sub-tab active, showing the textarea on one side and the live preview on the other, with the Publish Now button visible.
If you switch to the SEO sub-tab (or back to Raw HTML) while you have unsaved changes in the tab you're leaving, those unsaved changes are discarded with no warning prompt. Save or publish before switching sub-tabs.
Editing SEO fields (Pages tab > SEO sub-tab)
The SEO sub-tab is a plain form for the fields that used to require hand-editing raw HTML: page title, meta description, canonical URL, and the page's H1. Each field is checked against Velaro's own SEO rules as you edit — for example, the canonical field is validated to make sure it points at velaro.com (never the staging domain), and a missing title or description is flagged before you save.
Screenshot callout: the SEO sub-tab showing the title/description/canonical fields with the pass/warn/fail indicator next to each one.
- Green / pass — the field matches what Velaro's SEO audit expects.
- Yellow / warning — allowed, but worth a second look (for example, a canonical that technically works but isn't the expected URL for this page).
- Red / fail — this field will fail Velaro's SEO audit and block a production promotion until it's fixed.
Editing a reusable block (Blocks tab)
- Open the Blocks tab and select a block from the list, or create a new one.
- Choose Raw HTML or Visual Editor at the top of the block editor.
- Raw HTML is a plain textarea — the same content either way, just a different way to author it. Script tags aren't allowed in a block; if you need to add a tracking or vendor script, that belongs in Settings > Integrations, not in a block.
- Visual Editor opens a drag-and-drop canvas (GrapesJS) with a small starter palette of layout blocks (text, image, button, columns, etc.) you can drag onto the canvas and style directly. Whatever you build here is converted back into the same HTML the Raw HTML mode edits — they're two views of the same content, not two separate stores.
- Save the block. Every page that references this block by its ID picks up the change the next time that page is rendered — you don't need to re-save each page individually.
Screenshot callout: the Blocks tab with the Visual Editor open, block palette on one side, canvas in the middle, showing a banner block being edited.
When to use which block mode
| Use Raw HTML when… | Use the Visual Editor when… |
|---|---|
| You're comfortable writing HTML directly and want exact control over markup. | You'd rather drag and drop layout pieces and style them without touching markup. |
| You're pasting in a block that already exists elsewhere (e.g. copying markup from a page). | You're building a new banner/CTA/disclaimer from scratch and want a WYSIWYG canvas. |
One cosmetic quirk to expect: after switching away from the Visual Editor while a text element is still mid-edit, you may see a harmless error message appear in your browser's developer console. It doesn't affect what gets saved — it's a known, non-blocking rendering artifact of the editor's teardown, not data loss.
What the Visual Editor does not do (yet)
The GrapesJS visual, drag-and-drop editor is available for Blocks only. Full pages in the Pages tab are still edited as raw HTML — there is no drag-and-drop canvas for building an entire page layout today. If you want a fully visual, no-code page builder, that's a larger capability that doesn't exist yet; for now, whole-page layout changes go through the Raw HTML editor.
Was this article helpful?