Editor de Wix Studio: trabajar con acoplamiento, márgenes y relleno

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.

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. 

Puedes verificar las coordenadas X e Y de tu elemento para ver su posición exacta en el tamaño actual del lienzo. 

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. 

Al agregar un nuevo elemento en el editor, se acopla automáticamente para garantizar que permanezca en su lugar en todas las pantallas y dispositivos. Sin embargo, siempre puedes desactivar el acoplamiento automático y elegir los puntos de acoplamiento de forma manual.

Haz clic en uno de los temas a continuación para obtener más información.

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: 

Agrega relleno a los contenedores para crear un espacio entre los bordes (superior, inferior o los laterales) y el contenido que tienen dentro. El relleno se puede agregar a todos los tipos de contenedores adaptativos, incluidos los contenedores básicos, las pilas, las flexboxes, los repetidores, las celdas, las secciones y las páginas. 

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).