Learn what each setting on a container's Styles tab does in the chapter page builder, including the values each one accepts and its default.
Styles control how a container looks on your chapter page: its background, size, spacing, how content is arranged inside it, borders, and drop shadow. Every layout is built from one or more containers, so these settings apply to layouts too. Buttons, images, videos, and dividers have a smaller set of style settings of their own. See About chapter page builder layouts, elements, and components.
Open the Styles tab
- Open the chapter page builder for your chapter.
- On the canvas, select the container you want to style. To style part of a layout, select the container inside it.
- In the Container settings panel, select the Styles tab.
- Change the settings you need. The canvas updates as you go.
- Select Save.
The Container settings panel also has an Actions tab, for turning the container into a link, and a Display tab, for display rules and a section anchor name. See Display rules — chapter page builder.
How size values work
Size settings such as Width and Rounded corners take a number and a unit. Select a unit next to the field:
- Percentage (%) — a share of the space the container sits in.
- Pixels (px) — a fixed size that doesn't change with the screen.
- Fill — stretches to fill the space available. Width only.
- Hug — shrinks to fit the content inside. Width only.
Leave the field blank to use Auto.
Background
| Setting | What it does | Values and default |
|---|---|---|
| Color | Sets the background color. When the container also has an image, the color sits on top of it, so use a partly transparent color to tint the image. | Any color. Default: none. |
| Image | Adds a background image. The image is centered and scaled to cover the whole container. | Upload an image. Default: none. |
| Rounded corners | Rounds the container's corners. | % or px. Default: 0. |
| Width | Sets how wide the container is. | %, px, Fill, or Hug. Default: Fill. |
| Minimum height | Sets the smallest height the container can be. It still grows taller when its content needs more room. | % of the screen height, or px. Default: Auto. |
Spacing
| Setting | What it does | Values and default |
|---|---|---|
| Horizontal margin | Adds space inside the left and right edges of the container. | 0–100 px. Default: 20. |
| Vertical margin | Adds space inside the top and bottom edges of the container. | 0–100 px. Default: 20. |
| Horizontal gap | Sets the space between items that sit side by side. | 0–100 px. Default: 20. |
| Vertical gap | Sets the space between items or rows that are stacked. | 0–100 px. Default: 20. |
Margins add space inside the container, between its edge and its content. To change the space between two containers, adjust the gap setting on the container that holds them.
Interior container settings
These settings control how the items inside a container are arranged.
| Setting | What it does | Values and default |
|---|---|---|
| Maximum content width | Limits how wide the content can get. The background still spans the full container, so this is useful for keeping text readable inside a full-width section. | % or px. Default: Auto (no limit). |
| Alignment | Positions the items at the start, center, or end of the container. | Left, center, or right. Default: left. |
| Direction | Sets the order and direction items flow in. | Left to right, right to left, bottom to top, or top to bottom. Default: top to bottom. |
| Number of columns | Sets how many items sit in each row before the next item wraps to a new row. Applies only when Direction is left to right or right to left. | 0–10. Default: 0, which keeps all items in a single row. |
| Disable stacking | Keeps items side by side on small screens instead of stacking them into one column. | On or off. Default: off. |
Items in a row stack into a single column automatically when each one would be narrower than 200 px, such as on a phone. Turn on Disable stacking only when the items stay readable at small sizes.
Borders
| Setting | What it does | Values and default |
|---|---|---|
| Position | Sets which side of the container gets a border. | All sides, top, bottom, left, or right. Default: all sides. |
| Style | Sets the line style. | Solid, dashed, or dotted. Default: solid. |
| Width | Sets how thick the border is. | 0–100 px. Default: 0. |
| Color | Sets the border color. | Any color. Default: black. |
Border width starts at 0, so no border appears until you increase it.
Drop shadow
| Setting | What it does | Values and default |
|---|---|---|
| Color | Sets the shadow color. | Any color. Default: none. |
| Angle | Sets the direction the shadow falls from the container. | 0–180 degrees. Default: 135. |
| Distance | Sets how far the shadow sits from the container. | 0–100 px. Default: 8. |
| Blur | Softens the shadow's edges. Higher values give a softer shadow. | 0–50. Default: 4. |
| Size | Sets how large the shadow is compared with the container. | 100–200. Default: 100. |