APB-DOC-EN-BUILD body. Source language English. The video file is shared.
Login, compose, publish, then look as a visitor
APB-DOC-EN-BUILD. This recording is the editor path on this demo. demo_editor signs in through Gin, creates a Basic page, adds Simple content, Feature box, Accordion, Tabs, and Links, saves, and then the same URL is shown logged out. The live result stays at /learn/building-a-page. Spanish and Portuguese keep this MP4 and translate the bands below.
What you will see
Gin login, Add content, the Page Builder host field, and Inline Entity Form for items. APB-DOC-EN-BUILD-TAB1.
Simple content, Feature box, Accordion, Tabs, and Links. Layout fields stay on the parent. Copy lives on the item.
After Save, log out. The published page has no toolbar. That is the anonymous result.
How this recording was made
Xvfb, headed Google Chrome, and ffmpeg captured the editor UI. The voice-over is American English OpenAI speech. APB-DOC-EN-BUILD-ACC.
The gallery stays frozen. The page at /learn/building-a-page is the published result of this walkthrough, owned by demo_editor.
python3 scripts/tutorial/produce-build-tutorial.py records a new MP4 and recreates that Basic page. Then rerun this script to refresh the Documentation node.
See the result
Open the live page the editor published, or the product tour.
Complete transcript of the editor walkthrough. Timestamps match the on-screen captions and the American English voice-over.
0:01 Start at Sign in — We start at the login page of the demo site. This walkthrough follows the editor path, from signing in all the way to a published page.
0:12 Enter the demo_editor account — We type the username, demo editor, and the password. Using the dedicated editor account instead of the administrator keeps this recording honest — it is exactly the interface your team will get.
0:28 Log in — Gin is the admin theme — Log in — and Gin, the admin theme, takes over.
0:34 Add content, then Basic page — From Add content, we choose Basic page. On this site, that content type already carries the Page Builder field.
0:44 Set the page title — Every page starts with a title. We call this one Building a page with Aero Page Builder.
0:51 URL alias: /learn/building-a-page — Then a friendly URL alias: learn, building a page. That is the address the published page will live at.
1:00 Page Builder is the canvas — This is the Page Builder field — the canvas. Every button here inserts a parent component. Layout settings like width and color live on the parent, and the copy lives on items nested inside.
1:15 Add Simple content — Our first parent is Simple content, the layout workhorse. We add it, and give the section a title.
1:25 Add a Simple content item, then Create — Now the copy. We add a content item — items nest with Inline Entity Form — write a short intro into the body, and press Create to save the item.
1:38 Add Feature box — a row of cards — Second parent: Feature box, a row of cards. Display type, height, and the blue color style are all settings on the parent.
1:48 First card: for editors — Each card is an item with a title and a short body. This first card speaks to editors.
1:57 Second card: for the front end — And a second card, about the front end. The theme renders the row — visitors never see this form.
2:05 Add Accordion — turn on Open first — Third parent: an Accordion, for questions. We also switch on Open first, so the first row starts expanded when the page loads.
2:17 Question: do I edit the gallery? — First question: do I edit the gallery? No — frozen pages stay frozen. You build on a new page, like this one.
2:26 Question: where does layout live? — Second question: where does layout live? On the parent. Item fields are just copy.
2:35 Add Tabs — Fourth parent: Tabs. They group related copy on a single band, and on a phone they collapse into an accordion.
2:46 Tab 1: the editor canvas — The first tab describes the editor's side: Gin, the Page Builder field, and Inline Entity Form.
2:55 Tab 2: the visitor page — The second describes the visitor's side: the same paragraphs, rendered as page sections.
3:04 Add Links — the call to action — Our last parent is Links — the call to action. We set this row to render as buttons.
3:13 Button: See it live — The first button points at the See it live tour. Link type is URL, and the path is internal.
3:23 Button: Request a demo — The second points at Request a demo. Two buttons, one parent — and that completes the composition.
3:33 Save publishes this Basic page — Time to save. Basic pages on this site are unmoderated, so Save publishes the page immediately.
3:43 Published page — still logged in — And here is the published page, still logged in — notice the Gin toolbar at the top. All five sections render in order: intro, cards, accordion, tabs, and the buttons.
3:58 Log out — Now we log out, to check what a visitor actually sees.
4:04 Anonymous view — no toolbar — Same URL, no session. No toolbar, no edit controls — just the page. This is the anonymous result of what we built.
4:16 Editor path complete — request a demo — That is the editor path: sign in, compose, save, and verify. Request a demo if you would like Aero Page Builder on your Drupal site.