Aquí os dejo con un pequeño tutorial muy breve y muy sencillo sobre cómo colocar un botón en el menú superior de WordPress.
Es un tutorial muy simple, donde verás cómo añadir un botón al menú de WordPress con solo aplicar estilos CSS. Aunque el ejemplo yo lo he realizado con la plantilla Divi, lo podéis hacer con cualquier plantilla WordPress.
Al mismo tiempo, te diré cómo añadir estilos CSS a tu plantilla Divi sin que pierdas los cambios cuando actualices tu plantilla.
También te puede interesar:
→ Pie de logos con Divi
→ Las ventajas de Divi Child Theme
→ ¿Cómo volver a una versión anterior de Divi?
→ ¿Qué es Divi?
Tabla de contenidos
Como ya sabéis, todo lo que os escribo en mi blog es porque antes lo he practicado y me ha funcionado. Aquí os dejo un ejemplo real de un botón en el menú superior de WordPress de una web que hice hace poco para la Asociación Cultural Utrerana del Ferrocarril.
Si os fijáis es un botón muy simple. No es más que un enlace a una página concreta de la web a la que le he aplicado una clase CSS para que adopte el aspecto de un botón.
Para crear un menú WordPress tenemos que irnos a Apariencia > Menús. Ahí podremos hacer nuestros menús personalizados con la estructura y enlaces que necesitemos.
Se pueden añadir las categorías de nuestra web. Las páginas, o entradas, y enlaces personalizados a una url concreta.
Después cada elemento que añadamos, podremos disponerlo en la estructura que más nos interese en forma de árbol.
Lo primero que debemos hacer es añadir un enlace personalizado a nuestro menú. Desde Apariencia > Menús, seleccionamos nuestro menú, y añadimos un enlace personalizado desde el panel de la izda para que se añada a la parte derecha que es donde tenemos los elementos de nuestro menú.
Ahí pondremos la url que queremos que abra cuando pulsemos sobre dicho enlace personalizado.
Mostraremos el campo Clase CSS si no lo vemos, desde las opciones de pantalla que tenemos en la parte superior de wordpress.
Ahí en el campo Clase CSS, ponemos por ejemplo boton-menu. Así se llamará nuestra clase CSS donde definiremos el color, el borde, el fondo, el espaciado, etc.
Si creamos nuestro enlace personalizado ya, aparecerá sin estilos. Vamos a ver cómo aplicarle los estilos.
Crear una clase CSS en nuestro tema WordPress
Desde apariencia > Editor, iremos directamente a la hoja de estilos de nuestro tema WordPress. Ahí podemos añadir nuestra clase CSS para que nuestro botón tome forma.
Y pegaremos el siguiente código CSS:
.boton-menu a {
color: #ffffff!important;
border-color: #ef9b00;
border-radius: 10px;
background-color: #ef9b00;
text-align: center;
padding: 10px;
padding-bottom: 10px !important;
}.boton-menu a:hover {
background-color: #efc069 !important;
color: white!important;
}.et_header_style_left #et-top-navigation {
padding-top: 16px!important;
}.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 6px!important;
}/*---------------Menu CTA Button Mobile Settings---------------*/
@media only screen and (max-width: 980px) {
.menu-cta a {
background-color: #ef9b00;
}
}
A este código podéis cambiarle los colores, los espacios interiores (padding), etc, hasta que lo ajustéis a vuestras necesidades.
WordPress Menu Mobile
Así ser vería nuestro menú personalizado de WordPress con el botón añadido en un dispositivo móvil. Recordad que esta apariencia es usando el tema Divi, y que dependiendo de la plantilla que esteis utilizando podría variar el aspecto.
Conclusiones
Como habéis podido ver, crear un botón ha sido muy sencillo. Basta con crear un enlace personalizado en el menú, y darle un aspecto de botón. Podremos colocarlo en cualquier zona de widgets de nuestra web, y será muy útil para destacar algunos enlaces de nuestro sitio.
Si te ha gustado, compártelo! Gracias 😉
¡Hola! Soy Javier. Soy informático y me gusta documentar todo lo que aprendo. En mi blog te enseño todo lo que sé y cómo puedes aprender a crear tu propia web, mejorar el SEO y aplicar técnicas de Marketing Digital para conseguir mayor visibilidad. Suscríbete para no perderte ninguna de mis guías sobre WordPress, posicionamiento SEO o Marketing Digital.
Buenas tardes Javier, resulta que tengo una tiendaonline con woocommerce y llevo varios días intentando alinear mis imágenes de producto pero lo he conseguido Las fotografía están realizada por mi pero no sé el hueco que tiene mi tema.
Gracias anticipadas
Hola Manuel. Te escribí por email. Saludos.
Hola Javier, excelente información!
Era justo lo que quería lograr, botones en el menú en WordPress.
Gracias por compartir tus conocimientos!
Me alegro que te haya servido. Este truquito la verdad es que lo utilizo mucho últimamente. Es sencillo y queda bastante bien tanto en versión escritorio como móvil. Saludos
Hola Javier, no puedo asignarle la clase al botón, no me aparece el campo Clases CSS
Hola Johanna, en la parte superior de WordPress tienes una opción que se llama Opciones de pantalla, pulsa ahí y verás que tienes desactivado Clases CSS. Lo activas y ya te saldrá la opción. Un saludo.
Hola todo me funciono muy bien, edite un poco el código para personalizarlo, todo correcto.
Solo que cuando me desplazo por mi web el texto queda con el mismo color que el que ya tengo.
Tendrás el código para que pueda personalizar el color de ese texto.
Es curioso. En mi blog y en acufer.es que lo tengo implementado, lo veo igual que tu a nivel de código CSS, pero no termino de ver la diferencia. Entra de nuevo en Personalizar el tema, y dale de nuevo el color negro al menú. A ver si es que lo ha sobreescrito. Un saludo.
Hola Javier, me gustaria hacer esto mismo pero yo uso Elementor y no Divi. Podrías ayudarme ?
Hola José. En Elementor debes tener una zona para agregar el CSS. Sino, siempre puedes usar un Child Theme y añadirlo ahí. Un saludo.
muchas gracias, me fue de gran ayuda
hola javier espero te llege este correo . estoy utilizando el codigo que pusiste en tu sitio web para agregar boton al menu lo agrega bien solo que cuando lo agrega el boton queda en forma vertical y no horizontal como deberia quedar normalmente el boton espero me puedas ayudar y gracias de ante mano
Hola. Dime la URL donde lo estás probando y mañana lo miro. Y revisaré tb el post y el código. Hay veces que WordPress me modifica los códigos que publico y puede que tenga alguna errata.
Saludos.
Hola Javier, tengo un inconveniente, monte el menu y estático es perfecto pero cuando deslizo la página para abajo se cambia el color de la letra del botón e inclusive el estilo del menú, no se si me falta algo adicional, estoy apenas creando la web pero lo puedes ver en https://www.intecconcolombia.com/inicio/ te agradezco cualquier sugerencia
He mirado la web, pero a mi no me cambia de color, sino que desaparece todo el menú y pone En construcción. Vete a Apariencia > Personalizar, y mira por las configuraciones del encabezado. Habrá alguna que tendrá otro color y puede que sea por eso que te pasa lo que comentas. Un saludo.
Hola Javier,
Excelente este pequeño tutorial, justo lo que estaba buscando.
Solo que el tamaño del botón me queda muy grande y no encuentro como editarlo en el código.
Acá puedes ver http://myprintscreen.com/s/1zdcm/48c54c86dc
Podrías ayudarme con esto?
Puede que el diseño de tu menú afecte a eso. Añade padding o margin y ve jugando hasta que consigas que sea más pequeño. Un saludo.
Hola, voy viendo tu explicación..... en opciones de pantalla no aparece Clases CSS... es WP 6.0 como ´puedo habiitarlas para que funcione el código CSS que anexaste?
Hola Domingo. Pues todavía no probado WP 6. Estaré atento para cuando actualice y me fijaré. Un saludo.
Muchas gracias! me ha sido súper útil!