Visual Builder
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 layouts 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
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
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.
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.
FAQ
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.