At a glance
From left to right: the exit arrow, the Glopzi logo, the URL bar and browse/edit toggle, the smooth scroll toggle, the breakpoint switcher (desktop / tablet / mobile), the Preview button, and the Save button. Each one is covered below.
The toolbar stays visible while you work. It doesn’t collapse, and it doesn’t move when you scroll the page in the canvas.
Exit and logo
The leftmost arrow closes the editor and returns you to where you came from. On WordPress, that’s the front of the page you were viewing or the wp-admin screen, depending on how you opened the editor. On custom sites, it returns you to the dashboard.
If you have unsaved changes, Glopzi confirms before exiting. See Saving and publishing for how the dirty state works.
The Glopzi logo next to the arrow is decorative; clicking it doesn’t navigate anywhere.
URL bar and browse mode
Next to the logo is the URL of the page currently loaded in the canvas. Two things live here:
- The URL itself is editable. Click it, type a new path (for example
/about), press Enter, and the canvas reloads with that page so you can edit its animations. - The browse/edit toggle next to it switches what happens when you click on the canvas. In edit mode (default), clicking selects an element. In browse mode, clicks navigate links normally so you can move around your site without picking elements by accident.
Browse mode is what you want when you need to walk through a multi-step flow on your site to reach the page you want to animate. Switch back to edit mode when you arrive.
Smooth scroll toggle
A small toggle that turns Lenis-powered smooth scrolling on or off in the canvas preview. With it on, scroll feels weighty and eased; off, scroll matches the browser default.
The toggle controls both the preview AND what your visitors experience. It’s a per-site setting, saved with your configuration. Most sites that lean into scroll-based motion benefit from turning it on.
Breakpoint switcher
Three icons (monitor, tablet, phone) that change the canvas viewport size. Use them to design and verify how animations behave at different screen sizes.
Switching breakpoints in the toolbar also tells Glopzi which breakpoint you’re editing values for. Changes you make while in tablet mode become tablet overrides. See Responsive breakpoint overrides for the full mental model.
Preview
Opens a clean view of your site in a new tab, with all editor chrome stripped out. Useful when you want to interact with your page exactly as a visitor would: no overlays, no markers, no selection outlines.
Preview reflects your current editor state, including unsaved changes. It does not push to the live site. For that you need to save.
Save
The lime button on the right. Clicking it pushes your current configuration to the server, recompiles your bundle, and updates your live site within seconds.
- The button is greyed outwhen there’s nothing new to save.
- It shows Saving while the bundle is being compiled, then briefly Saved when finished.
- On a trial license, you’ll see Saved (trial) instead. Trial saves are kept on our servers but don’t reach your visitors until you activate a plan.
- If your subscription has lapsed, the button is locked and links to the dashboard for reactivation. Animations you already published keep running.
Note
The save flow respects the save-gate model: we never silently disable work you already shipped.
Next steps
- The sidebar: where your animations live.
- Canvas and live preview: how the iframe and your edits stay in sync.
- Keyboard shortcuts: the short list of keys that speed up everything above.