Wappler documentation
Working with Elements
A practical Wappler path for everyday page editing: insert tags, move elements, apply classes, control spacing, and keep responsive images sane.
Use this hub when you need the core page-editing skills in Wappler. Start with tags, movement, classes, spacing, and responsive images, then continue into layout or reactive pages.
Recommended order
Inserting Common HTML TagsIn order to insert common HTML Tags, such as div, span, article, aside etc. you need to switch to DOM Tree panel as App Structure panel is used to display only components. We will show you how add a sDrag & Drop ElementsYou can drag any of the elements inside App Structure. Just select the element you want to move and start dragging it in the tree: When the element which you are dragging cannot to be placed at specifClass and ID BasicsUse classes and ids in Wappler with a clear separation between reusable styling hooks and one-off element targeting.Spacing (margin & padding)Use Bootstrap spacing utilities (margin/padding) to tune layout quickly and consistently.Applying Responsive ImagesAdding responsive images in your Bootstrap 4 layout is another easy thing to do with Wappler. First, select the element you want to insert image into, and click the add inside button (1): Click the BaAdd App Connect to Your PagesUnderstand when a page needs App Connect and how to introduce reactive behavior without turning a simple page into unnecessary complexity.