Descripción general
Tres componentes de diseño reutilizables aparecen en casi todas las secciones del constructor: Grupo, Texto y Divisor. Comprenderlos te permite construir cualquier diseño que necesites sin escribir CSS.
Grupo
Un Grupo es un contenedor de diseño flexible. Agrega bloques secundarios dentro de él (texto, botones, imágenes, entradas de boletín e incluso grupos anidados) y controla exactamente cómo están organizados.
Dirección
- Vertical: los elementos secundarios se apilan de arriba a abajo (el predeterminado para la mayoría de las secciones).
- Horizontal: los elementos secundarios se sitúan uno al lado del otro en una fila.
Habilita Apilar en móvil para cambiar automáticamente un grupo horizontal a una pila vertical en pantallas pequeñas.
Alineación y posición
Estas dos configuraciones controlan cómo se distribuyen los elementos secundarios a lo largo de los ejes principal y cruzado. Su significado cambia según la dirección del grupo:
- Dirección vertical: Posición controla la distribución vertical (arriba, centro, abajo o entre). Alineación controla la ubicación horizontal (izquierda, centro, derecha o entre).
- Dirección horizontal: Alineación controla la distribución horizontal (izquierda, centro, derecha o entre). Posición controla la ubicación vertical (arriba, centro, abajo o entre).
Entre distribuye los elementos secundarios uniformemente con el mismo espacio entre ellos, lo que es útil para estirar elementos a lo largo de una fila de ancho completo.
Espacio
El espaciado en píxeles entre elementos secundarios (0–100 px, predeterminado 20 px).
Ancho
- Rellenar: se expande para ocupar todo el espacio disponible en el padre. Úsalo para grupos que deben compartir espacio equitativamente dentro de un padre horizontal.
- Ajustar: se reduce al tamaño natural de su contenido. Úsalo para grupos que deben ser tan anchos como lo que hay dentro de ellos.
- Personalizado: establece un porcentaje específico (0–100%). El grupo mantendrá ese tamaño sin crecer ni encogerse.
Esquema de colores e herencia
De forma predeterminada, un grupo hereda el esquema de colores de su sección padre. Desactiva Heredar esquema para asignar un esquema de colores explícito (1–9) de tu configuración global de colores. Esto te permite crear zonas de color de fondo o texto distintas dentro de una sección sin agregar una nueva sección.
Borde
Agrega un borde alrededor del grupo. Opciones: Ninguno o Sólido. Cuando se selecciona sólido, establece el grosor del borde (1–20 px); el color proviene del color de borde del esquema activo.
Radio
Redondeado de esquinas en píxeles (0–100). Úsalo para crear contenedores de grupo con apariencia de tarjeta.
Opacidad
Opacidad general del grupo (0–100%, predeterminado 100%).
Overlay
Agrega una capa de color dentro del grupo. Cuando está habilitado, establece el Color del overlay (incluida la transparencia usando el control deslizante de opacidad del selector de color), el Estilo (relleno plano sólido o un degradado que se desvanece a transparente) y para el degradado la Dirección (arriba o abajo). Esto se usa comúnmente para crear una capa con tinte semitransparente sobre un fondo de medios en una sección hero.
Relleno
Espaciado en cada lado en píxeles (superior, izquierdo, derecho e inferior), cada uno de 0–100 px. El relleno se aplica dentro del borde del grupo, creando espacio de respiración entre el borde y los elementos secundarios del grupo.
Texto
Un bloque de texto muestra contenido de texto enriquecido (encabezados, párrafos y texto formateado) dentro de una sección o grupo. El editor admite negrita, cursiva, subrayado, tachado y texto en color.
Preset
El preset de tipografía controla el tamaño de fuente, el peso de fuente y el rol semántico del texto. Presets disponibles:
- Predeterminado: hereda el estilo de texto base de la sección.
- Párrafo: estilo de texto del cuerpo.
- Encabezado 1 hasta Encabezado 6: tamaños decrecientes del más grande al más pequeño, usando la fuente de encabezado definida en tu configuración de tipografía.
Tamaño
Un tamaño de fuente personalizado en píxeles (10–30 px) que anula el tamaño del preset. Déjalo en el predeterminado para que el preset determine el tamaño.
Ancho
- Ajustar: el bloque de texto es tan ancho como su contenido.
- Rellenar: el bloque de texto se expande al 100% del ancho del contenedor disponible.
Alineación
Alineación horizontal del texto: Izquierda, Centro o Derecha.
Altura de línea
Controla el ritmo vertical: Compacto (líneas compactas), Normal (el predeterminado) o Holgado (líneas espaciosas).
Espaciado entre letras
Controla el espaciado de caracteres: Compacto (caracteres más juntos), Normal (el predeterminado) o Holgado (caracteres más separados).
Esquema de colores e herencia
De forma predeterminada, un bloque de texto hereda su color de la sección padre. Desactiva Heredar esquema para usar un esquema de colores específico. Los presets de encabezado usan el color de encabezado del esquema; los presets de párrafo y predeterminado usan el color de texto del cuerpo del esquema.
Relleno
Espaciado interior en cada lado en píxeles (superior, izquierdo, derecho e inferior), cada uno de 0–100 px.
Divisor
Una línea separadora visual. En un diseño vertical aparece como una línea horizontal. Dentro de un grupo horizontal aparece como una línea vertical. El divisor se adapta automáticamente a la dirección de su contenedor padre.
Grosor
El grosor de la línea en píxeles (1–10 px, predeterminado 1 px).
Longitud
El tramo de la línea como porcentaje de su contenedor (5–100%, predeterminado 100%). Establécelo en menos del 100% y combínalo con la alineación para crear una línea decorativa centrada o sangrada.
Estilo de extremidades
- Recto: extremidades rectangulares.
- Redondeado: extremidades en forma de píldora.
Alineación
Cómo se posiciona la línea cuando su longitud es menor al 100%: Inicio, Centro (predeterminado) o Fin.
Ancho
- Ajustar: el contenedor del divisor es tan ancho como la línea en sí.
- Rellenar: el contenedor del divisor se expande para llenar el espacio disponible en su padre.
Esquema de colores
Opcionalmente establece un esquema de colores (1–9). El divisor usa el color de borde del esquema seleccionado. Si no se establece ningún esquema, hereda el color de la sección o grupo padre.
Relleno
Espaciado en cada lado en píxeles. Cuando el divisor se usa como sección de nivel superior, los valores de relleno llegan hasta 200 px para mayor espacio de respiración vertical.
Problemas comunes
- Dos grupos de relleno dentro de un padre horizontal: cada uno tomará el 50% del espacio disponible, lo cual suele ser lo que quieres. Si necesitas un lado más ancho que el otro, usa el ancho Personalizado en uno de ellos.
- El divisor vertical no aparece: un divisor solo se vuelve vertical cuando es hijo directo de un grupo configurado en dirección Horizontal. Asegúrate de que la dirección del grupo padre esté configurada como horizontal.
- El texto muestra un color inesperado: si un bloque de texto aparece con el color equivocado, probablemente está heredando de un grupo padre que tiene un esquema de colores diferente. Desactiva Heredar esquema en el bloque de texto y asigna el esquema correcto explícitamente.