Особенности плагина Divi - сетка портфолио Divi

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

Divi Portfolio Grid - это сторонний плагин из магазина тем Divi. Он не только предоставляет вам стандартные функции модуля Divi, но также предоставляет макет из 2, 3 и 4 столбцов с новыми функциями стилизации, чтобы вы могли создавать уникальные портфолио. Он также добавляет кнопку с текстом и эффектами наведения для изменения цвета.

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

Установка подключаемого модуля Divi Portfolio Grid

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

Возможности настраиваемого модуля портфолио

Плагин добавляет в Divi Builder новый модуль под названием Custom Portfolio Module. Модуль работает как любой другой модуль Divi Builder из бэкэнда - поэтому вы можете перетаскивать его в любую строку и настраивать содержимое, дизайн и расширенные настройки.

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

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

Примеры - Использование модуля пользовательского портфолио Divi

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

Стандартный модуль портфолио Divi

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

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

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

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

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

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

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

Вот посмотрите на макет из 3 столбцов. В этом примере я изменил цвет фона и текста кнопки, а также изменил текст для отображения моего собственного сообщения.

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

В этом примере используется макет из 4 столбцов. Я установил радиус кнопки на 0 и изменил все стили шрифтов.

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

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

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

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

В этом примере я поместил красный оверлей с непрозрачностью 66. Я изменил значок наведения и настроил кнопку и ее эффекты наведения. За заголовком помещается фоновое изображение (серого неба). Здесь используются разные категории проектов. Радиус кнопки установлен на 10.

Сетка портфолио Divi - Адаптивный

Плагин отзывчивый. Вот макет из 3 столбцов на iPad (эмулированный в инструментах разработчика Chrome) в портретном режиме. Чтобы узнать больше об инструментах разработчика Google Chrome, прочтите статью «Почему вам следует начать использовать инструменты разработчика Chrome прямо сейчас».

Это тот же макет в альбомном режиме.

Это та же компоновка на Galaxy S5 в портретном режиме.

А вот макет с использованием Galaxy S5 - это альбомный режим.

Лицензия, обновления и документация

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

Divi Portfolio Grid можно приобрести в магазине тем Divi.

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

Divi Portfolio Grid прост в использовании и предоставляет достаточно дополнительных функций по сравнению со стандартным модулем портфолио Divi, которые многие пользователи сочтут необходимыми. Он включает в себя макеты с 2, 3 и 4 столбцами, добавляет кнопку с эффектами наведения, наложения со значками и все стили модулей, которые вы ожидаете, включая расширенные функции CSS, поэтому вы можете настроить его с помощью собственного кода. Если вам нужно портфолио с функциями, выходящими за рамки стандартного модуля портфолио Divi, возможно, вам понадобится Divi Portfolio Grid.

Мы хотели бы получить известие от вас! Вы пробовали Divi Portfolio Grid? Расскажите нам о своем опыте в комментариях ниже.

Лучшее изображение через 2RAL / shutterstock.com