Editor de Bloques

Aplicación de estilos en la columna lateral de ajustes

La columna lateral de ajustes (a la derecha del Editor de Bloques) en la pestaña bloque es el espacio para la personalización de estilos. Las opciones disponibles en esta interfaz son la representación directa de los variables definidas en el tema.

• Alcance: Las modificaciones realizadas aquí afectan únicamente al bloque individual seleccionado y sobrescriben el estilo global predefinido para ese bloque.

---

Design tokens y paletas de estilo controladas

El sistema de diseño restringe las opciones de personalización a un conjunto limitado de valores aprobados, asegurando que el diseño permanezca uniforme:

Color

Paleta de temas: La selección de colores para texto, fondo, enlaces y botones está limitada a la paleta de colores del tema.

Valores Aceptados: Los colores se pueden seleccionar desde el selector visual o ingresando valores HEX, RGB o HSL específicos de marca, garantizando el cumplimiento del contraste (WCAG).

Tipografía

Tamaños Tipográficos: La selección de tamaño está restringida a opciones preestablecidas etiquetadas:

• Predeterminado
• Hero
• 4XL
• 3XL
• 2XL
• XL
• L
• Base
• M
• S
• XS

Tipografías Disponibles: Se ofrece una selección limitada de Familias de Fuente aprobadas para su uso:

• Poppins
• Roboto

Configuración: Los parámetros de apariencia, altura de línea, espaciado entre letras, decoración de texto y capitalizar texto están disponibles bajo el panel de Tipografía.

Dimensiones

La configuración de padding (relleno interno), margen (espacio exterior) y espaciado del bloque (separación entre elementos) está disponible para la mayoría de los bloques, permitiendo ajustes en los cuatro lados (superior, inferior, derecho e izquierdo). Los valores predefinidos por el tema son:

• Predeterminado
• Ninguno
• 0
• 4
• 8
• 12
• 16
• 20
• 24
• 28
• 32
• 36
• 40
• 44
• 48
• 60
• 64
• 80
• 100
• 160

Unidades: Los bloques que permiten agregar valores personalizados utilizan las unidades de medida %, rem, vw o vh, con una preferencia por unidades relativas (rem) para la consistencia responsive.

Borde y radio

La configuración del borde opera bajo el mismo sistema de unidades que las dimensiones y el espaciado, permitiendo el ingreso de valores personalizados.

Unidades admitidas: Se acepta la definición del ancho de borde utilizando unidades absolutas como px y relativas como %, em, rem, vw o vh.

Método de ingreso: La configuración permite ingresar el valor exacto a través del cuadro de texto o ajustarlo mediante el control deslizante.

Comportamiento predeterminado: Por defecto, la configuración está vinculada. Esto implica que cualquier valor ingresado se aplica de manera uniforme a los cuatro lados del borde (superior, inferior, derecho e izquierdo) simultáneamente.

Control individual: Al hacer clic en el icono de enlace, se desvinculan los lados. Esto permite al usuario modificar y asignar un valor de ancho independiente para cada uno de los cuatro lados del bloque.

---

Además de los parámetros globales (tipografía, color, espaciado), ciertos bloques vienen con opciones de estilo predefinidas que se aplican con un solo clic.

Separador

Opciones visuales para la línea divisoria.

Botones

Variaciones rápidas que cambian la apariencia del botón (sólido, contorno).

Párrafo

Opciones de presentación de parrafo.

Lista

Adaptar lista en columnas.

2 columnas

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

3 columnas

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

4 columnas

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10