Insertar un botón call-to-action en el menú pricipal de nuestro sitio le dará más visibilidad. También conseguiremos que el visitante haga clicks en nuestra web. De este modo ganamos también en el SEO

Existen varios plugins para customizar y colocar botones donde quieras y poder insertar botón call-to-action en el menú principal. Pero como siempre aconsejo, cada plugin que añadimos a nuestro sitio, es más peso, más tiempo de carga.

En este tutorial te voy a mostrar una forma sencilla de colocar tu botón de llamada a la acción en el menú principal. Totalmente customizado y sin cargar ningún plugin

 Damos nombre a la clase del enlace

En Apariencia –> Menús –> Desplegamos la pestaña de opciones de pantalla que está en la parte superior derecha de la pantalla:

 

Opciones de pantalla

Opciones de pantalla

Y como vemos en la imagen, en Mostrar propiedades avanzadas de menú marcamos la casilla Clases CSS. Ahora veremos que al desplegar el enlace que queremos convertir en botón, nos aparece la opción dar nombrar la clase CSS:

Clase CSS opción menu

Clase CSS opción menu

Ahí le ponemos un nombre todo junto y en minúsculas, sin acentos. Ahora ya podemos editar mediante CSS

Editando la hoja de estilos (style.css)

Tanto si ya dispones de un tema hijo (recomendado) como si no, tienes dos maneras de acceder a la hoja de estilos (el archivo style.css):

  • Accediendo mediante el CMS Apariencia –> Editor –> y la derecha buscar el archivo style.css
  • Mediante nuestro servidor, bien por FTP, bien por CPanel, la ruta del archivo es \wp-content\themes\nombre_de_tu_tema\style.css

Bien, una vez abierto,

Ya podemos customizarlo:

li.nombrequelehemosdadoalaclase {
    border: 2px solid #005580!important; /* Esto es el borde (pixeles, solidez, color */
    padding: 1em!important; /* Esto es el espacio alrededor */
    border-radius: 2em; /* Esto es la medida para redondear las esquinas del borde */
    text-align: center; /* Para alinear al centro */
    background: #4f979b; /* El color de fondo del botón */
}

prueba con las medidas a tu gusto, como ves, en algunas líneas aparece la palabra !important. Esto es porque a veces hay conflicto con el código del tema y es necesario «darle prioridad» al nuestro; Si algún cambio no te aparece al hacerlo, no dudes en incluir al final de la línea !important.

Para hacer un degradado te aconsejo la página de Ultimate CSS Gradient Generator – ColorZilla.com.L Ahí puedes elegir el color con transparencia, degradado.. Luego sólo tienes que copiar y pegar el código css que aparece en la caja de la derecha en tu hoja de estilos entre las llaves {}

Bien, ya tenemos un borde y un relleno, del mismo modo, pero con el elemento :hover para customizar el botón, cuando el ratón esté posicionado sobre el botón:

li.nombrequelehemosdadoalaclase:hover {
     /* Aquí colocamos otra vez las opciones con colores enfatizados */
}

Después le damos estilo al texto del enlace, igual, primero normal, segundo con el :hover :

li.nombrequelehemosdadoalaclase a{
    text-decoration-line: underline; /* Añade esta línea si quieres subrayado */
    padding-bottom: 3px!important; /* espacio (debajo) del texto */
    color: #e6e6e7!important; /* color del texto */
}

li.nombrequelehemosdadoalaclase a:hover {
    color: #005580!important;  /* color del texto */

Y por último, dependiendo del tema, es posible que el menú nos quede sin margen, lo corregimos sólo si es así:

nav#top-menu-nav {
	padding-bottom: 0.25em!important; /* espacio abajo del menú */
}

listo! Ya sabemos cómo insertar botón call-to-action en en el menú principal

Si te ha gustado el tutorial, no dudes en compartir o comentar. También puedes ponerte en contacto conmigo rellenando el formulario de contacto.

¡Muchas gracias por leerme!

¡Comparte!