Editor de Wix Studio: posicionar los elementos
9 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.
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.
¿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 y manual
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.
Acoplamiento automático en el editor
Ajustar el acoplamiento manualmente
para que el elemento esté siempre en el centro.
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:
Para crear o editar un margen:
- Selecciona el elemento correspondiente.
- Haz clic en el icono Abrir Inspector profesional
en la parte superior derecha del editor.
- Desplázate hacia abajo hasta Posición.
- Haz clic en un margen (por ejemplo, arriba, a la izquierda) en Acoplamiento, márgenes, relleno.
- (Opcional) Haz clic en el icono Editar individualmente
para editar solo el lado que seleccionaste. - Ingresa un valor para el margen.
Consejo: haz clic en la medida (por ejemplo, px*, %) para cambiarla.
Unidades del margen:
Los márgenes se pueden establecer en px*, 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 redimensiona la pantalla. Mira la diferencia en el comportamiento de las unidades arrastrando el lienzo para cambiar su tamaño.
Agregar relleno alrededor de un elemento
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.
Para agregar relleno alrededor de un elemento:
- Selecciona el elemento correspondiente.
- Haz clic en el icono Abrir Inspector profesional en la parte superior derecha del editor.
- Haz clic en el cuadro Relleno en Acoplamiento, márgenes y relleno.
- Haz clic en el lado que deseas ajustar.
- Ingresa un valor en %, px, px*, vh o vw.
Consejo: Haz clic en la unidad de tamaño actual para seleccionar una diferente. - (Opcional) Haz clic en el icono Aplicar a todos los lados
.
Unidades de relleno:
El relleno se puede establecer en px*, 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 redimensiona 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.
Anclar arriba
Agregar celdas para organizar el estilo
Aplicar una pila
Si actualmente ves superposiciones no deseadas entre los elementos, mira este videotutorial para solucionar el problema (contenido en inglés).
¿Te ha sido útil?
|