Основные характеристики продукта Divi: Ultimate Divi Module UI Kit

Ultimate Divi Module UI Kit — это продукт Divi Marketplace, который предлагает более 2000 готовых макетов, чтобы упростить разработку вашего следующего веб-сайта Divi. Продукт предлагает разделы о нас, стили таблиц цен, макеты контактных форм, стили кнопок и даже некоторые макеты одностраничных веб-сайтов, которые можно полностью настроить. В этом обзоре продукта мы подробно рассмотрим The Ultimate Divi Module UI Kit и поможем вам решить, подходит ли этот продукт для вашего следующего проекта.

Давайте начнем!

Установка комплекта пользовательского интерфейса Ultimate Divi Module

Ultimate Divi Module UI Kit поставляется в виде ZIP-файла, содержащего файлы Divi Library .json. Чтобы установить макеты, начните с разархивирования файла. Затем откройте панель управления WordPress и перейдите на страницу библиотеки Divi.

Нажмите «Импорт и экспорт» вверху, затем выберите вкладку «Импорт». Выберите файл макета, затем выберите «Импорт макетов Divi Builder».

После импорта макета откройте свою страницу в Divi Builder. Щелкните значок синего плюса, чтобы добавить новый раздел, затем выберите «Добавить из библиотеки».

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

Ultimate Divi Module UI Kit

Ultimate Divi Module UI Kit поставляется с более чем 2000 макетами, поэтому мы не сможем охватить все. Мы рассмотрим несколько дизайнов из каждой категории, чтобы вы могли лучше понять, что может предложить этот продукт и подходит ли он вам.

Вкладка Модули

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

Вот стили нижней вкладки 1 и 79.

Это стиль 9 и 38 в макете вкладок по умолчанию.

Далее идет вертикальный правый макет со стилями 14 и 52. Этот макет помечен как Горизонтальный в файлах продукта.

Наконец, это вертикальный левый макет, помеченный как Вертикальный в файлах продукта. Это стиль 71 и стиль 95.

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

Модули рекламных объявлений

Всего существует 100 стилей аннотаций. Каждый стиль аннотации имеет определенный тип эффекта наведения. Давайте подробно рассмотрим некоторые из них.

Это стиль объявления 4. При наведении две розовые полосы становятся вертикальными, фон значка становится розовым, и появляется розовая теневая граница.

В стиле Blurb 9 есть две фоновые полосы, которые меняют цвета и углы при наведении курсора. Фон значка также меняется при наведении.

Рекламный ролик 40 имеет толстую зеленую рамку и значок, который переворачивается при наведении.

Наконец, стиль аннотации 50 меняется на красный при наведении, а вкладка вверху со значком смещается вправо.

Модули человека

Существует 150 различных стилей модулей лиц.

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

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

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

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

Модули блога

Всего имеется 100 модулей блога с 50 стилями представления сетки и 50 стилями представления списка. Давайте взглянем на пару каждого стиля.

Макет сетки 3 включает изображение поста и детали на карточке с датой на вкладке вверху. При наведении появляется кнопка «Подробнее», а над изображением появляется наложение со значком.

Макет сетки 40 содержит карточку с информацией о сообщениях и кнопку «Читать далее», наложенную на избранное изображение. При наведении на изображение появляется темное наложение.

Макет представления списка 7 содержит информацию о публикации и кнопку «Подробнее» на карточке с изображением слева. Дата указана в синей рамке над изображением.

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

О нас Разделы

Есть 100 дизайнов разделов о нас.

Это стиль макета 7. В нем есть часть текста слева, а также некоторые функции, отмеченные значками. Ниже есть кнопка «Связаться с нами», а справа — изображение.

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

Этот макет путешествия относится к стилю 17. Он имеет большое изображение слева, текст и значок справа. Ниже приведены четыре изображения, которые увеличиваются при наведении и открываются в лайтбоксе при выборе.

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

Модули ценообразования

Всего существует 150 стилей модуля ценообразования.

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

Это модуль ценообразования 29. При наведении справа от цены появляется красная стрелка, а название уровня подсвечивается красным.

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

Макет 72 имеет градиентный фон.

Модули отзывов

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

Это макет отзыва 5. Он имеет оранжевую рамку и значок цитаты вверху, за которым следует изображение профиля, отзыв, имя и информация о вакансии.

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

Макет 71 имеет изображение слева на большом фоне изображения. Справа находится слайдер отзывов в поле цитаты.

Разделы контактной формы

Есть 100 разделов контактной формы на выбор. Здесь только несколько.

Макет 1 представляет собой простой дизайн с текстом слева, контактной информацией с некоторыми значками, значками социальных сетей и контактной формой с синей кнопкой.

Макет 29 имеет большую карту вверху, а слева — адрес, телефон и адрес электронной почты. Справа находится контактная форма.

Макет раздела контактов 41 имеет изображение с желтым наложением. Слева есть текст с кнопкой CTA, в которой указан номер телефона. Контактная форма находится справа, над белой накладкой.

Макет 75 состоит из трех полей с контактной информацией и желтыми значками. Ниже находится контактная форма с желтой кнопкой. Это на фоне изображения, которое постепенно становится белым.

Разделы бюллетеня

Есть 25 разделов подписки на рассылку новостей.

Стиль 2 включает текст заголовка и форму регистрации по электронной почте на фоне изображения параллакса.

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

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

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

Аккордеонные модули

Всего существует 40 стилей аккордеона.

Стиль 2 имеет зеленый заголовок и аккордеонное содержание в сером поле. Кнопка для каждой вкладки находится справа.

Аккордеонный стиль 8 использует оранжевые вкладки и белые поля содержимого. Черные стрелки указывают на открытую вкладку.

Аккордеонный стиль 14 имеет закругленную вкладку с белым разделом содержимого.

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

Модули слайдера

Ultimate Divi Module UI Kit поставляется с 100 стилями модуля слайдера.

Слайдер 2 содержит крупный текст заголовка и кнопку призыва к действию поверх большого параллаксного изображения с темным наложением.

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

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

Наконец, макет слайда 86 содержит текстовое содержимое слева, которое меняет каждый слайд, а также две кнопки CTA. Справа есть видео, за которым следует еще одна кнопка CTA.

Разделы временной шкалы

На выбор доступно 100 различных стилей временной шкалы.

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

Затем временная шкала 12 имеет значок временной шкалы с одной стороны и текст описания временной шкалы с другой стороны.

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

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

Макеты одной страницы

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

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

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

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

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

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

Модули портфолио

Всего существует 120 стилей портфолио: 40 стилей модуля портфолио по умолчанию, 40 фильтруемых стилей портфолио и 40 стилей карусельного портфолио. Давайте взглянем на пару каждого стиля.

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

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

Макет фильтруемого портфолио 2 имеет оранжевую полосу фильтров вверху и черную полосу навигации внизу. При наведении появляется темная накладка с названием и годом проекта.

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

Карусельный макет портфолио 7 имеет две синие стрелки с каждой стороны для навигации. При наведении появляется синее наложение и информация о проекте.

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

Разделы нижнего колонтитула

В комплект пользовательского интерфейса входит 100 разделов нижнего колонтитула.

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

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

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

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

Модули барной стойки

На выбор предлагается 50 различных стилей барной стойки.

Стиль 3 имеет синие полосы с черным процентным индикатором.

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

Стиль барной стойки 32 имеет округлый дизайн с заголовком слева и процентом внутри бара.

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

Разделы с информацией о ящике

Существует 50 стилей информации о блоке.

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

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

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

Макет 47 содержит изображение, значок и текст. При наведении на изображение появляется черное наложение и белая рамка, а изображение увеличивается под небольшим углом. Контейнер значка опускается, а фон становится черным. Наконец, фон текста становится оранжевым.

Разделы навыков

Всего есть 50 разделов навыков.

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

Раздел навыков 17 содержит текст, панель навыков и два раздела со значками слева. Справа два изображения.

Макет навыков 21 содержит изображение, немного текста и кнопку слева. Справа находятся еще два текстовых раздела, за которыми следует панель навыков.

Это макет 38. Он содержит изображение с наложенным текстовым полем слева. Справа вы можете найти текст заголовка, основной текст и панели навыков со стрелками.

Кнопки

Наконец, существует 150 стилей кнопок, включая 100 стилей обычных кнопок и 25 стилей двойных кнопок.

Это обычный стиль кнопки 30. При наведении появляется розовый фон, а цвет текста меняется на белый.

Обычный стиль кнопки 116 представляет собой маленькую розовую рамку, которая расширяется при наведении курсора и заполняет фон кнопки. Текст также становится розовым при наведении.

Стиль с двумя кнопками 3 имеет полосу, которая перемещается вверх или вниз при наведении курсора.

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

Приобретите комплект пользовательского интерфейса Ultimate Divi Module

Ultimate Divi Module UI Kit доступен в Divi Marketplace. Это стоит 49,59 долларов США за неограниченное использование веб-сайта и пожизненные обновления. Цена также включает 30-дневную гарантию возврата денег.

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

Ultimate Divi Module UI Kit поставляется с впечатляющим количеством макетов с широким разнообразием стилей и вариантов использования. Все настраивается с помощью параметров Divi, и любой из макетов можно изменить в соответствии с дизайном вашего следующего проекта. Если вы ищете обширный пакет макетов, который поможет вам сэкономить время при следующем дизайне, этот продукт может подойти вам. Мы были бы рады получить известия от вас! Вы пробовали The Ultimate Divi Module UI Kit? Дайте нам знать, что вы думаете об этом в комментариях!