Editor de Wix Studio: apilar elementos
8 min
En este artículo
- Aplicar una pila
- Cambiar entre la pila horizontal y la pila vertical
- Administrar una pila
- Ajustar el diseño de una pila
- Ajustar el estilo de la pila
Apilar elementos es una forma rápida de organizar tu diseño con un espaciado uniforme, lo que crea un estilo limpio y pulido. Una pila es un contenedor flexbox que "envuelve" a un grupo de elementos, lo que garantiza que permanezcan en orden (con el espaciado que definas) y que nunca se superpongan.
Dicho esto, puedes usar márgenes negativos para hacer que los elementos se superpongan de manera intencional.
¿Estás tratando con elementos superpuestos?
Echa un vistazo a nuestro video de solución de problemas (contenido en inglés) para obtener más información sobre qué verificar y cómo resolver este problema.
Aplicar una pila
Cuando los elementos se colocan uno al lado del otro (en el mismo elemento principal), aparece la opción para apilarlos. Según el orden en el que coloques los elementos, puedes apilarlos horizontal o verticalmente.
Información útil:
- Si los elementos se colocan en una forma cuadrada (por ejemplo, elementos de 2 x 2), las opciones de apilado vertical y horizontal están disponibles para que elijas.
- Puedes usar el Verificador adaptativo para detectar oportunidades de apilar elementos adyacentes, asegurándote de que nunca se superpongan de forma accidental.
Para aplicar una pila:
- Ve al editor.
- Alinea los elementos que deseas apilar.
- Selecciona uno de los elementos.
- Pasa el cursor sobre el icono Pila
(Horizontal) /
(Vertical) para obtener una vista previa del aspecto de la pila.
Nota: Los iconos de pila disponibles (horizontal o vertical) dependen de cómo hayas alineado los elementos. - Haz clic en el icono Pila para aplicarla.
- (Opcional) Arrastra la línea entre los elementos para establecer los márgenes.
¿Sabías lo siguiente?
También puedes crear márgenes negativos para que los elementos se superpongan intencionalmente.
Cambiar entre la pila horizontal y la pila vertical
¿No te gusta el estilo de una pila? Siempre puedes cambiarlo de horizontal a vertical (y viceversa) para alinear los elementos como quieras. Esto reorganiza automáticamente los elementos para que estén en el orden correcto.
Para cambiar el estilo de una pila:
- Selecciona la pila en el editor.
- Haz clic en el menú desplegable.
- Selecciona Horizontal o Vertical.
Administrar una pila
Puedes personalizar la pila para que coincida con el nuevo contenido y los nuevos requisitos. Agrega más elementos a la pila, muévelos con un solo clic y separa los elementos que ya no necesitas.
Para administrar una pila:
- Ve al editor.
- Selecciona la pila correspondiente.
- Elige qué hacer a continuación:
Agregar un elemento a la pila
Separar un elemento de la pila
. Luego, haz clic en Desvincular de la pila.
Reordenar los elementos de la pila
/Mover hacia abajo 
o en Mover a la izquierda 
/Mover a la derecha 
.
Desapilar elementos
Ajustar el diseño de una pila
No es necesario que la pila sea transparente; puedes diseñarla para que el contenido se destaque en la página. Agrega un color de fondo, un borde y una sombra. También puedes hacer que las esquinas de la pila sean más redondas o angulosas.
Para diseñar una pila:
- Ve al editor.
- Selecciona la pila correspondiente.
- Haz clic en el icono Abrir Inspector profesional
en la parte superior derecha del editor.
- Usa las opciones disponibles en Diseño para personalizar la pila:
- Establece el color del fondo. También puedes ajustar la opacidad y agregar un efecto cristal.
- Agrega un borde para enmarcar la pila.
- Elige un radio para las esquinas.
- Habilita el sombreado y administra ajustes como el ángulo, la distancia, el tamaño, etc.
Ajustar el estilo de la pila
Ajusta el estilo de la pila para asegurarte de que cada elemento tenga un espaciado, una alineación y un relleno de manera que se adapte a tu visión creativa o a las necesidades del cliente.
Para ajustar el estilo de la pila:
- Ve al editor.
- Selecciona la pila correspondiente.
- Haz clic en el icono Abrir Inspector profesional en la parte superior derecha del editor.
- Desplázate hacia abajo hasta Estilo.
- Usa las opciones disponibles para ajustar el estilo de la pila:
- Cambia el estilo de la pila de Horizontal a Vertical o viceversa.
- (Solo horizontal) Cambia la dirección de Izquierda a derecha a Derecha a izquierda o viceversa.
- Ingresa un valor en Espaciado de elementos para crear márgenes iguales entre los elementos de la pila (es decir, los ítems).
- Elige una alineación para los elementos de la pila: Izquierda, Derecha, Centro o Justificar.
- Agrega relleno a los lados.
¿Sabías lo siguiente?
Puedes ajustar el relleno y el espaciado directamente en el lienzo. Arrastra la línea entre los elementos o haz doble clic en la línea si prefieres ingresar un valor preciso. Incluso puedes cambiar la unidad de tamaño si es necesario.