A dialog is a panel that opens over the page, such as a drawer that slides in from the side with your menu, or a full-screen panel. In Fantasma it is a Dialog section in your layout, and a Button opens it. Visitors close it with a button inside it or, by default, by clicking the darkened page around it.
Add the dialog
Open your project in Fantasma.
In the icon rail, click the second icon, Layouts.
In the Layouts list, click Default.
In the left sidebar, click + next to Overlays. The Add Overlay to Layout window opens.
Under Dialogs, click Side Drawer for a panel at the side, or Mobile Menu for a full-screen one. The dialog appears under Overlays, named Drawer or Mobile menu, and opens on the canvas.
The dialog belongs to the layout, the shared frame of header and footer around your pages, so every page that uses the layout can open it. The Side Drawer starts with your logo, a close button and your menu. Click a block on the canvas to change it, or add blocks such as a Heading, a Paragraph or a Button.
A dialog you add follows its pattern, so when you select it, the right sidebar shows only Edit pattern and Detach. A button can open it as it is. To change its settings, click Detach. The dialog stays as it is, but stops following later changes to its pattern, as How patterns work explains. Its settings then show in the right sidebar:
Position sets where it opens: Full screen, Left, Right, Bottom center, Bottom left, Bottom right or Bottom bar. There is no small box in the middle of the window. For a signup popup, Bottom center or Full screen come closest.
Width sets how wide a side or corner panel is: Narrow, Standard or Wide.
Block page, on by default, darkens the page behind it until it closes.
On the canvas, click the button that should open the dialog. Each click selects one level deeper, so click again until the right sidebar shows Button. To add a new button, follow Add blocks to a section.
Under On click, select Open dialog. A Dialog field appears.
Under Dialog, select your dialog, such as Drawer.
The Dialog field lists the dialogs of the page's layout. When it reads "Add a Dialog section first", the layout has no dialog yet.
On the canvas, clicking the button selects it rather than opening the dialog. To see the dialog, open the layout under Layouts and click the dialog under Overlays. On your site, the button opens it once you publish your theme or upload it again.
Open it from a link
A link on the page can open the dialog too, such as a link in a Paragraph or a Button's Link URL.
Select the dialog under Overlays in the layout. If it still shows Detach, click it first.
In the right sidebar, click + next to Advanced and add HTML anchor.
In HTML anchor, enter a short name without spaces, such as drawer.
A link to #drawer now opens the dialog, and so does an address that ends with it, such as https://example.com/#drawer.
Let visitors close it
A Button whose On click is Close dialog closes the dialog it sits in. The Side Drawer and Mobile Menu already have one, an X icon at the top. With Block page on, visitors can also press Esc or click the darkened page. With Block page off, keep a Close dialog button in the dialog, so visitors have a way to close it.
A dialog is a panel that opens over the page, such as a drawer that slides in from the side with your menu, or a full-screen panel. In Fantasma it is a Dialog section in your layout, and a Button opens it. Visitors close it with a button inside it or, by default, by clicking the darkened page around it.
Add the dialog
The dialog belongs to the layout, the shared frame of header and footer around your pages, so every page that uses the layout can open it. The Side Drawer starts with your logo, a close button and your menu. Click a block on the canvas to change it, or add blocks such as a Heading, a Paragraph or a Button.
A dialog you add follows its pattern, so when you select it, the right sidebar shows only Edit pattern and Detach. A button can open it as it is. To change its settings, click Detach. The dialog stays as it is, but stops following later changes to its pattern, as How patterns work explains. Its settings then show in the right sidebar:
Dialog section describes every setting.
Open it from a button
The Dialog field lists the dialogs of the page's layout. When it reads "Add a Dialog section first", the layout has no dialog yet.
On the canvas, clicking the button selects it rather than opening the dialog. To see the dialog, open the layout under Layouts and click the dialog under Overlays. On your site, the button opens it once you publish your theme or upload it again.
Open it from a link
A link on the page can open the dialog too, such as a link in a Paragraph or a Button's Link URL.
drawer.A link to
#drawernow opens the dialog, and so does an address that ends with it, such ashttps://example.com/#drawer.Let visitors close it
A Button whose On click is Close dialog closes the dialog it sits in. The Side Drawer and Mobile Menu already have one, an X icon at the top. With Block page on, visitors can also press Esc or click the darkened page. With Block page off, keep a Close dialog button in the dialog, so visitors have a way to close it.