Особенности плагина Divi - модуль Divi Breadcrumbs

Когда я просматриваю веб-сайт, один из инструментов навигации, который я ищу, - это хлебные крошки. Они отлично подходят для того, чтобы показать вам, где вы находитесь в иерархии навигации, и облегчить поиск других статей в этой структуре. Панировочные сухари могут быть добавлены в Divi с помощью плагина Divi Breadcrumbs Module.

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

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

Зачем использовать панировочные сухари?

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

Модуль Divi Breadcrumbs улучшает SEO, предоставляя Google информацию об иерархии вашего сайта. Это означает, что вы должны выбрать ключевые слова для своих категорий, по которым вы хотите ранжироваться. Это также заставляет дизайнеров использовать более понятные названия категорий.

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

Модуль Divi Breadcrumbs

Загрузите и активируйте плагин как обычно. Модуль появится в ярко-красном цвете под названием Hollywood Cerise. Многие плагины хлебных крошек требуют Yoast, потому что они извлекают свои хлебные крошки из плагина Yoast, но модуль Divi Breadcrumbs не требует Yoast. Вместо этого он создает свои собственные панировочные сухари. Других плагинов не требуется.

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

Примеры модуля Divi Breadcrumb

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

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

В этом примере я разместил панировочные сухари в центре, добавил градиентный фон и увеличил размер шрифта для заголовка статьи (14 пунктов) и ссылок (12 пунктов). Текст белый. Поскольку они напечатаны с градиентом, я сделал их одного цвета. Еще я изменил разделитель строк. В обычном посте я бы не стал обращать внимание на хлебные крошки с градиентным фоном, но это показывает, что вы можете с ними делать.

Добавление панировочных сухарей в полноэкранное меню

Лучше всего добавлять панировочные сухари вверху страницы. В этом примере я создал сообщение, используя полноразмерное меню, и установил отступы и поля равными 0 как для полноширинного, так и для стандартного раздела. Я встроил категории, чтобы показать иерархию.

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

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

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

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

Стилизация разделителя

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

В этом примере используется фиолетовый шрифт по умолчанию и размер шрифта 20 для разделителей.

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

Вот тот же разделитель с использованием шрифта Black Ops One. Он смелее и выделяется больше.

Это Droid Serif, шрифт размером 20 пунктов и межстрочный интервал 4 пикселя. Я сделал шрифт темно-красным.

Даже точки меняют форму в зависимости от выбора шрифта. Это Passion One на 24 балла. Стоит потратить некоторое время на эксперименты со шрифтами, цветами и размерами, чтобы создать что-то уникальное. Это легко сделать с помощью стандартных элементов управления стилем.

Использование модуля Divi Breadcrumbs с Extra

Модуль Divi Breadcrumbs работает с Extra и плагином Divi Builder. Вот посмотрите на Extra с панировочными сухарями под изображением справа. Я включил название поста, так как хлебные крошки находятся так далеко от заголовка в верхней части экрана. Он использует разделитель полос.

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

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

Лицензия, обновления, поддержка

Плагин можно установить на неограниченное количество веб-сайтов для вас и ваших клиентов. Обновления на всю жизнь. Включает шесть месяцев поддержки.

• Нажмите здесь, чтобы приобрести: Модуль Divi Breadcrumbs

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

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

Если вы заинтересованы в добавлении хлебных крошек в макеты Divi, модуль Divi Breadcrumbs может быть тем плагином, который вам нужен.

Мы хотели бы получить известие от вас! Вы пробовали модуль Divi Breadcrumbs? Расскажите нам о своем опыте в комментариях ниже.

Лучшее изображение через Yevgenij_D / shutterstock.com