Cómo poner un boton al menú de GeneratePress

Cómo poner un botón en el menu de GeneratePress

Es muy habitual querer colocar un botón en el menú. Por ejemplo, para destacar algún tipo de item, pongamos por el caso contacta, apúntate, inscríbete … Para colocar un botón en GeneratePress deberemos etiquetar con una clase personalizada el item del menú que queramos. Puede ser una página concreta, un enlace, una categoría … Cualquier elemento puede ser destacado con un botón.

A WordPress podemos aplicar clases de CSS a cualquier item del menú. Pero está un poco escondido. Antes de nada tendremos que desplegar las opciones de pantalla una vez estemos en el apartado del menú. Clicaremos el botón superior de la derecha, desplegaremos una serie de opciones, y seleccionaremos activar clase CSS.

Ahora ya podemos etiquetar cualquier elemento del menú con una clases determinada. Las clases CSS se utilizan para modificar el aspecto visual de un determinado elemento. A GeneratePress podemos, por ejemplo etiquetar el item que deseamos con la clase nav-button. Una vez hecho esto sólo tendremos que modificar el CSS. Por ejemplo con el siguiente código:

/*Añadir botón menu superior*/

@media (min-width:769px) {
	.main-navigation .main-nav ul li.nav-button a {
		background-color: #ffffff;
		border: 2px solid #000000;
		color: #000000;
		margin-top: 10px;
		margin-left: 30px; /*Seguramente tendréis que ajustar este valor*/
		line-height: 35px; /*Seguramente tendréis que ajustar este valor*/
    }
}

Este trozo de código lo podemos añadir a nuestra hoja de estilos personalizada si estamos trabajando con un Child theme, a través de un plugin como simple CSS (del mismo autor que GeneratePress), o añadiéndolo al personalizador de WordPress, a la pestaña CSS adicional.

Sea como sea podemos cambiar los parámetros de este CSS y modificar los colores, las líneas, las separaciones y márgenes …. Para ver todos estos cambios al momento es muy práctico hacerlo a través del personalizador. Y una vez lo tenemos como queremos podemos recortar y pegar el código css en nuestra hoja de estilos CSS o en el plugin simple CSS.

Video tutorial de cómo poner un botón en el menú de GeneratePress

Ya ves que con muy pocos pasos podemos añadir un botón totalmente personalizable a nuestro menú de GeneratePress. Si tienes cualquier duda o quieres decir la tuya puedes hacerlo en los comentarios. Nos vemos!

8 comentarios en «Cómo poner un botón en el menu de GeneratePress»

  1. Gracias por compartir este articulo!!! Me ha servido de mucho, pero es posible redondear los bordes del boton y añadirle las propiedades de Hover?

    Responder
    • Hola Ernesto,

      Para poner los bordes redondeados tienes que añadir la propiedad border-radius. Por ejemplo:
      border-radius: 50px;

      Y para añadir la propieda hover tendràs que añadir el siguiente CSS:
      .main-navigation .main-nav ul li.nav-button a:hover {
      background-color: #1e73be;
      border: 2px solid #1e73be;
      }

      Ya me dirás si te ha ido bien. Un saludo

      Responder
    • Hola Patricio,

      Entiendo que quieres poner un botón en el submenú del mobile. Para hacerlo tienes que añadir un poco de css.

      @media (max-width: 768px) {
      /* CSS in here for mobile only */
      .main-navigation .main-nav ul li.nav-button a {
      background-color: #ffffff;
      border: 2px solid #000000;
      color: #000000;
      margin-top: 10px;
      margin: 20px; /*Seguramente tendréis que ajustar este valor*/
      line-height: 35px; /*Seguramente tendréis que ajustar este valor*/
      }
      }

      @media (max-width: 768px) {
      /* CSS in here for mobile only */
      .main-navigation .main-nav ul li.nav-button a:hover {
      background-color: #1e73be;
      border: 2px solid #1e73be;
      color: #ffffff;
      margin-top: 10px;
      margin: 20px; /*Seguramente tendréis que ajustar este valor*/
      line-height: 35px; /*Seguramente tendréis que ajustar este valor*/
      }
      }

      Si lo que quieres es un botón visible y alineado en la cabecera del mobile es un poco mas complejo. Me lo guardo para hacer un nuevo tutorial.

      Responder

Deja un comentario

Identifícate