¿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 borderdashed
- Defines a dashed bordersolid
- Defines a solid borderdouble
- Defines a double bordergroove
- Defines a 3D grooved border. The effect depends on the border-color valueridge
- Defines a 3D ridged border. The effect depends on the border-color valueinset
- Defines a 3D inset border. The effect depends on the border-color valueoutset
- Defines a 3D outset border. The effect depends on the border-color valuenone
- Defines no borderhidden
- Defines a hidden border
Elegir color
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
Llamada y E-Mail con 1Click
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:
Recursos Imágenes
Puedes descargar los iconos del ejemplo del vídeo en:
No olvides también el recurso de EMOJIS, una opción muy recurrida
Estilos Borde
Tipos de estilos de bordes:
dotted
- Defines a dotted borderdashed
- Defines a dashed bordersolid
- Defines a solid borderdouble
- Defines a double bordergroove
- Defines a 3D grooved border. The effect depends on the border-color valueridge
- Defines a 3D ridged border. The effect depends on the border-color valueinset
- Defines a 3D inset border. The effect depends on the border-color valueoutset
- Defines a 3D outset border. The effect depends on the border-color valuenone
- Defines no borderhidden
- Defines a hidden border
Filtros hover
none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()
Para aprender más y ver los ejemplos acudir a:
Elegir color
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
Recursos Imágenes

- 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.