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 de 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?

Ejemplo real de un botón en el menú superior de WordPress

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.

menú superior botón

¿Cómo hacer un menú en WordPress?

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.

Consigue Divi con 10% descuento

Añadir un enlace personalizado al menú WordPress

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ú.

menú configuración wordpress

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.

menú enlace personalizado

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.

divi css personalizado

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.

botón en menú wordpress versión mobile

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 😉

Dime qué te ha parecido el artículo...

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (1 votos, promedio: 5,00 de 5)
Cargando…

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies

Pin It on Pinterest