Блочный конструктор Divi Builder — как создать страницу сайта

Введение

Блочный конструктор Divi Builder упрощает создание страниц с контентом.

Однако плата за это — время и усилия, которое нужно потратить на освоение конструктора. Но награда за потраченное время —  приобретение навыков быстрого ввода контента с помощью Divi Builder.

В данной статье и видео приведены основы работы с блочным конструкторов Divi Builder.

Как включить конструктор Divi Builder и начать с ним работать

Рассмотрим как создавать страницу с помощью конструктора Divi Builder.

Когда вы создаете или редактируете страницу в классическом редакторе — для переключения в конструктор Divi Builder нужно нажать кнопку «Использовать Диви Билдер».

Если на вашем сайте классический редактор отключен  и по умолчанию используется редактор Гуттенберг — смотрите здесь как включить классический редактор.

1. Построить страницу с нуля, при этом сохраняться уже введенные данные на странице
2. Построить страницу с использованием готового макета из библиотеки разработчиков. В этом случае при загрузке макета можно указать сохранять существующие данные на странице или заменить их. Важное замечание — при отсутствии действующего ключа APІ загрузить макеты от разработчиков вы не сможете.
3. Сделать копию существующей страницы сайта

Далее рассмотрим построение страницы с нуля

Структура страниц в Divi Builder

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

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

Процедура конструирования страницы следующая:

Вставляем раздел: или стандартная секция,  или полно-экранная секция,  или специальная секция или секция из библиотеки.

Для секции создаем ряд, выбрав количество колонок.

В колонки размещаем элементы дизайна (модули).

Наполняем модули контентом и настраиваем модули.

Конструктор Divi Builder поставляется с 46 различными модулями — элементами для дизайна на странице: кнопка, счетчик, блог, подписка, слайдер, заголовок и другие элементы.

В одном разделе может быть несколько строк с разным количеством столбцов

Чтобы добавить строку в раздел — нажимаем зеленую кнопку и выбираем нужную структуру столбца. Далее заполняем колонки столбца модулями.

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

Меню элементов страницы конструктора

Каждый из объектов на странице будь то раздел, строка или модуль имеет свое меню вида :

Рассмотрим такое меню подробнее
— самое крайнее слева: перемещение объекта. Установите курсор на пункт меню, зажмите кнопку мыши и перетяните объект в другое место

— настройки объекта — открывает окно с опциями объекта. Для разных объектов свои опции.

— копирование объекта — нажмите на значок и получите копию объекта

— сохранение в собственную библиотеку: нажмите на значок и откроется окно для сохранения объекта в личную библиотеку

— удаление — нажатие на значок удалит текущий элемент. Чтобы восстановить элемент нажмите пункт меню конструктора «редактирование истории» и отмените сделанное действие.

Для строк еще добавлен пункт «Структура» для изменение количества и ширины столбцов в строке.

Общее меню констркутора Divi Builder

Рассмотрим пункты меню конструктора Divi Builder:
— «плюс» слева — загрузить макет из библиотеки. Нажатие на плюс откроет окно загрузки макета всей страницы.

Конструктор предлагает 3 варианта загрузки макета:
1) готовые предварительные шаблоны из библиотеки разработчиков Диви
2) сохранненный ранее макет из личной библиотеки
3) сделать клон существующей страницы

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

При отмеченной опции контент будет заменен, снимите галочку и контент с макета будет добавлен к существующему.

Следует отметить, что использование шаблонов из библиотеки разработчиков требует официального ключа API

Следующий пункт:
— сохранить макет в личную бибилиотеку: при нажатии пункта меню отроется окно для сохранения макета существующей страницы в личную библиотеку.

— импорт/экспорт макета страницы: при нажатии откроется окно экспорта макета в файл или окно загрузкт макета из файла. Это нужно для обмена макетами страниц между сайтами.

— редактирование истории создания макетов: здесь можете посмотреть историю изменений макета до сохранения страницы и вернуть сделанные ранее изменения. Отмечу, что при включенном метабоксе Редакции вы можете вернутся к версиям страницы, которые сохранены ранее.

— «очистка макета»  — нажатие этой кнопки очистит контент на странице

— настройка макета — здесь можно задать общие параметры страницы

— настройка конструктора

Еще обратите внимание на следующее меню конструктора: «вид страницы при редактировании«:
каркасный вид — страница в виде блоков,
вид на мониторе компьютера,
вид на планшете,
вид на мобильном.

Для мобильного можете выбрать тип устройства для проверки отображения

Следующий пункт: поиск функции. При нажатии откроется окно поиска функции конструктора

Далее: поиск модуля в макете. Удобно, особенно если макет большой.

Каждый объект на странице имеет имя по умолчанию, но может иметь свое имя. В закладке «Контент» имя объекта можно ввести в поле Метка Администратора.

Крайняя справа — кнопка помощника Диви Билдер. Обратите внимание на вкладку «Модальные быстрые клавиши». Здесь привден список комбинаций клавиш для выполнения функций редактора, что весьма удобно при некоторых задачах.

Настройка элементов на странице, меню элементов

Немного коснусь общих вопросов по настройках элементов на странице. Чтобы добавить новый элемент на страницу — нажать кнопку «плюс » (+).

Настройки модулей, строк и разделов состоят из трех вкладок: Контент Дизайн Расширенный

Контент — содержимое элемента

Дизайн — отображение элемента

Расширенный — дополнительный опции как то стили элекмента или его видимость

Поля вкладок будут немного отличаются в зависимости от элемента: для текста свои, для изображения — свои.

Вкладка контент

Ссылка — здесь можна указать адрес перехода при клике на элемент

Фон — здесь можно указать фон элемента: или цвет, или градиент цвета или изображение или фоновое видео. Для изображение можно включить эффект паралакс. Паралакс — это разная скорость скроллинга фона и контента.

Метка администратора — указать свое название элемента

Вкладка дизайн

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

Вкладка Расширенный

Можно указать имена и классы стилей элемента. Или можно установить сами значения пользовательских стилей.
Также можно отключать отображение элемента на устройствах.

Динамический контент на странице

Динамический контент — это контент, вытащенный из базы данных сайта и управляемый через WordPress или плагины. Примеры типичного динамического контента включают название сайта, описание, логотип, заголовки, выдержки и избранные изображения. Динамический контент также включает настраиваемый контент, созданный с использованием пользовательских полей вручную или настраиваемых полей, зарегистрированных плагинами.

Рассмотрим загрузку на страницу динамического контента.

Загружать на страницу динамическое содержимое могут модули текст и изображение .

Рассмотрим как это делается.
Открываем настройки макета Текст, выбираем вкладку Контент, становимся на поле ввода содержимого, выбираем значек база данных и нажимаем на него.

Открывается окно, в котором выбираем какой контент будет размещен в данном модуле.

Заключение

Длинная статья получилась. 🙂

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

Задавайте вопросы, пишите предложения и комменарии, делитесь ссылкой на статью с друзьями.

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