Clases

Amplíe su sitio web sin necesidad de desarrolladores y permita a su equipo de marketing comercializar su marca. Nombres de clases CSS que una abuela puede entender. Sin abreviaturas, sin taquigrafía, sin confusión. Lea el nombre de una clase y sepa lo que hace.

Estructura

Hemos definido los fundamentos básicos para que puedas construir el complejo con menos esfuerzo.

Estructuras del núcleo y anchura máxima

Utilice esta estructura para crear la mayoría de las páginas:

.page-wrapper

.sección

.contenedor

.page-padding

...(por ejemplo, rejilla, diseños, componentes, etc.)

.contenedor

.max-800

.max-600

.max-500

.max-400

.max-200

Acolchado global

Clase madre externa para crear un espaciado horizontal global en todo el sitio

.page-padding

ALGUNAS DE ESTAS CLASES DE UTILIDAD DEBERÍAN SER MOVIDAS. Algo como clickable no necesita estar tan arriba en la lista de clases

Clases de utilidad

.z-1 - Acerca un elemento en el índice-z. Establece el índice z a 1.

.z-2 - Acerca un elemento en el índice-z. Establece el índice z a 2.

.full-size - No hay anchura máxima en un contenedor. Establece el ancho máximo como ninguno.

.full-size-tablet - .full-size en tableta. Establece el ancho máximo como ninguno en la tableta.

.full-size-mobile - .full-size en móviles. Establece la anchura máxima como ninguna en móviles.

.align-center - Centra un contenedor en la pantalla. Establece el margen izquierdo y derecho en automático.

.div-square - Crea y mantiene una dimensión 1:1 de un div. Magia CSS.

.layer - Se añade al div para que expanda todo el tamaño del elemento padre. Asegúrate de que el div padre tiene 'position: relative'.

.clickable-off - Impide toda interacción de click y hover con un elemento. Establece los eventos de puntero como ninguno.

.clickable-on - Activa toda la interacción de click y hover con un elemento. Establece los eventos de puntero como automáticos.

.crop - Evita el desbordamiento de un contenedor. Establece el desbordamiento como oculto.

.sticky-on-page - Complemento necesario de .page-wrapper cuando 'position: sticky' está en una página. Establece el desbordamiento como visible.

Rejillas

Construye cualquier diseño con cuadrículas. Utilízala cuando necesites columnas y filas.

Columnas de la cuadrícula

.grid-1-col

.grid-2-col

.grid-3-col

.grid-4-col

Filas de la cuadrícula

.grid-row

artículo

Complementos a las "filas de la cuadrícula

Añada estas clases además de las clases de "filas de la cuadrícula" anteriores.

.gap-10

artículo

.gap-40

artículo

.gap-60

artículo

Fila y columna simples

.row

artículo

.col

artículo

Espaciamiento

Sistema de espaciado que mantiene el espaciado vertical y horizontal global en su sitio web.

Espacios - horizontales

margen izquierdo y margen derecho

Espacio que queda

.space-left-xsmall

.space-left-small

.space-left-medium

.space-left-large

.space-left-xlarge

Espacio derecho

.space-right-xsmall

elemento

.space-right-small

elemento

.space-right-medium

elemento

.space-right-large

elemento

.space-right-xlarge

elemento

Espacio - vertical

margin-bottom y margin-top

Fondo del espacio

.space-bottom-xsmall

.space-bottom-small

.space-bottom-medium

.space-bottom-large

.space-bottom-xlarge

Topes espaciales

.space-top-xsmall

.space-top-small

.space-top-medium

.space-top-large

.space-top-xlarge

Espacios: espacio interior igual para las secciones

Espacio - igual izquierda derecha

padding-left y padding-right

.section-space-horizontal-20-20

.section-space-horizontal-40-40

.section-space-horizontal-60-60

Espacios - iguales arriba abajo

padding-top y padding-bottom

.section-space-vertical-20-20

.section-space-vertical-40-40

.section-space-vertical-80-80

Eliminar todo el espaciado de los componentes predeterminados de Webflow

.space-clean

Tipografía

La organización de la tipografía mantiene la profesionalidad de su marca. Uso correcto de H1, H2, H3 para SEO.

Etiquetas de encabezamiento

Utilice siempre las etiquetas para determinar los títulos.

La página debe tener sólo un H1 - requisito de SEO. Añada la clase .style-heading-large a h2, h3, etc. si necesita más de un encabezado con el mismo estilo que el H1.

H1

H2

H3

H4

H5

H6

Tamaño de letra único

.style-heading-huge

.style-heading-large

.style-heading-medium

Contenido

Texto del párrafo - 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.

.style-text-large

.style-text-small

.style-text-tiny

Enlace de texto

Cita en bloque

.style-text-strikethrough

Texto enriquecido

El elemento de texto enriquecido le permite crear y dar formato a títulos, párrafos, citas en bloque, imágenes y vídeos, todo en un solo lugar en lugar de tener que añadirlos y darles formato individualmente. Sólo tienes que hacer doble clic y crear contenido fácilmente.

Hemos creado una clase especial .rich-text con un formato especial para cada componente.

h1

h2

h3

h4

h5

h6

cita

enlace

elemento de la lista
elemento de la lista
‍

Texto del párrafo

Peso de la fuente

.style-text-bold

.style-text-normal

Alineación del texto

.style-text-left

.style-text-center

.style-text-right

Colores

La organización de la tipografía mantiene la profesionalidad de su marca. Uso correcto de H1, H2, H3 para SEO.

Color del texto

Añadir a las secciones, contenedores y elementos para cambiar el color de fondo

.style-text-color-white

.style-text-color-grey

.style-text-color-black

.style-text-muted - añadir opacidad al texto

Complementos de color de fondo

Añadir a las secciones, contenedores y elementos para cambiar el color de fondo

.style-background-white

.style-background-grey

.stylebackground-black

Visibilidad de la respuesta

Experiencia única en cada dispositivo.

Mostrar y ocultar elementos por tamaño de pantalla

.hide - ocultar en todos los dispositivos

.hide-tablet - ocultar a partir de la resolución de la tableta

.hide-landscape - ocultar a partir de la resolución horizontal

.hide-mobile - ocultar a partir de la resolución móvil

.show-tablet - mostrar a partir de la resolución de la tableta

.show-landscape - mostrar a partir de la resolución horizontal

.show-mobile - mostrar a partir de la resolución del móvil

Componentes

Componentes de formularios, botones, desplegables, pestañas, deslizadores y mucho más en su interior.

Botones

Consejo: utilice . grid-row .gap-small/medium/large como envoltura para poner el espacio entre dos botones

.botón

.botón-secundario

.button-text

Utilizar la clase de complemento .invert-colors al colocar el botón sobre un fondo oscuro

.botón

.botón-secundario

.button-text

Formularios

Elementos de formulario nativos de Webflow

¡Gracias! Su presentación ha sido recibida!

¡Uy! Algo salió mal al enviar el formulario.

Deslizador

Esto es un texto dentro de un bloque div.

Pestañas

Esto es un texto dentro de un bloque div.

Iconos

Clases de iconos

.icon-16

.icon-30

.icon-40

.icon-60

.icon-80

.icon-1x1-xsmall

.icon-1x1-small

.icon-1x1-medium

.icon-1x1-large

.icon-1x1-xlarge

Iconos SVG en línea

Find more icons here https://simpleicons.org and add property fill='currentColor' inside of <svg> tag to control color of the icon through font color style.</svg>

Clases

Estructura

Estructuras del núcleo y anchura máxima

Acolchado global

Clases de utilidad

Rejillas

Columnas de la cuadrícula

Filas de la cuadrícula

Complementos a las "filas de la cuadrícula

Fila y columna simples

Espaciamiento

Espacios - horizontales

Espacio que queda

Espacio derecho

Espacio - vertical

Fondo del espacio

Topes espaciales

Espacios: espacio interior igual para las secciones

Espacio - igual izquierda derecha

Espacios - iguales arriba abajo

Eliminar todo el espaciado de los componentes predeterminados de Webflow

Tipografía

Etiquetas de encabezamiento

H1

H2

H3

H4

H5

H6

Tamaño de letra único

Contenido

Texto enriquecido

h1

h2

h3

h4

h5

h6

Peso de la fuente

Alineación del texto

Colores

Color del texto

Complementos de color de fondo

Visibilidad de la respuesta

Mostrar y ocultar elementos por tamaño de pantalla

Componentes

Navegación

Botones

Formularios

Deslizador

Pestañas

Desplegable

Caja de luz

Busque en

Iconos

Clases de iconos

Iconos SVG en línea