Как добавить прикрепленное меню категории в шаблоны блога в Divi

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

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

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

Sneak Peek

Вот меню прикрепленной категории, добавленное в шаблон сообщения

Вот нижнее закрепленное меню категорий на мобильном устройстве.

Вот меню категории в шаблоне страницы категории.

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

Загрузите шаблон (ы) БЕСПЛАТНО

Чтобы получить доступ к шаблонам с прикрепленным меню категорий из этого руководства, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете лишены подписки или получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

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

Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и добавьте один из json-файлов в Divi Theme Builder, используя опцию «Переносимость Theme Builder».

Давайте перейдем к руководству, ладно?

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

Для начала вам необходимо сделать следующее:

1. Если вы еще этого не сделали, установите и активируйте тему Divi.
2. Загрузите Theme Builder Pack # 6, чтобы приступить к работе над новым дизайном.

После этого все готово.

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

Добавление прикрепленного меню дополнительной категории в шаблоны блога

Загрузка пакета разработчика тем №6

Для этого урока мы собираемся использовать пакет Theme Builder Pack №6. После того, как вы загрузите пакет из сообщения в блоге, перейдите на панель управления WordPress и перейдите в Divi> Theme Builder.

Затем щелкните значок переносимости в правом верхнем углу. Во всплывающем окне переносимости выберите вкладку импорта и выберите файл Divi-Theme-Builder-Pack-6-All.json. Затем нажмите кнопку «Импортировать шаблоны Divi Theme Builder».

Это позволит импортировать все шаблоны в конструктор тем.

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

Создание меню новой категории в WordPress

Меню категорий можно создать так же, как обычное меню в WordPress. На панели управления WordPress перейдите в Внешний вид> Меню. Щелкните ссылку «Создать новое меню», дайте меню имя и нажмите кнопку «Создать меню».

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

Создание прикрепленного меню категорий в основной части шаблона сообщения.

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

Открыть редактор макета шаблона области тела

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

Добавить новый раздел и строку в верхнюю часть шаблона

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

Настроить раздел

Перед добавлением модуля откройте настройки раздела и задайте для него фон и отступы следующим образом:

• Цвет фона: # f92c8b
• Набивка: 1vw сверху, 1vw снизу

Настроить строку

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

• Цвет фонового градиента слева: # f92c8b
• Правый цвет градиента фона: # ffd625
• Направление градиента: 90 градусов
• Padding: 0px сверху, 0px снизу
• Закругленные углы: 20 пикселей

Добавить модуль меню

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

Затем выберите меню категорий, которое вы создали ранее, из раскрывающегося меню. После выбора пункты меню появятся в меню.

Модуль меню дизайна в соответствии с шаблоном

Удалите цвет фона по умолчанию, чтобы отображался цвет фона строки.

Обновлены следующие настройки дизайна:

• Стиль: по центру
• Шрифт меню: Ubuntu
• Толщина шрифта меню: полужирный
• Стиль шрифта меню: TT (заглавные)
• Цвет текста меню: #ffffff
• Расстояние между буквами меню: 2 пикселя
• Высота строки меню: 2em
• Цвет фона выпадающего меню: #ffffff
• Цвет строки раскрывающегося меню: # f92c8b

• Цвет текста раскрывающегося меню: # 222222
• Цвет текста мобильного меню: # 222222
• Цвет значка меню гамбургера: #ffffff
• Шрифт значка меню гамбургера: 40px
• Ширина: 90%
• Выравнивание модуля: по центру

Видимость сечения и строки

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

Откройте настройки раздела и обновите следующее:

• Горизонтальное переполнение: видимое
• Вертикальное переполнение: видимое
• Z-индекс: 999

Откройте настройки строки и обновите следующее:

• Горизонтальное переполнение: видимое
• Вертикальное переполнение: видимое

Закрепление раздела (содержащего меню)

Это, конечно, необязательно, но чтобы создать закрепленное меню категории, откройте настройки раздела и добавьте следующий настраиваемый CSS к основному элементу:

position: -webkit-sticky !important;
position: sticky !important;
top: 0px;

Дублировать раздел для создания меню нижней категории

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

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

Обновите липкий CSS с нижним расположением.

Поскольку нам нужно только это меню, чтобы «закрепиться» на мобильном устройстве, откройте настройки раздела и удалите Custom CSS for Desktop. Затем добавьте следующий настраиваемый CSS под вкладку планшета.

position: -webkit-sticky !important;
position: sticky !important;
bottom: 0px;

Изменить направление раскрывающегося меню для меню нижней категории

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

• Направление раскрывающегося меню: вверх

Добавить ярлык меню «Категории»

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

position: absolute !important;
color: #ffffff!important;
font-size: 16px;
content: "Categories";
line-height: 2em;
left: 50%;
margin-left: -110px;

Вот как выглядит меню на мобильном телефоне.

Скрыть верхнее меню на мобильном устройстве

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

Сохраните оба меню / строки в библиотеке Divi.

Мы закончили создание меню с двумя категориями для макета. Чтобы упростить добавление их в другие шаблоны, мы можем сохранить их в нашей библиотеке Divi. Чтобы сохранить верхнее меню, выберите значок «Добавить в библиотеку» в меню раздела. Затем дайте макету имя и нажмите кнопку «Сохранить в библиотеке».

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

Окончательный результат шаблона сообщения в блоге

Давайте посмотрим, как выглядит живое сообщение с нашим новым прикрепленным меню категорий.

Вид рабочего стола (верхнее меню)

Мобильный вид (нижнее меню)

Добавление прикрепленного вторичного меню категории в шаблон страницы категории

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

Отредактируйте область тела шаблона страницы категории

Найдите шаблон, назначенный для «Все страницы категорий», и щелкните значок редактирования в настраиваемой области основного текста.

Добавить меню верхней категории из библиотеки

В редакторе макета шаблона щелкните синий значок плюса, чтобы добавить новый раздел. Затем выберите вкладку «Добавить из библиотеки» и выберите в списке меню верхней категории.

Затем переместите раздел в верхнюю часть макета шаблона.

Добавить нижнее меню категорий из библиотеки

Затем нажмите, чтобы добавить новый раздел в самый низ макета. Затем добавьте меню нижней категории из библиотеки.

Обновить цвет активной ссылки для меню

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

• Цвет активной ссылки: # 4160fd

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

Окончательный результат шаблона страницы категории

Добавление меню прикрепленной категории в шаблон страницы блога

Мы также можем добавить наше закрепленное меню категорий на страницу блога нашего веб-сайта. Страница блога в основном является домашней страницей вашего блога и обычно показывает ленту всех ваших сообщений в блоге. С помощью Divi Theme Builder мы можем создать шаблон для страницы блога и легко добавить меню категорий.

Создание шаблона блога

Сначала продублируйте шаблон страницы категории.

Затем назначьте повторяющийся шаблон для блога.

Отредактируйте пользовательское тело шаблона блога.

Настройте макет шаблона блога

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

Добавить ползунок публикации в полную ширину

Затем добавьте в раздел полноразмерный модуль Post Slider.

Установите Content, чтобы вывести «Сообщения для текущей страницы». Затем убедитесь, что он загружает правильный динамический контент для страницы блога.

Обновите настройки ползунка публикации с полной шириной страницы следующим образом:

• Шрифт заголовка: Ubuntu
• Плотность шрифта заголовка: средний
• Шрифт основного текста: Ubuntu

Переместить меню под слайдер публикации

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

Создание и назначение страницы сообщений (или блога)

Убедитесь, что у вас есть страница блога, назначенная в WordPress. Для этого перейдите в «Настройки»> «Чтение». Затем для отображения домашней страницы выберите статическую страницу. Затем выберите страницу, которую вы хотите использовать для страницы сообщений.

Окончательный результат шаблона страницы блога

Обратите внимание, как меню категорий становится липким, когда оно достигает верхней части страницы.

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

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

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

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