Что такое Divi Visual Builder?
Divi Builder — «посторитель» или конструктор страниц, с помощью которого можно быстро собрать страницу из готовых модулей. От «захода» конструктор встроен в тему Divi и Extra. Существует в виде отдельного плагина и может подключаться к любой теме Вордпресс.
Divi Builder может использоваться в двух режимах: стандартный «Back-end Builder» и front-end «Visual Builder». Оба интерфейса позволяют создавать точно такие же типы сайтов с одинаковыми элементами контента и настройками дизайна. Единственное отличие — способ построения страниц.
Back-end Builder «живет» внутри панели инструментов WordPress, в нем можно получить доступ со всеми другим стандартным настройками WordPress. Back-end Builder находится внутри пользовательского интерфейса WordPress и заменяет стандартный редактор WordPress. Этот способ отлично подходит для быстрых изменений, когда вы находитесь в панели администрирования сайта. Недостаток при таком способе — на экране не видно сразу результаты своей работы.
Visual Builder лишен этого недостатка. Далее описание будет фокусироваться только на Visual Builder.
Как включить Visual Builder?
Если вы используете классический редактор
Если вы используете классический редактор в качестве основного в WordPress — то для начала использования Divi Builder нажмите большую синюю кнопку «Использовать Divi Builder» в режиме редактирования страницы
Страница перейдет в режим Back-end Builder, где можно выстраивить изнутри разметку страницы, устанавливать модули и настраивать их.
Для начала использования визуального построителя Visual Builder нажмите большую синюю кнопку
Если вы используете редактор Гуттенберг
Если вы используете редактор Гутенберг в качестве основного редактора WordPress — то для начала использования Divi Builder нажмите большую синюю кнопку «Используйте Divi Builder» при редактировании или создании страницы
Включение Visual Builder в режиме просмотра страницы
Если вы находитесь в режиме просмотра страницы — то включить визуальный конструктор можно кнопкой в верхней панели (если панель включена и показывается на экране)
После этого страница переходит в режим визуального построения — на странице появляються всплывающие модули с настройками элементов страницы
Основы Visual Builder
Visual Builder основан на сеточной разметке: вы не сможете перетаскивать элементы в любое место, а будете ограничены установленной сеткой.
Конструктор использует три основных «строительных блока»: разделы (секции), строки и модули. Страница состоит из разделов, каждый раздел содержит строки, строки разбиваются на колонки (столбцы), а в колонки вставляются элементы дизайна (модули):
Разделы (они же секции). Основными и крупнейшими «строительными блоками», используемыми при создании страниц с Divi, являются разделы (секции). Они используются для создания больших групп контента, и это первое, что вы добавляете на свою страницу.
Существует три типа разделов: «Обычные», «Специальные» и «Полная ширина». Обычный раздел состоят из строк столбцов, а секции полной ширины состоят из модулей полной ширины, которые расширяют контент на всю ширину экрана. Специальные разделы позволяют использовать более совершенные компоновки боковых панелей.
Строки. Строки располагаются внутри разделов, и вы можете разместить любое количество строк внутри раздела. Строки разбиваются на столбцы (колонки). Существует много разных спостобов разметки столбцов.
После того, как вы определите структуру столбцов для своей строки, вы можете разместить модули в нужном столбце. Нет ограничений на количество модулей, которые вы можете разместить в столбце.
Модули. Модули — это элементы контента, которые составляют ваш сайт (текст, изображение, видео, и другие). Каждый модуль, который имеет Divi, может вписываться в любую ширину столбца,.
Создание страницы
Для создания страницы используется три основных строительных блока: разделы, строки и модули. Сперва добавляем на страницу раздел (секцию).
Разделы можно добавить, нажав синюю кнопку (+). Когда вы наведете над разделом, который уже существует на странице, под ним появится синяя (+) кнопка. Когда вы нажмете, новый раздел будет добавлен ниже раздела, в котором вы сейчас находитесь.
Если вы начинаете новую страницу, ваш первый раздел будет добавлен автоматически.
После того, как вы добавили раздел, можно начать добавлять в него строки столбцов. Раздел может содержать любое количество строк, и вы можете смешивать и сопоставлять строки разных типов столбцов для создания различных макетов.
Чтобы добавить строку, нажмите зеленую (+) кнопку внутри любой пустой части или щелкните зеленую (+) кнопку, которая появляется при наведении курсора на любую текущую строку, чтобы добавить новую строку под ней.
После того, как вы нажмете зеленую кнопку (+), вы получите приветствие со списком структуры столбцов. Выберите нужную структуру, а затем вы сможете добавить в солбцы модули.
Модули могут быть добавлены внутри строк, и каждая строка может содержать любое количество модулей. Модули — это элементы контента вашей страницы. Divi содержит более 40 различных элементов, которые можно использовать для создания страницы. Вы можете использовать базовые модули, такие как текст, изображения и кнопки, или более продвинутые модули, такие как слайдеры, галереи портфолио и магазины электронной коммерции.
Чтобы добавить модуль, нажмите серую кнопку (+), которая существует внутри любого пустого столбца, или нажмите серую кнопку (+), которая существует при наведении курсора на модуль на странице, чтобы добавить новый модуль под ним.
После того, как вы нажмете кнопку, во всплывающем окне появится список модулей. Выберите нужный модуль, и он будет добавлен на вашу страницу. Для модуля появится панель настроек модуля. Используя эту панель настроек, вы можете начать настройку своего модуля.
Настройка разделов, строк и модулей
Каждый раздел, строка или модуль могут быть настроены различными способами. Вы можете получить доступ к панели настроек элемента, щелкнув значок шестеренки, который существует при наведении курсора на любой элемент на странице.
Каждая панель настроек разбита на три вкладки: «Контент», «Дизайн» и «Расширенный». Каждая вкладка предназначена для быстрого и легкого доступа к большому разнообразию настроек Divi и настройки.
На вкладке «Контент» можете добавлять такие материалы, как изображения, видео, ссылки и метки администратора.
На вкладке «Дизайн» размещены все встроенные параметры дизайна для каждого элемента. В зависимости от того, что вы редактируете, вы можете управлять множеством параметров дизайна одним щелчком; в том числе: шрифтами, интервалами, размерами, стилями кнопок и многое другое.
Наконец, если вы хотите еще больше контроля — то можете перейти на вкладку «Расширенный», где можно применить собственный CSS, настроить видимость на устройствах и установить другие параметры сделав еще более точную настройку модуля.
Сохранение страницы и доступ к настройкам страницы
Чтобы получить доступ к общим настройкам страницы, щелкните фиолетовый значок внизу экрана.
Это расширит панель настроек и предоставит вам различные варианты. Вы можете открыть настройки страницы, щелкнув значок шестеренки. Здесь можете настроить такие параметры, как цвет фона страницы и цвет текста.
Вы также найдете кнопки «Сохранить» и «Опубликовать», а также пользовательские переключатели предварительного просмотра.
Совет. Начните свой дизайн с заранее подготовленных макетов
Хороший способ начать создавать новую страницу — использовать за основу страницы заранее подготовленный макет страницы. Divi поставляется с более чем 600 готовых макетов страниц из более 80 прототипов сайтов,
Вы можете выбрать и загрузить макет страницы, а затем поменять демонстрационный контент на ваш собственный.
Сохранение собственных макетов в библиотеку
В дополнение к использованию готовых макетов, которые поставляются с Divi, вы также можете сохранить свои собственные творения в Divi Library. Когда проект сохраняется в виде Divi Layout в Divi Library, его можно загрузить на новые страницы для повторного использования.
Чтобы сохранить элемент в библиотеку, щелкните значок библиотеки, который существует при наведении курсора на любой элемент и на панели параметров страницы.
Когда элемент добавлен в библиотеку, он появится на вкладке «Добавить из библиотеки» при добавлении новых макетов, разделов, строк и модулей Divi.
Заключение
Теперь у вас есть основы работы с Visual Builder. вы добавили свои разделы, строки и модули на страницу, скорректировали настройки и начали настраивать свой дизайн.
Удачной работы.
