Хотите использовать модуль Divi Filterable Portfolio и не знаете, какой макет выбрать?
Модуль «Фильтруемый портфель»Divi предлагает на выбор два варианта макета. Оба варианта имеют свои преимущества и хорошо подходят для определенных целей.
В этой статье мы сравним полноэкранный и сетчатый макеты этого модуля, чтобы помочь вам решить, что нужно для вашего сайта.
Мы также настроим оба макета, чтобы увидеть, как они работают в макете Divi.
Давайте начнем!
обследование
Давайте сначала посмотрим, что мы будем создавать в этом уроке.
Настольная версия макета сетки
Скачайте DIVI прямо сейчас!!!
Телефонная версия макета сетки
Настольная версия макета Fullwidth
Читайте также: Divi: как использовать эффекты тени и наведения для создания интерактивного контента
Телефонная версия полноширинного макета
Как изменить макет модуля фильтруемого портфеля
По умолчанию модуль «Фильтруемое портфолио» отображает макет во всю ширину. Вы можете изменить макет, чтобы отображать элементы в виде сетки. Сначала откройте параметры модуля.
Далее выберите вкладку Дизайн. Первый вариант Планировка. Он имеет раскрывающийся список с несколькими вариантами выбора. Выберите его, чтобы выбрать между Полная ширина et сетка.
Если вы выберете вариант, который в данный момент не выбран, модуль перезагрузится и отобразит элементы портфолио в соответствующем макете. В приведенном ниже примере показан макет в виде сетки.
Сравнение компоновки фильтруемого модуля портфолио
Эти два макета очень разные, но у них есть некоторые сходства. Оба отображают фильтр в верхней части модуля, заголовок и метаданные под изображениями элементов, а нумерацию страниц — в нижней части модуля.
Вот посмотрите, чем они отличаются.
Макет в полную ширину
В полноэкранном режиме отображается большое изображение, при этом элемент кошелька занимает всю ширину области кошелька. Изображения отображаются в исходном виде и масштабе, соответствующем доступной ширине.
Это не сильно увеличивает расстояние между элементами портфолио. Мы рекомендуем ограничить количество публикаций всего несколькими. В приведенном ниже примере показан макет во всю ширину с двумя публикациями.
Макет сетки
В режиме сетки в каждой строке отображается до 4 элементов. Это увеличивает расстояние между элементами. Изображения обрезаются таким образом, чтобы миниатюры имели одинаковый размер независимо от размера и формы изображения.
Для этого мы ограничили модуль отображением четырех сообщений, чтобы показать разбиение на страницы.
Когда использовать каждый макет модуля Filterable Portfolio
Оба варианта компоновки имеют свои преимущества. Вот несколько советов о том, когда следует использовать каждый из них.
Макет в полную ширину
Используйте макет «Вся ширина», если вам нужно отобразить лишь несколько элементов или вы хотите сфокусироваться на нескольких элементах.
Также используйте этот макет, если хотите выделить или привлечь внимание к представленным изображениям.
Макет сетки
Используйте макет «Сетка», если хотите отобразить много элементов или если вам нужно разместить больше элементов на меньшей площади.
Как настроить макеты фильтруемых модулей портфолио
Теперь, когда мы увидели, как выбирать макеты, как они работают и когда их использовать, давайте посмотрим, как настроить эти два макета.
Мы будем использовать страницу Портфолио Бесплатный пакет макетов Painter Доступно в Divi. Вот оригинальная страница.
Мы заменим портфолио модулем Filterable Portfolio и будем использовать те же изображения и заголовки.
Мы создадим две версии: одну с макетом во всю ширину и одну с макетом сетки.
Как настроить макет сетки модуля фильтруемого портфеля
Начнём с настройки сетки. Я буду использовать цвета и шрифты из исходного макета.
Содержание
Открой их параметры модуля и введите 4 для Количество сообщений. Выбрать все категории которые вы хотите отобразить в модуле.
- Количество сообщений: 4
- Включенные категории: Выберите категории
Предоставление
Далее выберите вкладку Дизайн и выберите сетка в вариантах макета.
- Макет: Сетка
Фото товара
Прокрутите до Фото товара и выберите вариант Бокс Тень. Измени это цвет тени в RGBA(0,0,0,0.05).
- Тень коробки: 4ème вариант
- Цвет тени: rgba(0,0,0,0.05)
Текст
Затем прокрутите вниз до Текст и изменить выравнивание В центре. Это центрирует фильтр, заголовок, мета и нумерацию страниц.
- Выравнивание текста: по центру
Текст заголовка
Затем прокрутите вниз до Текст заголовка и измените следующие настройки.
- Шрифт заголовка: Merriweather
- Цвет текста заголовка: #000000
Измените размер политика 26 пикселей для компьютеров, 20 пикселей для планшетов и 18 пикселей для телефонов.
- Размер текста заголовка: рабочий стол 26 пикселей, планшет 20 пикселей, телефон 18 пикселей
Текст критерия фильтра
Затем прокрутите вниз до Текст критериев фильтрации и измените следующие настройки:
- Критерии фильтрации:
- Шрифт: Монтсеррат
- Вес шрифта: полужирный
- Стиль: ТТ
- Цвет текста: #fd6927
- Размер текста: 12 пикселей
Метатекст
Затем прокрутите вниз до Мета-текст. Измени это политика в Монтсеррате и оттенок в #fd6927.
- Размер метатекста: Монтсеррат
- Цвет метатекста: #fd6927
Определить размер на 12 пикселях,Межбуквенное расстояние на 2 пикселя и высокомерие строчки на 1,2 см.
- Размер текста: 12 пикселей
- Интервал между буквами в мета-формате: 2 пикселя
- Высота Мета-линии: 1,2 см
Текст пагинации
Наконец, прокрутите вниз до Текст страницы и изменить его политика в Монтсеррате и установить оттенок шрифт на черном. Закройте модуль и сохраните настройки.
- Шрифт пагинации: Montserrat
- Цвет текста пагинации: #000000
Как настроить фильтруемый модуль портфолио в полноширинном макете
Теперь давайте настроим модуль в полноразмерном макете.
Мы будем использовать те же дизайнерские подсказки, что и в макете сетки, но внесем несколько изменений, которые хорошо подходят для этого макета. Мы будем использовать простой 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 прямо сейчас!!!
Настольная версия макета во всю ширину
Смотрите также: Divi: как изменить градиент фона при наведении
Телефонная версия макета во всю ширину
Скачайте DIVI прямо сейчас!!!
Заключение
Это наша точка зрения на использование полноэкранной компоновки по сравнению с сеткой в модуле. Фильтруемое портфолио Диви. Выбор между двумя вариантами макета прост.
Каждый вариант имеет свои преимущества и требует индивидуального подхода к разработке, чтобы соответствовать вашему сайту. Для обеспечения корректной работы модуля с любым макетом Divi достаточно внести всего несколько корректировок.
Мы надеемся, что этот урок вдохновит вас на ваши следующие проекты Divi. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для выполнения ваших проектов создания интернет-сайтов.
Не стесняйтесь также обращаться к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...