• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Añadir un botón de llamada al menú de Genesis Sample

Descubre en este tutorial cómo colocar un botón que permita llamar directamente desde el menú mediante código.

Una de las ventajas de ser suscriptor de Código Genesis es que puedes proponer tutoriales.

¿Por ejemplo?

El otro día Jerónimo me preguntaba cómo añadir un CTA en el menú que permita llamar al número de teléfono de contacto.

Así que me puse manos a la obra.

Primero debes crear un elemento del menú personalizado para después aplicarle ciertas modificaciones de CSS de forma que quede, por ejemplo, así:

¿Vamos a ello?

Snippet para introducir un botón de llamada en el menú superior de Genesis Sample

1. Genera un nuevo ítem de menú

Antes de insertar el código, añade un elemento de menú como el ejemplo de abajo.

Para ello ve a Apariencia -> Menús y crea un ítem con los siguientes campos:

  • En la URL debes usar el formato «tel:» + el número de teléfono con el prefijo del país (en este caso +34).
  • En la «Etiqueta de navegación» pon el número tal y como quieres que se muestre en el menú.
  • En la casilla «clases CSS» escribe menu-phone.

Es importante que el formato de la URL sea exactamente así para que, cuando el lector pulse el botón, este lance una llamada al número indicado.

Sería el análogo a cuando lo utilizas con HTML:

<a href="tel:+34666000666"><strong>666000666</strong></a>

Por cierto, si no ves la casilla de Clases CSS, ve a la pestaña superior llamada «Opciones de pantalla» y asegúrate de que el checkbox «Clases CSS» está marcado.

mostrar clases items menu WordPress
Asegúrate de que tienes la opción de «Clases CSS» marcada

2. Da estilos al botón de llamada

Cuando hayas indicado la clase CSS al elemento, introduce el siguiente código al final del fichero style.css:

Para ver este código y los otros 1805 snippets de esta web,
identifícate o suscríbete aquí.

Con el primer fragmento del código aplicas esos estilos de botón/CTA al ítem del menú principal al que le has dado la clase menu-phone.

Puedes utilizar tu propia clase (como por ejemplo, «teléfono»), aunque resulta más homogéneo mantener el uso del inglés en el código.

Si tomas de forma literal el ejemplo, generas un botón de color azul con el texto en blanco. Por supuesto, te invito a modificarlo a tu gusto.

También tienes la opción de crear un botón más redondeado aumentando el valor de border-radius.

Con la segunda parte del snippet añades el icono del teléfono usando los dashicons que vienen de forma nativa en WordPress.

Y, ¡listo!

Has convertido un item del menú en un botón de llamada funcional y con un diseño personalizado.

Conclusiones

Ya ves qué fácil es insertar un botón de llamada en cualquier elemento del menú superior del child theme Genesis Sample.

Y aunque este snippet está creado para una plantilla concreta, puedes usarlo de guía para modificar otros temas de Genesis.

¿Alguna duda? Te leo en los comentarios.

Y si quieres darme una sugerencia para próximos tutoriales, déjamela en el formulario de contacto. Ventajas de ser suscriptor. 😉

Cabecera CSS Genesis Framework Genesis Sample Menú

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes login o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?