Hero: Split Video starter block
Introduce a page with its primary message, supporting media and next action.
Introduce a page with its primary message, supporting media and next action.
Before you begin
Section titled “Before you begin”- A page with Bootstrap 5 included. Load its JavaScript for collapse, dropdown, tab or dismiss interactions.
Use this as a layout starting point
Section titled “Use this as a layout starting point”Introduce a page with its primary message, supporting media and next action. This reference describes the inserted template. It contains static sample content and no App Connect data bindings or application event handlers.
Edit the inserted parts
Section titled “Edit the inserted parts”Insert the block into a Bootstrap 5 page, then expand it in App Structure. Select the child whose content or styling you want to change; there is no separate block configuration form.
| Part | How to adapt it |
|---|---|
| Headings | Start with the h1 reading “See how a real app comes together in Wappler”. Replace sample headings with your own content and keep their levels consistent with the surrounding page. |
| Responsive columns | The template uses `col-lg-6`. A numeric span is a fraction of the 12-column row; a breakpoint-qualified span applies from that breakpoint upward. Change the column, then check both narrower and wider views. |
| Images | Replace the 4 image elements with your own sources and appropriate alt text. Preserve or deliberately change the crop/aspect ratio. Remote sample image URLs are not bundled project assets. |
| Links | Review all 2 anchors. Replace placeholder # links and sample routes with working destinations; a sample /login or /signup path does not create that page. |
| Application buttons | The sample includes 1 button without an application event binding. Native submit/reset behavior still applies when those types are used inside forms. Give icon-only buttons an accessible name and connect or remove actions users cannot yet complete. |
Complete the intended behavior
Section titled “Complete the intended behavior”The play control is a styled button; the template has no video or iframe player. Add a real video source/player or a modal with accessible playback, then test that Watch the tour and Play start the intended media.
Make one change and check the result
Section titled “Make one change and check the result”Change the first heading from “See how a real app comes together in Wappler” to a title appropriate to your page, for example “Build your first project”. Preview the page at narrow and wide widths and confirm the text remains readable without clipping. Then replace the remaining sample content and verify every route or control you kept.
Continue with starter blocks
Section titled “Continue with starter blocks”Use the starter-block guide for insertion and adaptation. For live records or user actions, connect the matching App Connect workflow after the static layout is readable.
Check your result
Section titled “Check your result”You can identify the inserted parts, replace sample content and distinguish supplied Bootstrap behavior from application work still to implement.