Gridbox
  • We're shutting down
  • Introduction
  • Getting Started
  • Building Your Page
    • Overview
    • Basics
    • Using Scroll Points
    • Working with Backgrounds
    • Fonts Style and Properties
  • Hosting
    • Export Site
    • Hosting your site
  • Integrations
    • Creating / Storing Form Data
    • Setting up Google Analytics
  • SEO & Open Graph
    • Setting up SEO
    • Setting up Open Graph
  • Private & Cloneable sites
    • Private & Cloneable Sites
  • Tutorials
    • Navbar - For Navigation
    • Countdown Timer Settings
Powered by GitBook
On this page
  • Canvas
  • Builder Toolbar
  • Design Mode
  • Code Mode
  • Preview

Was this helpful?

  1. Building Your Page

Overview

The Builder allows you to build your site structure, design the look and feel, add content and custom code to create fully functioning websites, landing pages and prototypes.

PreviousGetting StartedNextBasics

Last updated 2 years ago

Was this helpful?

Builder is desgined to be simple, minimal and contextual. Here's how it breaks down:

Canvas

The major area you see in the builder is called canvas it's where you'll not only see a preview of the site (mostly live, JavaScript is disabled) you're building, but also what you'll use to drag, move and arrange your elements as well as access the pre-built Gridbox blocks

Builder Toolbar

From top, you can see the following options

  1. In the left, you can see logo & project title

  2. In the middle, you can see three buttons -> Design, Code, Preview

  3. In the right, you can see three buttons -> Save, Download, Publish

Let us see each of these options in detail.

Design Mode

By default, when you create any site you will be design mode. With Design mode, you can add pre-built blocks, change design and content without touching a single line of code.

In Design mode, JavaScript & button clicks are disabled by default. You can click on preview to see the real time changes.

Code Mode

With Gridbox, you can create a site without code, however if you're looking for further customization then you can use code editor to edit HTML, CSS or add external JavaScript libraries.

Preview

With preview, you can the see live version of your landing page or site. You can also test the responsiveness with mobile and tablet resolutions.

Gridbox Editor
Editor Toolbar
Design Mode
Code Mode
Preview Page