docs.modx.pro

English

Русский

English

Русский

Appearance

  1. Extras
  2. PageBuilder
  3. Section catalog
  4. Free
  5. Hero

Hero ​

The first block below the site header. Visitors see a title, short text, and a linked button. Add a background image or keep a flat background.

Why you need a hero ​

  • Editors change title, text, and button without editing Fenom
  • Background and alignment come from inspector fields, not template CSS
  • Chunk pagebuilder_hero ships with pb-hero markup

Where to place ​

  • Homepage: main offer and primary action (catalog, promo)
  • Landing page for a service, course, or event
  • Promo page with a single call to action: sign up, download, request a quote

Page examples ​

Minimum for output ​

Title is required. The button renders only when both Button label and Button URL are set. Alignment switches text between left and center.

Similar sections ​

  • CTA for a compact block without full-width background
  • Promo banner for catalog promos (Pro, miniShop3)

Block parameters ​

ParameterValue
keyhero
LayerFree
Categoryhero (hero)
Chunkpagebuilder_hero
Requires—

Inspector fields ​

Fill these fields in the section inspector. Field types are documented in the field types reference.

Title (title) ​

Type text. Required.

Description (description) ​

Type textarea. Optional.

Button label (button_label) ​

Type text. Optional.

Button URL (button_url) ​

Type url. Optional.

Background (background) ​

Type image. Optional.

Alignment (alignment) ​

Type select. Optional. Dropdown with predefined options.

Site output ​

Renders pb-hero with title, description, CTA link (pb-button), and optional background via the image partial.

Section data ​

Example payload after save. Media, video, and map values may be enriched on output:

json
{
  "title": "Section title",
  "description": "Short block description for the first screen.",
  "button_label": "Learn more",
  "button_url": "https://example.com/action",
  "background": {
    "url": "assets/images/example.jpg",
    "id": 12,
    "filename": "example.jpg",
    "extension": "jpg",
    "title": "example.jpg",
    "width": 1920,
    "height": 1080,
    "type": "image"
  },
  "alignment": "left"
}

Chunk template ​

Fenom chunk pagebuilder_hero:

fenom
{var $heroBg = is_array($background) ? ($background.url ?: '') : ($background ?: '')}
<section class="pb-section pb-section--hero pb-hero{if $alignment == 'center'} pb-hero--center{/if}{if $cssClass} {$cssClass|escape}{/if}" data-pb-section="hero"{if $id} id="pb-{$id|escape}"{/if}{if $heroBg} style="--pb-hero-bg: url('{$heroBg|escape}')"{/if}>
  <div class="pb-section__inner pb-hero__inner">
    <h1 class="pb-hero__title">{$title|escape}</h1>
    {if $description}
      <div class="pb-hero__description">{$description|escape}</div>
    {/if}
    {if $button_label && $button_url}
      <a class="pb-hero__button pb-button" href="{$button_url|escape}">{$button_label|escape}</a>
    {/if}
  </div>
</section>

JSON definition ​

core/components/pagebuilder/sections/hero.json

See also ​