Building Hero Section

Learn how to build a hero section in Refoundry with layout blocks, buttons, background images, and spacing controls.

Last updated:

Description

In this tutorial, you’ll learn how to build a hero section using Refoundry’s layout blocks, headings, buttons, and background styling to create a balanced and polished section.

This tutorial will cover:

  • Adding a container, row, and column to start the section layout
  • Setting column width to control text placement
  • Adding headings, paragraph text, and buttons
  • Adjusting spacing using padding and margin
  • Adding a background image to the container
  • Controlling background image position and size
  • Applying border radius to the container
  • Adjusting section width using the remove max width option
  • Setting a custom container width for better layout balance

Suggested videos:

Background Images

Borders and Shadows

Column Sections

Related resources:

Image Backgrounds | Refoundry

Borders & Radius | Refoundry

Column Block | Refoundry

Spacing | Refoundry

Relate Resources

Keep exploring.

Explore more resources we’ve selected to help you dig deeper into topics that matter to your workflow.

Ready to take the next step?

Put your learning into action.

Whether you’re exploring on your own or want guided support, Refoundry makes it easy to start building smarter today.