Formatting Rows & Blocks

This guide explains how to fine-tune the appearance of your layouts. It helps beginners understand the difference between formatting a Row (the horizontal section) and a Block (the individual piece of content). You’ll learn how to create "breathing room" with margins and padding, ensuring your website looks balanced and professional rather than cluttered.

Row Formatting: The Big Picture

Formatting a row affects the entire horizontal slice of your page. In Umbraco 17+, you can typically adjust:

  • Width: Choose between "Contained" (keeps content in a central column) or "Full Width" (stretches content to the screen edges).

  • Vertical Alignment: Decide if the blocks inside should sit at the top, middle, or bottom of the row.

  • Spacing: Add "Padding" to the top and bottom so your sections don't bump into each other.

Block Formatting: The Details

Once your row is set, you can format individual blocks within it. This is where you get granular. For a specific block, you might:

  • Text Alignment: Center a heading or left-align a paragraph.

  • Custom Animation: Set an "Entrance Effect" so the block fades in as the user scrolls.

  • Visibility: Choose to hide a specific block on mobile devices while keeping it visible on desktops.

Watch: Formatting and Spacing in the Umbraco 17 Block Grid

Blank placeholder image

This video walks through the 'Settings' icon on rows and blocks, showing how to adjust padding and alignment in real-time.

Other Related Tutorials

Action Steps to Format Your Grid

  1. Select the Cog Icon: Hover over a Row or a Block and click the Settings (cog) icon. A sidebar will slide out.

  2. Adjust Spacing: Look for "Padding" or "Margin" sliders. Increase the "Bottom Padding" to create space before the next section.

  3. Set Alignment: Use the alignment toggles to center your content or justify it.

  4. Apply Custom Classes: If your developer has provided specific styles (e.g., shadow-effect), type the name into the Custom Class field.

  5. Submit and Publish: Click Submit in the sidebar, then Save and Publish the page to see the results.

 

Pro-Tip: Always check your formatting on mobile! A large "Top Padding" that looks great on a 27-inch monitor might create a massive, awkward gap on an iPhone. Use the Preview tool to toggle between device views.

Where Next?

Now that your rows and blocks are perfectly formatted, why recreate the wheel? Your next step is to explore "Save as Template"—the fastest way to turn your bespoke designs into reusable blueprints for future pages.