Page Builder

Build landing pages by stacking blocks—pre-made sections like Heroes, Portfolios, and Contact Forms. No coding required.

Build stunning landing pages without writing code. Stack pre-made blocks—modular sections like Hero banners, Portfolios, and Contact forms—to compose dynamic pages in minutes.

How It Works

A Landing Page (like your homepage) is defined in content/_index.md. It contains a list of sections, where each section uses a specific block (design).

# content/_index.md
---
title: Home
type: landing

sections:
  - block: markdown     # <--- A Block
    content:
      title: Welcome
      text: Hello World!
  - block: collection   # <--- Another Block
    content:
      title: Latest Posts
---

Adding Sections

To add a section, open content/_index.md and append a new entry to the sections list.

Browse the Block Library to find available blocks and their options.

Want to create your own blocks? See the Block Development guide for building custom Go HTML or Preact blocks with co-located CSS.

Example: Hero Section

- block: markdown
  id: hero
  content:
    title: Hi, I'm George
    subtitle: I build open source software.
    text: Welcome to my portfolio.
  design:
    background:
      image:
        filename: bg.jpg
        filters:
          brightness: 0.5

Customizing Blocks

Every block supports common design parameters for backgrounds, spacing, and styling.

Backgrounds

Use a photo from assets/media/. Control parallax, sizing, positioning, and visual filters.

design:
  background:
    image:
      filename: background.jpg
      parallax: true
      size: cover        # cover | contain | 32px | etc.
      position: center   # center | top | repeat
      filters:
        brightness: 0.6
        blur: 2px
        contrast: 1.2
        saturate: 0.8
        grayscale: 1
    text_color_light: true  # White text over dark images

Use a solid color, with optional light/dark mode variants.

design:
  background:
    color: 'navy'
    text_color_light: true

Or specify separate colors for light and dark mode:

design:
  background:
    color:
      light: '#f0f0f0'
      dark: '#1a1a2e'

Create a gradient effect.

design:
  background:
    gradient:
      start: '#4bb4e3'
      end: '#2b94c3'
      direction: 135

Set a video background from assets/media/.

design:
  background:
    video:
      filename: bg-video.mp4
      flip: false

Spacing & Style

Control padding, custom CSS classes, and inline styles.

design:
  spacing:
    # Top, Right, Bottom, Left
    padding: ['20px', '0', '20px', '0']
  css_class: 'my-custom-class'
  css_style: 'min-height: 80vh;'

Clip Path

Use CSS clip-path to create angled or shaped section edges.

design:
  clip_path: 'polygon(0 0, 100% 5%, 100% 100%, 0 100%)'

Background CSS Class

Apply custom CSS classes directly to the background layer (useful for Tailwind utilities like opacity or blend modes).

design:
  background:
    css_class: 'opacity-50'

Views

Collection blocks (like Blog or Portfolio) let you choose how to display items.

Showcase

Large featured images with side-by-side text. view: showcase

Card

Standard grid of cards with images. view: card

Compact

Minimal list with small thumbnails. view: compact

Masonry

Pinterest-style layout for portfolios. view: masonry

Icons

Use icons throughout blocks, buttons, and menus with the pack/icon-name syntax:

icon: brands/github
icon: hero/sparkles
icon: academicons/google-scholar

If you omit the pack prefix, HugoBlox defaults to Hero icons. See the Icon Reference for all available packs, custom SVG icons, and examples.