Как настроить фильтр категорий в фильтруемом модуле портфолио Divi
Опубликовано: 2022-08-21Модуль фильтруемого портфолио Divi содержит множество элементов, каждый из которых может быть оформлен индивидуально. Фильтр — один из самых полезных элементов, но им иногда пренебрегают. В этом посте мы увидим, как стилизовать фильтр категорий в Divi's Filterable Portfolio Module. Мы посмотрим, что можно сделать со стандартными настройками, и мы углубимся в CSS, чтобы увидеть, как еще больше стилизовать его.
Давайте начнем!
Предварительный просмотр
Во-первых, давайте посмотрим, что мы будем строить в этом уроке.
Пример первого фильтра категории рабочего стола
Пример первого фильтра категории телефона
Пример второго фильтра категории рабочего стола
Пример второго фильтра категории телефона
Пример фильтра категорий настольных компьютеров 3
Пример фильтра категории телефона 3
Разделение проектов на категории
Чтобы наилучшим образом использовать фильтр категорий, вам нужно разделить свои проекты на категории, наиболее понятные вашим читателям. Чтобы создать свои категории, перейдите в « Проекты» > « Категории » на панели инструментов WordPress.
Здесь вы увидите поля для добавления имени, ярлыка, родительской категории и описания. Вы также увидите свой список категорий в списке, где вы можете их редактировать.
После того, как вы создали свои категории, обязательно выберите те из них для каждого из ваших проектов, которые наиболее понятны читателю. Чтобы создать свои проекты, перейдите в раздел « Проекты» и нажмите « Добавить новый » в меню или вверху страницы.
В качестве примера я создал проекты для компании по ремонту домов. Компания сосредоточится на ремонте домов, но также будет выполнять аналогичную работу для корпораций, и они могут строить с нуля. Для домов я использую категории Интерьер и Экстерьер. Для всех остальных работ я добавил Корпоративное право и Строительство.
Настройки модуля фильтруемого портфеля
В нашем примере я заменю раздел портфолио на странице портфолио из бесплатного пакета Renovation Layout Pack фильтруемым модулем портфолио. Во-первых, давайте посмотрим, как стилизовать модуль. Затем мы стилизуем фильтр тремя разными способами. Вот страница до внесения изменений.
Вот страница после добавления модуля фильтруемого портфолио вместо изображений.
Во-первых, мы стилизуем модуль. Мы будем использовать одни и те же настройки для всех трех примеров.
Содержание
На вкладке «Контент» установите количество сообщений на 8 и выберите категории из списка включенных категорий.
- Количество сообщений: 8
- Включенные категории: на ваш выбор
Элементы
Прокрутите вниз до «Элементы » и отключите « Показать категории» . Мы просто используем заголовки и позволяем фильтру отображать категории.
- Категории шоу: Нет
Макет
Затем перейдите на вкладку « Дизайн » и выберите «Сетка» в разделе « Макет ». Я уже выбрал его для предыдущих изображений, но модуль по умолчанию отображает полную ширину.
- Макет: Сетка
Текст
Затем прокрутите до пункта « Текст » и установите для параметра « Выравнивание текста » значение «По центру». Это центрирует фильтр и нумерацию страниц с модулем, а заголовки с изображениями проекта.
- Выравнивание текста: по центру
Текст заголовка
Затем перейдите к тексту заголовка . Измените Шрифт на Kanit и установите Толщину на Полужирный. Установите Цвет на черный.
- Шрифт: Канит
- Вес: полужирный
- Цвет: #000000
Измените размер шрифта на 20 пикселей для настольных компьютеров, 18 пикселей для планшетов и 16 пикселей для телефонов. Установите Line Spacing на 1px и Line Height на 1.3em.
- Размер: рабочий стол 20 пикселей, планшет 18 пикселей, телефон 16 пикселей.
- Расстояние между буквами: 1px
- Высота строки: 1,3 эм
Текст страницы
Затем прокрутите вниз до текста страницы и измените шрифт на Kanit. Измените Цвет на черный.
- Шрифт: Канит
- Цвет: #000000
Измените межстрочный интервал на 1 пиксель. Сохраните свою работу. Теперь мы можем настроить фильтр категорий для наших примеров.
- Расстояние между буквами: 1px
Примеры фильтров категорий
Теперь мы можем перейти к нашим примерам фильтра категорий. Я использую дизайнерские подсказки из пакета макетов.
Пример первого фильтра категорий
Наш первый пример — самый простой из трех. Он использует базовые настройки и не делает ничего необычного. Он хорошо работает с дизайном макета.
Текст критериев фильтрации
На вкладке « Дизайн » прокрутите вниз до « Текст критериев ». Измените шрифт на Kanit. Измените стиль на TT и цвет на черный.
- Шрифт: Канит
- Стиль: ТТ
- Цвет: #000000
Установите Line Spacing на 1px и установите Line Height на 1.3em. Это для первого. Теперь сохраните настройки и закройте модуль.
- Расстояние между буквами: 1px
- Высота строки: 1,3 эм
Второй пример фильтра категорий
Наш второй пример будет использовать простой CSS для модуля и страницы, чтобы создать закругленные углы и тень блока. Этот выглядит самым разным.
Текст критериев фильтрации
Перейдите на вкладку « Дизайн » и прокрутите вниз до « Текст критериев фильтрации ». Измените шрифт на Kanit. Установите цвет на черный, размер на 16 пикселей и высоту линии на 1,5 em. Размер шрифта хорошо работает на всех размерах экрана, поэтому нам не нужно настраивать его для планшетов или телефонов.
- Шрифт: Канит
- Цвет: #000000
- Размер: 16 пикселей
- Высота линии: 1,5 см
Модуль CSS
Далее перейдите на вкладку « Дополнительно ». Прокрутите вниз до Active Portfolio Filter , добавьте CSS для цвета фона и закройте модуль. Это изменяет цвет фона активного фильтра. Любой фильтр, на который нажимает пользователь, изменяет этот цвет фона, а предыдущий фильтр возвращается к обычному цвету.
- Активный фильтр портфолио CSS:
background-color:#ffd000;
CSS настройки страницы
Затем откройте Настройки страницы в меню страницы. В модальном окне «Параметры страницы» выберите вкладку « Дополнительно » и вставьте пользовательский CSS в поле. Этот CSS удаляет границу с элементов фильтра, создает радиус границы 25 пикселей и добавляет 5 пикселей поля между элементами. Он также добавляет небольшую тень в нижней части элементов и меняет цвет тени. Закройте модуль и сохраните настройки.
- Пользовательские CSS:
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {border-width:0px; border-radius: 25px!important; margin:5px; box-shadow: 1px 2px rgba(0,0,0,0.3);}
Пример фильтра категорий 3
Наш третий пример следует тем же идеям дизайна CSS, что и в предыдущем примере. Он не включает закругленные углы и меняет цвет шрифта и фона при наведении. Он также использует CSS как для модуля, так и для страницы.
Текст критериев фильтрации
Перейдите на вкладку « Дизайн » и прокрутите вниз до « Текст критериев фильтрации ». Выберите Kanit для шрифта , установите стиль на TT и цвет на белый.
- Шрифт: Канит
- Стиль: ТТ
- Цвет: #ffffff
Затем выберите параметр Hover для цвета текста и измените цвет на черный. Это заботится о шрифтах при наведении. Мы будем обрабатывать фон с помощью CSS. Измените межбуквенный интервал на 1 пиксель и высоту строки на 1,3 em.
- Цвет при наведении: #000000
- Расстояние между буквами: 1px
- Высота строки: 1,3 эм
Модуль CSS
Затем перейдите на вкладку « Дополнительно » и прокрутите вниз до « Активного фильтра портфеля ». Добавьте следующий CSS , чтобы изменить фон активного фильтра. Закройте модуль.
- Активный фильтр портфолио CSS:
background-color:#ffd000
CSS настройки страницы
Наконец, откройте Настройки страницы . перейдите на вкладку « Дополнительно » и введите следующий пользовательский CSS . Закройте модуль и сохраните настройки. Это изменяет фон на черный, добавляет отступы по 15 пикселей сверху и снизу и отступы по 30 пикселей слева и справа. Это изменяет размеры элементов фильтра, чтобы они точно соответствовали кнопкам в макете, и помогает создать изменение цвета для эффекта наведения. Фон изменится на белый при наведении.
- Пользовательские CSS:
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {background-color:black; padding: 15px 30px 15px 30px;}
Полученные результаты
Пример первого фильтра категории рабочего стола
Пример первого фильтра категории телефона
Пример второго фильтра категории рабочего стола
Пример второго фильтра категории телефона
Пример фильтра категорий настольных компьютеров 3
Пример фильтра категории телефона 3
Окончание мыслей
Это наш взгляд на то, как стилизовать фильтр категорий в Divi's Filterable Portfolio Module. Фильтр категорий включает в себя те же инструменты стиля, что и другие элементы, поэтому его можно легко настроить для работы с любым макетом Divi. Добавляя CSS как к модулю, так и к странице, мы можем стилизовать фильтр категорий множеством уникальных способов, чтобы выделиться из толпы.
Ждем вашего ответа. Настроили ли вы фильтр категорий в модуле Divi Filterable Portfolio Module? Дайте нам знать об этом в комментариях.