Well
A compact content container with palette background, padding, and optional gradient.
Usage
Well wraps content in a padded panel with a solid background color — useful for callouts, inset content, sidebar-style boxes, or grouped blocks that should read separately from the page around them.
The block inserts with a heading and paragraph placeholder. Add any allowed inner blocks inside the well; spacing between nested blocks uses the theme's standard block gap.
Well is intentionally simpler than Section: solid color background, optional gradient overlay, padding, and rounded corners — no image, video, or pattern backgrounds. Use Section when you need full-width bands, transitions, or photo backgrounds.
Well Settings
Sidebar controls under Well Settings:
- Background Color — palette fill for the panel (default gray)
- Text Color — Dark (default) or Light (reverse print) for readable copy on dark backgrounds. Reverse print cascades to nested blocks inside the well
- Rounded — rounded corners on the panel (default on)
- Padding — inner spacing from 0–24 (saved as quarter-rem steps; default 8 = 2rem)
- Small Text — reduces body copy size inside the well
- Add Gradient — subtle gradient overlay on top of the background color
- Gradient Depth — intensity from 0–50% (step 5; default 10)
- Gradient Direction — nine-position picker (upper-left through lower-right; default lower-right)
Allowed content
Inner blocks you can add inside a Well:
- Heading, Paragraph, List, Buttons, Separator, Image
- Columns, FAQ, Structured List, Socials, Marquee, Pills
Other Dirigible blocks are not allowed in this container. For a wider set of nested blocks, use Section instead.
Block width
Well supports Wide and Full alignment from the block toolbar. With no alignment set, the block follows default content width.
Tips
- Enable Light text color when using a dark or saturated Background Color.
- Add Gradient adds depth without switching to a full Section — tune Gradient Depth and Gradient Direction to match your layout.
- Use Small Text for disclaimers, metadata, or compact FAQ-style content inside a well.
- Nest FAQ or Structured List inside a Well when those blocks should sit on a tinted panel rather than the page background.
- Increase Padding when content feels tight against the panel edges; decrease for dense layouts.
Settings
Well Settings
Choose a background color for the well. This helps to visually distinguish the content within the well from the surrounding content.
Select whether the text inside the well should be dark or light. This ensures good readability against the chosen background color.
Toggle this setting to apply or remove rounded corners to the well. Rounded corners can give the well a softer, more modern appearance.
Inner spacing between the panel edge and content. Values from 0–24 map to quarter-rem steps (default 8 = 2rem).
Toggle this setting to make the text inside the well smaller. This can be useful for less prominent information or to fit more text into a compact space.
Adds a subtle gradient overlay on the background color — same gradient system used on Section color backgrounds. Enable before adjusting depth and direction.
Control the intensity or depth of the gradient effect. A higher value will make the gradient more pronounced.
Choose the direction from which the gradient effect will emanate. This allows you to control the visual flow and emphasis of the gradient.