Editor de Wix Studio: personalizar una cuadrícula de sección
En este artículo
- Agregar celdas a una sección
- Personalizar la cuadrícula de la sección
- Intercambiar y voltear celdas en la cuadrícula
- Aplicar una cuadrícula CSS avanzada
En el Editor de Wix Studio,
las secciones vienen con una cuadrícula integrada que contiene una sola celda (que alberga la sección completa). Divide la sección en más celdas para darle una estructura adaptativa al contenido. Hay varios estilos personalizables para elegir.
Ve a nuestra
Academia de Wix Studio (contenido en inglés) para ver otros webinarios, tutoriales y cursos de Wix Studio.
Agregar celdas a una sección
Agrega celdas a una sección para obtener un diseño estructurado y adaptativo. Mantener los elementos en celdas separadas garantiza que permanezcan en su lugar en todos los tamaños de pantalla. Elige un estilo y coloca los elementos en las celdas. Siempre puedes dividir las celdas o agregar otras nuevas más tarde.
¿Quieres agregar celdas a un contenedor?
Puedes
aplicar una cuadrícula CSS avanzada al contenedor.
Para agregar celdas a una sección:
- Selecciona la sección correspondiente.
- Haz clic en el menú desplegable En blanco en la parte superior de la sección.
- Elige un estilo: Filas, Columnas, Collage, etc.
Consejo: Puedes cambiar el estilo desde el menú desplegable en cualquier momento; esto no moverá los elementos. - Arrastra los elementos a las celdas correspondientes.
¿Se superponen las celdas de la cuadrícula en la versión móvil?
Recomendamos cambiar a un estilo vertical (como Filas) para resolver este problema.
Personalizar la cuadrícula de la sección
Haz que la cuadrícula se vea tal y como quieres. Puedes dividir o fusionar celdas existentes, agregar nuevas y arrastrar las líneas de la cuadrícula para ajustar su tamaño. También puedes agregar espacios para crear un poco de lugar entre las celdas.
Para personalizar la cuadrícula de la sección:
- Selecciona la sección correspondiente.
- Elige cómo quieres personalizar la cuadrícula:
Cambiar el tamaño de la cuadrícula
u horizontalmente 
, para que las filas o las columnas tengan el mismo tamaño. 
Agregar más celdas a la cuadrícula
Dividir una celda
o Dividir verticalmente 
.
Fusionar celdas
Agregar espacios entre celdas
Eliminar una celda
.
Nota:
En la actualidad, no es posible duplicar una celda.
Intercambiar y voltear celdas en la cuadrícula
Reorganiza la cuadrícula de las secciones de forma rápida y eficiente intercambiando las celdas de lugar. Con la función de arrastrar y soltar, puedes alternar la posición de las celdas de forma instantánea entre 2 celdas: de manera inmediata, cada celda ocupa el lugar de la otra en la cuadrícula.
De manera alternativa, puedes voltear toda la cuadrícula horizontal o verticalmente para explorar las diferentes opciones de presentar el contenido de tu cliente.
Para intercambiar celdas:
- Selecciona la sección correspondiente.
- Elige qué hacer a continuación:
Intercambiar dos celdas
en la parte superior de la celda mientras la arrastras a la otra celda. Consejo: Cuando veas la indicación Cambiar contenido, significa que puedes soltar la celda.
Voltear la cuadrícula
Aplicar una cuadrícula CSS avanzada
Cambiar a una
cuadrícula CSS avanzada te brinda un control más preciso del estilo por breakpoint. Puedes elegir el número de filas y columnas que deseas, y establecer su tamaño usando medidas adaptativas (por ejemplo, fr, mín./máx., %).
Para cambiar de una cuadrícula de sección a una cuadrícula CSS:
- Selecciona la sección correspondiente.
- Haz clic en el icono Abrir Inspector profesional
en la parte superior derecha del editor.
- Desplázate hacia abajo hasta Estilo.
- Haz clic en Aplicar junto a Cuadrícula CSS avanzada.
- Haz clic en Aplicar en la ventana emergente ¿Aplicar cuadrícula CSS avanzada?
¿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.