Build your first page layout
A beginner-friendly path from Pages Manager to the HTML Editor and Bootstrap basics so you can build your first real page layout.
Build your first page layout
A beginner-friendly path from Pages Manager to the HTML Editor and Bootstrap basics so you can build your first real page layout.
The learning goal is simple:
- find the page you want to work on
- open it in the HTML Editor
- understand where visual editing happens
- insert your first real components
- use Bootstrap basics to shape the layout
You do not need to master the HTML Editor or Bootstrap here. You only need enough to build one clear first layout and understand what to learn next.
Build your first page layout
Section titled “Build your first page layout”Move from page management into real layout building.
Recommended order
Pages Manager
Browse, create, and organize pages, then open them in the HTML Editor.
Design + Code Overview
Explore HTML Editor Design Code: key areas and how they work together.
Insert a component
Learn how to insert a component in the HTML Editor. Use this tour as a quick refresher.
Getting started
Enable Bootstrap in a Wappler project and get oriented: frameworks, templates, and where components and utilities come from.
Bootstrap Layout
Build responsive layouts with containers, rows, and columns, and learn the common Bootstrap grid pitfalls to avoid.
After this
Working with Elements
A practical Wappler path for everyday page editing: insert tags, move elements, apply classes, control spacing, and keep responsive images sane.
Add App Connect to Your Pages
Understand when a page needs App Connect and how to introduce reactive behavior without turning a simple page into unnecessary complexity.
App Connect
Your guided index of App Connect tours: reactive model, data components, bindings, events/actions, and common workflows — explained visually in Wappler’s panels and pickers.
First Success Path
A guided path from first project to first page and first data flow, designed to get new users to a visible result quickly.
Go to
Pages: Overview
Start here to learn how Pages fits in your workflow, and jump into Manager, HTML Editor, and Overview.
Onboarding: Guided start
A curated onboarding path for new users that can be completed in stages: learn the basics, create your first project, build your first UI, and continue when you are ready.
Wappler Docs Index
Browse Wappler tours by topic and jump into areas like Why Wappler, Learning the Basics, and Wappler's UI.