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

    Emojis

    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

      Puedes descargar varias imagenes desde:

      • Optimizado para Gutenberg
      • Soporte ilimitado
      • Monetiza tu WEB
      • Mejora los Rankings en Google
      • Actualizaciones de por vida

      Últimas Novedades de nuestro Blog

      Mira los artículos de nuestro Blog con los mejores consejos tras la experiencia de uso del Tema Orbital enfocado a SEO y posicionamiento.

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