header-logo
Primeros pasosAprende cómo puedes usar Wix para construir tu sitio web y potenciar tu negocio. Personaliza tu sitio o contrata a un profesional para crear o mejorar tu presencia online.
Crear tu sitioAprende a utilizar el Editor de Wix y a gestionar el contenido de tu sitio. Descubre cómo proteger la privacidad de tus visitantes y hacer que tu sitio sea accesible.
Cuenta y facturaciónRevisa la configuración de tu cuenta, gestiona tus suscripciones y planes Premium y comprende tus facturas.
Usar las apps móviles de WixUtiliza la aplicación Wix para gestionar tu negocio de manera eficiente, interactuar con tus visitantes y construir una comunidad.
Conectar un dominioComprende cómo comprar, conectar o transferir un dominio y cómo mantener seguros los datos de tu sitio.
Administrar tu negocioEncuentra las herramientas adecuadas para construir y hacer crecer tu negocio: acepta pagos, revisa las analíticas, contacta con los visitantes y mucho más.
Promocionar tu sitioAprende cómo promocionar tu sitio en los motores de búsqueda, enviar campañas de email y ejecutar anuncios pagados.
Wix Studio, Partners y EnterpriseAprovecha al máximo tu cuenta de Wix Studio, de Partner o de Enterprise para poder escalar tu negocio.
Obtener ayudaObtén más información sobre cómo resolver problemas de rendimiento y cuestiones técnicas en tu sitio. Mantente al tanto de las próximas funciones a través de nuestra hoja de ruta.
placeholder-preview-image
Wix LearnMejora tus habilidades con nuestros cursos y tutoriales.
Blog de WixObtén consejos para diseño web, marketing y mucho más.
Guía de SEOMejora el tráfico orgánico en buscadores.
Website developmentCrea un sitio con nuestra plataforma full-stack.
Contrata a un profesionalVincúlate con un especialista que te ayude a alcanzar tus objetivos
placeholder-preview-image
En este artículo
  • Personalizar los diseños por breakpoint
  • Permitir que la IA haga que las secciones tengan un comportamiento adaptativo
  • Redimensionar automáticamente el tamaño en los breakpoints
  • Hacer que el diseño del elemento se ajuste a cualquier pantalla
  • Escalar el texto de manera automática y manual

Editor de Wix Studio: crear un sitio adaptativo

En este artículo
  • Personalizar los diseños por breakpoint
  • Permitir que la IA haga que las secciones tengan un comportamiento adaptativo
  • Redimensionar automáticamente el tamaño en los breakpoints
  • Hacer que el diseño del elemento se ajuste a cualquier pantalla
  • Escalar el texto de manera automática y manual

El nuevo Editor de Wix Studio es el lugar ideal para que los profesionales creen sitios totalmente adaptativos que se vean de manera óptima en todas las pantallas y dispositivos. Con sus funciones de vanguardia, la plataforma te permite crear sitios adaptativos con rapidez y precisión. 

Dentro del Editor de Wix Studio, encontrarás una amplia variedad de herramientas cuidadosamente seleccionadas para optimizar el proceso de diseño, garantizando facilidad, eficiencia y resultados notables para todos tus proyectos. 
Ve a nuestra Academia de Wix Studio (contenido en inglés) para ver webinarios, tutoriales y cursos adicionales de Wix Studio.

Personalizar los diseños por breakpoint

El Editor de Wix Studio te permite adaptar los sitios según el breakpoint, para que siempre se vean geniales. Los breakpoints son rangos de ancho de pantalla, que representan las posibles pantallas y dispositivos que los visitantes tienden a usar (por ejemplo, tabletas, móviles). 
El Editor de Wix Studio utiliza el concepto de cascada a la hora de diseñar en los distintos breakpoints. Los cambios que realizas en los breakpoints más grandes recaen sobre los más pequeños, pero los cambios en los breakpoints más pequeños no afectan a los más grandes. 
GIF que muestra cómo cambia el diseño del sitio al hacer clic en diferentes breakpoints en la parte superior

Permitir que la IA haga que las secciones tengan un comportamiento adaptativo

Haz que la sección se adapte a todos los tamaños de pantalla con un solo clic, usando el poder de la IA. La herramienta de IA adaptativa identifica grupos de elementos relacionados y aplica la herramienta de estilo ideal para cada grupo (por ejemplo, pila, cuadrícula). 
Captura de pantalla de una vista previa generada por la herramienta de IA adaptativa, en la que se resalta la opción de aplicar o descartar los cambios.

Redimensionar automáticamente el tamaño en los breakpoints

A medida que diseñas un sitio, debes asegurarte de que los elementos se vean bien en todos los tamaños de pantalla. Edita el tamaño del elemento en píxeles y selecciona un comportamiento adaptativo para que se encargue del resto. 
GIF que muestra cómo usar las manillas de arrastrar para cambiar el tamaño de un elemento en el lienzo
Cada elemento viene con un comportamiento adaptativo predeterminado (por ejemplo, Escalar proporcionalmente), que controla la forma en que se redimensiona en otras pantallas. Esto acelera verdaderamente el proceso de diseño, ya que no tienes que pasar por todos y cada uno de los breakpoints para establecer el tamaño.
Desde el panel Inspector profesional, puedes cambiar el comportamiento adaptativo de un elemento a uno que se adapte mejor a tus necesidades. 
Captura de pantalla del menú desplegable Comportamiento adaptativo cuando está abierto y las opciones disponibles

Hacer que el diseño del elemento se ajuste a cualquier pantalla

Cuando configuras un elemento para que se escale proporcionalmente, puedes asegurarte de que su diseño se vea ideal en todas las pantallas. Habilita la palanca Escalar propiedades en el Inspector profesional para que esto suceda automáticamente.
Una captura de pantalla de la palanca de propiedades de escala, que aparece solo si configuras el comportamiento adaptativo para escalar proporcionalmente
Esto es útil, por ejemplo, si tu elemento tiene un borde definido. El borde puede parecer demasiado grueso y agobiante en las pantallas pequeñas, o apenas verse en las pantallas grandes. Con la palanca habilitada, lo único que tienes que hacer es configurar el diseño que deseas en la versión de escritorio.

Escalar el texto de manera automática y manual

En el Editor de Wix Studio, el texto está configurado para escalarse automáticamente en proporción al tamaño de la pantalla. Tú eliges el tamaño de fuente que deseas en la versión de escritorio, y nosotros nos encargamos del resto. Puedes establecer valores mínimos y máximos para asegurarte de que el texto nunca sea demasiado pequeño o demasiado grande para tu diseño. 
Si necesitas un control más preciso de la escala del texto, selecciona Personalizado. Esto te permite establecer el rango de tamaño para cada breakpoint por separado. 
Captura de pantalla de la opción de escalar texto en el Inspector profesional, que muestra dónde establecer el rango que deseas para el breakpoint

Helpmate

Hola

¿Necesitas más ayuda?
Unlock personalized helpLog in to get the most out of Helpmate.