Guía de estilo

Tipografía
Editar

Para editar la familia de fuentes y el color utilizado globalmente en todos los elementos de tipo editar, seleccione el elemento Body y edite la clase Body (Todas las páginas).


FONT Esta es la fuente global utilizada en el sitio

Editar

Para editar la clase global H1 edite la clase ALL H1 Heading.


H1 Este es el encabezado principal de la página, utilícelo sólo una vez, en la sección hero.

Editar

Para editar la clase global H2 edite la clase ALL H2 Heading.


H2 Utilícelo como título para las diferentes secciones de la página.

Editar

Para editar la clase global H3 edite la clase ALL H3 Heading.


H3 Utilícelo para los títulos de los distintos elementos de sus secciones, como las ventajas o los servicios clave.

Editar

Para editar la clase global H4 edite la clase ALL H4 Heading.


H4 Utilícelo para los títulos de los distintos elementos de sus secciones, como ventajas o servicios clave.

Editar

Para editar la clase de párrafo global (P) edite la clase TODOS los párrafos.


PÁRRAFOS Utiliza párrafos siempre que tengas un texto de más de unas pocas palabras, ten en cuenta que los párrafos deben ir espaciados entre sí aclara cuando acaba un párrafo y empieza otro.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Editar

Para editar la clase Small Paragraph edite la clase Large-P.


PÁRRAFO GRANDE A veces es necesario tener un párrafo grande, por ejemplo debajo de la sección principal para dar contexto al título.

Editar

Para editar la clase Small Paragraph edite la clase Small-P.


PÁRRAFO PEQUEÑO Algunas veces se desea tener un texto más pequeño, por ejemplo cuando se mencionan términos y condiciones, puede utilizar esta clase siempre que necesite un texto de baja jerarquía.

Editar

Para editar el color de la clase texto claro edite la clase Texto claro.


COLOR DE TEXTO CLARO A veces necesitará el texto sobre un fondo oscuro, por lo que puede aplicar esta clase de texto claro a todos los elementos tipográficos.

Editar

Para editar los elementos de tipo anidados dentro de un elemento Rich Text, seleccione el texto y edite la clase ALL Heading anidada dentro de Rich-Text

Asegúrate de activar la opción "Selector de nidos".

TEXTO RICO

Utilizará elementos de texto enriquecido en contenidos dinámicos como las entradas de blog. Si necesita que los encabezados y los estilos de texto sean diferentes a los del resto de su sitio web, puede editarlos aquí.

Título H1 dentro de un texto enriquecido

Título H2 dentro de un texto enriquecido

Título H3 dentro de un texto enriquecido

Se trata de un elemento de párrafo dentro de un texto enriquecido

Editar

Para modificar el tamaño de las viñetas y el relleno izquierdo, edite la clase Lista.

LISTA

  • Cuando tengas una lista de puntos a tratar
  • Lo mejor es utilizar un elemento de lista
  • El SEO de su sitio web se beneficiará
Color
Editar

Seleccione el color de fondo que desea editar y haga clic en EDITAR FONDO (icono del lápiz).

Color oscuro

Color principal de la marca

Color de la marca secundaria

Color verde medio

Azul

Color claro

Blanco


Rojo ‍

Botones
Editar

Para editar el tamaño y el relleno de todos los botones, edite la clase Button.

Los cambios específicos del botón Ghost, como el color de fondo y el borde, deben realizarse en la clase Ghost-Button.

Para editar los enlaces de texto nativos, edite la clase TODOS los enlaces

Los colores de los botones inversos pueden modificarse editando las clases combinadas Inverso

FORMULARIOS
Editar

Para editar los diferentes elementos seleccionando el clasificado que empieza por Formulario

Muchas gracias. Hemos recibido su envío.
¡Uy! Algo ha ido mal al enviar el formulario.
Elementos de diseño
Editar

Para editar el relleno izquierda-derecha en todas las secciones, seleccione la sección superior de esta página y edite la clase Section-Padding

RELLENO DE SECCIÓN

Cada una de tus secciones debería incluir la clase Section-Padding, para asegurarte de que hay un relleno consistente y que tus elementos no tocan los bordes de la pantalla.

Editar

Para editar la anchura máxima del elemento contenedor, seleccione el contenedor superior de esta página y edite la clase Contenedor

CONTENEDOR

Cada sección de la página debe tener un Contenedor dentro que mantenga el contenido principal centrado dentro de una anchura máxima para mejorar la legibilidad y la coherencia.

Popups
Editar

Para editar el contenido de la ventana emergente, haga clic en el símbolo y edite los textos / enlaces desde el panel Anulación

Para editar el diseño de la ventana emergente, haga doble clic en el símbolo para editar el estilo / elementos

Para utilizar la ventana emergente en otras páginas, copie el elemento Popup-Background-Wrap de esta página (incluido el símbolo que contiene).

Para editar la animación de apertura, seleccione el botón de abajo y edite el Open-Popup en el panel de interacciones.

Abrir ventana emergente