Как оформить нумерацию страниц в фильтруемом модуле портфолио Divi

Фильтруемый модуль портфолио Divi — это отличный и простой способ отобразить вашу работу и проекты на вашем веб-сайте. Вы можете использовать категории для создания различных фильтров для вашего модуля портфолио, и он предлагает простой способ обновлять портфолио без необходимости каждый раз изменять дизайн вашего веб-сайта. Просто добавьте новый проект в панель управления WordPress, после чего он автоматически появится в модуле портфолио на вашем веб-сайте, если он правильно классифицирован.

В этом уроке мы покажем вам 3 различных способа стилизации разбивки на страницы в фильтруемом модуле портфолио Divi. Настроив этот дизайн, вы можете подогнать модуль портфолио к общему дизайну вашего веб-сайта и привлечь внимание к работе, которую хотите отобразить.

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

Краткий обзор

Вот предварительный просмотр того, что мы будем разрабатывать

Первый стиль пагинации

Второй стиль пагинации

Третий стиль пагинации

Что нужно для начала

Установите и активируйте Диви

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

Добавить портфолио проектов

Чтобы портфолио заполнялось проектами после его добавления на нашу страницу, нам сначала нужно добавить проекты на панель инструментов WordPress. Выберите «Проекты» на боковой панели панели инструментов WordPress, затем добавьте новый проект. Убедитесь, что у проекта есть избранное изображение и категория, чтобы его можно было отфильтровать.

Теперь вы готовы начать!

Как оформить нумерацию страниц в фильтруемом модуле портфолио Divi

Создайте новую страницу с готовым макетом

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

Добавьте новую страницу на свой веб-сайт, дайте ей название и выберите параметр «Использовать Divi Builder».

В этом примере мы будем использовать готовый макет из библиотеки Divi, поэтому выберите «Обзор макетов».

Найдите и выберите макет страницы портфолио художника.

Выберите «Использовать этот макет», чтобы добавить макет на свою страницу.

Теперь мы готовы построить нашу конструкцию.

Добавьте модуль фильтруемого портфеля

Мы заменим существующий контент портфолио на этой странице фильтруемым модулем портфолио. Сначала удалите существующий раздел портфолио.

Затем вставьте новый раздел на страницу под разделом «последняя работа».

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

Добавьте фильтруемый модуль портфолио в новую строку.

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

Фильтруемые настройки портфеля

Теперь давайте настроим дизайн фильтруемого портфолио. Откройте настройки модуля, затем измените количество сообщений на 6.

• Количество сообщений: 6

В элементах отключите Показать категории.

• Категории шоу: Нет

Перейдите на вкладку «Дизайн» и откройте настройки макета. Установите макет на сетку.

• Макет: Сетка

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

• Цвет значка масштабирования: #fdd23a
• Цвет наложения при наведении: rgba (61,61,61,0,28)
• Средство выбора значков при наведении: значок «Плюс»

Откройте настройки изображения, затем добавьте тень изображения.

Затем установите цвет тени.

• Цвет тени: #f2f2f2

Затем измените настройки шрифта заголовка следующим образом:

• Шрифт заголовка: Merriweather
• Начертание шрифта заголовка: полужирный
• Цвет текста заголовка#000000

Установите размер текста заголовка и высоту строки.

• Размер текста заголовка: 25 пикселей
• Высота строки заголовка: 2em

Перейдите в раздел Filter Criteria Text и измените настройки шрифта следующим образом:

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

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

Первый стиль пагинации

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

В настройках фильтруемого портфолио откройте настройки текста разбивки на страницы. Настройте шрифт следующим образом:

• Шрифт пагинации: Montserrat
• Вес шрифта пагинации: полужирный
• Выравнивание текста пагинации: справа
• Цвет текста пагинации: #000000

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

• Размер текста пагинации: 17px
• Размер текста пагинации при наведении: 21px

Наконец, перейдите на вкладку «Дополнительно» и добавьте следующий пользовательский CSS в раздел CSS «Разбивка на страницы». Это включает желтый цвет на активной странице.

color: #FDD23A !important;

Окончательный дизайн

И вот окончательный вид нашего первого дизайна.

Второй стиль пагинации

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

В настройках фильтруемого портфолио откройте настройки текста разбивки на страницы. Настройте шрифт следующим образом:

• Шрифт пагинации: Merriweather
• Вес шрифта пагинации: полужирный
• Выравнивание текста пагинации: по центру
• Цвет текста пагинации: #9e9e9e
• Цвет текста пагинации при наведении: #000000

Затем установите размер текста и высоту строки.

• Размер текста пагинации: 26px
• Высота строки пагинации: 2em

Перейдите на вкладку «Дополнительно» и добавьте следующий пользовательский CSS в раздел CSS разбиения на страницы портфолио. Это добавит цвет фона и удалит границу:

background:#f2f2f2;
border:none;

Наконец, добавьте следующий CSS-код в раздел CSS-разметки активной страницы, чтобы задать другой цвет текста для активной страницы.

color: #000000 !important;

Окончательный дизайн

Вот окончательный дизайн для нашего второго стиля пагинации.

Третий стиль пагинации

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

В настройках фильтруемого портфолио откройте настройки текста разбивки на страницы. Затем настройте шрифт следующим образом:

• Шрифт пагинации: Merriweather
• Вес шрифта пагинации: полужирный
• Выравнивание текста пагинации: по центру
• Цвет текста пагинации: #000000
• Цвет текста пагинации при наведении: #FDD23A
• Размер текста пагинации: 26px

Перейдите на вкладку «Дополнительно» и добавьте следующий пользовательский CSS в раздел CSS разбиения на страницы портфолио, чтобы удалить границу:

border:none;

Наконец, добавьте следующий CSS-код в раздел CSS для активной страницы разбивки на страницы. Этот CSS установит другой цвет текста и круглый фон для активной страницы.

padding: 10% 60% 10% 60%;
background-color: #FDD23A;
border-radius: 80%;
color: #ffffe7!important;

Окончательный дизайн

Вот окончательный вариант нашего последнего макета.

Конечный результат

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

Первый стиль пагинации

Второй стиль пагинации

Третий стиль пагинации

Последние мысли

Фильтруемый модуль портфолио легко настроить в соответствии с дизайном вашего веб-сайта, и вы можете быстро добавлять новые проекты с панели инструментов WordPress, чтобы поддерживать свое портфолио в актуальном состоянии. Этот модуль отлично подходит для дизайнеров, художников, фотографов и других творческих людей, чтобы продемонстрировать свою работу с красивыми изображениями и удобной навигацией. Чтобы узнать больше об уникальных идеях дизайна портфолио, ознакомьтесь с этим руководством по созданию динамического шаблона проекта портфолио. Использовали ли вы фильтруемый модуль портфолио на своем веб-сайте? Дайте нам знать об этом в комментариях!