Отличительные черты продукта Divi: DiviGrid

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

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

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

Установка ДивиГрид

Прежде чем начать, убедитесь, что тема Divi установлена ​​и активна на вашем веб-сайте.

DiviGrid можно установить так же, как и любой другой плагин WordPress. Откройте страницу плагинов на панели управления WordPress и нажмите «Добавить новый».

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

После установки активируйте плагин.

Настройки ДивиГрид

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

Модули ДивиГрид

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

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

Расширенное рекламное объявление

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

Вот Advanced Blurb Demo 2 с уникальным эффектом наведения.

Расширенный заголовок

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

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

Расширенная карусель изображений

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

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

Продвинутый человек

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

Это Advanced Person Demo 5 с круглым изображением профиля, которое при наведении отображает альтернативное изображение.

Расширенный прайс-лист

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

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

Продвинутая вкладка

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

Это демонстрационный макет 8 с фиолетовыми вкладками, которые открываются при нажатии и сопровождаются анимацией перехода.

Изображение «До и после»

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

Вот макет изображения «До и после» 1.

Блог Карусель

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

Это демо-версия Blog Carousel 3 с типом слайд-карусели. Слева находится изображение, в центре — информация о публикации, за которой следует название блога и отрывок. Справа расположены навигационные точки.

Бизнес-час

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

Вот макет «Рабочий час 7», включающий два модуля «Рабочий час», оформленные с ярким фоном и пунктирной разделительной линией.

Сетка контента

Далее, сетка контента — это универсальный модуль, в котором вы можете создать макет сетки для отображения карточек с текстом, изображениями и кнопками. Каждому элементу сетки можно задать индивидуальный стиль, а сам модуль «Сетка» имеет множество опций для управления макетом и дизайном сетки.

Это Content Grid Layout 20, оформленный в виде раздела навигации для интернет-магазина.

Плавающее изображение

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

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

Меню еды

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

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

Градиентный текст

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

Вот пример 2 модуля «Градиентный текст». Он содержит префикс и инфикс с градиентным фоном, а также суффиксный текст с движущимся фоновым клипом.

Соты

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

Это пример Honeycomb 9, который отображает изображение при наведении курсора мыши.

Изображение Аккордеон

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

Это демонстрационный макет Image Accordion 5. Это простой макет, в котором при наведении курсора отображается изображение с анимированной рамкой.

Подпись к изображению

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

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

Карусель изображений

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

Это макет карусели изображений 1 с нумерацией страниц в виде маркера слева. При наведении на заголовок и цену отображается наложение.

Точка доступа к изображению

С помощью модуля «Горячие точки изображения» вы можете добавлять активные точки к изображению и добавлять контент, который отображается во всплывающей подсказке при щелчке и/или наведении курсора мыши. Вы можете выбрать активную область значка, текста или изображения, добавить настройки анимации активной точки, отобразить текст или макет библиотеки во всплывающей подсказке и полностью настроить дизайн каждой всплывающей подсказки индивидуально.

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

Встроенное всплывающее окно

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

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

Интерактивная карта

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

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

Обоснованная галерея

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

Это демонстрационный макет Justified Gallery 9. При наведении курсора мыши изображение увеличивается под углом и появляется рамка. При нажатии вы можете просмотреть изображение в лайтбоксе.

Сетка списка

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

Это макет сетки списка 32 со значком вверху и значком справа с номером.

Галерея каменной кладки

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

Вот макет Masonry Gallery 2. Он имеет красочное наложение и белые рамки при наведении курсора.

Несколько кнопок

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

Это пример макета модуля с несколькими кнопками 10. При наведении курсора на первую кнопку появляются точки. На второй кнопке полоски внизу перемещаются при наведении.

Сообщение сетки

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

Это пример модуля «Сетка публикации» 14. В нем избранное изображение используется в качестве фона элемента публикации с темным наложением. Для каждого сообщения вы можете увидеть категорию, автора, дату, заголовок и ссылку «Читать дальше».

Прокрутить несколько изображений

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

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

Прокрутка одного изображения

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

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

Социальная доля

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

Вот демонстрационный макет Social Share 1.

Звездный рейтинг

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

Пример макета звездного рейтинга 3 отображает звездные рейтинги рядом с пунктами меню.

Карточка с изображением наклона

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

Это демонстрационный макет Tilt Image Card 8 с градиентным фоном, примененным к области содержимого.

Где купить DiviGrid

DiviGrid доступен на Divi Marketplace. Стоимость неограниченного использования веб-сайта составляет 59 долларов США, а также 1 год поддержки и обновлений. В цену также входит 30-дневная гарантия возврата денег.

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

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

Мы были бы рады получить известия от вас! Вы пробовали ДивиГрид? Дайте нам знать, что вы думаете об этом в комментариях!