Editing Your Site in Studio
Studio is where you actually build your site. Pages, colours, menus, photos and wording are all edited here, with a preview beside you built from the same design your live site uses.
There is no separate design tool and no code. If you can fill in a form, you can edit your site.
1. Open Studio
Go to Sites and tap Open Studio. If you have one site it opens straight into it. If you have several, you pick which one first.
2. Find the thing you want to change
Studio has two halves: an editing panel down one side, and the preview.
The editing panel starts on your list of pages. Tap a page to see what it is made of, then tap any part of it to edit that part. You can also tap something directly in the preview to jump to its editor.
Three things sit outside any single page, because they appear on all of them:
| What | Where it lives |
|---|---|
| Menu and footer | Edited once, applied to every page |
| Design | Your logo, colours and fonts |
| Announcement bar | The strip across the top of the site |
3. Make your change
Edit the fields. The preview keeps up as you go, so you can see the shape of the page before you commit to anything.
Use the desktop, tablet and mobile buttons above the preview to check your work at each size. Most visitors will be on a phone, so it is worth looking at that one properly rather than trusting the desktop view.
4. Save
Tap Save all.
Saving puts it live. There is no separate publish step
This is the thing to understand about Studio. Save all is the only button that commits anything, and what it commits is live immediately. Your site fetches its content when a visitor opens it, so there is nothing left to publish afterwards.
If you are part way through a change you are not ready for anyone to see, do not save it yet. Discard all throws away everything unsaved and puts you back where you started.
The setup checklist
New sites show a checklist in the editing panel. Each row takes you to the right editor, and ticks itself once done. It is the fastest route to a site that looks finished.
Look professional
| Item | Why |
|---|---|
| Add your logo | Shown in your header and footer |
| Pick your colours | One palette sets every colour on the site |
| Add a homepage image | The first thing visitors see |
Get found
| Item | Why |
|---|---|
| Write your homepage search text | The title and description Google shows |
| Connect your own domain | Use yourbusiness.com instead of a vivreal.io address |
Announce yourself
| Item | Why |
|---|---|
| Connect a social account | Lets you share updates straight from here |
| Add an announcement bar | A message across the top: hours, an offer, a notice |
Connecting a domain is handled on the site's own settings page rather than inside Studio, so that row takes you out to it. See Custom domains.
Why the preview is not identical to your live site
The preview and your published site are built from the same design, which is why what you see is a fair representation. It is not a photograph of the live page, and there are two differences worth knowing about, because both look like bugs and neither is.
A section with nothing behind it shows sample content in the preview. If you have added, say, a products section but not connected any products to it yet, the preview fills it with stand-in examples so you can see the layout. Your live site does not do this. It leaves a neutral space instead, because showing invented products to a real customer would be worse than showing nothing.
A strip switched on but left empty shows placeholder wording in the preview. Same reasoning. The preview shows you where the words will go. The live site hides the strip entirely until you write them.
In both cases the fix is the same: put real content in, and the two match.
If the live site looks emptier than the preview
That is almost always one of the two above. Something is switched on but has no content behind it yet. Fill it in, or switch it off.
Going back
Discard all clears unsaved edits and returns to your last save.
For anything already saved, open Version history from the save bar. Vivreal keeps previous versions of your site and you can restore one. How many are kept depends on your plan, see Plans and limits and Version history.
The AI assistant
Studio has a built-in assistant you can ask for changes in plain English, rather than hunting for the right field yourself.
The assistant needs Pro or above
Site editing with the assistant starts at Pro. On Free and Basic the button is not there at all, rather than sitting greyed out taunting you. See Plans and limits.
If something is not working
- You cannot find where to edit something. Tap it in the preview. That is usually faster than looking for it in the panel.
- A change did not stick. Check whether you saved. Studio does not save on its own, deliberately.
- The live site looks different from the preview. See the section above. It is nearly always an empty section or an empty strip.
- Your menu is wrong on every page. The menu and footer are edited once for the whole site, not per page.
- The site is not updating at all. See Site not updating.
Next steps
- Creating a site, if you have not made one yet.
- Setup modes, on the different ways to get a site started.
- Custom domains, to put it on your own address.