«Мейн», сайдбар, область заголовка

Основной блок макета («Мейн») включает в себя весь контент, который находится между верхним и нижним колонтитулами страницы. Основной блок макета представлен тегом <main></main> в коде страницы.

При создании домашней страницы создание основного блока макета, как правило, не требуется: содержимое страницы не имеет никаких дополнительных элементов между шапкой и подвалом. Вы можете использовать шаблон по умолчанию.

Но в случае записей блога или портфолио необходимы дополнительные общие элементы, кроме шапки и подвала (например, сайдбар, панель заголовка, хлебные крошки). В таком случае требуется создание кастомного «Мейна».

Как создать кастомный «Мейн»

Перед созданием кастомного «Мейна» включите WPBakery Page Builder для типа записи template_post
Как включить конструктор страниц для пользовательских типов записей

Вы можете импортировать готовые блоки из демо данных или создать их самостоятельно.

  1. Перейдите в раздел KSF SmartKit > Блоки контента в сайдбаре административной панели WordPress и нажмите Добавить новый блок контента.
  2. Введите название блока (например, «Blog article layout»).
  3. Добавьте содержимое блока, используя WPBakery Page Builder (узнать об использовании конструктора страниц можно здесь).
    Как правило, кроме непосредственно контента страницы (или записи), основной блок макета содержит заголовок страницы, «хлебные крошки» и сайдбар.
  4. Нажмите кнопку Опубликовать.

Создание рядов и колонок в «Мейне»

Добавление секции блока заголовка страницы

  1. Нажмите кнопку Добавить элемент в редакторе WPBakery Page Builder.
  2. Найдите компонент Секция во всплывающем окне и нажмите, чтобы его добавить. После добавления Секции, Ряд добавится автоматически.
  3. Нажмите на иконку Карандаш в правом верхнем углу элемента Ряда или в правом верхнем углу элемента Секции, чтобы открыть окно настроек этих компонентов.

Добавление секции с сайдбаром

  1. Создайте вторую секцию тем же способом.
  2. Выберите количество колонок в ряду, нажав на иконку Три горизонтальные линии в левом верхнем углу элемента Ряда. Обычно ширина сайдбара выбирается 20%, 1/4 или 1/3. Сайдбар может располагаться слева или справа.
  3. Задайте зазор между колонками на вкладке Колонки в окне настроек ряда. Обычно это значение Большой или кастомное значение.
  4. Нажмите на кнопку + в колонке, где будет располагаться контент поста.
  5. Найдите компонент Контент поста во всплывающем окне и нажмите, чтобы его добавить.
  6. Для того, чтобы настроить адаптивность сайдбара, нажмите на кнопку в виде Карандаша вверху колонки.
  7. Нажмите на кнопку Сохранить изменения.
doc-main-layout-template

Добавление заголовка страницы/записи

  1. Нажмите на кнопку + в колонке, где вы хотите добавить заголовок.
  2. Найдите компонент Заголовок во всплывающем окне и нажмите, чтобы его добавить.
  3. Выберите H1 в выпадающем списке Тег элемента и Заголовок пост/страницы, архивной страницы, поиска или 404 в выпадающем списке Источник текста.
  4. Задайте остальные параметры в окне настроек и сохраните изменения.

Добавление навигации «Хлебные крошки»

Вы можете добавить в макет навигацию «Хлебные крошки» для повышения удобства.

  1. Нажмите на кнопку + в колонке, в которую вы хотите добавить навигацию.
  2. Найдите компонент Хлебные крошки во всплывающем окне и нажмите, чтобы его добавить.
  3. Задайте остальные параметры в окне настроек и сохраните изменения.

Добавление навигации в сайдбар

Создайте меню в WordPress, используя раздел Внешний вид > Меню в административной панели WordPress.
Укажите название для вашего меню, например, «Sidebar navigation», а затем нажмите на кнопку Создать меню.
Меню в SmartKit создаются так же, как в любых других темах WordPress.

  1. Нажмите на кнопку + в колонке, в которую вы хотите добавить меню.
  2. Найдите компонент Вертикальное меню во всплывающем окне добавления компонентов. Кликните по нему, чтобы добавить компонент в сайдбар.
  3. Выберите «Sidebar navigation» из списка меню и задайте другие параметры в окне настроек компонента.
  4. Нажмите кнопку Сохранить изменения.

Как использовать кастомный «Мейн» на страницах сайта

Для того, чтобы узнать, как применить «Мейн» к страницам сайта, перейдите в раздел Настройки макета.

Назад к документации
Начало работы
Установка и обновления
Настройки темы
Создание сайта
Общие вопросы