How to style a block: border, background, padding, shadow

← Back

Hover over a block and click the gear icon — a styles window opens with the tabs “Border”, “Block”, “Text”, “Links”, “Animation”, “Positioning”.

The gear icon appears when you hover over a block — the header, footer, content area, form columns, cards. It opens the styles window.

What's where:

  • “Border” — position (all sides or a specific one), color, thickness, corner rounding.
  • “Block” — background color and hover color, gradient (“Use background gradient”: type, angle, two colors), shadow (“Offset X/Y”, “Blur”, “Spread”, “Shadow color”, “Inset”), padding, background image.
  • “Text” — font, size, color.
  • “Links” — link color inside the block, separate from regular text.
  • “Animation” — appearance and continuous motion.
  • “Positioning” — width and height (including min and max), text and block alignment, visibility.

The main toggle is “Apply only to this block”. Without the checkbox, the setting applies to all blocks of this type across the site: set a border on the content area — it will appear on every page. With the checkbox — only on this block of this page.

If it didn't work

  • The wrong block got styled. Blocks are nested inside each other: hover more precisely, the gear icon appears on the block the cursor is over.
  • Changed it on one page — it changed everywhere. The “Apply only to this block” checkbox wasn't checked. Revert the value and repeat with the checkbox.
  • Text alignment doesn't work. Check whether block alignment is also set on the same block — they conflict with each other.
Did the article help?

See also