Особенности плагина Divi: фильтруемая сетка портфолио DTS Pro

Модуль фильтруемого портфолио Divi позволяет создавать портфолио в полноэкранном режиме или в виде сетки. Что, если вам нужен другой вид, который добавляет кнопку и варианты выбора для 3 или 4 столбцов в сетке? Это именно то, что делает сторонний плагин под названием DTS Filterable Portfolio Grid Pro.

DTS Filterable Portfolio Grid Pro добавляет новый модуль в Divi Builder. Плагин придает вашему портфолио новый вид и имеет варианты размещения 3 или 4 столбцов в сетке. Он отображает типы сообщений проекта. Он включает настраиваемый текст кнопки и настраиваемые дополнительные параметры.

Плагин доступен на сайте разработчика.

В этом выделении плагина мы взглянем на DTS Filterable Portfolio Grid Pro и посмотрим, на что он способен. Изображения взяты с Unsplash.com.

Установка DTS Filterable Portfolio Grid Pro

Загрузите и активируйте плагин как обычно. После того, как вы активировали плагин, перейдите в « Настройки» на панели управления и выберите « Активация DTS Filterable Portfolio Grid Pro» . Введите свой ключ API и адрес электронной почты и сохраните изменения.

Настройки модуля

Плагин добавляет новый модуль в Divi Builder. Он синий, поэтому его сложно не заметить.

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

Вкладка «Дизайн» включает настройки макета, цветов, шрифтов, значков, наложений, границ и анимации.

Примеры - Сетка

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

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

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

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

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

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

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

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

Вот CSS, который я добавил на вкладку Advanced в разделе Main Element для модуля. Он просто говорит Divi добавить отступы во все 4 места. Значения применяются в том же порядке, что и поля заполнения строк и модулей: сверху, справа, снизу, слева. Это означает, что я присвоил верхнему отступу значение 40, правому отступу - значение 30, нижнему отступу - 20, а левому отступу - 30.

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

Примеры - Фильтр

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

В этом примере используется красный шрифт Amatic SC. Я увеличил размер шрифта, но оставил интервал и высоту по умолчанию.

Здесь используется шрифт Bevan. Я использую более тёмно-красный цвет. Размер шрифта такой же, как у предыдущего шрифта.

Этот использует Арво. Я уменьшил размер шрифта и выбрал темно-серый цвет.

Анимации

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

В этом примере используется Roll. Все остальное я оставил по умолчанию.

Использование сетки портфолио в макете

DTS Filterable Portfolio Grid Pro отлично смотрится в макете. Вот пример макета фотографии с блогом, портфолио и контактной формой. Я использую настройки по умолчанию для сетки портфолио, и они прекрасно сочетаются.

Использование сетки портфолио с дополнительным

DTS Filterable Portfolio Grid Pro также совместим с Extra. Вот посмотрите на макет, похожий на макет Divi выше. При этом также используются настройки по умолчанию. Я использую сетку из 3 столбцов с несоответствующими размерами изображений. Это простое решение - просто используйте изображения одинакового размера.

Лицензия

Есть два варианта лицензии на выбор: односайтовая и расширенная. Оба включают пожизненные обновления и 6 месяцев поддержки.

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

DTS Filterable Portfolio Grid Pro прост в использовании и предлагает множество элегантных стилей, чтобы выделить ваше портфолио. Я бы хотел добавить пару функций, таких как цвета заголовка и мета-фона, но он по-прежнему предоставляет достаточно функций, которые легко рекомендовать. Если вас интересует фильтруемый модуль фоновой сетки со стилем, выходящим за рамки стандартного модуля Divi, стоит обратить внимание на DTS Filterable Portfolio Grid Pro.

Ждем вашего ответа! Вы пробовали DTS Filterable Portfolio Grid Pro? Дайте нам знать, что вы думаете об этом в комментариях.

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