28 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Мега меню вордпресс. Как настроить стиль меню навигации в WordPress

Плагины большого (mega) меню для WordPress

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

На WordPress’e можно сделать большое меню с помощью плагинов, которые организовывают из одних только визуальных настроек прям из админ-панели сайта. То есть не нужно будет лезть в исходный код, разве что в некоторых случаях.

Max Mega Menu

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

Некоторые особенности:

  • Большой набор иконок для добавления в пункты меню
  • Выравнивание пунктов меню по левому или правому краю
  • Добавление виджетов в меню
  • Несколько эффектов появления меню
  • Многое другое

Mega Menu Plugin for WordPress – AP Mega Menu

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

Некоторые особенности:

  • 300+ иконок шрифта Font Awesome, 160+ Genericon и 100+ Dashicons
  • Специальный виджет контактных данных
  • Визуальный конструктор внешнего вида
  • Выбор горизонтального или вертикального меню
  • Прочее

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

Как создать пользовательское мега-меню WordPress без применения плагинов

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

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

Регистрация выделенного места в меню

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

Открываем файл functions.php рабочей темы и добавляем в него следующие строки кода:

Теперь добавим в меню несколько пунктов.

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

Мы будем использовать параметр «Классы CSS» . Если вы не видите его, нажмите на кнопку «Параметры экрана», расположенную в правом верхнем углу окна и выберите «Классы CSS».

Теперь добавим класс «has-mega-menu» к двум пунктам, к которым будет прикреплен выпадающий список мега-меню. Не забудьте нажать кнопку «Сохранить меню», когда закончите.

Динамическая регистрация боковой панели (области виджетов)

Теперь нужно зарегистрировать новые области виджетов (боковые панели) для каждого пункта меню с помощью CSS-класса «has-mega-menu». Для этого мы создадим новую функцию, которая подключается к действию «widgets_init» .

В этой функции мы будем перебирать все пункты меню в «mega_menu». А также в каждой итерации проверять, содержит ли пункт меню CSS-класс «has-mega-menu» или нет. Если да, то создаем новую область виджета для этого пункта меню, с помощью функции register_sidebar .

Если мы перейдем в панели администрирования в раздел меню «Внешний вид» — «Виджеты», то увидим две новые области для размещения виджетов. У каждого пункта меню есть один CSS-класс «has-mega-menu» (Solutions и Company).

Рендеринг

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

Теперь у вас есть собственное мега-меню WordPress, созданное с помощью всего 25 строк кода и без плагинов .

Работа выполнена! Ваше собственное мега-меню WordPress готово к работе.

Данная публикация представляет собой перевод статьи « How to Create a Fully Custom WordPress Mega Menu – No Plugins Attached » , подготовленной дружной командой проекта Интернет-технологии.ру

WordPress меню навигации — Mega Main Menu

Всем привет уважаемые читатели. Сегодняшняя статья расскажет вам о новом, великолепном плагине для создания красивого и функционального WordPress меню — Mega Main Menu.

Недавно помогал своему знакомому «обустраивать» свой новый блог. Выбирали тему оформления и остановились на популярном шаблоне Weaver 2. Всем тема ему понравилась кроме одного – меню навигации. Как по мне, то у Вейвера вполне себе нормальное меню, но знакомому хотелось чего-то более яркого и главное — функционального. Сначала рассматривали вариант с UberMenu о котором, я уже не так давно писал. Но чуть позже остановились на новом плагине под названием — Mega Main Menu. Плагин оказался на удивление хорош, и я решил посвятить ему отдельную статью.

Вообще говоря, плагинов изменяющих навигационное меню WordPress, на удивление мало. В принципе, создать собственное меню не так уж и сложно, и в сети можно найти много разных примеров или отдельных кусков кода. Однако все это касается, как правило, простых двух или трех уровневых вариантов. Однако требования растут и современному пользователю подавай уже не просто красиво анимированное меню навигации, но и всяческий, продвинутый функционал. Всем этим в полной мере обладает плагин Mega Main Menu. Давайте рассмотрим этот плагин и его возможности.

Читать еще:  Игровые наушники с микрофоном. Как выбрать хорошие наушники для игр

Меню навигации WordPress — Mega Main Menu

Mega Main Menu позволяет быстро создавать современное меню навигации для сайтов на WordPress и имеет следующие, ключевые особенности:

  • «Липкое» меню, добавление значков, выпадающие меню, логотип и поиск которые могут присутствовать в одном меню.
  • Неограниченные вариации цвета. Вы можете легко изменить цвет любого элемента меню. Используйте «плоские» цвета, градиенты и фоновые текстуры или изображения.
  • Более 10 различных комбинаций контента. Вы можете поместить любое содержимое, в выпадающем меню — ссылки, текст, изображения, виджеты и шорткоды.
  • Используйте 1600+ иконок в меню вашего сайта. Векторные иконки имеют четкую графику, которая будет отлично смотреться на любом устройстве, с любым разрешением.
  • 600+ Google шрифтов. Вы можете выбрать из более чем 600 google шрифтов для вашего меню. Шрифт легко меняется их настроек плагина.

Установка плагина стандартная и никаких проблем вызвать не должна. После активации плагина переходим в Внешний вид — Mega Main Menu

Страница настроек плагина имеет четыре основные закладки, на каждой из которых расположены раскрывающиеся собственно с самими настройками:

General имеет три подраздела – primary, mobile_menu и secondary. В разделе primary можно указать все основные значения меню, такие как высота, выравнивание иконок относительно текста, настройка сепаратора, визуального скругления углов меню, включить прилипаемость меню наверху экрана, настроить показ логотипа и прочее. Для mobile_menu и secondary все эти настройки дублируются отдельно. Стоит отметить так же возможность переключения меню из привычного горизонтального вида в вертикальное.

Skins позволяет полностью настроить «шкурку» вашего меню. Как и в предыдущей закладке есть три подраздела — primary, mobile_menu и secondary. Кроме многочисленных настроек цветов отдельно можно настроить шрифты и логотип в меню.

Specific Options для продвинутых пользователей. Можно вставить свой код для корректировки CSS и управлять настройками адаптивности меню.

Support&Suggestions поможет выйти на связь с автором плагина и получить поддержку.

Впрочем, лучше всегда один раз увидеть, чем читать скучные описания настроек. Сделать это вы сможете кликнув на кнопку Live Preview по ссылке на оф. странице плагина в конце статьи.

Заключение

Mega Main Menu показался мне отличным wordpress меню плагином способным моментально преобразить вашу бесплатную или тем более премиум тему, особенно если она изначально имела скучный, стандартный вид. Ну и конечно, при желании, вы легко можете настроить своё меню таким образом, что пользователи будут просто поражены обилием иконок, картинок и прочих необычных для навигации элементов.

Еще один приятный момент заключается в том, что плагин оказался необычайно легким для своего функционала. По результатам проверки тестового сайта плагином P3, Mega Main Menu оказал ничтожное влияние на сайт среди двух десятков прочих установленных плагинов.

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

20 плагинов мега-меню для WordPress

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

Толчком к развитию концепции мега-меню послужил, вероятно, ленточный интерфейс Microsoft Office 2007. Эта концепция находится как раз посредине между простым статическим меню и динамическим раскрывающимся. С одной стороны, такое меню достаточно информативно и интуитивно понятно, с другой — значительно сокращает необходимые манипуляции мышью. Раскрываясь, оно может использовать все доступное пространство экрана, что позволяет пользователю охватить взглядом все предлагаемые в данном контексте пункты, а при необходимости скрывается.

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

UberMenu: WordPress Mega Menu Plugin

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

Кроме того меню также имеет ряд других замечательных особенностей, таких как:

  • Встроенная адаптивная сетка
  • Индивидуальная настройка ширины каждой колонки а также задание ширины по умолчанию
  • Объединение пунктов меню в группы
  • Центрирование пунктов меню в горизонтальных строках
  • Индивидуальные фоновые изображения
  • Прокручиваемые подменю, содержащие большое количество пунктов.

В целом, очень мощный плагин, который я настоятельно рекомендую.

  • Пример
  • Скачать

Mega Main Menu

Очень популярный и широко используемый плагин Mega Main Menu умеет держать баланс между функциональностью и простотой. В вашем распоряжении свыше 10 различных инструментов для создания выпадающих меню, которые могут содержать текст, изображения, ссылки и виджеты. А кроме этого — неограниченные цветовые настройки и свыше 600 шрифтов Google.

  • Пример
  • Скачать

Liquida Mega Menu

Liquida Mega Menu — современный и многофункциональный плагин, который подойдет как обычным пользователям, так и разработчикам — его можно легко встроить в собственную разрабатываемую тему.

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

  • Пример
  • Скачать

Sky Mega Menu

Три варианта дизайна для мобильных устройств, 9 цветовых схем, собственная сетка, формы и 360 векторных иконки. Этот набор позволяет Sky Mega Menu занять достойное место среди себе подобных.

  • Пример
  • Скачать

WP Mega Menu

Плагин из категории must have. Множество настроек и опций, работа с категориями, подкатегориями и сообщениями, SEO-оптимизация и две предустановленные цветовые схемы (темная и светлая), которые, впрочем, можно легко изменить по своему вкусу.

  • Пример
  • Скачать

NOO Menu

Для того, чтобы разобраться в панели настроек NOO Menu вам даже не придется читать документацию — настолько все интуитивно понятно. Имея под рукой предварительный просмотр в реальном времени, вы сможете просто изменять значения и передвигать ползунки, наблюдая производимый эффект. Цветовую схему можно изменять совершенно произвольно и каждый вариант сохранять под своим именем, причем количество этих вариантов неограничено.

Читать еще:  Как сделать портативную зарядку из аккумулятора. Портативная зарядка собственными руками

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

  • Пример
  • Скачать

Hero Menu – Responsive WordPress Mega Menu Plugin

Hero Menu позволяет привязывать к пунктам меню ссылки на сообщения, категории, внешние URL, а также отображать в них записи блога вместе с featured image. В последней версии анонсирована полная поддержка платформы WooCommerce. Для удобной работы имеет встроенный drag-and-drop редактор.

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

  • Пример
  • Скачать

Superfly — Responsive WordPress Menu Plugin

Так называемое fly-меню — последний тренд в мире веб-дизайна. Такое меню тихо «дремлет» в углу странички в виде пиктограммы, практически не занимая места, а при наведении курсора раскрывается, смещая элементы страницы, а не перекрывая их.

Одним из представителей данной разновидности мега-меню является Superfly — Responsive WordPress Menu Plugin. Впечатляющий инструмент как в плане дизайна, так и характеристик.

  • Пример
  • Скачать

Toggle Menu

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

Toggle menu — очень простое, минималистическое меню, которое, тем не менее, отлично справляется со своей основной функцией.

  • Пример
  • Скачать

WP Floating Menu Pro

WP Floating Menu Pro — это плагин 2 в 1. Меню-навигатор для одностраничного сайта и меню-наклейки. Более того: при помощи этого плагина вы сможете, по крайней мере визуально, превратить свой традиционный сайт в современный одностраничный. WP Floating Menu Pro обеспечит плавную прокрутку от одной части страницы к другой.

В распоряжение разработчика WP Floating Menu Pro предлагает 13 шаблонов и 7 различных вариантов расположения на странице, возможности настройки, цвета, содержимого и количества пунктов.
Для экранов разрешением менее 480px имеется возможность автоматического отключения меню.

  • Пример
  • Скачать

Mega Menu by WooRockets.com (Free)

WR Mega Menu — это мощное, адаптивное мега-меню со встроенным, интуитивно понятным редактором, позволяющим в итоге получить именно то, что вы задумывали.

  • Пример
  • Скачать

Flexi Menu WordPress Plugin

Flexi Menu — это 5 различных, полностью настраиваемых типа меню: fly-меню, широкое (на ширину страницы), широкое+описания, широкое+изображения и вертикальное.

  • Скачать

Max Mega Menu (Free)

Очень неплохой плагин с drag-and-drop редактором меню и возможностью встраивания в пункты меню практически любых виджетов — от контактных форм до карт Google.

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

  • Пример
  • Скачать

Side – WordPress Responsive Menu

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

  • Пример
  • Скачать

Path style menu

Очень симатичное и оригинальное меню для WordPress. При нажатии на основную кнопку которая, кстати, может располагаться в любом месте страницы, «выскакивают» значки и располагаются вокруг нее. У вас есть полный контроль над месторасположением этих кнопок: в линию горизонтально или вертикально, по окружности вокруг или вдоль более сложной линии, такой как кривая Безье. Иконки внутри объектов можно легко изменять простой заменой файлов-иконок в медиа-галерее.

  • Пример
  • Скачать

Morph

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

  • Пример
  • Скачать

Tactile

Как становится понятным из названия это меню заточено именно под мобильные устройства. Дизайн выполнен в стиле Google’s Material Design, присутствуют различные анимационные эффекты. В целом меню производит приятное впечатление как внешним видом, так и богатыми возможностями настройки различных параметров.

  • Пример
  • Скачать

Настройки Max Mega Menu и как улучшить навигацию на своём сайте

Стандартное меню WordPress располагает необходимым минимумом функций, которого хватает для большинства задач. Однако, некоторым вебмастерам требуются решать дополнительные вопросы с навигацией сайта. В этом случае на помощь приходят плагины. В данной статье я расскажу вам про плагин Max Mega Menu.

Настройки Max Mega Menu поражают, особенно если учесть, что это совершенно бесплатный плагин. С его помощью можно реализовать практически любую идею с навигацией – внешний вид, технические особенности, расположение меню и многое другое.

Среди достоинств плагина я выделю такие:

  • Плагин бесплатный и гиперфукнциональный.
  • На русском языке (в основном).
  • Позволяет менять внешний вид меню и создавать темы оформления.
  • Позволяет добавлять в пункты меню иконки.
  • Есть возможность создавать новые области меню в любом месте сайта.
  • Можно добавлять виджеты WordPress в пункты меню.
  • И множество других мелких возможностей.

Это вам тоже будет интересно:

Настройки Max Mega Menu

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

Теперь давайте рассмотрим, что он умеет. Перейдите в пункт «Внешний вид» и откройте подпункт «Меню». Если у вас ещё нет навигационного меню, то создайте его, добавив необходимые вам пункты. Затем обратите внимание на блок опций слева, который называется «Настройки Max Mega Menu». Разверните его.

  • Для того, чтобы плагин начал действовать на вашем сайте поставьте галочку на пункте «Включить»
  • Пункт «Событие» определяет, при каком событии будут выпадать подпункты.
  • «Эффект» определяет анимационный появления и её скорость.
  • А в пункте «Тема» можно выбрать оформление меню. Пока там будет только одна тема. О том, как создавать новые темы я расскажу ниже.

Нажмите кнопку «Сохранить» после произведения всех настроек.

Затем при наведении на любой пункт меню в редакторе вы увидите активную кнопку «Мега Меню». Благодаря ей можно настроить каждый пункт в этой навигации. Кликните на эту кнопку.

Вы увидите настройки в трёх вкладках.

«Мега меню» позволяет определять, будет выводиться обычное меню или меню с виджетами. Если нужно с виджетами, то в списке «Режим отображения подменю» нужно выбрать «Мега меню», а потом в списке рядом нужно выбрать необходимые виджеты. Если же требуется обычное меню, то в «Режим отображения подменю» нужно выбрать «Выпадающее меню».

Во вкладке «Settings» можно настроить пункт меню. Настройки для каждого пункта по отдельности. Здесь есть опции текста, ссылки, иконки, адаптивности и другое.

Во вкладке «Icon» можно выбрать иконку для пункта меню.

Читать еще:  Lg optimus g разрешение экрана. LG Optimus G — «второй взгляд

Таким образом, можно настроить каждый пункт навигации по отдельности. Теперь давайте рассмотрим более глобальные настройки Max Mega Menu.

Перейдите в пункт «Мега меню», подпункт «Основные настройки». Здесь находятся технические опции плагина. Их можно оставить по умолчанию. Тут настраивается поведение меню при клике мышки, адаптивность, настройки CSS и другое.

Перейдите в подпункт «Темы меню». Здесь можно изменить существующую тему оформления или создать новую. Настройки очень обширные – изменения цвета, размера, тени, анимации, отступов, ориентации для компьютерного и мобильного вида. Кроме того есть возможность использовать собственный CSS. Созданные темы можно применить в редакторе меню.

В подпункте «Локации меню» можно создавать новые области для навигации. После создания вы получите PHP код, который позволяет публиковать области в любом месте сайта, в файлах темы, а также [шорткод], благодаря которому области меню можно добавлять прямо в записи/страницы.

В подпункте «Инструменты» можно экспортировать и импортировать созданные ранее темы, а также имеется ещё несколько технических опций.

Теперь вы знаете, как произвести настройки Max Mega Menu. Благодаря этому вы сможете сделать красивую и удобную навигацию по сайту. Желаю всем творческих успехов.

Как настроить стиль меню навигации в WordPress

Способ 1: Использование ручного изменения стиля меню навигации в WordPress

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

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

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

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

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

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

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

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

Этот код сообщает WordPress, что это тема отображает начальное меню. Он также добавит класс CSS primary-menu к навигации по меню.

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

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

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

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

WordPress также позволяет добавлять классы CSS к отдельным пунктам меню изнутри области администратора.

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

Зайдем на страницу Appearance »Menus и нажмем на кнопку настройки экрана.

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

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

Метод 2: Настроить стиль меню в WordPress при помощи плагинов

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

Вот когда пригодится WordPress плагин стилизации меню. Это избавляет вас от редактирования файлов темы или написания кода.

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

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

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

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

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

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

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

В приведенном выше скриншоте, показывает нам пункт меню, навигации по меню, контейнер навигации меню и т.д.

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

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

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

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

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

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

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

Мы надеемся, что эта статья помогла вам узнать, как создать стиль меню навигации в WordPress.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Ссылка на основную публикацию
Статьи c упоминанием слов:
Adblock
detector