Saltar al contenido

Botones e Items CTA en Menú

¿Quieres añadir llamadas a la acción (CTA) en tu Menú en Orbital Theme?

Te muestro como convertir Súper Fácil los items de nuestro menú en Botones, añadir imágenes y más con unos CSS TIPS en minutos y sin saber ni CSS ni usar plugins adicionales. ¡Vamos al lío!

Crear Botones en Menu de Orbital Theme

Código CSS

Una vez pegado en el apartado de apariencia >> personalizar >> CSS adicional, asiganar la clase “boton-menu” a un item de menu

/*CREAR BOTON EN MENU*/
.boton-menu {
border: 4px solid #6c8e7d; /*Modificar COLOR*/
font-weight: bold;
border-radius: 10px;
background-color: #6c8e7d;/*Modificar COLOR*/
vertical-align: middle;
box-shadow: 1px 1px 5px 0px;/*Modificar estilo*/
}
@media (max-width: 1040px){
.boton-menu {
padding-bottom: 6px!important;
}
}
.boton-menu:hover {
border: 4px solid #e1ffeb;/*Modificar COLOR*/
font-weight: bold;
border-radius: 10px;
background-color: #e1ffeb;/*Modificar COLOR*/
vertical-align: middle;
box-shadow: 1px 1px 5px 0px;/*Modificar estilo*/
}
.boton-menu a {
display: inline!important;
background: rgba(255, 255, 255, 0)!important;
color:white;/*Modificar COLOR*/
}
.boton-menu a:hover {
display: inline!important;
background: rgba(255, 255, 255, 0)!important;
color:black;/*Modificar COLOR*/
}

Estilos Borde

Tipos de estilos de bordes:

dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value
none - Defines no border
hidden - Defines a hidden border

    Crear ITEMS CTA extra en Menu

    Código CSS

    Pegar en el apartado de apariencia >> personalizar >> CSS adicional

    Añadir la clase “menuderecha1” al item más a la izquierda, la clase “menucentro” a los item de enmedio y “menuderecha2” a la más a la derecha de los iconos personalizados para crear líneas de división

    /*CREAR BOTONES EXTRA*/
    .menuderecha1{
    border-left: 2px double black;
    text-align:center;
    }
    .menuderecha1:hover{
    border-left: 2px solid black;
    background:#6c8e7d;
    }
    @media (min-width: 1040px){
    .menuderecha1 img:hover{
    filter: invert(1);
    }
    }
    .menuderecha2{
    border-right: 2px solid black;
    text-align:center;
    }
    .menuderecha2:hover{
    border-right: 2px solid black;
    background:#6c8e7d;
    }
    @media (min-width: 1040px){
    .menuderecha2 img:hover{
    filter: invert(1);
    }
    }
    .menucentro{
    text-align:center;
    }
    .menucentro:hover{
    background:#6c8e7d;
    }
    @media (min-width: 1040px){
    .menucentro img:hover{
    filter: invert(1);
    }
    }

    HTML en Menú

    Añadir en el apartado de Menús -> “Etiqueta de navegación”

    <img src="https://tuweb/wp-content/uploads/tufoto.png">

    Sustituir la URL por la de la imagen que ya hayas subido a “Medios” en un formato recomendado de 32*32px

    Para añadir el efecto de llamada al botón de vuestro menú añadir en el apartado “URL” del item de vuestro menú la siguiente propiedad:

    tel:+34XXXXXXXXX

    *sustituir el prefijo (+XX) por el de vuestro país y añadir el número de teléfono a continuación sustituyendo por las X

    Para enviar un email directo, añadir en el apartado de “URL” en el item del menú:

    mailto:vuestromail@correo.com

    *añadís vuestro e-mail seguido de mailto:

    Puedes descargar los iconos del ejemplo del vídeo en:

    No olvides también el recurso de EMOJIS, una opción muy recurrida

    Tipos de estilos de bordes:

    dotted - Defines a dotted border
    dashed - Defines a dashed border
    solid - Defines a solid border
    double - Defines a double border
    groove - Defines a 3D grooved border. The effect depends on the border-color value
    ridge - Defines a 3D ridged border. The effect depends on the border-color value
    inset - Defines a 3D inset border. The effect depends on the border-color value
    outset - Defines a 3D outset border. The effect depends on the border-color value
    none - Defines no border
    hidden - Defines a hidden border

    none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()

    Para aprender más y ver los ejemplos acudir a:

    https://www.w3schools.com/cssref/css3_pr_filter.asp

      Logotipo centrado en Menú

      Código CSS

      Primeramente, en el apartado de Apariencia -> Personalizar -> Identidad del sitio > Debéis de ELIMINAR el logotipo y BORRAR el texto de “título del Sitio”

      Pegar en el apartado de apariencia >> personalizar >> CSS adicional

      /*LOGO EN EL MENU*/
      @media (max-width: 1040px){
      .logomenu{
      display: none!important;
      }
      }
      .logomenu img{
      max-width: 270px;
      }
      .logomenu a {
      padding:0.1rem!important;
      }

      HTML en Menú

      Añadir en el apartado de Menús -> “Etiqueta de navegación”

      <img src="https://tuweb/wp-content/uploads/tufoto.png">

      Sustituir la URL por la de la imagen que ya hayas subido a “Medios” en un formato recomendado de 32*300px

      Página creada por FernanTEC - ¿Quieres saber más?