Основные характеристики продукта Divi: Divi Den Pro — библиотека макетов

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

Установка Divi Den Pro – Библиотека макетов

Установить Divi Den Pro — Layout Library было просто. Это работает так же, как загрузка любого плагина, но вам необходимо войти в свою учетную запись Divi Marketplace, чтобы он был доступен в Divi. Сначала для установки перейдите по ссылке:

1. Плагины
2. Добавить новое
3. Загрузить плагины
4. Выберите файл
5. Установите сейчас

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

1. Активировать плагин

Содержимое библиотеки макетов

Библиотека Divi Den Pro — Layout Library содержит 2615 элементов библиотеки. Это включает в себя 1988 разделов и модулей, 631 макет, 39 меню и 18 полных дизайнов веб-сайтов. Все предметы предварительно стилизованы. Макеты помечены, протестированы и оптимизированы для разных размеров экрана.

Есть несколько способов использовать их в макетах Divi. Вы найдете макеты в меню Divi Den Pro DM и в конструкторе тем Divi. Меню Divi Den Pro DM — самый простой способ их использования. Вы можете искать их по ключевому слову и категории и импортировать в свою библиотеку Divi.

Меню Divi Den Pro DM

Вы найдете новый пункт меню на панели управления WordPress под названием Divi Den Pro DM. Меню содержит множество ссылок, которые вы также найдете в виде вкладок в самом меню.

Поиск макета

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

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

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

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

Последний

На вкладке «Последние» отображаются последние сообщения из блога Divi Den. Это хороший способ узнать, что нового в библиотеке макетов.

Учебники

Вкладка «Учебники» содержит все учебные пособия, которые учат, как использовать Divi Den Pro — Библиотека макетов. Они включают в себя встроенные видеоролики, которые отображаются, когда вы нажимаете на учебник, поэтому вы можете учиться прямо с панели инструментов Divi Den, не выходя из WordPress. Это помогает с удобством использования, поэтому, если вам нужна помощь, вы найдете ее здесь.

Конструктор тем

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

В Plugin Theme Builder есть ссылка для открытия Theme Customizer.

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

Пользовательские файлы CSS

На вкладке «Пользовательские файлы CSS» представлены пользовательские файлы CSS из макетов Divi Den, которые вы можете копировать и изменять. Щелчок по одному открывает CSS на другой вкладке. Встроенное видео показывает, как использовать пользовательский CSS.

Передовой

Вкладка «Дополнительно» включает вкладку «Белая этикетка» и вкладку «Дополнительные параметры». White Label позволяет вам переименовать плагин в соответствии с вашим брендом.

Вкладка «Дополнительные параметры» позволяет перемещать вкладку Divi Den Pro внутри элементов Divi Builder. Это включено по умолчанию.

Библиотека макетов Divi Den Pro в Divi Builder

Вкладка для Divi Den Pro — Библиотека макетов добавлена ​​в модальное окно «Модули».

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

Библиотека макетов Divi Den Pro в конструкторе тем Divi

Интерфейс Divi Den Pro — Библиотека макетов также добавлен в нижнюю часть экрана Divi Theme Builder. Он работает так же, как и в панели инструментов WordPress.

В конструкторе тем это работает так же, как и на страницах и в сообщениях.

Примеры библиотеки макетов Divi Den Pro

Теперь, когда мы увидели, как использовать интерфейс Divi Den Pro — Библиотека макетов, давайте рассмотрим несколько примеров. Мы рассмотрим несколько из каждого типа.

Макеты

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

Магазин Landing Page V3 Рагнар

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

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

Карьера Страница V1 Тина

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

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

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

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

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

Макет страницы меню Джейми

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

Макет страницы меню Джейми

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

Макет главной страницы шоурила

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

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

Страница индикатора визуального прогресса Фредди

Это Visual Progress Bar Page Freddie. У него элегантная компоновка, но главный элемент, который я хочу показать, — это индикатор выполнения. Это главный раздел макета. Меню находится внизу экрана. При прокрутке меню прикрепляется к верхней части экрана и показывает ход выполнения макета.

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

Разделы

Если у вас есть разделы Divi Den Pro — Библиотека макетов, сохраненные в вашей библиотеке Divi, вкладка Divi Den Pro DM добавляется в ваш модальный раздел.

Музыкальный модуль Greatest Hits Freddie

Музыкальный модуль Greatest Hits Freddie предоставляет стилизованный раздел аудиоплеера с черным фоном и желтыми эффектами наведения.

Демонстрация галереи стилей

Styling Gallery Demo предоставляет интересную галерею изображений с различными формами границ и цветным блоком для разделения изображений.

Изящество процесса Lintang

Styling Gallery Demo содержит список шагов. Они располагаются горизонтально и включают фигурные изображения или цвета, а также эффекты наведения.

Продукт Thunderbolt Фредди

Thunderbolt Product Freddie — это раздел продукта, в котором с одной стороны отображается ползунок продукта, а с другой — стилизованная информация.

Хронология Алулы Грейс

Alula Timeline Grace создает альтернативную вертикальную шкалу времени с изображениями на одной стороне и информацией на другой.

Модули

Параметр «Модули» на панели инструментов показывает кнопки. Вот несколько, которые я скачал.

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

Где приобрести библиотеку макетов Divi Den Pro

Divi Den Pro — Библиотека макетов доступна на Divi Marketplace за 189 долларов. Он включает в себя неограниченное использование веб-сайта, один год поддержки и обновлений, а также 30-дневную гарантию возврата денег.

Заканчивая мысли о библиотеке макетов Divi Den Pro

Это наш взгляд на Divi Den Pro — Библиотека макетов. В этой библиотеке много макетов. Пользовательский интерфейс прост. Поиск, сортировка, импорт и загрузка макетов интуитивно понятны. Я обнаружил, что ссылка на разделы и модули ограничена больше, чем панель инструментов, когда макеты находятся в библиотеке, они доступны, выбрав параметры «Добавить из библиотеки». Если вы заинтересованы в добавлении нескольких тысяч профессионально разработанных макетов в свою библиотеку Divi, вам стоит обратить внимание на Divi Den Pro — Библиотека макетов.

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