Agregar un botón en el menú de navegación del encabezado

El menú de navegación del encabezado de WordPress es una parte del sitio web que a menudo no se utiliza. Si bien la mayoría de los administradores web lo usan únicamente para la navegación, también puede agregar una barra de búsqueda o incluso contenido promocional. Pero, para hacerlo de manera efectiva, debe considerar agregar un botón en el menú de navegación del encabezado . En este artículo explicaremos por qué hacerlo es beneficioso y cómo hacerlo correctamente.

El beneficio de agregar un botón en el menú de navegación del encabezado

Tener un botón en el menú de navegación del encabezado puede parecer algo trivial. Después de todo, no parece haber mucha diferencia entre un hipervínculo estándar y un botón. Bueno, en realidad, tener un botón en lugar de texto sin formato puede generar resultados sorprendentes . Esto se debe principalmente a cómo funciona la atención humana y cuán notables son sus botones.

Cómo experimentan las personas el menú de navegación del encabezado

El menú de navegación del encabezado suele ser lo segundo que la gente nota. Si ha diseñado bien su sitio web y ha agregado el menú de navegación correctamente, el título de su publicación debe ser lo primero que llame la atención del espectador. Pero, después de eso, su mirada debería dirigirse naturalmente al menú de navegación para ver qué hay disponible. Si deciden permanecer en la página actual, que así sea. Pero, si hay otros puntos de interés en su sitio web, deberían estar claramente visibles en el menú de navegación del encabezado.

Después de todo, su objetivo debe ser mantener a las personas el mayor tiempo posible en su sitio web . Y tener un menú fácil de entender puede ser de gran ayuda. Entonces, ¿dónde entran los botones en todo esto?

El beneficio de agregar un botón

La idea principal de agregar un botón es enfatizar algo importante. Si bien el menú de encabezado contiene enlaces interesantes, no todos tienen la misma importancia. Algunas son herramientas de navegación simples para ayudar con la lectura. Y otros son contenidos promocionales más directos, que sirven para guiar a tus lectores hacia la conversión. Bueno, cuando se trata de este último contenido, los botones deberían ser su opción preferida . Como puede modificarlos de la forma que mejor le parezca, se destacarán naturalmente y llamarán la atención. Entonces, si comprende el viaje de su cliente a través de su sitio web, puede usar botones fácilmente para atraerlos a las redes sociales o a una conversión exitosa.

Consejos de personalización

Personalizar los botones para que tengan el efecto adecuado puede ser un poco complicado. Por un lado, no querrás que sobresalgan demasiado, ya que arruinarán el aspecto de la página web. Pero tampoco querrás que se mezclen demasiado, ya que no llamarán la atención. Entonces, lo que necesita encontrar es el término medio, que es más fácil decirlo que hacerlo. Nuestro consejo es buscar sitios web que utilicen con éxito los botones en el menú de navegación de su encabezado y ver cómo utilizan los colores. Recuerde, puede cambiar la forma, el contorno, la fuente y el color de su botón. Entonces, use esta variedad en la personalización para su ventaja. Idealmente, encontrará el estilo que vaya bien con la estética general de su sitio web . Mientras que también llama la atención.

Cómo agregar un botón en el menú de navegación del encabezado

Afortunadamente, agregar un botón en el menú de navegación del encabezado de WordPress es sorprendentemente sencillo. En primer lugar, debe dirigirse al menú de navegación y agregar el enlace que desea convertir en un botón. Puede hacer esto en la página Apariencia -> Menú . Una vez que haya hecho eso, haga clic en el botón Opciones de pantalla cerca de la parte superior. Al hacerlo, obtendrá un menú desplegable con un par de opciones. Para este caso, solo necesitas marcar la opción 'Clases CSS' .

Una vez que haya pasado por esto, desplácese hacia abajo y haga clic en expandir el elemento del menú que desea convertir en un botón. Allí obtendrá una nueva opción de clase CSS en la configuración del elemento. En él, puede ingresar el nombre de la clase. Teóricamente, puede nombrar su clase de la forma que mejor le parezca. Pero, para este artículo, le daremos el nombre de clase "botón de menú" para facilitar la comprensión. Una vez que haya ingresado su nombre, recuerde hacer clic en el botón 'Guardar menú' .

Agregar código CSS

Después de agregar nuestra clase CSS personalizada, podemos proceder a agregar el código CSS. Aquí debe ir a Apariencia -> Personalizar e iniciar el personalizador de temas de WordPress. Al hacerlo, obtendrá una vista previa de su sitio web y una lista de configuraciones de temas. Lo que debe hacer es hacer clic en la pestaña CSS adicional y expandirla. Aquí obtendrá un cuadro donde puede agregar su código CSS personalizado. Para empezar, le sugerimos que simplemente pegue el siguiente código:

.botón de menú {
color de fondo:#eb5e28;
borde: 1px;
borde-radio: 3px;
-webkit-caja-sombra:1px 1px 0px 0px #2f2f2f;
-moz-caja-sombra:1px 1px 0px 0px #2f2f2f;
caja-sombra:1px 1px 0px 0px #2f2f2f;
}
.menu-button a, .menu-button a:hover, .menu-button a:activo {
color:#fff !importante;
}

Una vez que agregue el código CSS, el personalizador de temas lo aplicará a la vista previa de su sitio web. Esto le permitirá ver los cambios que ha realizado. Y no te preocupes, los cambios no son permanentes. Si siente la necesidad, continúe y experimente con CSS y vea qué puede hacer. Para guardar sus cambios, haga clic en el botón Publicar.

Y con esto, ha terminado de agregar un botón en el menú de navegación del encabezado.

Pensamientos finales

A fin de cuentas, los botones pueden ser un gran complemento para su menú de encabezado. Pero, es primordial que encuentres el diseño adecuado . De hecho, una de las principales razones por las que las personas evitan agregar un botón es que simplemente no pueden encajar el botón con el diseño del sitio web. Si se queda atascado, le sugerimos enfáticamente que consulte con un diseñador gráfico profesional y valore su opinión. Como puede ver, realmente no se necesita mucho para agregar un botón, una vez que haya resuelto el diseño.