Centro de Ayuda Wix
    Inicio
  1. Wix Studio, Partners y Enterprise
  2. Wix Studio
  3. Usar el Editor de Wix Studio
  4. Usar las herramientas del Editor de Wix Studio
    5. Editor de Wix Studio: administrar breakpoints

Editor de Wix Studio: administrar breakpoints

4 min de lectura
El Editor de Wix Studio te permite crear sitios totalmente adaptativos que se adaptan a los diferentes breakpoints. Los breakpoints son los puntos en los que se ajusta el diseño, para que los visitantes siempre vean la mejor versión posible del sitio de tu cliente, desde cualquier dispositivo. 
Define los breakpoints correspondientes para cada página y sección global, y personaliza el diseño en consecuencia.
En este artículo, aprenderás a hacer lo siguiente:
¿Quieres saber más?
Más información sobre cómo diseñar en distintos breakpoints.

Ver los breakpoints del sitio

De forma predeterminada, el Editor de Wix Studio incluye los breakpoints más comunes según el tráfico de usuarios (móvil, tableta y escritorio). Nuestros breakpoints destacados cubren una amplia gama de tamaños de pantalla, pero puedes definirlos y personalizarlos según sea necesario. 
Puedes ver 3 breakpoints predeterminados en la parte superior del editor. Haz clic en los breakpoints para ingresar a la vista y comenzar a personalizar la página o la sección global.
Captura de pantalla recortada de la barra superior del Editor de Wix Studio. Los iconos de breakpoints están resaltados.
También puedes pasar de un breakpoint a otro arrastrando las manillas en los lados izquierdo y derecho del lienzo:
Captura de pantalla recortada del lienzo del editor. Las manillas para cambiar el tamaño del lienzo están resaltadas y ampliadas.
Consejo:
Navega rápidamente hasta el valor máximo de un breakpoint específico haciendo doble clic en las manillas. 

Agregar un nuevo breakpoint

Es posible que desees diseñar una página para un tamaño específico que no esté incluido en los breakpoints predeterminados. Puedes agregar un breakpoint con un tamaño personalizado desde el panel. 

Para agregar un nuevo breakpoint:

  1. Selecciona la página o la sección global en la que estás trabajando.
  2. Haz clic en el botón Personalizar tus breakpoints junto a los breakpoints en la barra superior del editor.
  3. Haz clic en Agregar un breakpoint.
  4. Ingresa los píxeles para tu breakpoint.
  5. Haz clic en Hecho.
Nota:
Puedes definir hasta 6 breakpoints diferentes para cada página o sección master del sitio.
Captura de pantalla recortada del panel de personalización de breakpoints abierto en la barra superior. El cursor hace clic en Agregar breakpoint.

Editar breakpoints existentes

Cambia el tamaño de los breakpoints existentes en el editor para adaptarlos a las necesidades del sitio de tu cliente. 

Para editar un breakpoint:

  1. Selecciona la página o la sección global en la que estás trabajando.
  2. Haz clic en el botón Personalizar tus breakpoints junto a los breakpoints en la barra superior del editor.
  3. Coloca el cursor sobre el breakpoint correspondiente y haz clic en el icono Editar .
  4. Ingresa los píxeles para tu breakpoint.
  5. Haz clic en Hecho.
Captura de pantalla recortada del panel de personalización de breakpoints abierto en la barra superior. El cursor hace clic en el icono Editar.

Eliminar un breakpoint

Es posible que tu cliente no quiera que su sitio esté diseñado para un determinado tamaño de pantalla. Si ese es el caso, puedes eliminar el breakpoint correspondiente según sea necesario. De esta manera, eliminarás las propiedades de estilo y diseño para ese breakpoint.  
Importante:
Al eliminar un breakpoint, cambia el rango de px de los otros breakpoints para completar el espacio. Como consecuencia, tu diseño podría volverse menos adaptativo a las diferentes ventanas de visualización.

Para eliminar un breakpoint:

  1. Selecciona la página o la sección global en la que estás trabajando.
  2. Haz clic en el botón Personalizar tus breakpoints junto a los breakpoints en la barra superior del editor.
  3. Pasa el cursor sobre el breakpoint correspondiente.
  4. Haz clic en el icono Papelera .
Nota:
El sitio debe tener al menos un breakpoint. Por este motivo, no es posible eliminar el breakpoint superior de la lista. 
Captura de pantalla recortada del panel de personalización de breakpoints abierto en la barra superior. El cursor hace clic en el icono Eliminar.

¿Te ha sido útil?

|

En este artículo

  • Ver los breakpoints del sitio
  • Agregar un nuevo breakpoint
  • Editar breakpoints existentes
  • Eliminar un breakpoint