Hoy vamos a ver como crear un botón en el menú de nuestro WordPress utilizando solamente unas pocas líneas de código CSS.
Puedes agregar este botón por diferentes motivos:
- Contacto
- Acceso y Registro
- Botón de WhatsApp
- Mi Perfil / Mi cuenta
- Acceso a la Intranet
Lo primero que tienes que hacer es agregar el elemento a tu menú de WordPress (si aún no lo tienes) y agregar una clase CSS a ese elemento para poder trabajar con él.
Si no ves la casilla de ‘clases CSS’ en el elemento de menú, puedes activarlo desde las ‘opciones de pantalla’ que encontrarás en Apariencia – Menús.
Una vez activado, solo tienes que rellenar la casilla con un nombre de clase. Puedes utilizar el que quieras.
En mi caso utilizaré boton-menu pero como te digo puedes poner el nombre que quieras.
Bien, una vez hecho esto tenemos que ir a Apariencia – Personalizar y accederemos a la pestaña CSS Adicional para poder agregar nuestro código.
El código que utilicemos depende mucho de nuestros requerimientos pero básicamente tendremos que retocar:
- Background-color (color de fondo del botón)
- Max – height (altura máxima del botón)
- Color (color del texto del botón)
- Border (borde del botón)
- Border-radius (redondear esquinas del botón)
Puedes copiar el código si quieres y pegarlo directamente en CSS Adicional.
.boton-menu a{
background-color:red;
border-radius:5px;
max-height:50px;
}
.boton-menu a:hover{
background-color:white;
color:red !important;
border: 1px solid red;
}
.boton-menu .menu-link{
color:white !important;
}
Para que te quede todo más claro te recomiendo que veas el siguiente vídeo donde vemos todo el proceso y explico que es lo que hace cada instrucción.
Puedes modificar las instrucciones CSS para agregar tu color de fondo, altura personalizada del botón y dejarlo exactamente como quieres.
Bueno, ya has visto que es bastante fácil crear un botón en el menú de tu WordPress y espero que te haya quedado todo claro.
Nos vemos en el siguiente tutorial.
un saludo.