Instrucciones generales: Todas las clases deben aplicarse en el widget correspondiente. Ejemplo: si hay un contenedor con widgets de Heading y Text Editor, y se quiere añadir una clase que afecte al texto, se debe añadir en el menú Advanced de Text Editor, no en el contenedor.
Importante: ninguno de estos elementos están optimizados para responsives, revisar todos los componentes en desktop.
Instrucciones: Solo se debe añadir el widget “Heading” de Elementor y, posteriormente, cambiar el tipo de encabezado (H) según sea necesario.
Instrucciones: Se debe añadir el widget “Text Editor” de Elementor y, posteriormente, incluir la etiqueta semántica que se requiera desde la pestaña “text”. Las etiquetas a utilizar son: a, span o p.
Los estilos bold o italic, se aplican directamente desde las herramientas del widget.
Para cambiar el color de los textos, las clases se añaden desde el menú “advanced” y se pueden usar las siguientes: text--primary, text--secondary, text--black o text--white. En el caso de los enlaces con la etiqueta a, se debe reemplazar “text” por “link” los hovers para este último, ya están aplicados en el css que se puede modificar en el Theme File Editor.
Para remover espacios adicionales en títulos, links y textos, se pueden usar las siguientes: text--no-margin.En el caso títulos y elances, se debe reemplazar “text” por “title” o “link”, según aplique.
Si se combinan textos p y enlaces a en el mismo widget, simplemente se deben aplicar ambas clases correspondientes, como en el siguiente ejemplo: text--white link--secondary:
Etiqueta: p o span | Estilo: Regular | Color: white
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Etiqueta: p o span | Estilo: Bold | Color: white
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Etiqueta: p o span | Estilo: Itálica | Color: white
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Etiqueta: a | Estilo: Regular | Color: secondary
Nota: Aplicar clases solo cuando sea necesario cambiar un color de texto de manera puntual. Por defecto, al añadir las clases “bg–” del apartado “Contenedores“, cualquier texto con las etiquetas a, p, span, li, ol, ul y títulos h se mostrará con los colores respectivos declarados en el CSS.
Instrucciones: Se debe añadir el widget “Button” desde Widgets globales, donde se encontrarán tres tamaños de botones en color primario y estilo sólido.
Las clases se añaden en el menú “Advanced” y se utilizan en el siguiente orden: btt btt--large btt--primary-solid.
Para cambiar el tamaño entre los tres tipos disponibles, modificar únicamente la palabra “large” por “small”, “x-small” o “tag”.
Para cambiar el estilo entre los dos disponibles, modificar únicamente la palabra “solid” por “outline“.
Para cambiar el color entre las opciones disponibles, modificar únicamente la palabra “primary” por “secondary“, “black” o “white“.
A continuación, se proporcionará una guía visual para aplicar cada clase.
Estilo: solid | Tamaño: x-small | Color: secondary y white | Usos: Tags para Posts de Blog.
Estilo: solid | Tamaño: small | Color: primary (PCP), secondary (OP), red (LVC), gold (BDL), gray (CTP) y black (CXO) | Usos: Tipologías de programas.
Estilo: solid | Tamaños: large, medium, small y x-small | Color: primary | Usos: Todos los Banners de Call to Action en fondo blanco.
Estilo: outline | Tamaños: large, medium, small y x-small | Color: primary | Usos: Todos los Banners de Call to Action en fondo blanco, si existiera un botón solid primary antes.
Estilo: solid | Tamaños: large, medium, small y x-small | Color: secondary | Usos: Todos los Hero Banners de Call to Action en fondo de imágenes con overlays.
Estilo: outline | Tamaños: large, medium, small y x-small | Color: secondary | Usos: Todos los Hero Banners de Call to Action en fondo de imágenes con overlays, si existiera un botón solid secondary antes.
Estilo: solid | Tamaños: large, medium, small y x-small | Color: black | Usos: Sin uso.
Estilo: outline | Tamaños: large, medium, small y x-small | Color: black | Usos: Sin uso.
Estilo: solid | Tamaños: large, medium, small y x-small | Color: white | Usos: Sin uso.
Estilo: outline | Tamaños: large, medium, small y x-small | Color: white | Usos: Sin uso.
Instrucciones: Se debe añadir el widget “Container”. Las clases se añaden en el menú “Advanced”.
Las clases disponibles son:
bg--primary: cambia el color del fondo de cualquier contenedor.border border--primary: asigna borde y cambia el color.container--large: añade paddings al contenedor. border border--large: cambia el grosor de la línea, por defecto en color negro y 0px. radius--large: cambia radio del borde.shadow--large: añade una sombra al container.Color: secondary
Color: red
Color: gold
Color: gray
Color: demi light gray
Color: light gray
Color: charcoal
Color: black
Color: white
Padding container: large | Border width: large | Border radius: full | Shadow: large
Padding container: large | Border width: large | Border radius: large | Shadow: large
Padding container: medium | Border width: medium | Border radius: medium | Shadow: medium
Padding container: small | Border width: small | Border radius: small | Shadow: small
Padding container: x-small | Border width: x-small | Border radius: x-small | Shadow: x-small