Editor de Wix Studio: personalizar una cuadrícula de sección

7 min de lectura
En el Editor de Wix Studio, las secciones vienen con una cuadrícula integrada, que contiene una sola celda (que alberga toda la sección). Divide la sección en más celdas para darle una estructura adaptativa al contenido. Tienes 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.
En este artículo, aprende a hacer lo siguiente:

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 en el contenedor.

Para agregar celdas a una sección:

  1. Selecciona la sección correspondiente.
  2. Haz clic en el menú desplegable En blanco en la parte superior de la sección. 
Captura de pantalla de la barra de herramientas que se abre al seleccionar una sección, con el menú desplegable de estilos disponibles
  1. Elige un estilo: Filas, Columnas, Collage, etc.
    Consejo: Puedes cambiar el estilo desde el menú desplegable en cualquier momento; esta acción no moverá los elementos.
  2. Arrastra los elementos a las celdas correspondientes.
Captura de pantalla de una sección en blanco en el Editor de Wix Studio, justo después de aplicar el estilo Collage, que resalta las nuevas celdas
¿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:

  1. Selecciona la sección correspondiente.
  2. Elige cómo quieres personalizar la cuadrícula:
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:

  1. Selecciona la sección correspondiente.
  2. Elige qué hacer a continuación:

Aplicar una cuadrícula CSS avanzada

Aplicar una cuadrícula CSS avanzada te da 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 mediante medidas adaptativas (por ejemplo, fr, mín./máx., %).

Para cambiar de una cuadrícula de sección a una cuadrícula CSS:

  1. Selecciona la sección correspondiente.
  2. Haz clic en el icono Abrir Inspector profesional  en la parte superior derecha del editor.


  3. Desplázate hacia abajo hasta Estilo.
  4. Haz clic en Aplicar junto a Cuadrícula CSS avanzada.
  5. Haz clic en Aplicar en la ventana emergente ¿Aplicar cuadrícula CSS avanzada?
Captura de pantalla que muestra la opción para cambiar a la cuadrícula avanzada en el panel Inspector profesional

¿Te ha sido útil?

|