Editor X: trabajar con acoplamientos y márgenes
5 min de lectura
El Editor X está en proceso de transición hacia Wix Studio, nuestra nueva plataforma para agencias y freelancers.Más información sobre Wix Studio
En el mundo en constante cambio de los dispositivos, es importante controlar la posición de los elementos para que se vean como quieres en diferentes tamaños de pantalla. Puedes hacer esto con el acoplamiento.
El acoplamiento determina la posición vertical y horizontal de los elementos dentro de la sección de la página, del contenedor o de la celda de la cuadrícula cuando se cambia el tamaño de la pantalla.
En este artículo, aprende todo sobre cómo acoplar tus elementos:
¿Quieres saber más?
Consulta nuestra lección sobre acoplamiento y márgenes en la academia de Editor X (contenido en inglés).
Acoplamiento automático en el Editor X
Cuando agregas un elemento a una sección de la página, un contenedor o una celda de la cuadrícula, se acopla automáticamente a la esquina superior o inferior, lo que esté más cerca.
La posición de acoplamiento se indica mediante líneas de puntos en el elemento. En el siguiente ejemplo, el arte vectorial está acoplado a los lados superior e izquierdo del contenedor:
Puedes ver la posición exacta del elemento en Posición en el panel del Inspector profesional:
Ajustar manualmente el acoplamiento del elemento
Puedes anular el acoplamiento automático y configurar manualmente la posición desde el Inspector de propiedades.
Acopla un elemento a cualquiera de los lados; en la parte superior, inferior, izquierda, derecha o incluso en el centro de la sección, contenedor o celda de la cuadrícula en el que se encuentran.
Para acoplar un elemento manualmente:
- Haz clic en el elemento correspondiente.
- Selecciona el icono del Inspector profesional
en la parte superior del Editor X. - Desplázate hacia abajo hasta Posición.
- Haz clic en los puntos de acoplamiento correspondientes (superior, inferior, derecha o izquierda). También puedes hacer clic en el icono Alinear al centro
.
Consejo:
En general es buena idea acoplar tus elementos a la parte superior del contenedor, sección o celda de la cuadrícula en el que se encuentran. Esto garantiza que haya siempre un espacio definido entre el elemento y el contenedor/sección cuando se agrega más contenido a tu página.
Usar márgenes al posicionar elementos
Utiliza márgenes para mantener una distancia determinada entre el elemento y los bordes de la sección, contenedor o celda de la cuadrícula al que está acoplado.
Unidades de 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 cambia el tamaño de la pantalla. Observa la diferencia en el comportamiento de las unidades arrastrando el lienzo para cambiar su tamaño.
Para crear un margen:
- Haz clic en el elemento correspondiente.
- Selecciona el icono del Inspector profesional en la parte superior del Editor X.
- Desplázate hacia abajo hasta Posición.
- En Acoplamiento, márgenes, relleno, selecciona un lado (superior, inferior, izquierdo o derecho).
- Ingresa un valor para el margen.
Consejo: Haz clic en la medida (por ejemplo, px, %) para cambiarla. - (Opcional) Haz clic en el icono Editar todos los lados
para establecer el mismo margen en todos los lados.
Consejos:
- Puedes crear márgenes en los lados de un elemento que no están acoplados. Esto actúa como un amortiguador entre el elemento y el contenedor, y evita la superposición.
- Muchas veces recomendamos usar el porcentaje (%) para posicionar los elementos de manera uniforme en cada tamaño de pantalla.
Evitar que los elementos se superpongan
Al posicionar elementos, es importante asegurarse de que no se superpongan en los breakpoints más pequeños. Para evitar que esto suceda, consulta nuestros consejos a continuación.
Alinear elementos
Con las opciones de alineación del panel Inspector, puedes centrar elementos y alinearlos a la izquierda, al centro o a la derecha.
Acoplamiento en la parte superior
En general es buena idea acoplar tus elementos a la parte superior del contenedor, sección o celda de la cuadrícula en el que se encuentran. Esto garantiza que haya siempre un espacio definido entre el elemento y el contenedor/sección cuando se agrega más contenido a tu página.
Aplicar una cuadrícula
Para diseños más complejos, aplica una cuadrícula CSS a tu sección / contenedor y acopla los elementos a las líneas de la cuadrícula. Coloca elementos dentro de sus propias celdas de cuadrícula y acóplalos a una línea de cuadrícula para que estén posicionados perfectamente en todos los tamaños de pantalla.
Aplicar una pila
Si tienes un grupo de elementos que están posicionados en orden vertical, la pila puede garantizar que nunca se superpongan. El apilamiento coloca los elementos dentro de un contenedor flexible que se ajusta automáticamente a diferentes tamaños de pantalla, para que puedas mantener un diseño adaptativo.
Escanea tu página en búsqueda de elementos superpuestos:
Usa el Verificador de sitios, una herramienta gratuita ofrecida por el Editor X, para buscar este inconveniente automáticamente en todas y cada una de las páginas.
¿Te ha sido útil?
|