Visual builder
The visual builder is the block-based editor you use to design content in Giant Context. Pages, blog posts, headers, footers, emails, forms, knowledge base articles and layouts are all built in it, with the same blocks and the same settings panels. Learning it once covers every content type in the platform.
Live preview
The canvas renders your content the way a visitor sees it. Drag blocks into place and each change appears on the canvas as you make it.
The three main areas
The builder workspace
The left sidebar holds the tools and settings, the canvas in the middle is where you edit, and the toolbar across the top carries the controls that apply to the whole document.
The canvas
Click any element on the canvas to select it. The selection gets a blue outline and a small label above it naming what you picked, such as Section, Column or the block type. The label carries a grip icon for dragging and an X button for deleting.
The left sidebar
The top toolbar
Sections, columns and blocks
Content in the builder follows a three-level hierarchy.
Sections
Sections are the horizontal bands that divide the page from top to bottom. Each one spans the full width and holds the columns inside it. A section has its own settings and styles, so you set its background, spacing and alignment on its own.
Columns
Columns sit inside sections and set the horizontal structure. Width runs on a 12-unit grid, so a half-width column is 6 units and a third is 4. Width takes a separate value per breakpoint, which is how a column can be half-width on desktop and full-width on a phone.
Blocks
Blocks are the content elements themselves, such as headings, paragraphs, images, buttons, form fields and videos. Each block has a settings panel built for its own type. A heading block has controls for the text, the alignment and the heading level. An image block has the media picker, the alt text and the display options.
Working with blocks
Selecting a block
Selecting a block loads its settings in the Edit block panel. Click a section or a column instead and you get that element's settings.
The layers panel
The layers panel shows the page as a tree. Every section, column and block appears in it, nested the way it is nested on the canvas, which is the quickest way to read the structure of a long page.
Expanding the tree
Expand and collapse any item to work on one part of the page at a time. Clicking an item in the tree selects it on the canvas.
Dragging inside the tree reorders the page:
- Move a block within its column or into another column
- Reorder the columns inside a section
- Reorder the sections on the page
Tightly nested blocks. When a block sits deep inside a column and clicking the canvas keeps selecting its parent, select it in the layers panel instead.
Advanced styles
Values cascade down. A value you set on desktop applies to tablet and mobile until you set a different one there. Click the device icon beside a field to switch breakpoint.
Responsive design
The builder previews your content at three widths so you can check the layout on each one before publishing. Style values that need to differ by width are set per breakpoint.
Device preview
The three buttons switch the canvas between desktop at 1440px, tablet at 768px and mobile at 375px. The content reflows at each width the way it will on a visitor's screen.
Frequently asked questions
Check the visibility setting for that block in the Advanced styles panel, where a block can be hidden at one width. If it is visible there, switch the canvas to mobile and check the width and margin values it has at that breakpoint.
Split a section into columns and drag a block into each one. Set the column widths on the 12-unit grid, for example two columns of 6 units each.
Add the sections first and split them into columns, then drop the content blocks in. Building the structure before the content means you are not moving finished blocks around later.