Обзор Divi Builder: современный конструктор страниц WordPress

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

Поэтому, даже если у вас нет опыта разработки веб-сайтов, вы можете создавать красивые веб-сайты с помощью Divi Builder и добавлять в свой контент мультимедийные материалы, такие как изображения, стильный текст, видео, формы, таблицы и многое другое.

В этой статье я хотел бы показать вам, как вы можете использовать Divi Builder для создания профессиональных макетов веб-сайтов и страниц.

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

Что предлагает Divi Builder?

В конце 2018 года WordPress выпустила версию 5.0 своего программного обеспечения. Это был важный выпуск, поскольку он заменил старый редактор WYSIWYG (What You See Is What You Get) новым блочным редактором перетаскивания под названием Gutenberg.

Теперь, когда WordPress поставляется в комплекте с конструктором страниц с перетаскиванием, вам может быть интересно, почему кто-то хочет приобрести альтернативное решение для создания страниц, такое как Divi Builder.

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

Напротив, возможности Divi безграничны. Его можно использовать для создания всего: от простого дизайна блога до сложных интернет-магазинов и веб-сайтов компаний. Это действительно выводит создание страниц на совершенно новый уровень.

Divi Builder был запущен в 2015 году как отдельное решение для создания страниц, которое работает с любой темой WordPress. Ранее эту функцию можно было использовать только в теме Divi WordPress, выпущенной Elegant Themes двумя годами ранее.

Плагин постоянно расширялся и совершенствовался на протяжении многих лет. Elegant Themes постоянно публикуют обновления в своем блоге, в которых подробно описаны исправления ошибок, настройки и основные новые функции.

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

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

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

Плагин поставляется с более чем 1000 потрясающих готовых макетов, и еще больше выпускается на официальном рынке Divi Marketplace и на сторонних торговых площадках.

Эти дизайны являются отличной отправной точкой для ваших собственных пользовательских макетов и дизайна веб-сайтов. Я их большой поклонник, поскольку они значительно сокращают время, необходимое для создания уникального макета.

Настоящим преимуществом Divi Builder является настройка.

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

Проще говоря, если он есть на странице, вы можете его изменить.

Divi Builder отлично поддерживает WooCommerce; Elegant Themes называют эту интеграцию «WooBuilder».

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

Давайте подробнее рассмотрим, как работает Divi Builder…

Запуск визуального конструктора

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

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

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

Вам нужно нажать на эту кнопку, чтобы запустить Divi Builder в интерфейсе вашего сайта.

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

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

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

Хотя Divi Builder обычно используется пользователями WordPress в качестве замены редактора WordPress по умолчанию, он может работать в гармонии с редактором Gutenberg, используя блок макета Divi.

Блок макета Divi можно вставить в любую область вашей страницы и разместить рядом с обычными блоками редактора WordPress.

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

Как видите, Divi Builder невероятно хорошо дополняет WordPress, не занимая весь ваш сайт. Вам нужно использовать Divi Builder только тогда, когда вам это нужно.

Красивые макеты Divi

Когда Divi Builder запускается, вам предлагаются три варианта.

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

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

На момент написания было доступно более 1100 макетов и 149 пакетов макетов. Дизайн разделен на 13 категорий: Искусство и дизайн, Бизнес, Общество и некоммерческие организации, Образование, События, Мода и красота, Еда и напитки, Здоровье и фитнес, Стиль жизни, Интернет-магазин, Услуги, Простота и Технологии.

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

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

Нажатие на кнопку демонстрации загрузит предварительный просмотр дизайна в реальном времени. Вы можете просмотреть демонстрации всех макетов на странице Divi Layout Packs.

Если вы нажмете «Использовать этот макет», Divi Builder начнет импортировать рассматриваемый макет или пакет макетов.

Как и все решения для создания страниц WordPress, Divi Builder вставляет макеты непосредственно в область основного контента записей, страниц и пользовательских типов записей.

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

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

Макеты также можно разделить на категории, и вы найдете это полезным по мере роста вашей библиотеки макетов.

В главном меню администратора Divi есть ссылки на конструктор тем Divi и библиотеку Divi.

Divi Theme Builder позволяет создавать уникальные шаблоны страниц с определенным верхним, основным и нижним колонтитулами.

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

Например, вы можете создать один шаблон для своей домашней страницы и блога, один для интернет-магазина, один для страниц с ошибкой 404 и еще один для серии опубликованных вами сообщений в блоге.

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

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

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

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

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

Без сомнения, Divi Library и система шаблонов Divi Theme Builder являются основой Divi Builder и одной из причин, почему Divi настолько универсален и почему профессиональные проекты могут быть созданы так быстро. Это функция, которая до сих пор отсутствует в альтернативных решениях, таких как редактор блоков WordPress по умолчанию.

Интерфейс визуального конструктора

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

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

Нажатие на кнопку с тремя точками загружает основной интерфейс.

Вы увидите множество вариантов, отображаемых в левой, средней и правой части страницы.

С левой стороны есть шесть кнопок. Кнопка с тремя вертикальными точками открывает меню настроек визуального конструктора.

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

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

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

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

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

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

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

С другой стороны вы увидите кнопки для настроек страницы, истории редактирования и переносимости.

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

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

Кнопка переносимости также полезна, поскольку позволяет экспортировать и импортировать макет страницы.

В правой части интерфейса Divi Builder вы увидите кнопку поиска, кнопку справки и кнопку для сохранения вашего макета.

Divi позволяет выполнять поиск по режимам просмотра, настройкам, документации и многому другому. Щелчок по результату поиска немедленно загрузит функцию.

Коробка Divi Builder Helper также невероятно полезна. Он показывает несколько видеоуроков и отображает ссылку на сочетания клавиш.

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

В Elegant Themes есть подробное руководство по Visual Builder, в котором объясняется, как все это работает.

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

Строки, столбцы, модули и многое другое

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

В некоторых конструкторах страниц WordPress эти различные типы контента называются блоками. В других они называются элементами.

Divi называет их модулями .

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

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

Модули должны быть размещены внутри столбцов и строк.

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

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

Другими словами, модули размещаются внутри столбцов, столбцы содержатся внутри строк, а строки размещаются внутри разделов.

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

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

Если вы нажмете на три точки в конце меню, откроется около дюжины дополнительных настроек.

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

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

После того, как вы выбрали структуру строк и столбцов, появится окно «Вставить модуль», и вы сможете выбрать модуль контента для своего макета.

После выбора модуля появится окно его настроек.

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

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

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

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

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

Трудно точно показать, насколько гибко Divi Builder использует текст и изображения.

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

Использование устаревшего конструктора

В Elegant Themes визуальный конструктор стал методом использования Divi Builder по умолчанию, однако при желании вы по-прежнему можете создавать макеты непосредственно в редакторе WordPress.

Теперь Divi называет бэкэнд-редактор «Legacy Builder».

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

Над устаревшим компоновщиком находятся кнопки для возврата к стандартному редактору WordPress и использования внешнего интерфейса.

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

В верхней части интерфейса находится опция импорта и экспорта, которая позволяет создавать резервные копии и восстанавливать макеты Divi Builder. Рядом с ним находится меню настроек, в котором есть раздельное тестирование, а также множество параметров стиля и настроек CSS.

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

Новые строки и столбцы могут быть легко вставлены на вашу страницу.

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

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

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

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

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

Настройки плагина Divi Builder

Подавляющее большинство настроек настройки можно найти в основном интерфейсе Divi Builder, однако некоторые дополнительные настройки можно найти в главном меню администратора Divi.

В дополнение к Divi Theme Builder и библиотеке Divi вы увидите главную страницу параметров плагина Divi Builder, редактор ролей и центр поддержки.

Страница параметров плагина разделена на четыре раздела: «Обновления», «Настройки API», «Интеграция типов сообщений» и «Дополнительно».

Вам нужно будет ввести имя пользователя Elegant Themes и ключ API, чтобы получать автоматические обновления для Divi Builder.

Чтобы использовать блок контента Google Maps, вам нужно будет ввести свой ключ API Google в разделе настроек API. Google Fonts также можно отключить в этом разделе.

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

В расширенном разделе можно найти множество других настроек, таких как минимизация Javascript и CSS и отключение обзора продукта Divi Builder.

Как отмечалось ранее, здесь вы также включаете устаревший интерфейс конструктора и заменяете редактор блоков WordPress (Gutenberg) классическим редактором.

Редактор ролей Divi позволяет точно указать, что могут и чего не могут делать различные роли пользователей.

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

Например, вы можете разрешить участникам доступ к Divi Builder и макетам при написании сообщений в блоге, но запретить им доступ к странице параметров плагина.

Последняя страница в меню администратора Divi — это «Центр справки и поддержки Divi Builder».

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

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

Здесь также есть варианты предоставления удаленного доступа к Elegant Themes и прямого общения со службой поддержки.

С этой страницы также связаны различные учебные пособия по Divi Builder.

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

На странице поддержки также есть опция безопасного режима и список ошибок, сгенерированных WP_DEBUG_LOG .

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

Сколько стоит Divi Builder?

Elegant Themes имеют одну из самых простых и справедливых ценовых политик в мире WordPress.

Вы можете приобрести членство Elegant Themes на годовой основе или за разовую плату. Оба плана предоставляют вам доступ ко всем продуктам Elegant Themes и позволяют использовать их на любом количестве веб-сайтов.

Годовая лицензия стоит 89 долларов в год, а пожизненная лицензия — 249 долларов.

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

Пожизненная лицензия на доступ имеет смысл, если вы планируете использовать продукты Elegant Themes более двух лет.

Все лицензии поставляются с 30-дневной гарантией возврата денег без вопросов, и вы можете отменить свое членство в любое время.

Divi Builder — это лишь часть членского пакета Elegant Themes.

Членство также дает вам доступ к универсальной теме Divi. Это отличная тема WordPress, которую можно использовать, если вы являетесь поклонником Divi Builder, поскольку функции создания страниц встроены непосредственно в тему.

Членство в Elegant Themes также включает в себя красивую журнальную тему WordPress Extra — дизайн, созданный на основе Divi Builder.

В членство также включен плагин WordPress для маркетинга по электронной почте и лидогенерации Bloom и плагин WordPress для обмена социальными сетями Monarch.

Elegant Themes имеют одну из лучших областей поддержки в мире WordPress. Их обширная область документации содержит подробные письменные и видеоуроки для всех их продуктов, но если вы все еще в чем-то не уверены, вы можете открыть заявку в службу поддержки для получения помощи.

Последние мысли

Надеюсь, вам всем понравился этот подробный обзор Divi Builder.

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

Членство в Elegant Themes по-прежнему предлагает фантастическое соотношение цены и качества. Поэтому те из вас, кто хочет использовать Divi Builder, получат доступ к четырем более продвинутым темам и плагинам WordPress.

Если вы хотите увидеть Divi Builder в действии, посетите область предварительного просмотра Divi Builder и демонстрационную страницу Elegant Themes.

Спасибо за чтение.

Кевин