Editor de Wix Studio: trabajar con una cuadrícula CSS avanzada

8 min de lectura
En el Editor de Wix Studio, puedes usar una cuadrícula CSS avanzada para organizar el estilo de los elementos y las secciones. 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., %).
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 todo sobre cómo trabajar con una cuadrícula CSS:

Cambiar de una cuadrícula de sección a una cuadrícula CSS

Las secciones del editor vienen con la opción de establecer una cuadrícula de sección. Esta es una versión fácil de usar de la cuadrícula avanzada, basada en la misma lógica CSS. Cambiar a una cuadrícula CSS avanzada te da un control más preciso del diseño por breakpoint.
Nota:
Una vez que realizas el cambio, no es posible volver a una cuadrícula de sección. Sin embargo, si acabas de realizar la acción, puedes usar el botón Deshacer  en la parte superior derecha del editor.

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

  1. Selecciona la sección correspondiente en el editor.
  2. Haz clic en la flecha 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
¿Cuál es el siguiente paso?
Personaliza las filas, las columnas y el espaciado desde el panel Inspector profesional. También puedes arrastrar las líneas de cuadrícula en el lienzo para moverlas.  

Aplicar una cuadrícula CSS en otros elementos

Puedes aplicar cuadrículas CSS en contenedores, ventanas interactivas, flexboxes y repetidores. En los repetidores en concreto, una vez que aplicas una cuadrícula a un elemento, el resto se actualiza automáticamente.

Para aplicar una cuadrícula CSS:

  1. Selecciona el elemento correspondiente en el editor.
  2. Haz clic en el icono Más acciones .
  3. Haz clic en Aplicar cuadrícula CSS avanzada.
  4. Elige un estilo en el menú desplegable de 1x1.
    Consejo: Selecciona Otro si deseas establecer tu propio número de filas y columnas. 
Captura de pantalla que muestra el menú desplegable en el que puedes hacer clic para elegir otro estilo
¿Cuál es el siguiente paso?
Personaliza las filas, las columnas y el espaciado desde el panel Inspector profesional. También puedes arrastrar las líneas de cuadrícula en el lienzo para moverlas.  

Personalizar una cuadrícula CSS

Personaliza la cuadrícula para conseguir el estilo exacto que deseas. Puedes cambiar el número de filas y columnas, ajustar su tamaño y los espacios entre ellas.

Para personalizar una cuadrícula CSS:

  1. Selecciona el elemento o la sección correspondiente.
  2. Elige cómo quieres personalizar la cuadrícula: 
Trabajar con breakpoints:
El diseño solo se aplica al breakpoint en el que estás trabajando. Debes adaptar la cuadrícula a cada breakpoint para garantizar que la composición de los elementos sea óptima. En el ejemplo a continuación, hemos establecido un diseño distinto para cada breakpoint (3 columnas para la versión de escritorio frente a 3 filas para la versión para tabletas).


Posicionar elementos en una cuadrícula

Al agregar elementos a la cuadrícula, hay varias herramientas que te pueden ayudar a establecer su ubicación con mayor precisión.

Acoplamiento de elementos

Acoplar elementos a las cuadrículas garantiza que estén posicionadas exactamente como deseas. En el Editor de Wix Studio, todos los elementos se acoplan automáticamente, pero puedes ajustar el acoplamiento manualmente y agregar márgenes. 
GIF que muestra cómo cambiar los puntos de acoplamiento de un elemento en una celda de cuadrícula

Mover elementos entre las celdas de la cuadrícula

En la sección Posición del Inspector profesional, puedes seleccionar un elemento y ver la celda de la cuadrícula en la que se encuentra. Haz clic en cualquier celda de la cuadrícula para mover el elemento allí, sin tener que usar la función de arrastrar y soltar. 
También puedes ingresar los números específicos de columna y fila, lo cual resulta útil cuando necesitas colocar un elemento sobre varias celdas de la cuadrícula. 
GIF que muestra cómo hacer clic en otras celdas en el Inspector profesional para mover rápidamente elementos entre celdas

Tabla de unidades de la cuadrícula

Usa todo el rango de unidades de CSS para crear tu cuadrícula. Puedes establecer el tamaño de las columnas y filas mediante porcentajes, fracciones o píxeles. De manera alternativa, establece el tamaño mínimo y máximo de las columnas y filas, o usa cálculos para crear la cuadrícula que necesitas. 

¿Te ha sido útil?

|