Divi

Divi Block. Обзор онлайн-инструмента создания блоков Divi

Обзор Divi Block — онлайн-инструмента для создания блоков Divi. 480 готовых блоков и возможность перетаскивания. Divi Block упрощает разработку макета страницы и предоставляет файл для загрузки и дальнейшей настройки на сайт. Попробуем понять, чем он может помочь в ваших задачах и подойдёт ли этот инструмент именно вам.

Что такое Divi Block

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

Divi Block включает в себя:

  • Конструктор заголовков
  • Конструктор макетов
  • Конструктор нижнего колонтитула
  • Заголовки разделов
  • Специальные модули
  • Светлая и темная версии
  • Цветовые схемы

Вы можете просмотреть свои макеты на реальном Divi сайте.

Онлайн-инструмент Divi Block

Планировка Divi Block включает в себя 4 зоны. Я назвал их по функциям:

  1. Меню страницы – первое меню позволяет добавлять и редактировать блоки, управлять страницами, экспортировать в Divi, просматривать документацию, просматривать форум поддержки, увеличивать и уменьшать масштаб, отменять и повторять действия, а также предварительно просматривать страницу на действующем веб-сайте Divi.
  2. Меню блока – второе меню открывается при наведении на него курсора. Оно включает в себя все блоки, которые вы можете добавить на свою страницу. При нажатии на один из блоков открывается подменю со всеми дизайнами этого блока.
  3. Область редактирования – это холст, на который вы можете перетаскивать блоки и располагать их в любом порядке.
  4. Цветовая схема – это селектор цвета для изменения цветовой схемы макета.

Онлайн-инструмент Divi Block

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

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

Меню страницы

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

Блок меню

Область редактирования

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

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

Область редактирования

Примеры конструктора заголовков

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

Примеры конструктора заголовков

Конструктор заголовков имеет 6 опций, включая готовые заголовки, эффекты, подменю, мобильные меню, мегаменю и предварительные загрузчики. Эффекты отображаются в предварительном просмотре при наведении на них курсора. В этом примере я наводил курсор на параметры «Заголовок» и «Навигация», которые включают готовые заголовки. Я добавил в макет прелоадер и мегаменю.

Примеры конструктора заголовков

Примеры макетов

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

Примеры конструктора заголовков

В этом примере показаны разделы «О нас» и «Услуги».

Примеры конструктора заголовков

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

Примеры конструктора заголовков

Вот примеры отзыва и макета команды.

Примеры конструктора заголовков

На этом изображен макет блога и логотипы клиентов.

Примеры конструктора заголовков

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

Примеры конструктора заголовков

Вот примеры портфолио и формы подписки по электронной почте.

Примеры конструктора заголовков

В этом примере показана контактная форма.

Примеры конструктора заголовков

В этом примере показан нижний колонтитул.

Примеры конструктора заголовков

Примеры разработки специальных модулей

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

Вот каменная галерея.

Примеры разработки специальных модулей

В этом примере показана промо-панель, динамический фон и переключатель контента.

Примеры разработки специальных модулей

В этом примере я выбрал плавающую кнопку и выдвижную панель.

Примеры разработки специальных модулей

В этом примере показана горизонтальная временная шкала и градиентный текст.

Примеры разработки специальных модулей

Цветовая схема

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

Цветовая схема

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

Цветовая схема

Проектирование макета с помощью Divi Block

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

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

Проектирование макета с помощью Divi Block

Далее я создам глобальный заголовок с нуля в Divi Theme Builder.

Проектирование макета с помощью Divi Block

Далее я импортирую макет.

Проектирование макета с помощью Divi Block

Наконец, теперь я могу внести любые изменения в макет. Я добавлю свое основное меню, контактную информацию, ссылки на социальные сети и логотип. Как только я сохраню его, заголовок появится на моем сайте.

Проектирование макета с помощью Divi Block

Весь CSS добавляется в блоки кода. Мобильное меню, как обычно, неактивно.

Проектирование макета с помощью Divi Block

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

Проектирование макета с помощью Divi Block

Домашняя страница

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

Проектирование макета с помощью Divi Block

Далее я создам шаблон домашней страницы с нуля в Divi Theme Builder и добавлю собственное тело.

Проектирование макета с помощью Divi Block

Далее я импортирую макет.

Проектирование макета с помощью Divi Block

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

Проектирование макета с помощью Divi Block

Вот часть призыва к действию.

Проектирование макета с помощью Divi Block

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

Проектирование макета с помощью Divi Block

Для нижнего колонтитула я использовал макет с контактной информацией. Для цветовой схемы я использовал коричневый цвет. Теперь я экспортирую файл JSON. Я разархивирую его на своем компьютере.

Проектирование макета с помощью Divi Block

Далее я создам глобальный нижний колонтитул с нуля в Divi Theme Builder.

Проектирование макета с помощью Divi Block

Далее я импортирую макет.

Проектирование макета с помощью Divi Block

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

Проектирование макета с помощью Divi Block

Вот нижний колонтитул на лицевой стороне.

Проектирование макета с помощью Divi Block

Где взять Divi Block

Где взять Диви Блок

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

Конечные мысли

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

Ждем вашего ответа. Вы пробовали Divi Block? Дайте нам знать, что вы думаете об этом в комментариях.

Оригинал статьи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *