Диви, безусловно, один из Темы WordPress наиболее популярны в наши дни. Одним из элементов, составляющих силу этой темы, является ее конструктор (Divi Builder), который очень напоминает нам Визуальный Композитор.

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

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

Скачать тему DIVI WordPress

divi builder.jpeg

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

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

использование-visual-builder.jpg

Как включить Visual Builder

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

как включить визуальный builder.jpeg

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

используйте визуальный построитель Divi.jpeg

Основы Visual Builder

Сила Divi заключается в Visual Builder, конструкторе страниц, который работает с методом «перетаскивания», который позволяет создавать практически любой тип веб-сайтов, комбинируя и упорядочивая фрагменты контента.

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

Разделы

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

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

строка

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

Модули

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

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

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

строительство страницы Divi.jpg

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

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

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

список разделов divi.jpg

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

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

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

как вставить строку Divi.jpeg

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

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

Вы можете использовать базовые модули, такие как тексты, изображения и кнопки, или более продвинутые модули, такие как слайдеры, галереи портфолио и Электронная коммерция Магазины.

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

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

вставить модуль DIVI.jpeg

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

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" extended "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] СКАЧАТЬ ТЕМУ РАЗДЕЛА [/ vcex_button] [/ width_column] [»vc_column] [» vc_column »1/2 ″] [vcex_button url =" https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials "target =" blank "layout =" extended "align =" center " font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] ЗАГРУЗИТЬ ХРАНИЛИЩЕ ЗАГРУЗИТЬ DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Другие учебные пособия Divi