Страница :: Оглавление с картинками

от автора

в

Пример блока:

Как добавить блок на страницу

  1. Создаем новую страницу/запись или редактируем существующую.
  2. В самом верху страницы добавляем Gutenberg блок Nav:
Gutenberg блок Nav

3. Для блока nav добавляем класс toc. Благодаря этому классу блок изменит внешний вид как в редакторе страницы, так и во фронтэнде.

Добавление класса для Gutenberg блока

4. Внутрь этого блока добавляем карточки навигации по страницы. Для вставки карточки выбираем Gutenberg блок «TOC item«

Вставка Gutenberg блока TOC item

5. Заполняем поля у блока TOC item:

  • Number — цифра на карточке навигации.
  • Title — заголовок карточки
  • Link — ссылка на раздел страницы. Вводим в таком виде: #one
  • Image — картинка для карточки. Рекомендуемый размер: 230x166px
  • Text color — цвет текста на карточке
  • Background color — фоновый цвет карточки. Должен совпадать с фоном изображения!
Заполняем поля у блока TOC item

6. Внутрь блока Nav добавляем еще несколько блоков навигации TOC item

Связываем пункты навигации с разделами страницы.

На странице размещаем Gutenberg блоки Chapter block:

В настройках блока заполняем поле Anchor ID. Если в блоке навигации мы указывали Link со значением #one, то в Anchor ID указываем значение one (без решетки):

Настройка Gutenberg блока Chapter block

В результате мы связали пункт навигации с разделом страницы. Теперь при клике на первый пункт навигации страница проскроллица до нужного раздела:

Навигация по странице WordPress сайта

Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *