Descripción general
Tres componentes de diseño reutilizables aparecen en casi todas las secciones del constructor: Grupo, Texto y Separador. Juntos te permiten crear cualquier diseño sin escribir CSS. Selecciona un bloque para abrir sus ajustes.
Grupo
Un Grupo es un contenedor de diseño flexible. Agrega bloques hijos dentro de él (texto, botones, imágenes, campos de newsletter, incluso grupos anidados) y controla cómo se organizan.
Dirección
- Vertical: los hijos se apilan de arriba a abajo.
- Horizontal: los hijos se colocan uno al lado del otro en una fila.
El interruptor Apilar verticalmente en móvil solo aparece cuando la Dirección es Horizontal. Actívalo para cambiar una fila horizontal a una pila vertical en pantallas pequeñas.
Posición y alineación
Estos distribuyen los hijos a lo largo de los ejes principal y cruzado. Su significado cambia según la dirección, y la opción Entre (espacio igual entre los hijos) solo existe en el eje principal:
- Dirección vertical: Posición es el eje principal (vertical): arriba, centro, abajo o entre. Alineación es el eje cruzado (horizontal): izquierda, centro o derecha.
- Dirección horizontal: Alineación es el eje principal (horizontal): izquierda, centro, derecha o entre. Posición es el eje cruzado (vertical): arriba, centro o abajo.
Ancho
- Rellenar: se expande para ocupar todo el espacio disponible en el padre. Úsalo para grupos que deben compartir el espacio por igual dentro de un padre horizontal.
- Ajustar: se reduce al tamaño natural de su contenido.
- Personalizado: muestra un control deslizante de Ancho personalizado establecido como porcentaje (0 a 100%). El grupo mantiene ese tamaño sin crecer ni reducirse.
Espacio
El espacio en píxeles entre los elementos hijos (0 a 100 px, por defecto 20 px).
Esquema de color
Usar esquema de color del padre está activado por defecto, así que el grupo hereda el esquema de su padre. Desactívalo para mostrar el selector de Esquema de color y elegir uno de tus esquemas globales. Esto te permite crear zonas de color distintas dentro de una sección.
Borde
Borde puede ser Ninguno o Sólido. Sólido muestra dos controles deslizantes: Grosor del borde (1 a 20 px, por defecto 1) y Opacidad del borde (0 a 100%, por defecto 100). El color proviene del color de borde del esquema activo.
Radio de las esquinas
Redondeo de esquinas en píxeles (0 a 100), independiente del borde. Úsalo para contenedores tipo tarjeta.
Superposición de fondo
El interruptor Superposición de fondo agrega una capa de color sobre el fondo del grupo. Al activarlo, puedes elegir el Color de superposición (incluida la transparencia mediante el control de opacidad), el Estilo de superposición (Sólido o Degradado que se desvanece a transparente), y para el degradado la Dirección del degradado (Arriba o Abajo). Se usa comúnmente para dar un tinte a un fondo multimedia.
Relleno
Espacio interno en cada lado en píxeles, de 0 a 100 px. El relleno se encuentra dentro del borde, entre este y los hijos.
Texto
Un bloque de texto muestra títulos, párrafos y texto formateado. El editor de texto enriquecido admite negrita, cursiva, subrayado, tachado y texto de color.
Preajuste
El preajuste tipográfico define la familia de fuente, el peso por defecto y la etiqueta HTML semántica (su función en la página):
- Por defecto: hereda el estilo de texto base de la sección.
- Párrafo: estilo de texto de cuerpo.
- Título 1 a Título 6: estilos de encabezado, usando tus fuentes de título y subtítulo.
Tamaño
Un tamaño de fuente personalizado en píxeles (10 a 30 px, por defecto 16). Este es el tamaño real al renderizar el bloque.
Ancho y alineación
- Ajustar: el bloque solo tiene el ancho de su contenido.
- Rellenar: el bloque se expande al 100% del ancho del contenedor.
Alineación (Izquierda, Centro, Derecha) solo aparece cuando el Ancho está en Rellenar, ya que la alineación solo tiene sentido cuando el bloque llena su contenedor.
Altura de línea y espaciado de letras
Altura de línea define el ritmo vertical: Normal (por defecto), Estrecho o Amplio. Espaciado de letras ajusta el espacio entre caracteres con las mismas tres opciones.
Esquema de color
Dentro de un grupo, Usar esquema de color del padre está activado por defecto. Desactívalo para mostrar el selector de Esquema de color. Los preajustes de título usan el color de encabezado del esquema; párrafo y por defecto usan el color de texto de cuerpo. Como sección independiente, el selector aparece solo, sin opción de heredar.
Relleno
Espacio interno en cada lado en píxeles, de 0 a 100 px.
Separador
Una línea separadora que se adapta a su padre. En un diseño vertical (columna) es una línea horizontal; dentro de un grupo horizontal se convierte en una línea vertical.
Ancho
- Ajustar: el contenedor solo tiene el ancho de la línea.
- Rellenar: el contenedor se expande para ocupar el espacio disponible.
Grosor
Grosor de la línea en píxeles (1 a 10 px, por defecto 1). Para un separador horizontal esto es la altura; para uno vertical es el ancho.
Longitud
El alcance de la línea como porcentaje de su contenedor (5 a 100%, por defecto 100). Ponlo por debajo de 100% para crear una línea parcial o con sangría.
Alineación
Posiciona la línea cuando su longitud es menor al 100%: Inicio, Centro (por defecto) o Final. Este control está oculto mientras la longitud sea 100%.
Radio de las esquinas
- Recto: extremos rectangulares.
- Redondeado: extremos en forma de píldora.
Esquema de color
Opcionalmente elige un Esquema de color. El separador usa el color de borde de ese esquema. Si no se establece, hereda el color de la sección o grupo padre.
Relleno
Espacio en cada lado en píxeles. Como bloque el rango es de 0 a 100 px. Cuando el separador se agrega como sección principal, el relleno llega hasta 200 px (por defecto 20) para mayor espacio vertical.
Errores comunes
- Dos grupos en rellenar dentro de un padre horizontal: cada uno ocupa el 50% del espacio, que normalmente es lo que buscas. Para hacer un lado más ancho, pon el Ancho de ese grupo en Personalizado.
- Separador vertical no aparece: un separador solo se vuelve vertical cuando es hijo directo de un grupo con Dirección Horizontal. Revisa la dirección del grupo padre.
- Falta la opción Entre: Entre solo aparece en el eje por el que fluyen los hijos, así que está en Posición para grupos verticales y en Alineación para grupos horizontales.
- Texto con color incorrecto: probablemente está heredando de un grupo padre con otro esquema. Desactiva Usar esquema de color del padre en el bloque de texto y elige el esquema explícitamente.
Para ver dónde se pueden colocar estos componentes, consulta Secciones y bloques.