Хотели бы вы использовать модуль Filterable Portfolio в Divi и вы не знаете, какую раскладку выбрать?

Модуль « Фильтруемый портфель "Для того, чтобы Divi дает вам два варианта макета на выбор. Оба варианта имеют преимущества и очень хорошо работают для определенных целей. 

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

Мы также настроим оба макета, чтобы увидеть, как они работают в одном макете. Divi.

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

обследование

Во-первых, давайте посмотрим, что мы собираемся создать в этом уроке.

Настольная версия макета сетки

используйте модуль Divi's Filterable Portfolio

Скачайте DIVI прямо сейчас!!!

Телефонная версия макета сетки

Сетка Элемент портфеля Телефон

Настольная версия макета Fullwidth

используйте модуль Divi's Filterable Portfolio

Читайте также: Divi: как использовать эффекты тени и наведения для создания интерактивного контента

Телефонная версия полноширинного макета

Телефон элемента портфолио с полноразмерным макетом

Как изменить макет модуля фильтруемого портфеля

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

Как изменить макет

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

Как изменить макет

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

Как изменить макет

Сравнение компоновки фильтруемого модуля портфолио

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

Вот посмотрите, чем они отличаются.

Макет в полную ширину

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

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

Макет в полную ширину

Макет сетки

Макет сетки отображает до 4 элементов подряд. Это добавляет больше пространства между элементами. Изображения обрезаются для создания миниатюр одинакового размера независимо от размера и формы изображения.

Макет сетки

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

Макет сетки

Когда использовать каждый макет модуля Filterable Portfolio

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

Макет в полную ширину

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

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

Макет сетки

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

Как настроить макеты фильтруемых модулей портфолио

Теперь, когда мы увидели, как выбирать макеты, как они работают и когда их использовать, давайте посмотрим, как настроить эти два макета. 

Мы будем использовать страницу Портфолио Бесплатный пакет макетов Painter доступны в Диви. Вот исходная страница.

Как стилизовать макеты

Мы заменим портфолио модулем Filterable Portfolio и будем использовать те же изображения и заголовки. 

Мы создадим две версии: одну с макетом во всю ширину и одну с макетом сетки.

Как настроить макет сетки модуля фильтруемого портфеля

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

Содержание

Открой их параметры модуля и введите 4 для Количество сообщений. Выбрать все категории которые вы хотите отобразить в модуле.

  • Количество сообщений: 4
  • Включенные категории: Выберите категории
Как оформить элемент портфолио Grid

Предоставление

Затем выберите вкладку Дизайн и выберите сетка в вариантах макета.

  • Макет: Сетка
Как оформить элемент портфолио Grid

Фото товара

Прокрутите до Фото товара и выберите вариант Бокс Тень. Измени это цвет тени в RGBA(0,0,0,0.05).

  • Тень коробки: 4ème вариант
  • Цвет тени: rgba(0,0,0,0.05)
Как оформить элемент портфолио Grid

Текст

Затем прокрутите вниз до Текст и изменить выравнивание В центре. Это центрирует фильтр, заголовок, мета и нумерацию страниц.

  • Выравнивание текста: по центру
Как оформить элемент портфолио Grid

Текст заголовка

Затем прокрутите вниз до Текст заголовка и измените следующие настройки.

  • Шрифт заголовка: Merriweather
  • Цвет текста заголовка: #000000
Как оформить элемент портфолио Grid

Измените размер политика 26 пикселей для компьютеров, 20 пикселей для планшетов и 18 пикселей для телефонов.

  • Размер текста заголовка: рабочий стол 26 пикселей, планшет 20 пикселей, телефон 18 пикселей
Как оформить элемент портфолио Grid

Текст критерия фильтра

Затем прокрутите вниз до Текст критериев фильтрации и измените следующие настройки:

  • Критерии фильтрации:
    • Шрифт: Монтсеррат
    • Вес шрифта: полужирный
    • Стиль: ТТ
    • Цвет текста: #fd6927
    • Размер текста: 12 пикселей
Как оформить элемент портфолио Grid

Метатекст

Затем прокрутите вниз до Мета-текст. Измени это политика в Монтсеррате и оттенок в #fd6927.

  • Размер метатекста: Монтсеррат
  • Цвет метатекста: #fd6927
Как оформить элемент портфолио Grid

Определить размер на 12 пикселей,Межбуквенное расстояние на 2 пикселя и высокомерие строчки на 1,2 см.

  • Размер текста: 12 пикселей
  • Интервал между буквами в мета-формате: 2 пикселя
  • Высота Мета-линии: 1,2 см
Как оформить элемент портфолио Grid

Текст пагинации

Наконец, прокрутите вниз до Текст страницы и изменить его политика в Монтсеррате и установить оттенок шрифт на черном. Закройте модуль и сохраните настройки.

  • Шрифт пагинации: Montserrat
  • Цвет текста пагинации: #000000
Как оформить элемент портфолио Grid

Как настроить фильтруемый модуль портфолио в полноширинном макете

Теперь давайте настроим модуль в полноразмерном макете. 

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

Содержание

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

  • Количество сообщений: 2
  • Включенные категории: Выберите категории
Как стилизовать элемент портфолио с полноразмерным макетом

Элементы

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

  • Категории шоу: НЕТ
Как стилизовать элемент портфолио с полноразмерным макетом

Предоставление

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

  • Макет: Полная ширина
Как стилизовать элемент портфолио с полноразмерным макетом

Фото товара

Затем прокрутите вниз до Фото товара . Выберите вариант Box Тень и изменить его оттенок оттенок в rgba (0,0,0,0.05).

  • Тень коробки: 4ème вариант
  • Цвет тени: rgba(0,0,0,0.05)
Как стилизовать элемент портфолио с полноразмерным макетом

Текст

Затем прокрутите вниз до Текст. Изменить выравнивание В центре. Фильтр, заголовок и нумерация страниц будут расположены по центру изображений.

  • Выравнивание текста: по центру
Как стилизовать элемент портфолио с полноразмерным макетом

Текст заголовка

Затем прокрутите вниз до Текст заголовка . Измени это политика в Мерриуэзер и изменить оттенок В черном.

  • Шрифт заголовка: Merriweather
  • Цвет текста заголовка: #000000
Как стилизовать элемент портфолио с полноразмерным макетом

Измените размер политика 40 пикселей для компьютеров, 20 пикселей для планшетов и 18 пикселей для телефонов.

  • Размер текста заголовка: рабочий стол 40 пикселей, планшет 20 пикселей, телефон 18 пикселей
Как стилизовать элемент портфолио с полноразмерным макетом

Текст критерия фильтра

Затем прокрутите вниз до Текст критериев фильтрации и измените следующие настройки:

  • Критерии фильтрации:
    • Шрифт: Монтсеррат
    • Вес шрифта: полужирный
    • Стиль: ТТ
    • Цвет текста: #fd6927
Как стилизовать элемент портфолио с полноразмерным макетом

Текст пагинации

Затем прокрутите вниз до Текст страницы. Измени это политика в Монтсеррате измените вес полужирным шрифтом и установите Цвет шрифта на #fd6927. Закройте модуль и сохраните настройки.

  • Шрифт пагинации: Montserrat
  • Цвет: #fd6927
  • Вес шрифта: полужирный
Как стилизовать элемент портфолио с полноразмерным макетом

Текст заголовка CSS

Откройте вкладку Фильтр и прокрутите до Название портфолио. Выберите значок на рабочем столе. Скопируйте приведенный ниже код для разных размеров экрана. Закройте модуль и сохраните настройки.

Название портфолио:

  • Для ПК
padding-bottom:40px
  • таблетка
padding-bottom:30px
  • Телефон
padding-bottom:20px
Как стилизовать элемент портфолио с полноразмерным макетом

Результаты

Настольная версия макета сетки

используйте модуль Divi's Filterable Portfolio

Телефонная версия макета сетки

Сетка Элемент портфеля Телефон

Скачайте DIVI прямо сейчас!!!

Настольная версия макета во всю ширину

Полноразмерные элементы портфолио Рабочий стол

Смотрите также: Divi: как изменить градиент фона при наведении

Телефонная версия макета во всю ширину

используйте модуль Divi's Filterable Portfolio

Скачайте DIVI прямо сейчас!!!

Заключение

Это наш взгляд на использование полноширинного макета вместо сетки в модуле. Фильтруемое портфолио Диви. Выбор между двумя вариантами макета прост. 

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

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

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

Не стесняйтесь также обращаться к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.

Но тем временем поделитесь этой статьей в разных социальных сетях.

...

Pin It на Pinterest