Хотели бы вы использовать модуль Filterable Portfolio в Divi и вы не знаете, какую раскладку выбрать?
Модуль « Фильтруемый портфель "Для того, чтобы Divi дает вам два варианта макета на выбор. Оба варианта имеют преимущества и очень хорошо работают для определенных целей.
В этой статье мы сравним полноширинный и сетчатый макеты этого модуля, чтобы помочь вам решить, что вам нужно для вашего Веб-сайт.
Мы также настроим оба макета, чтобы увидеть, как они работают в одном макете. Divi.
Давайте начнем!
обследование
Во-первых, давайте посмотрим, что мы собираемся создать в этом уроке.
Настольная версия макета сетки
Скачайте DIVI прямо сейчас!!!
Телефонная версия макета сетки
Настольная версия макета Fullwidth
Читайте также: Divi: как использовать эффекты тени и наведения для создания интерактивного контента
Телефонная версия полноширинного макета
Как изменить макет модуля фильтруемого портфеля
По умолчанию модуль «Фильтруемое портфолио» отображает макет во всю ширину. Вы можете изменить макет для отображения элементов в сетке. Сначала откройте параметры модуля.
Затем выберите вкладку Дизайн. Первый вариант Планировка. Он имеет раскрывающийся список с несколькими вариантами выбора. Выберите его, чтобы выбрать между Полная ширина et сетка.
Если вы выберете опцию, которая в данный момент не выбрана, модуль перезагрузится и отобразит элементы портфолио в этом макете. В приведенном ниже примере показан макет сетки.
Сравнение компоновки фильтруемого модуля портфолио
Эти два макета очень разные, но у них есть некоторые сходства. Оба отображают фильтр в верхней части модуля, заголовок и метаданные под изображениями элементов, а нумерацию страниц — в нижней части модуля.
Вот посмотрите, чем они отличаются.
Макет в полную ширину
Полная ширина отображает большое изображение с элементом портфолио, занимающим всю ширину области портфолио. Изображения отображаются в исходном виде и расширяются, чтобы соответствовать доступной ширине.
Это не добавляет много места между элементами кошелька. Мы рекомендуем ограничить количество сообщений до нескольких. В приведенном ниже примере показан полноразмерный макет с двумя сообщениями.
Макет сетки
Макет сетки отображает до 4 элементов подряд. Это добавляет больше пространства между элементами. Изображения обрезаются для создания миниатюр одинакового размера независимо от размера и формы изображения.
Для этого мы ограничили модуль отображением четырех сообщений, чтобы показать разбиение на страницы.
Когда использовать каждый макет модуля Filterable Portfolio
Обе схемы имеют свои преимущества. Вот несколько советов о том, когда использовать каждый макет.
Макет в полную ширину
Используйте полноширинный макет, если у вас есть только несколько элементов для отображения или вы хотите сосредоточиться на нескольких элементах.
Также используйте этот макет, если хотите выделить или привлечь внимание к рекомендуемым изображениям.
Макет сетки
Используйте макет сетки, если вы хотите показать много элементов или когда вы хотите, чтобы макет отображал больше элементов в меньшем пространстве.
Как настроить макеты фильтруемых модулей портфолио
Теперь, когда мы увидели, как выбирать макеты, как они работают и когда их использовать, давайте посмотрим, как настроить эти два макета.
Мы будем использовать страницу Портфолио Бесплатный пакет макетов Painter доступны в Диви. Вот исходная страница.
Мы заменим портфолио модулем 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 всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
