Studio tour
Find your way around Opalefy Studio, choose a starting point, and review your first page.
Studio is Opalefy's visual page editor. Use it to arrange sections, edit copy and images, adjust the design, and manage individual pages.
This tour starts from a website you can edit. If Studio shows Editing is restricted, check that you are in the website's workspace and that your role allows website editing. Viewing a website in the dashboard does not necessarily give you editing access.
Open a page
- Open your website in the dashboard.
- Go to Pages.
- Find the page you want and choose Open in Studio.
- Check the page name in the Studio header before making changes. The home page is the page at
/.
The page-name menu lets you switch pages without returning to the dashboard. Save the current page before switching: ordinary text, layout, and style edits are not continuously autosaved.
Get to know the workspace
| Area | What you do here |
|---|---|
| Header | Choose a page, browse templates, enter Preview mode, open page or website settings, save, and change page publication status. |
| Left panel: Components | Browse Sections & Blocks for ready-made sections, or Primitives for individual elements such as headings, images, and buttons. |
| Left panel: Outline | Inspect the page hierarchy, select nested elements, reorder them, and remove elements. |
| Left panel: Opal AI | Describe a page, attach reference documents, request changes to attached components, or restore an AI snapshot. |
| Center canvas | Select and rearrange elements, edit supported text directly, and inspect the page at different widths. |
| Right properties panel | Edit the selected element's content, behavior, and supported styles. With nothing selected, edit Project Theme instead. |
| Floating bottom toolbar | Use Undo, Redo, and the Desktop, Tablet, and Mobile viewport controls. |
The panel-toggle icons at the left and right ends of the header hide or show the corresponding panel. On wide screens, drag the divider between a panel and the canvas to resize it. On screens narrower than 1024px, panels open as dismissible side sheets and start closed.
Choose a starting point
Assemble a page yourself
Open Components, browse a section family under Sections & Blocks, and choose a variant. Click a variant to append it to the page, or drag it to a highlighted insertion point. Use Primitives to add smaller elements.
For example, start with a hero section, add a services section beneath it, then add a contact section. Select the text and media inside each section to replace the sample content.
See Canvas editing and layers for placement, nesting, and inline editing.
Start from a template
Use Templates in the header when it is available. Applying a template asks for confirmation because it replaces the current page's content. Confirm only after checking which page is open.
Template application saves the replacement as part of the flow. It is not just a temporary preview. If the page is already published, treat applying a template as a change to live content.
Generate a home page with AI
Choose Opal AI at the bottom of the left panel. You can describe a site or attach a brief.
Use AI with Home open. In this version, AI generation and AI snapshot restoration save to the website's home page. Opening another page does not make those operations page-specific.
Read Build and refine with Opal AI before generating over existing work.
Try a first editing pass
- Select a heading on the canvas and replace its text.
- Click outside the text field to finish editing.
- Select the heading again and adjust Typography in the right panel.
- Select its surrounding section through Outline or the properties breadcrumb.
- Adjust the section's spacing rather than adding extra blank lines to the heading.
- Check Tablet and Mobile using the bottom toolbar.
- Choose the eye-icon Preview control to see the current canvas without editing outlines.
- Choose Exit preview to continue editing.
- Click Save and wait for the page-saved confirmation.
Understand Save, Preview, and Published
These controls do different jobs:
- Save stores the current page layout. Saving does not change a draft page into a published page.
- Preview mode, beside Templates, renders the current canvas without selection and drag controls. It can show edits you have not saved yet.
- The separate Preview link with an external-link icon opens a new tab. It starts at the home page and reads saved, publicly eligible page content, not your unsaved canvas.
- The Draft or Published menu changes the current page's publication status. It does not save pending layout edits for you.
There is no separate staged copy of a published layout in this flow. Saving edits to a published page can update the live page. If you need to keep unfinished work out of public view, switch that page to Draft first; this also removes its existing public version.
See Pages, settings, and publishing for the review and publishing checklist.
What to expect
- Component availability can vary by package and form entitlement.
- The right panel changes with the selected element. A section and a heading do not expose the same controls.
- Undo and Redo help with canvas document edits in the current editing session. They are not a permanent backup or an undo mechanism for page deletion.
- Code export is not available in the current Studio interface.