The visual builder is Giant Context's block-based editor for designing content. It powers every content type in the platform -- pages, blog posts, headers, footers, emails, forms, knowledge base articles, and templates all use the same builder. Once you learn how it works, you can design anything. You see exactly what your visitors will see as you work, and every change is reflected in real time on the canvas.

Real-time Live Preview

Drag and drop blocks to build your layout and watch every change reflect instantly on the canvas.

The three main areas

When you open the builder, the screen is divided into three areas that work together.

Builder Workspace

The interface consists of the left sidebar for tools and settings, the central canvas for live editing, and the top toolbar for global controls.

The canvas (center)

This is a live preview of your content. What you see here is exactly what your visitors will see. Click any element to select it, drag blocks to rearrange them, and watch your changes appear instantly. Selected elements are highlighted with a blue outline and display a small label at the top (such as "Section", "Column", or the specific block name). This label includes a grip icon for dragging and an X button to delete the element.

The left sidebar

The toolbar (top)

Sections, columns, and blocks

Content in the builder follows a three-level hierarchy.

Sections

Sections are the horizontal bands that divide your content from top to bottom. They act as rows that span the full width of the page, providing a structural foundation for your layout. Every section has its own settings and styles, allowing you to control backgrounds, spacing, and alignment independently.

Columns

Columns live inside sections and dictate the horizontal structure of your page. They utilize a flexible 12-unit grid system to manage width, giving you precise control over how content is distributed. Because width settings support responsive values, you can easily adjust column sizes across different breakpoints—ensuring your layout looks perfect on desktop, tablet, and mobile devices.

Blocks

Blocks are the core content elements of your design—headings, paragraphs, images, buttons, form fields, and videos. Every block features a dedicated settings panel tailored to its specific type. A heading block provides controls for text, alignment, and heading levels, while an image block lets you select your media, define alt text, and adjust its display.

Working with blocks

Giant Context visual builder showing a selected block and the Edit Block panel

Selecting blocks

Click any block on the canvas to select it. The block gets a blue outline, its label appears at the top, and its settings load in the Edit Block panel. Click a section or column to select those instead -- each has its own settings.

The Layers panel

The layers panel provides a structural tree view of your page. It displays every section, column, and block in a clear, nested outline, giving you a complete picture of how your content is organized.

This structural view is especially useful when:

Blocks are stacked or nested tightly, making them difficult to select directly on the canvas.
You need to understand the overall layout and hierarchy of a complex page at a glance.
You want to quickly reorder sections on the page, or drag columns and blocks to rearrange them.

Layers panel in the Giant Context visual builder showing a nested tree of sections, columns, and blocks

Visualize Your Page Structure

The layers panel provides a structural tree view of your page. It displays every section, column, and block in a clear, nested outline, making it easy to see exactly how your layout is put together.

Clicking any item in the Layers panel instantly selects it on the canvas. You can expand and collapse items to drill down into your page structure, giving you a clear view of how everything is nested. The Layers panel also makes it easy to reorganize your layout using a simple drag-and-drop system:

Drag blocks between columns or reorder them within a column
Drag columns to reorder them within a section
Drag sections to reorder them on the page

Pro Tip: Use the Layers Panel

When working with complex designs where blocks are tightly nested or overlapping, use the Layers panel. It provides a structural tree view of your page, showing every section, column, and block in a clear, nested outline. This makes it much easier to select and reorder elements than clicking directly on the canvas.

Advanced Styles

Responsive Values

Margin, padding, border radius, and width all support responsive values. Click the device icon next to these fields to switch breakpoints. Values cascade down from desktop to mobile.

Responsive Design

Your visitors use different devices to browse your website. Someone might discover your page on their phone, revisit it on a tablet, and explore it in detail on a desktop. The visual builder provides tools to preview your content across these breakpoints and adjust responsive values—like margin, padding, border radius, and width—specifically for desktop, tablet, and mobile screens.

Device Preview Controls

Toggle between Desktop (1440px), Tablet (768px), and Mobile (375px) views to ensure your content adapts perfectly across every screen size.

Responsive Cascading

Values cascade down — a desktop value carries over to tablet and mobile unless you explicitly override it for those smaller breakpoints.

Frequently Asked Questions

Check your responsive settings. Margin, padding, border radius, and width all support responsive values. Click the device icon next to these fields to switch breakpoints and preview your layout. Remember that values cascade down—a desktop value carries over to mobile unless you override it.

Use columns to create side-by-side layouts. You can split a section into narrower columns, then drag and drop your content blocks into them. You can easily drag blocks between columns or reorder the columns themselves within a section.

Build your foundation first. Start by adding sections and splitting them into columns before dropping in your actual content blocks (like headings, text, and images). Use the Layers Panel to see a clear, nested outline of your page structure, making it easy to manage how everything is put together.