Начало работы с Divi Builder

Divi лучше всего использовать в визуальном режиме — это позволяет создавать свою страницу в интерфейсе вашего веб-сайта.

Что такое Визуальный Builder?

Divi Builder существует в двух формах: стандартный редактор «Back-end Builder» (Режим панели администратора WordPress) и визуальный редактор «Визуальный Builder». Оба интерфейса позволяют создавать одни и те же типы веб-сайтов с одинаковыми элементами контента и настройками дизайна. Единственное отличие — интерфейс. Стандартный редактор находится внутри панели управления WordPress и к нему можно получить доступ вместе с остальными стандартными настройками WordPress. Он находится внутри пользовательского интерфейса WordPress и заменяет стандартный редактор сообщений WordPress. Back-end Builder отлично подходит для внесения быстрых изменений, пока вы находитесь на панели инструментов, однако он ограничен панелью инструментов и отображается как блочное представление вашего веб-сайта. В этом руководстве мы сосредоточимся только на визуальном редакторе.

Визуальный Builder позволяет вам создавать свои страницы в интерфейсе вашего веб-сайта! Это потрясающий опыт, позволяющий значительно ускорить разработку. Когда вы добавляете контент или настраиваете параметры дизайна внутри визуального конструктора, ваши изменения появляются мгновенно. Вы можете щелкнуть по странице и просто начать печатать. Вы можете выделить текст и настроить его шрифт и стиль. Вы можете добавлять новый контент на страницу и смотреть, как все происходит прямо у вас на глазах.

Включение Визуальный Builder

Когда вы заходите в свою панель управления WordPress, то можете перейти на любую страницу в интерфейсе вашего веб-сайта и нажать кнопку «Включить Визуальный Builder» на панели администратора WordPress, чтобы запустить визуальный редактор.

Если вы редактируете свою страницу в стандартном редакторе, то можете переключиться на визуальный редактор, нажав кнопку «Включить Визуальный Builder», которая находится в верхней части внутреннего интерфейса Divi Builder (обратите внимание, что сначала вы должны включить Divi Builder до появления кнопки визуального редактора).

Основы визуального редактора

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

Конструктор использует три основных строительных блока: разделы, строки и модули. Их совместное использование позволяет создавать бесчисленное множество макетов страниц. Разделы — это самые большие строительные блоки, в которых размещаются группы строк. Строки находятся внутри разделов и используются для размещения модулей. Модули размещаются внутри строк. Это структура каждого веб-сайта Divi.

Разделы

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

Строки

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

Модули

Модули — это элементы контента, из которых состоит ваш сайт. Каждый модуль Divi может поместиться в столбец любой ширины, и все они полностью редактируемы.

Создание первой страницы

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

Добавление первого раздела

Прежде чем вы сможете добавить что-либо на свою страницу вам нужно добавить раздел. Разделы можно добавить, нажав синюю кнопку (+). При наведении курсора на раздел, который уже существует на странице, под ним также появится синяя кнопка (+). При нажатии новый раздел будет добавлен под разделом, над которым вы в данный момент наведены.

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

Добавление первой строки

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

Чтобы добавить строку нажмите зеленую кнопку (+) внутри любого пустого раздела или нажмите зеленую кнопку (+), которая появляется при наведении курсора на любую текущую строку, чтобы добавить новую строку под ней. После того как вы нажмете зеленую кнопку (+), вы увидите список типов столбцов. Выберите желаемый столбец и добавляйте свой первый модуль.

Добавление первого модуля

Модули можно добавлять внутри рядов, а в каждом ряду можно разместить любое количество модулей. Модули — это элементы содержимого вашей страницы, в Divi более чем 40 различных элементов, которые вы можете использовать для создания сайта. Вы можете использовать базовые модули, такие как текст, изображения и кнопки, или более сложные модули,  например, слайдеры, галереи, портфолио и магазины. У нас есть индивидуальные руководства для каждого модуля Divi, поэтому, если вы хотите узнать больше о типах модулей, которые предоставляет Divi, обязательно вернитесь на главную страницу и просмотрите раздел «Модули».

Чтобы добавить модуль нажмите серую кнопку (+), которая находится внутри любого пустого столбца, или нажмите серую кнопку (+), которая появляется при наведении курсора на модуль на странице, чтобы добавить новый модуль под ним. После нажатия на кнопку вы увидите список модулей. Выберите желаемый модуль, который будет добавлен на вашу страницу, и станет доступна панель настроек. С помощью нее вы можете начать настройку вашего модуля.

Конфигурация и настройка разделов, строк и модулей

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

Это запустит панель настроек для указанного элемента. Каждая панель настроек разбита на три вкладки: «Содержимое», «Дизайн» и «Дополнительно». Каждая вкладка предназначена для быстрого и легкого доступа к разнообразным настройкам Divi и их конфигурациям. На вкладке контент вы можете добавлять изображения, видео, ссылки и ярлыки администратора. На вкладке «Дизайн» мы разместили все встроенные настройки дизайна для каждого элемента. В зависимости от того, что вы редактируете, вы можете управлять широким спектром настроек дизайна одним щелчком мыши, в том числе: типографика, интервалы (отступы / поля), стили кнопок и многое другое. Чтобы подробно изучить вкладку «Дизайн», ознакомьтесь с нашим руководством по настройкам дизайна. Наконец, если вам нужно еще больше возможностей, вы можете перейти на вкладку «Дополнительно» и применить собственный CSS, настроить видимость в зависимости от устройства и (в зависимости от того, какой элемент вы редактируете) выполнить еще более точную настройку.

Сохранение страницы и доступ к настройкам страницы

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

Начните свой дизайн с готовых макетов

Отличный способ быстро начать новую страницу — это готовые макеты. Divi поставляется с более чем 20 готовыми макетами с распространенными типами страниц: «О нас», «Контакт», «Блог», «Портфолио» и т. д. Вы можете загрузить их, а затем заменить контент на свой. Ваша новая страница будет закончена раньше, чем вы предполагали! Чтобы узнать больше об использовании готовых макетов обязательно ознакомьтесь с нашим подробным руководством по готовым макетам.

Сохранение собственных макетов в библиотеке

Помимо использования готовых макетов, поставляемых с Divi, вы также можете сохранять свои собственные творения в библиотеке Divi. Когда дизайн сохраняется как макет Divi в библиотеке, его можно загружать на новые страницы. Чем больше вы пополняете свою библиотеку любимыми дизайнами, тем быстрее вы сможете создавать новые веб-сайты. Для более подробного ознакомления с библиотекой Divi обязательно ознакомьтесь с нашим специальным учебным пособием по библиотеке Divi.

Чтобы сохранить элемент в библиотеке нажмите на значок библиотеки, который появляется при наведении курсора на любой элемент и на панели настроек страницы. После добавления элемента в библиотеку он появится на вкладке «Добавить из библиотеки» при добавлении новых макетов, разделов, строк и модулей Divi.

Хорошо, у вас есть основы. Пришло время копнуть глубже!

Итак, вы добавили на свою страницу первые разделы, строки и модули. Вы изменили их настройки и начали создавать и настраивать свой дизайн. У вас есть основы, но есть еще чему поучиться. У нас доступны десятки и десятки руководств, охватывающих каждый аспект Divi. Мы рекомендуем вам вернуться на главную страницу документации и прочитать все до единого. К тому времени, как вы закончите, вы станете мастером Divi!

Расширение возможностей Divi за счет дополнительных модулей, дочерних тем и макетов

Одним из главных достоинств Divi является сообщество дизайнеров и разработчиков. На торговой площадке Divi создатели делятся удивительными ресурсами, такими как настраиваемые модули, дочерние темы и макеты Divi. Использование дочерних тем и макетов — отличный способ запустить новые веб-сайты, а модули Divi раскрывают потенциал Divi, предоставляя вам больше строительных блоков.