A Dialog is a panel that opens over the page, such as the menu on phones, a side drawer, a signup popup, or a cookie banner. It stays closed until something opens it, except a cookie banner, which opens by itself until the visitor makes a choice.
Dialogs belong to a layout. Open the layout under Layouts in the icon rail and click the + beside Overlays in the left sidebar. The dialog you pick is added to the layout, so it is on every template that uses that layout. On the canvas, a dialog shows when you select it in the sidebar, and its settings panel opens. A dialog you add from the picker stays linked to its pattern, so its panel shows Edit pattern and Detach. Change its settings in the pattern, or detach it first. In the tables below, "the + menu" is the + beside a group's name in that panel. Open a popup or side drawer from a button walks through a popup, and Add a cookie banner through a banner.
Dialog patterns
The picker offers six dialogs in two categories.
Pattern
Category
Position
Opens
Mobile Menu
Dialogs
Full screen, with Content set to Space between
On click
Side Drawer
Dialogs
Right, Standard width
On click
Compact bar
Cookie banner
Bottom center
Until cookie choice
Corner card
Cookie banner
Bottom right, Narrow width
Until cookie choice
Full-width bar
Cookie banner
Bottom bar
Until cookie choice
With choices
Cookie banner
Bottom left, Narrow width, with switches for analytics and marketing cookies
Until cookie choice
The cookie banners have Block page off and the HTML anchorcookies. The Mobile Menu opens from the menu button of the header patterns.
General
Setting
What it does
Position
Where the panel opens. Full screen (the default) covers the whole window. Left and Right slide in a full-height drawer from that side. Bottom center sits at the bottom of the window, as wide as its content and at most 704 px. Bottom left and Bottom right sit in that corner as a card. Bottom bar spans the bottom edge. On screens narrower than 544 px, the bottom positions take the full width with a small margin, and their buttons stretch.
Width
Shows when Position is Left, Right, Bottom left or Bottom right. Narrow (320 px), Standard (384 px, the default) or Wide (448 px).
Content
Shows when Position is Full screen, Left or Right. Top stacks the blocks from the top. Space between keeps the first block at the top of the panel and the last at the bottom, such as a logo above and member buttons below.
Block page
On by default. Darkens the page behind the dialog and keeps it from being used until the dialog closes. Clicking the darkened page closes it. Off, the page stays usable and is not darkened, which suits a cookie bar.
Opens
On click (the default) opens the dialog when a visitor clicks a button or a link to it. Until cookie choice opens it on every page until the visitor accepts or declines cookies.
Remember choice
Shows with Until cookie choice. How long the visitor's choice is kept in their browser before the banner asks again: 3 months, 6 months (the default) or 12 months.
Reopen banner
Shows with Until cookie choice. A note, not a setting: a reminder to link to the banner from your footer or Ghost navigation, so visitors can change their choice. The link uses the dialog's HTML anchor, which is cookies in the cookie banner patterns, so the link is #cookies.
Colors, layout and spacing
Setting
What it does
Color Scheme
The panel's background and text colors, from your color schemes. Default uses the site's scheme. The Inherit, Light and Dark icons beside Theme in its list choose light or dark colors.
Background
A color that fills the panel in place of its scheme's background. None by default. Add it from the + menu.
Gradient
A gradient over the panel's background. Add it from the + menu.
Text color
The color of the panel's text, and of the blocks inside that have no Text color of their own. Add it from the + menu.
Content Width
How wide the column of blocks inside the panel can grow. Add it from the + menu.
Min Height
The least height of the panel. Add it from the + menu.
Align
Shows only on a dialog that already has a value for it. You cannot add it. Places the column of blocks on the Left, in the Center or on the Right of the panel.
Padding
Space between the panel's edges and its blocks. None by default. The patterns set their own.
Margin
Space outside the panel. Add it from the + menu.
Position and Width set the panel's size. This Width belongs to the panel and takes the place of the section Width other sections have.
Appearance
Setting
What it does
Corners
Rounds the panel's corners. The cookie banner patterns use Large.
Border
A line around the panel, with Color and Style. The cookie banner patterns draw a thin line.
Advanced
The + menu adds HTML anchor, CSS classes and Custom CSS. On a Dialog, the HTML anchor is the name links use to open it. Advanced settings describes the other two.
How an On click dialog opens and closes
A dialog set to On click opens when a visitor:
Clicks a Button whose On click is Open dialog, with this dialog chosen under Dialog.
Clicks a link to # followed by the dialog's HTML anchor, such as #newsletter, in a menu, a paragraph or a button.
Arrives on a page whose address ends with that anchor, such as https://example.com/#newsletter.
It closes when the visitor clicks a Button whose On click is Close dialog, or a link to a part of the same page, such as a menu link to a section. With Block page on, pressing Esc or clicking the darkened page closes it too. With Block page off, give the dialog a Close dialog button. Keyboard users land back on the button that opened it.
How a cookie banner works
A dialog set to Until cookie choice opens on every page load until the visitor decides. Esc and clicks outside it do not close it. Its buttons act through their Link URL: select a Button inside the banner, and the Link URL field lists these values under Cookie actions:
Action
Link URL
What it does
Accept
#/consent/accept
Allows every cookie category and closes the banner.
Decline
#/consent/reject
Refuses every category and closes the banner.
Choose
#/consent/choose
Shows the banner's Cookie choices. Offered only when the banner holds them.
Save choice
#/consent/save
Saves the switches in Cookie choices and closes the banner.
The choice is kept in the visitor's browser for the time in Remember choice. Scripts you set to After analytics consent or After marketing consent in Project settings run only after the visitor allows that category, as Add analytics and other scripts describes. When a visitor takes back a category they allowed, the page reloads so the scripts stop. When you later add a script of a new category, such as your first marketing script, visitors who answered before see the banner again. If the page uses the Google tag, as Google Analytics does, the banner also passes the choice to Google's consent mode.
A link to the banner's HTML anchor, such as #cookies in your footer, opens it again so visitors can change their choice. To see the banner again while you test, use that link or a private browser window. You edit the banner's text and its Privacy policy link like any Paragraph on the canvas.
Only one cookie banner works on a page. If a layout has two, the one listed first shows. When the banner would cover Ghost's Portal button in the corner, it moves up above it.
Cookie choices holds the switches a visitor uses to allow some cookies and not others. It stays hidden until the visitor clicks a Choose button, and then the banner's other buttons hide. It holds:
Cookie choice: one switch, with a Label that visitors read, such as Analytics, and a Category: Analytics or Marketing.
A Button with the Save choice action, which saves the switches.
A Dialog is a panel that opens over the page, such as the menu on phones, a side drawer, a signup popup, or a cookie banner. It stays closed until something opens it, except a cookie banner, which opens by itself until the visitor makes a choice.
Dialogs belong to a layout. Open the layout under Layouts in the icon rail and click the + beside Overlays in the left sidebar. The dialog you pick is added to the layout, so it is on every template that uses that layout. On the canvas, a dialog shows when you select it in the sidebar, and its settings panel opens. A dialog you add from the picker stays linked to its pattern, so its panel shows Edit pattern and Detach. Change its settings in the pattern, or detach it first. In the tables below, "the + menu" is the + beside a group's name in that panel. Open a popup or side drawer from a button walks through a popup, and Add a cookie banner through a banner.
Dialog patterns
The picker offers six dialogs in two categories.
The cookie banners have Block page off and the HTML anchor
cookies. The Mobile Menu opens from the menu button of the header patterns.General
cookiesin the cookie banner patterns, so the link is#cookies.Colors, layout and spacing
Position and Width set the panel's size. This Width belongs to the panel and takes the place of the section Width other sections have.
Appearance
Advanced
The + menu adds HTML anchor, CSS classes and Custom CSS. On a Dialog, the HTML anchor is the name links use to open it. Advanced settings describes the other two.
How an On click dialog opens and closes
A dialog set to On click opens when a visitor:
#followed by the dialog's HTML anchor, such as#newsletter, in a menu, a paragraph or a button.https://example.com/#newsletter.It closes when the visitor clicks a Button whose On click is Close dialog, or a link to a part of the same page, such as a menu link to a section. With Block page on, pressing Esc or clicking the darkened page closes it too. With Block page off, give the dialog a Close dialog button. Keyboard users land back on the button that opened it.
How a cookie banner works
A dialog set to Until cookie choice opens on every page load until the visitor decides. Esc and clicks outside it do not close it. Its buttons act through their Link URL: select a Button inside the banner, and the Link URL field lists these values under Cookie actions:
#/consent/accept#/consent/reject#/consent/choose#/consent/saveThe choice is kept in the visitor's browser for the time in Remember choice. Scripts you set to After analytics consent or After marketing consent in Project settings run only after the visitor allows that category, as Add analytics and other scripts describes. When a visitor takes back a category they allowed, the page reloads so the scripts stop. When you later add a script of a new category, such as your first marketing script, visitors who answered before see the banner again. If the page uses the Google tag, as Google Analytics does, the banner also passes the choice to Google's consent mode.
A link to the banner's HTML anchor, such as
#cookiesin your footer, opens it again so visitors can change their choice. To see the banner again while you test, use that link or a private browser window. You edit the banner's text and its Privacy policy link like any Paragraph on the canvas.Only one cookie banner works on a page. If a layout has two, the one listed first shows. When the banner would cover Ghost's Portal button in the corner, it moves up above it.
Blocks
A Dialog holds up to 30 blocks at its top level: Group, Cookie choices, Site Logo, Navigation Menu, Search, Dark Mode Toggle, Button, Social Links, Icon Link, Heading, Paragraph and Separator.
Cookie choices holds the switches a visitor uses to allow some cookies and not others. It stays hidden until the visitor clicks a Choose button, and then the banner's other buttons hide. It holds:
Analytics, and a Category: Analytics or Marketing.