Website dialogs
A dialog is a panel that opens over your website content. It collects an email address, announces an offer or asks a visitor to confirm something before it happens.
Visitors navigate to a page. A dialog arrives on its own, which is what makes it effective and what makes it easy to overuse.
This article covers creating, designing and managing dialogs in Giant Context.
The dialogs list
Go to Website > Dialogs in the left sidebar to see every dialog in the project.
The Dialogs screen
One row per dialog. Create Dialog in the top right starts a new one.
Creating a new dialog
The visual editor
A dialog is built from the same sections and blocks as a website page. The one difference is the canvas, which is the width of the dialog rather than the width of a browser. Browse and add blocks from the left sidebar, and open the Advanced Styles panel on the styles tab to adjust any element.
The same editor as a page
The block palette on the left is the one you already know from pages, headers and footers. What changes is the canvas width you are designing against.
The canvas
The canvas in the center previews the dialog as visitors will see it. Click an element to select and edit it, and drag blocks to reorder them.
The block panel
The block panel in the left sidebar lists the block types. Drag one onto the canvas to add it. Select a block on the canvas and the panel switches to that block's settings and its Advanced Styles tab.
The layers panel
A dialog canvas is small, so blocks sit close together and nest deeply, which makes some of them hard to click. The layers panel shows the dialog as a tree of sections and blocks. Select, reorder and edit from there when the canvas will not cooperate.
The toolbar
Dialog settings
Click Settings, the gear icon in the editor toolbar. The panel that opens has two tabs.
Appearance
Details
Building your dialog content
The content area of a dialog is a fraction of a page's width, and that is the constraint everything else follows from.
Preview at the real width. Content that reads well on the full canvas can wrap badly once the dialog is set to Small. Check it at the width you have chosen before you save.
Common use cases
Dialogs that do not annoy visitors
A dialog interrupts whatever a visitor was doing. That interruption is worth it when the content is relevant and the timing is right, and it costs you the visit when it is not. The rules below keep it on the right side of that line.