docs.modx.pro

Русский

English

Русский

English

Тема

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

Карточки ​

Универсальная сетка: в каждой карточке заголовок и короткий текст. Без иконок и кнопок. только структурированный список блоков.

Когда брать карточки ​

  • Универсальная сетка без иконок и цен
  • Подходит для услуг, этапов, коротких тезисов
  • Free-слой, не требует Pro

Сценарии ​

  • Для услуг: три–шесть направлений
  • Для этапов работы или roadmap
  • Для преимуществ в простом виде (без иконок Pro-секции Features)

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

Как заполнить repeater ​

Repeater Карточки: Заголовок и Текст на строку. Порядок перетаскиванием в инспекторе.

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

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

ПараметрЗначение
keycards
СлойFree
Категорияконтент (content)
Chunkpagebuilder_cards
Требования—

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

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

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

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

Карточки (items) ​

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

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

ПолеТипПодписьОбязательно
titletextЗаголовокда
texttextareaТекстнет

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

Сетка pb-cards с элементами title + text.

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

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

json
{
  "title": "Заголовок секции",
  "items": [
    {
      "_rowId": "00000000-0000-4000-8000-000000000001",
      "title": "Заголовок секции",
      "text": "Дополнительный текст под заголовком."
    }
  ]
}

Шаблон chunk ​

Fenom chunk pagebuilder_cards:

fenom
<section class="pb-section pb-section--cards pb-cards{if $cssClass} {$cssClass|escape}{/if}" data-pb-section="cards"{if $id} id="pb-{$id|escape}"{/if}>
  <div class="pb-section__inner pb-cards__inner">
    {if $title}
      <h2 class="pb-heading pb-cards__title">{$title|escape}</h2>
    {/if}
    <div class="pb-cards__grid pb-grid pb-grid--cards">
      {foreach $items as $item}
        <article class="pb-cards__item">
          <h3 class="pb-cards__item-title">{$item.title|escape}</h3>
          {if $item.text}
            <p class="pb-cards__item-text">{$item.text|escape}</p>
          {/if}
        </article>
      {/foreach}
    </div>
  </div>
</section>

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

core/components/pagebuilder/sections/cards.json

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