Страница :: Оглавление с картинками
Aleksey Petrenko
Опубликовано:
Пример блока:
Как добавить блок на страницу
- Создаем новую страницу/запись или редактируем существующую.
- В самом верху страницы добавляем Gutenberg блок Nav:
3. Для блока nav добавляем класс toc. Благодаря этому классу блок изменит внешний вид как в редакторе страницы, так и во фронтэнде.
4. Внутрь этого блока добавляем карточки навигации по страницы. Для вставки карточки выбираем Gutenberg блок «TOC item«
5. Заполняем поля у блока TOC item:
- Number — цифра на карточке навигации.
- Title — заголовок карточки
- Link — ссылка на раздел страницы. Вводим в таком виде: #one
- Image — картинка для карточки. Рекомендуемый размер: 230x166px
- Text color — цвет текста на карточке
- Background color — фоновый цвет карточки. Должен совпадать с фоном изображения!
6. Внутрь блока Nav добавляем еще несколько блоков навигации TOC item
Связываем пункты навигации с разделами страницы.
На странице размещаем Gutenberg блоки Chapter block:
В настройках блока заполняем поле Anchor ID. Если в блоке навигации мы указывали Link со значением #one, то в Anchor ID указываем значение one (без решетки):
В результате мы связали пункт навигации с разделом страницы. Теперь при клике на первый пункт навигации страница проскроллица до нужного раздела:
