Ранее я уже описывал почему тема 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 и его набора модулей вместе с динамическим контентом.

divi theme builder 40
Другими словами: Divi Theme Builder позволяет структурировать веб-сайт и редактировать любую часть этой структуры: верхние и нижние колонтитулы (хедер и футер), макет 404 страницы, макеты страниц категорий и многое другое.

Особенность 1: Нет ограничений в построении сайта

Каждый макет Theme Builder состоит из пользовательского контента (тело), верхнего колонтитула (заголовок) и нижнего колонтитула (подвал сайта). Эти три области могут быть построены и настроены с использованием Divi Builder и его набора модулей вместе с динамическим контентом.

Когда вы создаете новый макет Theme Builder, то созданный вами индивидуальный дизайн может быть назначен для определенных частей сайта.

Например, вы можете создать макет, назначенный постам в блоге и указать применять этот макет для вcего блога.    После того, как макет назначен,  каждый пост в блоге будет отображаться в соответствии с макетом.

divi4 blog posts

Вы можете создать новый макет Theme Builder и назначить его страницам любой категории или создать глобальный шаблон веб-сайта, который обновит все верхние и нижние колонтитулы страниц.

С Theme Builder появляется множество новых возможностей.

create sire with divi

Особенность 2: Подробная настройка макета сайта

Макеты Theme Builder можно использовать для настройки любой отдельной части сайта, назначая или исключая каждый макет из разных мест. Использование назначений и исключений дает вам точный контроль над дизайном сайта.

Вы можете настроить индивидуально большие области веб-сайта, такие как определенные групы постов и их категории. Или настроить только определенные места, такие как отдельные посты, страницы и/или категории.

Каждая страница может иметь свой собственный заголовок, нижний колонтитул и макет тела (содержание).

divi4 template areas fe

Особенность 3: Импорт и экспорт шаблонов в Theme Builder

Макеты Theme Builder можно импортировать и экспортировать. В файлы экспорта включаются макеты верхнего и нижнего колонтитулов и основного контента (тела).

Файлы экспорта Theme Builder — это, по сути,  некие «пакеты веб-сайтов». Можно сказать так, что это подобие  Divi Layout Pack  за исключением структуры сайта.   Это готовые сайты, а не только отдельные дизайны контента страниц.

Пакеты Theme Builder устраняют необходимость в дочерних темах и позволяют создавать предварительно созданные макеты тем, которые можно использовать на любом веб-сайте.

divi4 portability
к оглавлению ↑

Пример: Создаем заголовок сайта с помощью Divi Theme Builder

Рассмотрим на примере как создать пользовательский заголовок для всего сайта с помощью Divi Theme Builder.

Доступ к Divi Theme Builder можно получить на бэкенде в панели управления WordPress в меню Divi 4.
На информационной панели WordPress перейдите в раздел «Divi» > «Theme Builder».

theme builder doc 00

В Theme Builder существует один элемент макета, называемый шаблоном веб-сайта «по умолчанию».  Этот макет нельзя удалить, но его можно изменить.

Это стандартный макет темы, и если оставить его без редактирования,  то эти три области будут использовать стандартные стили Divi.

Но если,  к примеру, заголовок в  области макета «по умолчанию» редактируется — то заголовок темы заменяется на всем сайте отредактированным содержимым. То же самое касается областей Body и Footer.

Макет веб-сайта «по умолчанию» состоит из трех областей: глобальный заголовок (Global Header), глобальный контент ( Global Body) и глобальный нижний колонтитул ( Global Footer).

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

theme builder doc 10

Если вы хотите добавить и создать новый глобальный заголовок для веб-сайта, щелкните область «Добавить глобальный заголовок», а затем выберите параметр «Создать глобальный заголовок».

theme builder doc 05

Как и при проектировании страницы в Divi, вам предлагается выбрать способ создания макета заголовка.   Например, вы можете подобрать дизайн с предварительно созданным макетом или ранее созданным макетом заголовка, выбрав опцию «Выбрать готовый макет». Однако, если вы хотите создать заголовок с нуля, выберите «Build From Scratch».

theme builder doc 03

После того, как вы выбрали создание макета с нуля, вы попадете в редактор макетов. Здесь вы будете использовать Divi Builder для разработки макета заголовка так, как если бы вы создавали обычную страницу или публикацию в Divi Builder.

theme builder doc 04

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

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

После того, как вы закончили разработку заголовка, обязательно сохраните макет перед выходом из редактора шаблона.

theme builder doc 08

После сохранения макета вы должны увидеть зеленый глобальный заголовок, заполняющий пространство глобального заголовка макета веб-сайта «по умолчанию».   Зеленый цвет должен напоминать вам, что он глобальный.

Сохраните изменения макета, нажав кнопку «»Save Changes».

theme builder doc 07

Теперь веб-сайт будет иметь новый глобальный заголовок, который заменяет стандартный заголовок Divi.

theme builder doc 06

Таким же путем  создаются и редактируются другие части веб сайта.

Задавайте вопросы, пишите комментарии, делитесь статьей в социальных сетях

Удачи.
Александр Коваль

При подготовке записи использовал статью (англ)
Рисунок Банер Divi WordPress Theme
Рубрики: Создание сайта на WordPress Метки: Тема Extra, Документация Divi, Тема Divi и Divi Builder

Об авторе:

Александр Коваль

Александр Коваль

Предприниматель. IT-специалист. Создаю интернет-магазины, лендинги и другие сайты. Помогаю поддерживать их работу. Расширяю функционал и возможности сайтов на WordPress. Пишите если нужна помощь с сайтом или разработка "с нуля"

Share via
Send this to a friend