Добавление кнопки в шапку меню навигации

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

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

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

Как люди обычно воспринимают меню навигации в заголовке

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

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

Преимущество добавления кнопки

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

Советы по настройке

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

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

К счастью, добавить кнопку в навигационное меню заголовка WordPress на удивление просто. Во-первых, вам нужно зайти в меню навигации и добавить ссылку, которую вы хотите преобразовать в кнопку. Сделать это можно на странице Внешний вид -> Меню . Сделав это, нажмите кнопку «Параметры экрана» вверху. Сделав это, вы получите выпадающее меню с несколькими вариантами. В этом случае вам нужно только установить флажок «Классы CSS» .

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

Добавление CSS-кода

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

.меню-кнопка {
цвет фона:#eb5e28;
граница: 1px;
радиус границы: 3px;
-webkit-box-shadow:1px 1px 0px 0px #2f2f2f;
-moz-box-shadow:1px 1px 0px 0px #2f2f2f;
тень окна: 1px 1px 0px 0px #2f2f2f;
}
.menu-button a, .menu-button a: hover, .menu-button a: active {
цвет:#fff !важно;
}

Как только вы добавите код CSS, настройщик темы применит его к предварительному просмотру вашего веб-сайта. Это позволит вам увидеть изменения, которые вы сделали. И не волнуйтесь, изменения не являются постоянными. Если вы чувствуете необходимость, поэкспериментируйте с CSS и посмотрите, что вы можете сделать. Чтобы сохранить изменения, нажмите кнопку «Опубликовать».

На этом вы закончили добавление кнопки в меню навигации заголовка.

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

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