Хронология

Секция timeline выводит события в порядке строк repeater.

Где уместна

• История компании или продукта
• Этапы проекта
• Даты релизов

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

Параметр	Значение
key	timeline
Слой	Pro
Категория	контент (content)
Chunk	pagebuilderpro_timeline
Требования	pro

Поля

Поле	Тип	Обязательно	Назначение
title	text	нет	Заголовок секции
items	repeater	да	События
items.date	text	да	Дата
items.title	text	да	Заголовок события
items.text	textarea	нет	Текст

Рендер

Chunk собирает <ol class="pb-timeline__list">. Пустой items оставляет пустой список. Отдельной фразы нет. Дата и заголовок обязательны. Текст строки выводится только если заполнен.

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

{
  "title": "История",
  "items": [
    { "date": "2019", "title": "Старт", "text": "Первый офис" }
  ]
}

Шаблон chunk

Fenom chunk pagebuilderpro_timeline:

<section class="pb-section pb-section--timeline pb-timeline{if $cssClass} {$cssClass|escape}{/if}" data-pb-section="timeline"{if $id} id="pb-{$id|escape}"{/if}>
  <div class="pb-section__inner">
    {if $title}<h2 class="pb-heading">{$title|escape}</h2>{/if}
    <ol class="pb-timeline__list">
      {foreach $items as $item}
        <li>
          <p class="pb-timeline__date">{$item.date|escape}</p>
          <h3>{$item.title|escape}</h3>
          {if $item.text}<p>{$item.text|escape}</p>{/if}
        </li>
      {/foreach}
    </ol>
  </div>
</section>

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

• Как это работает для шагов без дат
• Кейс для одной истории

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

• Каталог секций