docs.modx.pro

Русский

English

Русский

English

Тема

PageBuilder
Визуальный конструктор секций для MODX 3: черновик и публикация без перезаписи content ресурса
Dependencies
  1. Компоненты
  2. PageBuilder
  3. Каталог секций
  4. Free
  5. Цифры и факты

Цифры и факты ​

Несколько показателей в одну линию или сетку: «10 лет на рынке», «500+ клиентов». Цифра крупно, пояснение мелким текстом.

Зачем выводить цифры ​

  • Цифры читаются с первого взгляда, без таблицы
  • KPI обновляет контент-менеджер, не верстальщик
  • Пара value/label предсказуема в Fenom

Типичные места ​

  • На главной: ключевые KPI компании
  • На B2B-лендинге: масштаб, география, SLA
  • На странице «О нас»: факты вместо длинного текста

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

Repeater показателей ​

Repeater Показатели: Значение и Подпись в каждой строке. Обычно 3–4 пункта, не перегружайте.

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

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

ПараметрЗначение
keystats
СлойFree
Категориядоверие (social)
Chunkpagebuilder_stats
Требования—

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

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

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

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

Показатели (items) ​

Тип repeater. Обязательное. Повторяющиеся строки. Кнопка «Добавить» в инспекторе.

В каждой строке:

ПолеТипПодписьОбязательно
valuetextЗначениеда
labeltextПодписьда

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

Сетка pb-stats с парами value / label.

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

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

json
{
  "title": "Заголовок секции",
  "items": [
    {
      "_rowId": "00000000-0000-4000-8000-000000000001",
      "value": "1200+",
      "label": "Довольных клиентов"
    }
  ]
}

Шаблон chunk ​

Fenom chunk pagebuilder_stats:

fenom
<section class="pb-section pb-section--stats pb-stats{if $cssClass} {$cssClass|escape}{/if}" data-pb-section="stats"{if $id} id="pb-{$id|escape}"{/if}>
  <div class="pb-section__inner pb-stats__inner">
    {if $title}
      <h2 class="pb-heading pb-stats__title">{$title|escape}</h2>
    {/if}
    <div class="pb-stats__grid">
      {foreach $items as $item}
        <div class="pb-stats__item">
          <div class="pb-stats__value">{$item.value|escape}</div>
          <div class="pb-stats__label">{$item.label|escape}</div>
        </div>
      {/foreach}
    </div>
  </div>
</section>

JSON-определение ​

core/components/pagebuilder/sections/stats.json

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