Editor de Wix Studio: solucionar problemas de diferencias entre el editor y el sitio online
5 min
En este artículo
- Hacer coincidir los tamaños del breakpoint y de la ventana gráfica
- Alinear unidades de margen
- Alinear comportamientos adaptativos
- Comprobar la visibilidad de los elementos
Al ver la versión publicada de un sitio del Editor de Wix Studio, es posible que notes que se ve diferente que en el editor. Estas diferencias suelen ser mínimas, pero pueden hacer que los elementos se vean desalineados o cortados.
Por lo general, estas diferencias se deben a algunos de los ajustes del elemento (tamaño, posición y comportamiento) en las ventanas gráficas. Usa las sugerencias de este artículo para encontrar posibles soluciones y mantener la coherencia en todos los tamaños de pantalla.
¿Has editado el sitio recientemente?
Te recomendamos verificar que hayas publicado todos los cambios y que estés viendo la última versión del sitio. También puedes usar las herramientas del navegador para verificar diferentes ventanas gráficas desde un solo dispositivo.
Hacer coincidir los tamaños del breakpoint y de la ventana gráfica
Si el sitio online se ve diferente a lo que ves en el editor, puede deberse a los breakpoints y al tamaño de edición.
Los breakpoints son rangos de tamaño de pantalla que usas para diseñar un sitio para diferentes dispositivos (es decir, ventanas gráficas). Puedes establecer un tamaño de edición específico dentro de este rango; por ejemplo, en un breakpoint de 320 a 750px, puedes establecer el tamaño de edición en 500px.
Las ventanas gráficas que quedan fuera de los rangos definidos no están optimizadas y pueden tener problemas de alineación y de estilo. Si notas un problema con una ventana gráfica específica, te recomendamos configurar el tamaño de edición para que coincida y realizar los ajustes necesarios.
Para establecer el tamaño de edición:
- Ve a la página y al breakpoint correspondientes en el editor.
- Haz clic en el tamaño de edición actual en la parte superior.
- Ingresa el nuevo valor junto a Tamaño de edición.
- Haz clic en Aplicar.
- (Opcional) Ajusta el sitio para que se vea tal y como quieres.
¿Estás experimentando otros problemas en los distintos breakpoints?
Usa nuestra guía para solucionar problemas de elementos no alineados, tamaño del texto y más.
Alinear unidades de margen
El uso de diferentes unidades de margen en elementos relacionados (elementos que comparten una sección o un contenedor principal) puede hacer que el contenido se desalinee o se distorsione. Recomendamos usar las mismas unidades de margen (%, px, px*, etc.) para todos los elementos relacionados en un solo contenedor o sección.
Para cambiar las unidades de margen de un elemento:
- 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 el menú desplegable junto a Márgenes.
- Selecciona la unidad correspondiente.
Alinear comportamientos adaptativos
Los elementos principales y secundarios cuyos comportamientos adaptativos son contradictorios pueden causar problemas con el contenido del sitio online.
Imaginemos un botón adjunto a un contenedor. El comportamiento adaptativo del botón es Fijo, y el contenedor está configurado en Escalar proporcionalmente. Como el botón es fijo, no cambia de tamaño con el contenedor principal, lo que puede generar espacios vacíos, elementos superpuestos y elementos cortados en el sitio online. Esto también puede suceder cuando uno de los elementos tiene el comportamiento adaptativo Mixto.
Para resolver este problema, sugerimos alinear los comportamientos adaptativos de los elementos.
Para cambiar el comportamiento adaptativo de un elemento:
- Selecciona el breakpoint correspondiente.
- Selecciona el elemento.
- Haz clic en el icono Abrir Inspector profesional en la parte superior derecha del editor.
- Selecciona una opción del menú desplegable Comportamiento adaptativo que se alinee con el elemento principal o secundario.
Nota:
Estas diferencias también pueden afectar a la altura de los elementos, lo que genera espacios vacíos no deseados en el sitio. Más información sobre cómo solucionar problemas con los espacios vacíos.
Comprobar la visibilidad de los elementos
Es posible que notes que puedes ver un elemento en algunos tamaños de pantalla, pero no en otros. Por lo general, esto se debe a que el elemento se ha ocultado de ciertos breakpoints. Puedes usar el panel Capas para ubicar el elemento y mostrarlo en las ventanas gráficas que desees.
Para verificar la visibilidad de un elemento:
- Ve al editor y abre la página correspondiente.
- Selecciona un breakpoint en la parte superior del editor.
- Haz clic en Capas
en el lado izquierdo. - Localiza el elemento oculto en la lista.
- (Opcional) Haz clic en el icono Mostrar
.
Nota:
Los cambios, como eliminar un elemento o moverlo a una sección o a un contenedor diferente, se aplican a todos los breakpoints, sin importar en cuál estés trabajando. Si solo deseas mostrar un elemento en ciertos breakpoints, puedes ocultarlo a través del menú de opciones de clic derecho.