Back to Gridbox.io
Create Your First Project
Introduction to Gridbox Editor
Deploy to Netlify
Creating / Storing Form Data
Adding a Typeform
Adding a Gumroad Buy Button
Adding Calendly - For Appointments
Adding Stripe Checkout button
Gridbox 101 Crash Course
Layout & Grid System
When you're in Design mode, using Components panel you can drag and drop ready made Bootstrap 4/5 or Bulma blocks or any HTML elements in the canvas.
Gridbox Components Panel
Components Panel is organized into various HTML blocks which is grouped into several sections like Layout, Features, Authentication, etc... You can drag and drop those blocks into the canvas.
You can also use the "
" to quickly find the components you need to work on.
For any framework -> Bootstrap 4 / Bootstrap 5 / Bulma, you can find common components along with other components which are as follows
Core Bootstrap / Bulma
Under Basic, you can find all essential basic elements to build a page like Link Button, Map, Youtube Video, Image Block, Icon Block, ...
Basic Components Block
Under Layout components, where you can find all the essentials to form a layout like
Full width -> Container Fluid
Grid Components (1 Col, 2 Cols, 3 Cols, 4 Cols, 8 - 4 or 4 -8 Cols Grid) based on the framework Grid styles
Bootstrap 4 Layout & Grid System
Bootstrap 5 Layout & Grid System
Bulma Layout & Grid System
Under Core Components, where you can find default framework Components like Jumbotron, Hero, Card, List, Sliders, etc... depending on the framework you choose.
Where you can find various Navbar components with different styles.
In this section, where you can find thirty-party components using which you can easily integrate services like
Design mode - Previous
Next - Deployment