docs.modx.pro
  1. Компоненты
  2. PageBuilder
  3. Каталог секций
  4. Free
  5. Первый экран (Hero)

Первый экран (Hero) ​

Первый блок после шапки сайта. Посетитель сразу видит заголовок, короткий текст и кнопку с ссылкой. Фоновую картинку можно включить или оставить однотонный фон.

Зачем нужен первый экран ​

  • Редактор меняет заголовок, текст и кнопку без правки Fenom
  • Фон и выравнивание задаются полями, не CSS в шаблоне
  • Chunk pagebuilder_hero уже размечен под типичный первый экран

Куда ставить ​

  • На главной: оффер компании или магазина и основной переход (в каталог, на акцию)
  • На лендинге услуги, курса или мероприятия
  • На промо-странице с одним призывом: записаться, скачать, оформить заявку

Примеры страниц ​

Минимум для вывода ​

Поле Заголовок обязательно. Кнопка выводится только если заполнены и Текст кнопки, и URL кнопки. Выравнивание переключает текст слева или по центру.

Похожие секции ​

  • CTA, если не нужен блок на всю ширину с фоном
  • Промо-баннер для акции в каталоге (Pro, miniShop3)

Параметры блока ​

ПараметрЗначение
keyhero
СлойFree
Категориягерой (hero)
Chunkpagebuilder_hero
Требования—

Поля в редакторе ​

Заполните поля в инспекторе секции на ресурсе. Описание типов полей: справочник типов.

Заголовок (title) ​

Тип text. Обязательное.

Описание (description) ​

Тип textarea. Необязательное.

Текст кнопки (button_label) ​

Тип text. Необязательное.

URL кнопки (button_url) ​

Тип url. Необязательное.

Фон (background) ​

Тип image. Необязательное.

Выравнивание (alignment) ​

Тип select. Необязательное. Выпадающий список с заранее заданными вариантами.

Что видит посетитель ​

На сайте блок pb-hero с заголовком, описанием, ссылкой-кнопкой (pb-button) и опциональным фоном через partial изображения.

Данные секции ​

Пример JSON после сохранения секции. Для media, video и map значения на выводе могут быть обогащены:

json
{
  "title": "Заголовок секции",
  "description": "Короткое описание блока для первого экрана.",
  "button_label": "Подробнее",
  "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 ​

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-определение ​

core/components/pagebuilder/sections/hero.json

Связанные страницы ​