• 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

Destacar el último elemento del menú con un botón en WordPress

Descubre cómo convertir el último elemento del menú superior de un tema de WordPress en un botón con un poco de código.

Resaltar el último elemento del menú principal es un truco muy eficaz para colocar la llamada a la acción (o CTA). Tanto que en esta web es así. 😉

Para incluir un botón en el último elemento del menú, solo necesitas realizar ciertas modificaciones de CSS.

añadir botón último elemento menu tema WordPress
Ejemplo de último botón destacado en forma de botón

Vamos allá:

Snippet para añadir un botón en el menú superior un tema de WordPress

Si deseas obtener el mismo resultado que ves en la imagen anterior, introduce este código al final del fichero style.css:

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

Con este fragmento aplicas los estilos que buscas al último ítem del menú principal.

En este ejemplo concreto, utilizas el color destacado de esta web, pero puedes cambiarlo a tu gusto.

Y ¡listo! Has convertido el último elemento del menú en un CTA perfecto.

Conclusiones

Ya ves qué fácil es insertar un botón de llamada a la acción en el menú superior de un tema de WordPress.

Si tienes alguna duda te leo en los comentarios. Y si quieres dejarme una sugerencia para futuros tutoriales, envíamela a través del formulario de contacto.

Todo ventajas de ser suscriptor. 😉

Cabecera CSS 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?