Divi: Как настроить элемент сетки модуля «Фильтруемое портфолио»

паритет Гаэтан | Divi, Учебники Divi

Хотите узнать, как настроить элементы сетки модуля Filterable Portfolio в Divi ? Следуйте за нами в этом уроке...

Есть зона на вашем Веб-сайт важно показать свою работу. Если вы стилист, вы можете создать несколько проектов на своем Веб-сайт WordPress, чтобы показать свои концепции. Если вы занимаетесь созданием бренда, вы можете использовать портфолио, чтобы продемонстрировать свою работу. Более того, мы можем пойти еще дальше и добавить различные категории для наших проектов. Это здесь что делает модуль Divi Filterable Portfolio? .

С помощью этого модуля мы можем показать нашу тяжелую работу простым и организованным способом. 

В сегодняшнем уроке мы настроим отдельные элементы сетки модуля Filterable Portfolio. Мы будем использовать макеты из бесплатных пакетов макетов Диви Конференция et Divi Онлайн-инструктор по йоге предоставляется при каждой покупке Divi . 

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

Что такое модуль фильтруемого портфеля Divi?

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

Здесь вы будете создавать свои индивидуальные проекты, которые будут заполнять модуль «Фильтруемое портфолио». Модуль дает нам два способа показать наши проекты: в формате сетки ou в формате полной ширины. Для нас мы будем использовать и настраивать формат сетки. 

С помощью модуля Filterable Portfolio мы сможем представить наши самые последние проекты. Пользователи нашего сайта увидят панель фильтров в верхней части сетки нашего портфолио. Оттуда они могут просматривать различные категории портфолио, которые мы разрешаем отображать в модуле.

Вот пример конфигурации сетки модуля с некоторыми примерами проектов:

Области, которые следует учитывать при создании фильтруемого портфолио Divi

Как и все моды Divi, модуль Filterable Portfolio имеет ряд функций, которые мы можем настроить в соответствии с нашими потребностями и желаниями. Таким образом, большинство функций, поставляемых с модулем, можно изменить на вкладке Проект из модального окна настроек модуля. Мы можем редактировать следующие области и многое другое:

  • Название проекта
  • Категория проекта
  • Виньетка
  • Фильтровать текст
  • Миниатюра при наведении
  • Нумерация страниц

Это не полный список, и мы даже не начали говорить о том, как CSS добавил более глубокие настройки в этот модуль!

Как мы будем настраивать модуль Divi Filterable Portfolio

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

Расположение элементов макета «Divi Conference»

настроить элементы сетки модуля Divi's Filterable Portfolio

Расположение элементов макета «Divi Online Yoga Instructor»

настроить элементы сетки модуля Divi's Filterable Portfolio

Вы можете легко загрузить оба макета с сайта Divi Строитель. 

Теперь давайте начнем!

Смотрите также: Divi: выберите между сеткой и полноразмерным макетом модуля Filterable Portfolio.

Настройка модуля фильтруемого портфолио Divi: «Divi Conference Edition»

Во-первых, нам нужно будет установить шаблон страницы мероприятия из пакета Divi Conference Layout Pack. После создания новой страницы в WordPress и активации Divi Builder мы войдем в библиотеку Divi.

Войдите в библиотеку макетов Divi

Нажмите на иконку « Загрузить из библиотеки чтобы войти в библиотеку макетов Divi

Найдите макет в библиотеке макетов Divi.

Используя функцию поиска в библиотеке макетов Divi, ищу расположение " Страница мероприятия конференции".

Установить макет

После того, как вы выбрали макет, нажмите кнопку " Использовать этот макет для установки макета на вашу страницу.

Удалить и заменить модуль изображения

Мы удалим модуль Image, показанный ниже, чтобы освободить место для модуля Filterable Portfolio, который мы будем настраивать. Нажми на " Удалить после наведения на изображение, чтобы удалить фото.

Вставьте модуль фильтруемого портфолио Divi

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

Настройка количества постов и макета портфолио

По умолчанию этот модуль представит вашу работу в одном столбце. Однако мы будем использовать макет сетки, который по умолчанию имеет 4 столбца. 

Поэтому мы рекомендуем выбирать количество постов для вашего портфолио, кратное 4 (4, 8, 12, 16 и т. д.). 

Для этого урока мы будем использовать 12 проектов в нашей сетке.

Начните настраивать фильтруемое портфолио Divi: заголовок и метатекст

Теперь, когда наши проекты отображаются в виде сетки, давайте свяжем некоторые элементы дизайна выбранного нами шаблона. В этом случае мы будем использовать стиль, предоставленный в пакете Divi Conference Layout Pack в нашем новом модуле.

Текстовый стиль

  • Выравнивание текста: по центру
  • Цвет текста: темный

Стиль текста заголовка

  • Уровень заголовка заголовка: H2
  • Шрифт заголовка: Krona One
  • Цвет текста: #000000

Стиль метатекста

  • Мета-шрифт: по умолчанию (Open Sans)
  • Цвет метатекста: #ff6651

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

Изменить границу эскиза проекта и закругленные углы

В нашем пакете Divi Conference Layout мы используем уникальную комбинацию закругленных углов, чтобы придать уникальную форму некоторым ключевым кадрам в пакете. Применим этот стиль к миниатюрам нашего модуля.

Фото товара

  • Изображение:
    • Закругленные углы: 50px 50px 50px 0px
    • Стили границ: все
    • Ширина границы: 3px
    • Цвет: #000000
    • Стиль границы: сплошной

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

Настройка наложения при наведении курсора

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

суперпозиция

  • Цвет значка масштабирования: #bcf5fd
  • Цвет наложения при наведении: #ff6651
  • Средство выбора значков при наведении: масштабирование

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

Настройка разбивки на страницы

Теперь мы начнем использовать небольшие фрагменты CSS, чтобы добавить дополнительную настройку в наш модуль Filterable Portfolio. Во-первых, мы настроим нумерацию страниц этого модуля. Далее мы удалим границу, которая появляется над ним, с помощью одной строки CSS.

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

  • Пагинация:
    • Шрифт: Крона One
    • Выравнивание текста: по центру
    • Цвет текста: #ff6651, #000000 (при наведении)

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

Пагинация портфолио 

border-top: 0px;

Использование настроек Divi и CSS для настройки текста фильтра

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

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

Текст критериев фильтрации

  • Критерии фильтрации:
    • Шрифт: Крона One
    • Цвет шрифта: #ffffff, #000000 (при наведении)

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

Во-первых, мы добавим в настройки страницы фрагмент CSS, который добавит фон к тексту фильтра. Во-вторых, мы настроим фильтр активного портфеля с помощью вкладки Фильтр du модуль.

настроить элементы сетки модуля Divi's Filterable Portfolio

Чтобы получить доступ настройки страницы, нажмите на три точки в середине экрана. Ensuite, выберите значок шестеренки который откроет настройки страницы. Затем вы перейдите на вкладку Пользовательский CSS и введите следующее, чтобы добавить фон к тексту фильтра.

Пользовательский CSS

В этом фрагменте CSS мы ориентируемся на цвет фона фильтра. Мы также нацеливаем и стилизуем его состояние наведения. Далее на повестке дня давайте добавим в модуль еще немного CSS и выделим вкладку «Активный фильтр».

/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: #000000;
}
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
}

Стиль активной вкладки фильтра портфолио

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

Мы перейдем на вкладку Фильтр модуля Filterable Portfolio и добавьте текст к состояниям по умолчанию и наведению этой функции. Вот свойства CSS, которые мы добавим по умолчанию:

background: #ff6651;
color: #ffffff !important;

Состояние при наведении

При наведении мы изменим фон на черный.

color: #000000!important;

Окончательный вид дизайна фильтруемого портфолио Divi с «Divi Conference»

Вот окончательный вид!

настроить элементы сетки модуля Divi's Filterable Portfolio

А теперь вот как это выглядит при наведении!

настроить элементы сетки модуля Divi's Filterable Portfolio

Настройка модуля фильтруемого портфолио Divi: «Инструктор по йоге онлайн Divi»

Как и в Divi Conference Edition, найдите свой макет в пакете макетов онлайн-инструктора по йоге внутри Divi Builder. 

В этом уроке мы будем использовать макет целевой страницы. Прокрутите вниз до раздела «Классы раздела» с заголовком «Раздел». Все предстоящие занятия.

настроить элементы сетки модуля Divi's Filterable Portfolio

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

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

Затем мы заменим их одним столбцом в строке внутри. Затем мы добавим наш модуль Filterable Portfolio.

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

Теперь давайте сделаем что-то немного другое с информацией, которую мы представляем на карте. 

Во вкладке Содержание, перейдите к Элементы и отменить выбор Показать категории . Это означает, что модуль «Портфолио» будет отображать только название проекта без названия категории, в которой он находится.

Настройка текста критериев фильтрации, заголовка проекта и текста разбивки на страницы

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

Текст

  • Выравнивание текста: по центру
  • Цвет текста: светлый

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

  • Шрифт заголовка: Cinzel
  • Цвет текста заголовка: #ffffff

Текст критериев фильтрации

  • Критерии фильтра Вес шрифта: полужирный
  • Цвет текста критерия фильтрации: #ffffff

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

  • Вес шрифта пагинации: полужирный

Вот как сейчас выглядит наш фильтруемый модуль портфолио. Это не так много, но мы добираемся туда медленно!

настроить элементы сетки модуля Divi's Filterable Portfolio

Создание полупрозрачного наложения при наведении

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

  • Цвет значка масштабирования: #323741
  • Цвет наложения при наведении: rgba (255 201 165, 0,85)
  • Средство выбора значков при наведении: найдите лист и увидите значок выше.

Добавление границы к элементам сетки портфолио с помощью пользовательского CSS

Как и в нашем первом примере, теперь мы будем использовать CSS, чтобы добавить больше интереса к нашему модулю Filterable Portfolio. 

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

Мы также будем использовать «border» в качестве класса CSS для этого модуля.

  • Класс CSS: граница

Пользовательский CSS

/* Border */
.border .et_pb_grid_item {
border: 2px solid #ffffff;
padding: 5px;
}

Теперь у нас есть модуль Filterable Portfolio с красивой рамкой и отступом вокруг каждого элемента сетки.

настроить элементы сетки модуля Divi's Filterable Portfolio

Добавлен CSS для оформления границы страницы.

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

/* Pagination Styling */
.et_pb_filterable_portfolio .et_pb_portofolio_pagination {
border-top: 2px solid #adc6d9;
}

Стиль текста критериев фильтра

Подобно стилю нашего модуля Divi Conference Portfolio, мы хотим добавить джаз в наши фильтры категорий. Опять же, мы хотим рисовать из стиля, который уже присутствует в предоставленном нам шаблоне. 

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

/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: none;
}
 
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
color: #323741 !important;
}

С этими двумя новыми дополнениями к нашему пользовательскому CSS, наш модуль Filterable Portfolio выглядит так.

настроить элементы сетки модуля Divi's Filterable Portfolio

Однако обратите внимание, как теряется фильтр активного портфеля. На нем всегда светлый фон с белым текстом. Давайте перейдем к настройкам модуля и добавим немного CSS, чтобы изменить это.

Пользовательский CSS

Активный фильтр портфеля:

background: #ffffff;
color: #323741 !important;

Удалить анимацию модуля

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

Пользовательский CSS

/* Remove transition */
.et_pb_filterable_portfolio .et_pb_portfolio_item.active {
transition: none;
}
</code><code>
.et_pb_portfolio_item {
animation: none!important;
transition: none !important;
}

Читайте также: Divi: как изменить количество колонок в блоге

Изменить сетку портфолио с четырех столбцов на три

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

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

настроить элементы сетки модуля Divi's Filterable Portfolio

Пользовательский CSS

Для этого последнего фрагмента мы добавим идентификатор CSS. # сетка из трех столбцов к нашему модулю. Мы по-прежнему сохраним наш класс CSS нетронутым.

/* 4 to 3 Columns */
@media only screen and ( min-width: 768px ) {
#three-column-grid .et_pb_grid_item {
width: 28.333%;
margin: 0 7.5% 7.5% 0;
}
 
#three-column-grid .et_pb_grid_item:nth-child(3n) {
margin-right: 0;
}
 
#three-column-grid .et_pb_grid_item:nth-child(3n+1) {
clear: left;
}
 
#three-column-grid .et_pb_grid_item:nth-child(4n+1) {
clear: unset;
}
}

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

Заключение

Как и в большинстве модулей Divi, настройки Divi можно дорабатывать с помощью CSS. Демонстрация вашей работы — важная часть ведения онлайн-бизнеса, блога или бренда. 

Таким образом, наличие организованного способа отображения вашей работы имеет важное значение. Заработайте советы, которыми поделились сегодня, чтобы принять участие в собственном путешествии по дизайну модуля Divi's Filterable Portfolio.

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

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

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

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

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

...

Отправить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.