Editor de Wix Studio: posicionar los elementos

7 min de lectura
En un mundo donde los dispositivos están en constante cambio y evolución, es fundamental controlar la posición de los elementos en los sitios que creas, para que se vean tal y como tú quieres en los distintos tamaños de pantalla. En el Editor de Wix Studio, los elementos se acoplan automáticamente para garantizar que eso suceda. 
Esto te otorga la libertad de mover los elementos, sin tener que preocuparte por el posicionamiento en los diferentes breakpoints. Sin embargo, siempre puedes establecer la posición, el acoplamiento y los márgenes desde el panel Inspector profesional.
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, obtén más información sobre lo siguiente:

Posicionar los elementos en el lienzo

Con la función de arrastrar y soltar, puedes establecer la posición de cualquier elemento directamente en el lienzo, de manera independiente para cada breakpoint. Esto te permite asegurarte de que el elemento se vea realmente en su lugar en cada tipo de pantalla. 
Siempre que el elemento permanezca dentro del mismo elemento principal (por ejemplo, sección, celda), puedes moverlo y esto no afecta a otros breakpoints. Si mueves un elemento a un elemento primario diferente (re-parentalidad), este cambio se aplica a todos los breakpoints. 
Una captura de pantalla de un elemento que se arrastra a otra celda principal y una notificación de que afecta a todos los breakpoints

Coordenadas X e Y en el Inspector profesional

Puedes verificar las coordenadas X e Y de tu elemento para ver su posición exacta en el tamaño actual del lienzo. 
  • X: el plano horizontal, desde el borde izquierdo hasta el borde derecho del elemento principal (por ejemplo, sección, contenedor, pila).
  • Y: el plano vertical, desde la parte superior hasta la parte inferior del elemento principal.
En el siguiente ejemplo, puedes ver que el valor px* se vuelve negativo a medida que movemos el elemento de texto fuera de su elemento principal: la celda. 
GIF que muestra un elemento de texto movido fuera de su celda principal, creando un valor X negativo en el Inspector profesional
¿Qué es exactamente px*?
El valor px* es una unidad de medida en el Editor de Wix Studio, que muestra los "píxeles en el lienzo". El valor px* que ves es el equivalente en píxeles, correspondiente al tamaño actual de tu lienzo. Cambia a un breakpoint diferente para ver cómo el valor de px* cambia automáticamente. 

Acoplamiento automático

Cuando agregas un nuevo elemento, se acopla automáticamente a: 
  • La parte superior del elemento principal (por ejemplo, sección, contenedor, pila). 
  • El borde izquierdo o derecho del elemento principal, el que esté más cerca. 
El acoplamiento automático garantiza que el elemento permanezca en su lugar en todas las pantallas y dispositivos. Puedes mover los elementos libremente y los puntos de acoplamiento se ajustan automáticamente, sin necesidad de "volver a acoplar". 
La posición de acoplamiento se indica mediante líneas de puntos en el elemento y los puntos de acoplamiento en el panel Inspector profesional (en la pestaña Posición). En el siguiente ejemplo, el elemento de texto se acopla automáticamente a los lados superior y derecho de la celda. 
Captura de pantalla de un elemento de texto acoplado y cómo se ve en el panel Inspector profesional
Consejo:
La casilla de verificación Acoplamiento automático está seleccionada por defecto. Siempre puedes hacer clic en la casilla para anular el acoplamiento automático y ajustarlo manualmente. 

Ajustar manualmente el acoplamiento del elemento

Puedes anular el acoplamiento automático y configurarlo manualmente desde el Inspector profesional. Esto resulta útil, por ejemplo, cuando deseas acoplar un elemento en la parte inferior en lugar de a la parte superior. 
Acopla un elemento a cualquier lado; hacia la parte superior, inferior, izquierda, derecha o incluso hacia el centro de la sección, contenedor o celda en la que se encuentra. 

Para acoplar manualmente un elemento:

  1. Selecciona el elemento correspondiente.
  2. Haz clic en el icono Abrir Inspector profesional  en la parte superior derecha del editor.
Captura de pantalla de cómo abrir el panel Inspector profesional en el Editor de Wix Studio.
  1. Desplázate hacia abajo hasta Posición.
  2. Haz clic en los puntos de acoplamiento correspondientes (superior, inferior, derecha o izquierda). De manera alternativa, haz clic en el icono Alinear al centro para que el elemento esté siempre centrado.
Nota:
Esto deselecciona automáticamente la casilla de verificación Acoplamiento automático.
Hacer clic en los puntos de acoplamiento superior y derecho en el Inspector profesional para acoplar un elemento de texto y luego hacer clic en un icono para centrarlo.

Usar márgenes al acoplar los elementos

Cuando un elemento está acoplado, los márgenes ayudan a mantener una distancia establecida entre el elemento y los bordes de su elemento principal. También puedes agregar márgenes a los lados que no están acoplados. Esto actúa como un amortiguador, evitando superposiciones con otros elementos.
En el siguiente ejemplo, el elemento de texto está acoplado a los lados superior y derecho de la celda. Al pasar el cursor sobre los márgenes en el Inspector profesional, estos se resaltan en el lienzo: 
GIF que muestra un cursor sobre los márgenes superior y derecho en el Inspector profesional, y la forma en que se resaltan en el lienzo

Para crear o editar un margen:

  1. Selecciona el elemento correspondiente.
  2. Haz clic en el icono Abrir Inspector profesional  en la parte superior derecha del editor.
Captura de pantalla de cómo abrir el panel Inspector profesional en el Editor de Wix Studio.
  1. Desplázate hacia abajo hasta Posición.
  2. Haz clic en un margen (por ejemplo, arriba, a la izquierda) en Acoplamiento, márgenes, relleno.
  3. (Opcional) Haz clic en el icono Editar individualmente  para editar solo el lado que seleccionaste.
  4. Ingresa un valor para el margen.
    Consejo: Haz clic en la medida (por ejemplo, px, %) para cambiarla. Recomendamos usar el porcentaje (%) para posicionar los elementos de manera uniforme en todos los tamaños de pantalla.
Captura de pantalla del cuadro Posición, donde puedes crear márgenes alrededor de un elemento
Unidades del margen:
Los márgenes se pueden establecer en píxeles (px), porcentaje (%), altura de la ventana de visualización (vh) y ancho de la ventana de visualización (vw). Cada unidad tiene un resultado diferente cuando se cambia el tamaño de la pantalla. Mira la diferencia en el comportamiento de las unidades arrastrando el lienzo para cambiar su tamaño.

Evitar que los elementos se superpongan

Al posicionar elementos, es importante asegurarte de que no se superpongan en los breakpoints más pequeños. Para evitar que esto suceda, consulta nuestros consejos a continuación. 
Si actualmente ves superposiciones no deseadas entre los elementos, mira este videotutorial para solucionar el problema (contenido en inglés). 

¿Te ha sido útil?

|