Как добавить «новый» или «избранный» угловой ярлык к элементу меню в вашем пользовательском заголовке Divi

При создании заголовка вашего сайта уделение особого внимания поведению посетителей может помочь повысить рейтинг кликов. Заголовок должен не только хорошо выглядеть, но и помогать посетителям переходить на самые важные страницы вашего сайта. Часто используемый метод - это добавление призыва к действию внутри вашего глобального заголовка, но это не единственный вариант. Вы также можете выбрать угловую метку для пунктов меню, которые хотите привлечь внимание. В этом руководстве мы покажем вам, как добавить метку «избранные» или «новые» к определенным пунктам меню. Эти угловые метки помогут выделить пункты меню в списке, что увеличивает вероятность того, что ваши посетители будут любопытными и будут нажимать на них. Вы также сможете скачать глобальный шаблон заголовка!

Давайте перейдем к этому.

Предварительный просмотр

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

Загрузите шаблон глобального заголовка БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

1. Добавьте ярлыки к пунктам меню WordPress.

Перейти к меню во внешнем виде

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

Добавить ярлык к избранному элементу меню

Затем мы добавим избранную метку к элементу меню по нашему выбору, разместив HTML-теги метки перед элементом меню.

• <label class="menu-label featured-label">Featured</label>

  Услуги

Добавить ярлык к новому пункту меню

Мы сделаем то же самое для другого пункта меню по нашему выбору и изменим класс CSS внутри тегов вместе с копией метки.

• <label class="menu-label new-label">New</label>

  Бесплатные курсы

2. Перейдите в Divi Theme Builder.

Перейдите в конструктор тем Divi и добавьте глобальный заголовок

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

Начать строительство с нуля

Затем выберите «Создать глобальный заголовок» для перенаправления в редактор шаблонов.

3. Создайте глобальный заголовок

Настройки раздела

Фоновый цвет

Оказавшись внутри редактора шаблонов, вы заметите раздел. Откройте этот раздел и добавьте цвет фона. Дизайн заголовка, который мы создадим, хорошо сочетается с Tutor Layout Pack, но не стесняйтесь создавать любой дизайн заголовка, который вы хотите, при условии, что вы включите в него модуль кода (позже).

• Цвет фона: # 2a3749

Интервал

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

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Видимость

Из-за перекрытия, которое мы добавим в нашу строку (как вы можете заметить в предварительном просмотре), нам нужно сделать видимыми переполнения раздела.

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

Добавить новую строку

Структура столбца

Продолжите, добавив новую строку в раздел, используя следующую структуру столбцов:

Фоновый цвет

Еще не добавляя никаких модулей, откройте настройки строки и примените белый цвет фона.

• Цвет фона: #FFFFFF

Размеры

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1

Интервал

Мы также применим некоторые пользовательские значения отступов к настройкам интервала.

• Верхний отступ: 25 пикселей
• Нижний отступ: 25 пикселей
• Отступ слева: 50 пикселей
• Отступ справа: 50 пикселей

Граница

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

• Все углы: 6 пикселей

Коробка Тень

И тонкая тень коробки.

• Положение прямоугольной тени по вертикали: 16 пикселей
• Цвет тени: rgba (0,0,0,0.07)

Преобразовать Перевести

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

• Трансформировать Перевести вправо: 50 пикселей

Переполнения

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

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

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

Выберите меню

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

Загрузить логотип

Затем загрузите логотип.

Настройки текста меню

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

• Шрифт меню: PT Sans
• Цвет текста меню: # 000000
• Размер текста меню: 16 пикселей
• Выравнивание текста: вправо

Параметры раскрывающегося меню

Измените также цвет строки раскрывающегося меню.

• Цвет строки раскрывающегося меню: # 007aff

Иконки

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

• Цвет значка меню гамбургеров: # 007aff

Размеры

И завершите настройки модуля, назначив максимальную ширину логотипа для настроек размера.

• Максимальная ширина логотипа: 40%

Добавить модуль кода в столбец

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

Добавить код CSS

Следующий код CSS поможет нам индивидуально стилизовать метки меню и создать адаптивный дизайн:

<style>
 
.menu-label {
text-transform: uppercase;
color: #fff;
letter-spacing: 1px;   
border-radius: 5px;    
font-size: 10px;  
padding: 5px 10px;  
}  
  
.featured-label {
background-color: #F9654D;
}
.new-label {
background-color: #007AFF;
}
 
.et_pb_menu .et_pb_menu__menu, 
.et_pb_menu .et_pb_menu__menu>nav, 
.et_pb_menu--style-left_aligned.et_pb_text_align_right .et_pb_menu__menu>nav>ul {
width: 100% !important;
}

.et_pb_menu .et_pb_menu__menu>nav>ul>li
{
padding-left: 15px !important;
padding-right: 15px !important;
}

@media all and (min-width: 980px) {
.menu-label {  
position: absolute;
top: -10px;  
padding: 8px 15px;
}

}
@media all and (max-width: 980px) {  
.menu-label {
position: relative;
float: right;
font-size: 12px;  
padding: 5px 20px;   
}
}
  
</style>

4. Сохраните все изменения в построителе тем и предварительный просмотр результатов.

После того, как вы завершили дизайн заголовка, убедитесь, что вы сохранили все изменения Divi Theme Builder, прежде чем просматривать результат на своем веб-сайте!

Предварительный просмотр

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

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

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

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