Удобное руководство по стилям разбивки на страницы в Divi

Пагинация - это один из тех элементов веб-сайта, о котором часто забывают, особенно когда речь идет о дизайне. И есть несколько мест, где разбиение на страницы может быть уместным на вашем веб-сайте. По сути, разбиение на страницы (или меню разбивки на страницы) позволяет пользователям перемещаться по нескольким страницам элементов (например, по архиву сообщений). Это особенно полезно для сокращения исходного содержимого страницы.

Divi имеет несколько модулей, которые включают разбиение на страницы (например, модуль галереи), которые можно стилизовать с помощью встроенных настроек. Некоторые из этих модулей (например, блог и портфолио) наследуют разбивку на страницы по умолчанию темы Divi (или WordPress), которая может быть чрезмерно упрощена для некоторых сайтов. Но с помощью плагина вы можете заменить разбиение на страницы всей вашей темы на более сложное. Затем вы можете стилизовать его с помощью CSS, как вам нужно.

В этом уроке я покажу вам, как стилизовать разбиение на страницы в Divi. Вот что мы рассмотрим:

• На что следует обратить внимание при стилизации разбивки на страницы в Divi
• Стилизация модуля галереи Divi и разбивки на страницы модуля фильтруемого портфолио
• Расширенные стили разбивки на страницы для модуля галереи и модуля фильтруемого портфолио
• Модуль оформления блога и разбивка на страницы модуля портфолио
• Добавление сложной разбивки на страницы в Divi с помощью плагина WP-PageNavi
• Стилизация разбивки на страницы WP-PageNavi с помощью пользовательского CSS

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

Sneak Peek

Этот пост в основном посвящен стилю нумерации страниц. Однако вот несколько сложных стилей нумерации страниц, которые я покажу вам, как их создавать.

Начиная

Подпишитесь на наш канал Youtube

Для этого урока вам понадобится следующее:

• Тема Divi установлена ​​и активна.
• Чтобы протестировать дизайн разбивки на страницы различных модулей, вам понадобится фиктивный контент. Например, для разработки разбивки на страницы модуля портфолио (или фильтруемого портфолио) вам потребуется около 12–16 проектов, добавленных к вашей теме, чтобы у вас было достаточно контента, чтобы разбивка на страницы вступила в силу. Для модуля галереи вам также понадобится около 12-16 изображений для заполнения галереи.
• Если вы собираетесь использовать плагин WP-PageNavi, вам необходимо установить и активировать плагин. Это бесплатный плагин, который можно загрузить из каталога WordPress из панели управления WordPress вашего сайта. Просто перейдите в Плагин> Добавить новый и найдите WP-PageNavi.
  

После того, как у вас есть фиктивный контент, вы готовы к созданию новой страницы. На панели управления WordPress перейдите к Страницы> Добавить новый. Дайте странице название и разверните Divi Builder. Выберите вариант «Строить с нуля». Затем щелкните «Сборка во внешнем интерфейсе».

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

На что следует обратить внимание при стилизации разбивки на страницы в Divi

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

Шрифт разбивки на страницы

Пагинация - отличное место, чтобы оторваться от основных шрифтов, которые вы используете для своего сайта. Вы хотите выбрать лучшие шрифты, ориентированные на пользовательский интерфейс и навигацию. А поскольку разбиение на страницы в основном состоит из чисел, вы хотите, чтобы шрифт отображал все числа с одинаковой высотой и шириной (то, что эксперты по типографике называют линейным и табличным). Некоторые из моих консервативных фаворитов включают Oxygen, Nunito Sans и Source Sans Pro. А если у вас много страниц в разбивке на страницы, вам может потребоваться освободить место, выбрав сокращенный шрифт, такой как Fjalla One или Roboto Condensed.

Стиль шрифта разбивки на страницы

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

Интервал между буквами при разбивке на страницы

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

Выравнивание текста при разбивке на страницы

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

Интерактивное пространство

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

Размер текста разбивки на страницы

Размер текста разбивки на страницы обычно довольно мал. Вероятно, это сделано для того, чтобы не отвлекать пользователей от содержимого страницы. Однако больший размер текста может увеличить интерактивное пространство ссылки для пагинации и сделать его более заметным для пользователей. Мне нравится использовать единицу длины vw для большего текста разбивки на страницы, чтобы он хорошо масштабировался с браузером и контентом.

Высота строки пагинации

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

Тень текста разбивки на страницы

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

Пагинация активной страницы

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

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

Но для разбивки на страницы на уровне темы вы можете получить сложное решение, используя плагин WP-PageNavi с настраиваемым CSS (подробнее об этом позже).

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

Стилизация модуля галереи Divi и разбивки на страницы модуля фильтруемого портфолио

Когда Divi Builder активен на новой странице, создайте новый обычный раздел со строкой из одного столбца. Затем добавьте в строку фильтруемый модуль портфолио. Как упоминалось ранее, убедитесь, что у вас создано 12-16 проектов, чтобы вы могли видеть нумерацию страниц.

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

Количество сообщений: 4 (чтобы вы могли видеть больше ссылок на страницы в нумерации страниц)

Название шоу: НЕТ
Показать категории: Нет

По умолчанию Divi будет показывать разбиение на страницы, поэтому оставьте для этого параметра значение ДА.

Вы должны увидеть разбивку на страницы в правом нижнем углу портфолио.

Чтобы задать стиль нумерации страниц, перейдите на вкладку «Дизайн» и откройте переключатель «Разбивка текста на страницы», чтобы увидеть все доступные параметры. Обновите следующее:

Макет: сетка
Шрифт разбивки на страницы: Source Sans Pro
Стиль шрифта разбивки на страницы: TT
Выравнивание текста нумерации страниц: по центру
Цвет текста разбивки на страницы: #cccccc
Размер текста разбивки на страницы: 4vw (рабочий стол), 38px (планшет и телефон)
Интервал между буквами пагинации: 1vw
Высота строки пагинации: 2em

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

color: #0096eb !important;

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

Другие фрагменты Quick CSS

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

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

border: none;

Чтобы дать вашей разбивке на страницы полную границу, вы можете ввести следующий CSS в разделе Portfolio Pagination:

border: 2px solid #dddddd;

Чтобы задать фоновый цвет для разбивки на страницы, вы можете ввести следующий CSS-код в разделе «Разбивка портфолио»:

background: #333333;

Также работает с модулем галереи

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

Расширенные стили разбивки на страницы для модуля галереи и модуля фильтруемого портфолио

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

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

Макет: сетка
Размер текста разбивки на страницы: 16 пикселей
Высота строки пагинации: 2,5 мкм

На вкладке «Дополнительно» добавьте следующий класс CSS:

Класс CSS: pagi-space

Это позволит применить наш CSS только к этому модулю.

Теперь сохраните настройки и откройте модальное всплывающее окно «Параметры страницы». На вкладке «Дополнительно» добавьте следующий код CSS в поле «Пользовательский CSS».

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination, .et_pb_gallery.pagi-space .et_pb_gallery_pagination {
  border: none; 
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a {
  padding: 1em 1.5em;
  background: #eeeeee;
  border: 1px solid #eeeeee;
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a:hover, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a.hover {
  border-color: #333333;
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a.active, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a.active {
  background: #333333;
  color: #ffffff;
  border-color: #333333;
}

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

Этот код будет стилизовать разбиение на страницы как для модуля фильтруемого портфолио, так и для модуля галереи. Просто убедитесь, что вы добавили в модуль CSS-класс «pagi-space», чтобы он вступил в силу.

Вот результат модуля фильтруемого портфолио.

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

Модуль блога и модуль портфолио наследуют стандартную разбивку на страницы WordPress, которая позволяет вам перемещаться по архиву сообщений со ссылкой на «Старые записи» и ссылкой на «Следующие записи».

Вот как выглядит пагинация по умолчанию на странице архива блога в теме Divi:

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

Если вы используете модуль блога (или модуль портфолио), вы можете стилизовать текст нумерации страниц с помощью встроенных настроек.

Это простое и элегантное решение для большинства случаев. Однако, если вы ищете более сложную разбивку на страницы, чтобы заменить разбивку на страницы Divi / WordPress по умолчанию, есть решение, которое настолько простое, что может вас удивить.

Добавление сложной разбивки на страницы в Divi с помощью плагина WP-PageNavi

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

Добавление плагина в Divi

Если вы еще этого не сделали, установите плагин, как описано в разделе «Начало работы» в верхней части сообщения. Как только плагин будет установлен и активирован, новая форма разбивки на страницы будет автоматически отображаться во всей вашей теме.

Это также повлияет на модуль блога и модуль портфолио.

Настройки плагина

Вы можете найти настройки плагина на панели инструментов WordPress, перейдя в «Настройки»> «WP-PageNavi».

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

Стилизация разбивки на страницы WP-PageNavi с помощью пользовательского CSS

Поскольку вы, вероятно, захотите стилизовать разбиение на страницы для всей темы, имеет смысл добавить CSS в настройщик тем или в файл style.css дочерней темы. Поместите следующий CSS в поле Дополнительный CSS Настройщика тем:

/*styles the wp-pagenavi pagination links*/
.wp-pagenavi a, .wp-pagenavi span {
  padding: 0.3em 0.8em !important;
  font-size: 2em !important;
  color: #333333;
  line-height: 2em;
  background: #eeeeee;
  transition: all .5s;
}

/*styles the wp-pagenavi current page number*/
.wp-pagenavi span.current {
  color: #ffffff !important;
  background: #333333 !important;
}

/*styles the wp-pagenavi pagination links on hover*/
.wp-pagenavi a:hover {
  color: #ffffff !important;
  background: #333333 !important;
}

/*styles the wp-pagenavi pages text*/
.wp-pagenavi .pages {
  background: none;
}

Вот окончательный результат.

Стилизация WP-PageNavi в модуле блога и модуле портфолио

Как упоминалось ранее, модуль блога и модуль портфолио наследуют навигацию по страницам WordPress по умолчанию. Поскольку это было заменено новой сложной разбивкой на страницы WP-PageNavi, модули также будут отображать эту новую разбивку на страницы.

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

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

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

Разбиение на страницы не должно оставаться второстепенным при создании веб-сайта в Divi. Есть несколько полезных встроенных опций, помогающих работать с модулями, использующими разбиение на страницы. А с помощью некоторого настраиваемого CSS вы можете создать любой стиль, какой захотите. Плагин WP-PageNavi - это элегантное решение для добавления сложной разбивки на страницы по всей теме Divi. Он не только безупречно работает с Divi, но и дает вам дополнительные параметры, которые вы можете легко настроить. Стилизация разбивки на страницы WP-PageNavi требует некоторого CSS, но, надеюсь, шаблон, используемый в этой статье, направит вас на правильный путь.

Примеры дизайна в этом посте были намеренно простыми.

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!