Пропустить

Как добавить стиля к вашему меню навигации

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

к-в-стиле-к-меню навигации де де WordPress

Метод 1: как стилизовать меню WordPress с помощью плагина

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

Во-первых, что вам нужно сделать, это установить и активировать плагин " CSS Hero ". Для получения дополнительных сведений см. Наше пошаговое руководство по установке плагина WordPress.

CSS Hero - это премиальный плагин для WordPress, который позволяет создавать собственные темы WordPress без написания ни одной строки кода (Нет HTML или CSS требуется).

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

Теперь вы должны нажать на кнопку Герой CSS На панели инструментов WordPress.

CSS-герой-меню WordPress

CSS Hero предлагает WYSIWYG редактор (то, что вы видите, то и получаете "Что вы видите, то и получаете"). Нажав на эту кнопку, вы попадете на свой веб-сайт с плавающей панелью инструментов CSS Hero справа.

бар инструментов-CSS-герой

Вам нужно нажать на синий значок вверху, чтобы начать редактирование.

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

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

Настройка-а-меню-с-CSS-героя

На скриншоте выше вы можете увидеть пункт меню, меню навигации, контейнер меню навигации и т. Д.

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

CSS Hero теперь покажет вам различные свойства, которые вы можете изменить, такие как текст, цвет фона, границы, поля, отступы и т. Д.

CSS-свойство-герой

Вы можете нажать на свойство, которое вы хотите изменить. CSS Hero предоставит вам простой интерфейс, в котором вы сможете вносить изменения.

редактировать-а-свойство-CSS-с-CSS-героя

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

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

АНОНС к лайв-Css-героя

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

Если вас устраивают изменения, нажмите кнопку «Сохранить» на значке « Герой CSS Чтобы сохранить ваши изменения.

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

Метод второй: как вручную изменить стиль меню навигации

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

Лучший способ сделать это - настроить тему WordPress, создав дочернюю тему. Если вы меняете только CSS, я приглашаю вас прочитать наш учебник по как добавить пользовательский код CSS на WordPress.

Навигационные меню WordPress отображаются в неупорядоченном списке (маркированный список).

Если вы используете следующий тег php, он отобразит список без классов CSS, связанных с ним.


Ваш маркированный список будет иметь «меню» имени класса с каждым элементом списка, имеющим свой собственный класс CSS.

Это может работать, если у вас есть одно место в меню. Однако у большинства тем есть несколько мест, где вы можете отображать навигационные меню.

Использование только классов CSS по умолчанию может вызвать конфликты с меню в других местах.

Это причина, по которой вам необходимо определить класс CSS и расположение меню. Скорее всего, ваша тема WordPress уже делает это, добавляя меню навигации с помощью следующего кода:

'primary', 'menu_class' => 'primary-menu',)); ?>

Этот код сообщает WordPress, что именно здесь тема отображает главное меню. Он также добавляет класс CSS " основное меню В меню навигации.

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

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

#header .primary меню {} // класс контейнера #header .primary меню уль {} // класс контейнер первый неупорядоченный список #header .primary меню уль-уль {} // неупорядоченный список В неупорядоченном списке #header .primary -menu литий {} // Каждый элемент навигации #header .primary Li меню {} // Каждый элемент навигации # заголовок литий якорь .primary меню уль {} // неупорядоченный список, если есть выпадающие пункты #header .primary -menu Ли Ли {} // Каждый выпадающий пункт навигации # заголовок Li меню литий .primary имеет {} // Каждый лист якорь вниз пункт навигации

Замените #header классом контейнера или символом " ID Используется вашей темой WordPress.

Эта структура поможет вам полностью изменить внешний вид вашего меню навигации.

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

 

Эта статья содержит комментарии 0

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
2 акции
доля1
чирикать1
Регистрация