Ранее я уже описывал почему тема Divi популярная для создания сайтов на WordPress. Разработчики идут дальше и 17 октябра 2019 года компания выпустила очередное обновление для WordPress: тема Divi и конструктор Divi Builder. Теперь уже версии 4.
До версии 4 конструктор Divi Builder позволял строить страницы сайтов, записи и пользователские типы контента. Например: карточки товаров магазина или описание проектов. Причем можно было редактировать и оформлять только контент (содержание страницы).
Начиная с Divi 4 в тему добавилась опция Theme Builder: конструктор макетов сайта.
В этой статье кратко рассмотрены особенности Divi Theme Builder и приведен пример как создать с его помощью пользовательский заголовок (хедер) сайта.
Введение в Divi Theme Builder
Как я написал выше, начиная с версии 4 в Divi добавилась опция Theme Builder: конструктор полноценныех макетов сайта.
Теперь с помощью Divi Theme Builder можно создать все части страницы сайта: верхний колонтитул страницы (хедер), контент и нижний колонтитул (футер).
Эти три области могут быть построены и настроены с использованием Divi Builder и его набора модулей вместе с динамическим контентом.
Особенность 1: Нет ограничений в построении сайта
Каждый макет Theme Builder состоит из пользовательского контента (тело), верхнего колонтитула (заголовок) и нижнего колонтитула (подвал сайта). Эти три области могут быть построены и настроены с использованием Divi Builder и его набора модулей вместе с динамическим контентом.
Когда вы создаете новый макет Theme Builder, то созданный вами индивидуальный дизайн может быть назначен для определенных частей сайта.
Например, вы можете создать макет, назначенный постам в блоге и указать применять этот макет для вcего блога. После того, как макет назначен, каждый пост в блоге будет отображаться в соответствии с макетом.
Вы можете создать новый макет Theme Builder и назначить его страницам любой категории или создать глобальный шаблон веб-сайта, который обновит все верхние и нижние колонтитулы страниц.
С Theme Builder появляется множество новых возможностей.
Особенность 2: Подробная настройка макета сайта
Макеты Theme Builder можно использовать для настройки любой отдельной части сайта, назначая или исключая каждый макет из разных мест. Использование назначений и исключений дает вам точный контроль над дизайном сайта.
Вы можете настроить индивидуально большие области веб-сайта, такие как определенные групы постов и их категории. Или настроить только определенные места, такие как отдельные посты, страницы и/или категории.
Каждая страница может иметь свой собственный заголовок, нижний колонтитул и макет тела (содержание).
Особенность 3: Импорт и экспорт шаблонов в Theme Builder
Макеты Theme Builder можно импортировать и экспортировать. В файлы экспорта включаются макеты верхнего и нижнего колонтитулов и основного контента (тела).
Файлы экспорта Theme Builder — это, по сути, некие «пакеты веб-сайтов». Можно сказать так, что это подобие Divi Layout Pack за исключением структуры сайта. Это готовые сайты, а не только отдельные дизайны контента страниц.
Пакеты Theme Builder устраняют необходимость в дочерних темах и позволяют создавать предварительно созданные макеты тем, которые можно использовать на любом веб-сайте.
Пример: Создаем заголовок сайта с помощью Divi Theme Builder
Рассмотрим на примере как создать пользовательский заголовок для всего сайта с помощью Divi Theme Builder.
Доступ к Divi Theme Builder можно получить на бэкенде в панели управления WordPress в меню Divi 4.
На информационной панели WordPress перейдите в раздел «Divi» > «Theme Builder».
В Theme Builder существует один элемент макета, называемый шаблоном веб-сайта «по умолчанию». Этот макет нельзя удалить, но его можно изменить.
Это стандартный макет темы, и если оставить его без редактирования, то эти три области будут использовать стандартные стили Divi.
Но если, к примеру, заголовок в области макета «по умолчанию» редактируется — то заголовок темы заменяется на всем сайте отредактированным содержимым. То же самое касается областей Body и Footer.
Макет веб-сайта «по умолчанию» состоит из трех областей: глобальный заголовок (Global Header), глобальный контент ( Global Body) и глобальный нижний колонтитул ( Global Footer).
Чтобы начать процесс создания нового содержимого шаблона, все, что вам нужно сделать, это нажать на одну из соответствующих пустых областей.
Если вы хотите добавить и создать новый глобальный заголовок для веб-сайта, щелкните область «Добавить глобальный заголовок», а затем выберите параметр «Создать глобальный заголовок».
Как и при проектировании страницы в Divi, вам предлагается выбрать способ создания макета заголовка. Например, вы можете подобрать дизайн с предварительно созданным макетом или ранее созданным макетом заголовка, выбрав опцию «Выбрать готовый макет». Однако, если вы хотите создать заголовок с нуля, выберите «Build From Scratch».
После того, как вы выбрали создание макета с нуля, вы попадете в редактор макетов. Здесь вы будете использовать Divi Builder для разработки макета заголовка так, как если бы вы создавали обычную страницу или публикацию в Divi Builder.
Помните, что все, что вы видите в этом редакторе макета, будет отображаться в заголовке вашей страницы.
И если это глобальный заголовок, он будет отображаться по всему вашему сайту по умолчанию, заменяя стандартный заголовок Divi.
После того, как вы закончили разработку заголовка, обязательно сохраните макет перед выходом из редактора шаблона.
После сохранения макета вы должны увидеть зеленый глобальный заголовок, заполняющий пространство глобального заголовка макета веб-сайта «по умолчанию». Зеленый цвет должен напоминать вам, что он глобальный.
Сохраните изменения макета, нажав кнопку «»Save Changes».
Теперь веб-сайт будет иметь новый глобальный заголовок, который заменяет стандартный заголовок Divi.
Таким же путем создаются и редактируются другие части веб сайта.
Удачи.
Александр Коваль
