# The showcase editor on a computer: every tool in its place > On a computer the editor opens your real page in the middle, with the sections panel, the properties panel and one top bar around it. This lesson covers all of it: how it changes with the screen width, every button in the top bar, selecting and writing on the page, the section’s floating toolbar, the two panels, the command palette and its shortcuts, and what keeps your work safe. The example: Sara, a photographer selling her course “Phone photography”. - Time: About 10 minutes to get to know it - Who can do it: Editing needs “Edit showcases”, publishing “Publish showcases”. With publishing alone, the editor opens read-only. - Updated: 2026-10-08 - URL: https://www.dirassaplus.com/en/guide/showcase-editor ## In short 1. Open the showcase with “Edit showcase”: three columns from 1440 px, the page and properties from 1024, a bottom bar and a sheet below that. 2. In the top bar: the name and status, “Phone”, “Tablet” and “Desktop”, “In an app”, zoom, and “Preview over time”. 3. At its end: the save state, “Undo” and “Redo”, “Content language”, “Preview”, and “Publish”, which says what blocks publishing. 4. The first click selects a section, the second writes in its text; prices “Updates itself”, and the + between sections adds one. 5. The floating toolbar: “Edit”, “Layout”, move, duplicate, hide, and “More” to move to a position, lock and delete. 6. The “Sections” panel shows the order and the marks, “Properties” the selected section’s content and layout, beside “Page” and “Theme”. 7. ⌘K opens the “Command palette” for every command and section in three languages; ⇧? opens “Keyboard shortcuts”. 8. Saving is automatic and also on the device, one device edits at a time, and “Undo” goes back up to 100 steps. ## Before you start - A showcase in “Showcases”. If you have none, create one first with “New showcase”. - The “Edit showcases” permission in your role, and “Publish showcases” to publish. - A computer or a screen at least 1024 px wide to see both panels. On a phone, read “Edit your showcase from your phone”. ## The steps ### 1. The page in the middle, one panel beside it In “Showcases”, open the showcase and then “Edit showcase”, or “Edit” from its row’s menu. From 1024 px wide, the editor has two places that never move: your page in the middle and one panel on the end side. The page is drawn between 1024 and 1280 px, whatever room the panel leaves: full size on most laptops, scaled down only on a narrower screen, and always in its desktop layout. With nothing picked, the panel shows “Sections”: your sections, numbered, in order. Click one to open it, drag it or press ⌥↑ and ⌥↓ to move it; below, “Add a section” and then the page’s tools. Pick a section, in the list or on the page, and the same panel opens it; “Sections” at its top brings you back to the list, as Esc and ⌘\ do. From 640 to 1023 px (tablet) the editor becomes a toolbar at the bottom and one sheet where each panel opens; below 640 px it is the phone editor. On screen: «Showcases»، «Edit showcase»، «Edit»، «Sections»، «Add a section»، «Back to sections» Tip: Screen narrower than 1366 px? The page is scaled down a little to keep its desktop layout. ⌘+ and ⌘− zoom it in and out, ⌘0 fits it again. ### 2. The top bar: name, device and time At the start, the “Back to showcases” arrow, then the showcase’s name and its state: “Draft”, “Published”, “Unpublished changes” when you edit a live page, “Scheduled · …”, “Ended” or “Archived”. Click the name to open its menu: rename (up to 120 characters, Enter saves, Esc cancels), “Page settings”, “Versions” and the shortcuts. Then the “Device” switch: “Phone” at 390 px, “Desktop” as a visitor on a computer sees it, and “Both”: both frames live side by side, and the section you pick is picked in both. ⌘+ and ⌘− zoom the page in and out, ⌘0 fits it again. If the showcase has an offer, “Preview over time” appears: pick “Now” or a moment your offer can reach, like “After the live”, “After the launch price” or “When seats run out”, and the page is drawn as a visitor will see it then, with what changes in price or button. Nothing changes on the real page. On screen: «Back to showcases»، «Draft»، «Published»، «Unpublished changes»، «Page settings»، «Versions»، «Device»، «Phone»، «Desktop»، «Both»، «Preview over time»، «Now»، «After the live»، «After the launch price»، «When seats run out» Tip: Before you launch an ad, pick “Phone”: most visitors from an ad see your page on their phone. Heads-up: The launch-price and seats moments come from the offer’s own data. With no dates or seats in the offer you read “This offer has no dates or seats yet…” with “Open “The offer””. ### 3. Saving, undo, language, preview and publishing At the end of the bar, on wide screens, the save state: “Saving…”, then “Saved · just now”, then “Saved · 14:32”; “Offline · changes kept on this device” if the connection drops, “Could not save” with “Retry”, and “Changed elsewhere” if someone else edits the showcase at the same time. Then “Undo” (⌘Z), and “Redo” (⇧⌘Z), which only appears after an undo. Then “Content language”, AR, FR and EN, when the page has more than one language: it switches the language you see and write. Then “Preview” opens the draft in a new tab as visitors will see it. Last, the publish button, the only orange fill on screen: “Publish” when the page is ready, which opens the “Publish” panel, and “Fix 2 to publish” when something blocks it, which opens the “Ready?” panel instead, listing what the page lacks with a fix button for each item. Without “Publish showcases”, the same button reads “Ready?”. On screen: «Saving…»، «Saved · just now»، «Offline · changes kept on this device»، «Could not save»، «Retry»، «Changed elsewhere»، «Undo»، «Redo»، «Content language»، «Preview»، «Publish»، «Ready?» Heads-up: Your edits do not reach visitors until you publish: the live showcase stays as it is, and the “Unpublished changes” status reminds you. “Preview” needs an internet connection. ### 4. The page itself: select, then write in place The page in the middle is the real sections your site publishes, in your theme and at the device’s width; nothing in it opens a link or sends a form while you edit. Hover a section and its outline and name appear. The first click selects the section: a double ring and a tag with its name and layout, such as “Questions · layout 2 of 5”, plus “waiting for data” if visitors cannot see it yet. A second click on its text writes in place, with a small bar: “Bold”, “Highlight” and “Link” when the field allows them, then “Noqta” and “Done”, and a character counter near the limit. The text is saved on “Done”, Esc, Enter in a one-line field, or when you leave it. A button’s label opens in its field in the properties instead. Prices and numbers are never typed: click them to read “Updates itself” and where they come from, with “Open the source” or “Set the offer”. Between two sections, a + adds one in that exact spot. The header, footer and buy bar open the page settings. A page with no sections says “No sections yet”, with “Add a section” in the middle. On screen: «waiting for data»، «Bold»، «Highlight»، «Link»، «Noqta»، «Done»، «Updates itself»، «Open the source»، «Set the offer»، «No sections yet»، «Add a section»، «Restore a version» Tip: With the keyboard: Tab and Shift+Tab move between sections, Enter opens the section’s properties, Esc deselects. ### 5. The section’s floating toolbar Above the selected section, at its end side, a small toolbar stays stuck to the top of the page while you scroll through a long section: “Edit” opens the properties on “Content”, “Layout” on “Layout”, then “Move up” and “Move down” (⌥↑ and ⌥↓), “Duplicate section” (⌘D), “Hide section” and “More”: “Move to…” with a numbered list of positions, “Lock section” and “Delete section”. A locked section only shows “Locked” and “Unlock”. After a delete, a notice offers “Undo” for six seconds. In phone view and on tablets, “Layout” stays an icon with a tooltip. On screen: «Edit»، «Layout»، «Move up»، «Move down»، «Duplicate section»، «Hide section»، «More»، «Move to…»، «Lock section»، «Delete section»، «Locked»، «Unlock» Heads-up: “Hide section” cannot be undone from the same toolbar: a hidden section stays faded on the page; show it again from the sections panel (the eye on its row) or in “Layout” by turning off “Hide the section”. ### 6. The sections panel and the properties panel The “Sections” panel is your page as a list, in order, under the headings of the five stages (Hook · Explain · Prove · Reassure · Decide). Each row has a dot in its tone’s colour and small marks: hidden, hidden on phone or on desktop, different on phone, locked, “Reads your data”, “Not reviewed”. It also holds the buy bar’s state (“Buy bar · page settings”), the “Add a section” button and the gear for the “Page” settings. Its second tab, “Add”, is the section library. The end panel opens “Properties” when you select a section: its name, “Layout 2 of 5”, its marks, then the “Content” tab (texts, images, lists, and what “Reads from” your data with “Edit the source”) and the “Layout” tab. With nothing selected this panel folds away and the page takes the full width; a narrow strip keeps the “Page” and “Theme” icons. The offer, versions and sharing open from the command palette on a computer. On screen: «Sections»، «Add»، «Reads your data»، «Not reviewed»، «Buy bar · page settings»، «Add a section»، «Properties»، «Content»، «Layout»، «Page»، «Theme» Tip: A row with a grey line under it (a session-times section with no live, say)? The section is kept in the draft and shows to visitors once its data exists. ### 7. The ⌘K palette and shortcuts Press ⌘K (Ctrl+K on Windows) to open the “Command palette” and its “Search a command or a section…” field. Type in Arabic, French or English, whatever your interface language: “أسئلة”, “faq” and “questions” find the same section. Commands come in groups: “Selected section” (duplicate, delete, move, hide, lock), “Add a section” (every section your kind of showcase accepts and that does not lack a piece of your offer’s data, like “Add: Questions”), “Go to a section”, “View”, “Page” (including “Set the offer: what you sell and for how much”, “Versions” and “Share tools”) and “Save and publish”. ⇧? opens “Keyboard shortcuts”: ⌘Z undo, ⇧⌘Z redo, A add a section, ⌘D duplicate, ⌫ delete, ⌥↑ and ⌥↓ move, Enter open properties, Esc deselect, ⌘S save now, ⌘1, ⌘2 and ⌘3 for phone, desktop and both, ⌘0 fit the frame, ⌘\ “Sections” and ⌘. the panel, ⇧⌘P preview, ⇧⌘L switch content language. On screen: «Command palette»، «Search a command or a section…»، «Selected section»، «Add a section»، «Go to a section»، «View»، «Page»، «Set the offer: what you sell and for how much»، «Versions»، «Share tools»، «Save and publish»، «Keyboard shortcuts» Tip: ⌘4 opens “Phone + desktop” when there is room, and ⌘= and ⌘- zoom in and out. ### 8. What keeps your work safe There is no save button: every change is saved less than a second after you pause, at most five seconds while you type, and is also written on this device. If the connection drops or the tab closes first, the next time you open it you read “We found unsaved changes on this device.” with “Discard” and “Restore”. One device edits at a time: if the showcase is open on a teammate’s device or your other one, you read “This showcase is open right now on Amine’s computer. You are read-only.” with “Keep reading” and “Take over”; in a second tab of the same browser, “Edit here”. If the showcase changed elsewhere between two saves, the edits are merged section by section, and you are only asked about a section you both changed: “The showcase changed elsewhere”; for each section pick “My version” or “Their version”, then “Apply”, and both are kept in the versions. “Undo” goes back up to 100 steps, even after saving or switching device or language, and takes you back to the section that changed. On screen: «We found unsaved changes on this device.»، «Discard»، «Restore»، «Keep reading»، «Take over»، «Edit here»، «The showcase changed elsewhere»، «My version»، «Their version»، «Apply»، «Undo» Heads-up: “Take over” gives you the editing and turns the other device read-only: check first that your teammate is not typing right now. ## Once you know the editor - Add and order your sections: The library, search, trying before adding and the limits. - Set each section’s look: Layouts, tones, spacing and visibility. - Edit from your phone: The same tools under your thumb. - Choose your theme: Colours and fonts for the whole page. ## Questions **Do I need a computer to edit my showcase?** No. Every editor tool is on the phone. A computer adds the two panels side by side, the device switch, “Phone + desktop”, “In an app” and keyboard shortcuts. **Why don’t I see “Phone + desktop”?** It appears from 1024 px when the page in the middle has 1100 px of room. Fold one of the panels or widen the window, and it appears on its own. **Why don’t I see “Preview over time”?** It appears when the showcase has a linked offer, and its moments come only from your data: the live from your live dates; the launch price and seats from your offer’s launch price and seats. **Why can’t I type the price on the page?** Because prices and numbers are read from your data: click them to read “Updates itself” and where they come from. Change them at the source and the page follows, never showing a number your data cannot back. **I deleted a section by mistake. How do I get it back?** “Undo” in the notice after the delete, or ⌘Z, or “Undo” in the top bar. You can also restore a whole version from “Versions”. **Is my work lost if the internet drops?** No. You read “Offline · changes kept on this device” and keep going; everything is sent when the connection is back. If the tab closes before that, the editor offers “Restore” the next time you open it. **What does “Unpublished changes” mean?** That the showcase is live and the draft holds changes visitors have not seen yet. Press “Publish” when you are ready; until then the live page stays as it is.