Select a block or a section, and two groups in the right sidebar set how it looks: Colors picks its color scheme and colors, and Appearance adds an image fill, a border, rounded corners and a shadow. Which settings show depends on the block. Some show right away. Others you add with the + beside the group's name. To remove one, select it again in that menu, or click the x beside it when the pointer is over the row. Removing a setting clears its value.
The colors in these lists, such as Foreground (the main text color) and Muted, come from your color scheme, so a block set to Primary changes when you change the scheme. Change your colors explains schemes.
Colors
Setting
What it does
Color Scheme
Gives the block or section its own background and text colors from one of your color schemes. Default keeps it transparent, with the colors of the section around it. The list that opens has three icons beside Theme, above your schemes, for the mode: Inherit follows the site's color mode, and Light or Dark keeps this part in that mode, so you can have one dark section on a light page.
Background
A background color behind the block: None, Foreground, Muted, Secondary, Primary, Accent, White or Black. Primary Tint and Accent Tint are those colors at 10%, and Primary Wash is Primary at 4%. Page uses the page's background color. Blur shows the page color at 70% and blurs what is behind the block, for a header over a photo. Tag shows inside a post list or a tag list and uses each tag's color from Ghost. Brand shows on social links and uses each network's color. Custom opens a color picker, for one of your theme's colors or any other, with its opacity. Add it from the + menu.
Gradient
A color gradient over the background: None, a gradient from Styles, or Custom, which opens a gradient editor. Add it from the + menu.
Text color
The color of the block's text: Default (the color the block has without this setting), Foreground, Muted, Primary, Accent, White or Black, and Tag inside post and tag lists. Some blocks add choices of their own. Custom opens a color picker, as for Background. It shows right away on blocks with text of their own, such as a Button or a Heading. On a section, and on blocks that hold other blocks, such as a Group, a Form or a menu's Dropdown, add it from the + menu. There it also colors the blocks inside that have no Text color of their own.
Link color
How links inside the block's text look. Accent, the default, shows them in your color scheme's accent color. Text shows them in the same color and boldness as the text around them. Custom opens a color picker and changes only the color, so the links keep the theme's boldness and hover. Paragraph, Heading, List, Collapse, Label and Option have it, Image has it for links in its caption, and so do the data blocks built on them, such as Title and Excerpt. Add it from the + menu to change it.
In the Background and Text color lists, Theme above the theme's colors opens Styles > Colors, where you change them for the whole site. A section's Colors group shows Color Scheme, and its + menu adds Background, Gradient and Text color. A block's Background, Border and Corners show right away on blocks that are drawn with a box from the start, such as Button.
Appearance
Setting
What it does
Fill
Where the background image comes from: Custom image, or a picture from the page's data, such as the post's Featured Image or the author's Avatar. It shows on Post, Page, Tag and Author templates and inside a post list, where each item fills with its own picture. If a post has no picture, the background color shows instead.
Fill image
Add it from the + menu. It hides when Fill is set to a picture from the page's data. A picture that covers the whole block behind its content. Upload one, pick one from your media library or Unsplash, or paste a URL such as https://example.com/image.jpg. Group, Paywall and No Results have it.
Overlay
Shows when the block has a fill image. A color laid over the picture, so text on it stays readable: None (the default) or one of your theme's colors, with its strength from 0 to 100%, 40% to start.
Image settings
The sliders icon beside Fill image. Opacity fades the picture, from 100% down to 0%. Backdrop is the color seen through a faded or transparent picture: Background, Black or White.
Border
A line around the block: None, Thin (1 px), Medium (2 px), Thick (4 px), or a width you enter. Click the link icon to set each side on its own, for example a line at the bottom only.
Color
Shows when Border is not None. The line's color: Border (the scheme's border color), Subtle, Foreground, Primary, Accent, Muted, Secondary, White or Black, plus Tag and Brand where Background has them, and Custom for a color you pick. The color and the Solid, Dashed or Dotted style share one row.
Style
Shows when Border is not None: Solid, Dashed or Dotted.
Corners
How round the corners are: None, Extra small (4 px), Small (8 px), Medium (12 px), Large (16 px), Extra large (24 px), 2X large (32 px), Full (a pill or a circle), or a length you enter. Most blocks also offer Default, which follows the Cards and sections corner in Styles. Buttons, icons, images, search fields and menu links do not offer it. Click the link icon to round each corner on its own. Your own corner presets show here too.
Shadow
A shadow under the block, picked on a slider: None, Small, Medium, Large, Extra large, and Custom as the last step, which lets you build your own shadow. Shadows and corners explains presets and custom shadows.
On blocks, Border (the line's width) can differ on tablets and phones. Color, Style and every other setting on this page apply on all screen sizes.
Hover and pressed states
When you edit a state of a block's variant, such as Hover on a Button, the Appearance group also shows Opacity (in steps of ten percent), Transform (Move X, Move Y, Scale and Rotate) and Transition (how fast the change plays: Quick, Default, Slow, None or Custom). These show only in a state. Change how every button looks describes states.
Section appearance settings
The section type named Section has its own background settings, listed below. Post Content and Post Comments have Corners only, a Dialog has Corners and Border, and a Navigation has no Appearance group.
Setting
What it does
Fill image
A picture behind the whole section, such as a hero photo. Upload one, pick one from your media library or Unsplash, or paste a URL. Add it from the + menu.
Overlay
Shows when the section has a fill image or video. A color laid over the picture, so text on it stays readable: None (the default) or one of your theme's colors, with its strength from 0 to 100%, 40% to start.
Image settings, Video settings
The sliders icon beside the image or video. Opacity fades the picture, from 100% down to 0%. Backdrop is the color seen through it: Background (the section's own background color), Black or White.
Video
A video that plays behind the section, muted and in a loop. Enter a YouTube or Vimeo link, such as https://www.youtube.com/watch?v=…, or the URL of a video file. The video plays only while the section is on screen, and not for visitors whose device asks for reduced motion. Add it from the + menu.
Play on mobile
Shows when Video is set. Phones and tablets show the fill image instead of the video, to save data. Turn this on to play the video there too. Off by default. Without a fill image, those devices show the section's background color.
Corners
Rounds the section's corners and clips its content and background to them. None by default.
Border
A line around the section, with Color and Style as for blocks. The same on every screen size.
Set a Fill image together with a Video. The picture shows while the video loads and on devices that do not play it. Add a background image, video or gradient walks through it.
Select a block or a section, and two groups in the right sidebar set how it looks: Colors picks its color scheme and colors, and Appearance adds an image fill, a border, rounded corners and a shadow. Which settings show depends on the block. Some show right away. Others you add with the + beside the group's name. To remove one, select it again in that menu, or click the x beside it when the pointer is over the row. Removing a setting clears its value.
The colors in these lists, such as Foreground (the main text color) and Muted, come from your color scheme, so a block set to Primary changes when you change the scheme. Change your colors explains schemes.
Colors
In the Background and Text color lists, Theme above the theme's colors opens Styles > Colors, where you change them for the whole site. A section's Colors group shows Color Scheme, and its + menu adds Background, Gradient and Text color. A block's Background, Border and Corners show right away on blocks that are drawn with a box from the start, such as Button.
Appearance
https://example.com/image.jpg. Group, Paywall and No Results have it.On blocks, Border (the line's width) can differ on tablets and phones. Color, Style and every other setting on this page apply on all screen sizes.
Hover and pressed states
When you edit a state of a block's variant, such as Hover on a Button, the Appearance group also shows Opacity (in steps of ten percent), Transform (Move X, Move Y, Scale and Rotate) and Transition (how fast the change plays: Quick, Default, Slow, None or Custom). These show only in a state. Change how every button looks describes states.
Section appearance settings
The section type named Section has its own background settings, listed below. Post Content and Post Comments have Corners only, a Dialog has Corners and Border, and a Navigation has no Appearance group.
https://www.youtube.com/watch?v=…, or the URL of a video file. The video plays only while the section is on screen, and not for visitors whose device asks for reduced motion. Add it from the + menu.Set a Fill image together with a Video. The picture shows while the video loads and on devices that do not play it. Add a background image, video or gradient walks through it.