The Front panel sits beside your live site. It shows what each part of a page is made of, lets you change words and images and move sections, and gives your agent a way to see what you point at. Only administrators can open it. Visitors never load it, so it does not slow the site.
Open it
- On any page of your site, click Delta in the admin bar.
- Or press ⌘⇧E on a Mac, Ctrl+Shift+E on Windows and Linux. Press it again to close the panel.
- In wp-admin, use Open in Delta Front Panel under a page in the posts list, or on its edit screen.
The panel shows that it is loading. A second click on Delta cancels the open. If you turned off the admin bar in your profile, a Delta tab shows on the right edge of the page instead.
The Delta menu in the admin bar also has Sketchbook, Dashboard and Context. On this site the admin bar shows “Delta” twice: the first is the WordPress menu with the site’s name, the second is Delta’s own menu. On a client site the first one shows the client’s site name.
The panel
At the top are four tabs: Page, Map, Design and Memory. Beside them are buttons for dark or light mode, to pin the panel so it pushes the page aside, and to close it. Drag the left edge to make the panel wider; double-click the edge to reset it.
| Tab | Shows |
|---|---|
| Page | The parts of this page (header, page content, footer), its sections, and the code of what you select |
| Map | Two views. Page: which pages link here, which pages this one links to, and which templates it uses. Links made by menus, loops and the template count too. Site: the whole site as a graph. Go to opens the page you pick |
| Design | The Sketchbook, and the site’s fonts, colours, spacing and components |
| Memory | What the agent decided on this site and what is still open. See Memory |
Look at a part of the page
The panel opens in select mode. Move over the page and click any part. The Selected card shows its kind and its classes, and the code tabs show its HTML, CSS and JS. Click a class to copy it. Press V to turn select mode off when you want links on the page to work again.
The On this page list tells you where each part is stored: a template, the page content, or WordPress content that Delta does not manage. A template used by many pages shows Shared and the number of pages.
To show the agent what you mean, select the part and tell the agent “this”. While the card says Selection context active, the agent can read what you selected. Click the pause button on the card to stop sharing it. You can also use Copy for agent and paste it into your chat.
Change words
Click a text to start editing. Press Enter to keep the change, or Esc to undo it. Changes wait until you click Save at the bottom of the panel, or press ⌘S. Discard drops all of them.
- Words and images change here. Classes, markup and styles stay as they are.
- Text that comes from a placeholder, such as a post title in a list, cannot be edited on the page. The panel tells you why.
- When you change a shared part, such as the header, the panel warns you: saving updates every page that uses it.
- If the agent changed the same part after you opened the panel, the save stops and asks you to reload, so no work is lost.
Change images
Click an image, then Replace image on the Selected card, and pick a file from the Media Library. The new image waits for the next Save, like a changed word.
- A featured image can be replaced too. That changes the post’s featured image, so it changes wherever that post shows.
- An image filled in from site data, such as a logo placeholder, is changed where it comes from. The panel tells you.
- A shared part warns you, as with words: saving updates every page that uses it.
Move sections
Under Sections, drag a section by its grip, or select the grip and use the arrow keys. The new order is saved with the next Save. Each section also has Copy section, which copies its HTML, CSS and JS.
Where it does not work
A page that Delta did not build shows “Not built with Delta.” You can still look at it, but not change it. Menus, shortcodes and other text printed by WordPress or a plugin are read-only. If a cache plugin removes Delta’s marks from the page, the panel says “Text cannot be edited on this page.”
Language
The panel uses the language of your user profile, even when the site is in another language.
For developers
?delta-edit=1 on any front-end address opens the panel; &delta-view=sketchbook opens the Sketchbook. Access needs manage_options. The filter 21press_delta_front_panel_enabled returning false removes the panel, its admin-bar items, its REST routes and its abilities. 21press_delta_front_panel_tabs adds a tab from another plugin: label, icon, order (built-in tabs are 10 to 40), optional capability, and a script handle that calls deltaFrontPanel.registerTab. Since 0.4.2 a tab no longer gets page.pageUrl; read location.href. The panel’s REST routes accept a cookie session only. Agent abilities are in the delta-front-panel category, for example delta/show-in-front-panel and delta/get-front-panel-selection.