# Editor de Wix Studio: establecer el tamaño de los elementos Source: https://support.wix.com/es/article/editor-de-wix-studio-establecer-el-tama%C3%B1o-de-los-elementos (updated 2026-09-22) Related: Wix developer documentation, https://dev.wix.com/docs/llms.txt; Help Center index, https://support.wix.com/en/llms.txt A medida que diseñas un sitio, debes asegurarte de que se vea bien en todos los tamaños de pantalla. En el Editor de Wix Studio, estableces el tamaño en px\* y el comportamiento adaptativo se encarga del resto. La mayoría de los elementos vienen con un comportamiento predeterminado (por ejemplo, escalar proporcionalmente) que controla la forma en que se redimensiona en otras pantallas. Siempre puedes cambiar el comportamiento predeterminado a uno que se adapte mejor a tus necesidades. > px\* es una unidad de tamaño variable, relativa al [tamaño de edición](https://support.wix.com/es/article/editor-de-wix-studio-establecer-el-tamaño-de-edición) de la página. [Video](https://youtu.be/K3lFksDE4y4?si=Uu4u83_yCx79wLPx) > **Consejo:** Puedes establecer el tamaño y el comportamiento adaptativo del elemento por [breakpoint](https://support.wix.com/es/article/editor-de-wix-studio-diseñar-en-distintos-breakpoints). --- ## Redimensionar un elemento Selecciona un elemento en el lienzo y arrastra las manillas laterales para agrandarlo o reducirlo. Esto establece el aspecto del elemento en el breakpoint en que te encuentras trabajando. En el panel Inspector profesional, puedes verificar el ancho y la altura exactos del elemento. Si es necesario, puedes ingresar tus propios valores de ancho/alto. > **Deja que el Inspector calcule por ti lo siguiente:** Para tu comodidad, puedes usar sumas (+), restas (-), multiplicaciones (\*) y divisiones (/) al escribir valores de tamaño. Por ejemplo, haz que un elemento sea 3 veces más ancho agregando \*3 junto al ancho actual. ![GIF que muestra cómo usar las manillas de arrastrar para cambiar el tamaño de un elemento en el lienzo](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/09/11/ce91824d-5fb1-4469-9ea9-c3285e31d2f4/a708742e-5721-4aa0-a4ec-47202f3ce545.gif) > **¿Estás experimentando problemas para cambiar el tamaño?** Echa un vistazo a [este video de solución de problemas](https://www.youtube.com/watch?v=F9JG6d6MgkI) (contenido en inglés) para aprender a resolver problemas con las secciones y los contenedores que no se redimensionan. --- ## Cambiar el tamaño de los elementos multimedia Al cambiar el tamaño de un elemento multimedia, como una imagen o un video, puedes bloquear la proporción de aspecto para que el ancho y la altura siempre se mantengan proporcionales entre sí. Esto significa que cuando cambias el ancho, la altura se ajusta automáticamente (y viceversa) para mantener la forma original del elemento. **¿Qué elementos multimedia incluyen esta opción?** * Imagen * Animación de Lottie * Forma * Arte vectorial * Reproductores de video * VideoBox * Video transparente ![GIF que muestra cómo se ve el cambio de tamaño de un elemento en el lienzo al bloquear la relación de aspecto](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/09/11/e417590a-fa95-4246-8f14-5a01523fd04d/cbf98daa-b8e7-4a26-8571-a755c170872e.gif) ### Para bloquear la relación de aspecto: 1. Selecciona el elemento multimedia correspondiente. 2. Haz clic en la flecha **Abrir Inspector profesional** ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/06/14/2dd40586-1f79-4376-aee0-387212a246bb/dfed4075-2e24-4ad8-a7c4-8857038d5f16.png) en la parte superior derecha. ![La flecha de Abrir Inspector profesional en la que haces clic en el Editor de Wix Studio para abrir el panel](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/03/07/69c68839-ed1a-4d4f-bc47-ee1332791b27/70af1fd3-bf77-47b6-9f50-4d12d442367d.png) 1. Haz clic en el icono **Bloquear relación de aspecto** ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/11/09/53cf6c58-6f75-4798-a301-857225d7027f/121ffc13-e4d9-4e30-99b3-469b8e7115df.png) en **Tamaño**. 2. Cambia el tamaño del elemento en una de las siguientes opciones: * Ingresa el valor de ancho/alto en el Inspector profesional (el otro valor se ajusta automáticamente). * Arrastra las manillas alrededor del elemento en el lienzo. ![una imagen en el lienzo junto al panel Inspector profesional; se hace clic en el icono para bloquear la relación de aspecto](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/09/11/cbb462e1-9d64-4b2a-8b03-c82fa26aea8d/ecf2086d-86a4-4f7c-ad4e-7941a997a020.png) > **Nota:** Esta opción no está disponible en el modo de ajustes avanzados. --- ## Configurar el tamaño en px* px**\*** es una unidad de medida variable en el Editor de Wix Studio. Te permite editar el tamaño usando una medida que te resulta familiar (píxeles), mientras que la medida real entre bastidores es adaptativa. En otras palabras, tú diseñas en píxeles que representan el tamaño en el lienzo, y el elemento sigue siendo adaptativo. Los valores específicos y las unidades de tamaño dependen del comportamiento adaptativo que elijas. Pasa el cursor sobre **px\*** para ver el cálculo y la unidad de medida adaptativa que se está utilizando. En el siguiente ejemplo, el ancho del contenedor en el lienzo actual es de 330 px\*. La unidad real es el porcentaje, por lo que el ancho es relativo (25,8% de cada pantalla). ![El cursor pasa sobre px* en el panel Inspector profesional y la ventana emergente que muestra el cálculo real](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/09/11/496c9521-3e31-4f71-82a7-07cb5f52478e/6eabea6f-7af8-484e-8e5e-653f4ea00bf8.png) > **¿Cuál es la diferencia entre px* y px?** Sin embargo, ambos te permiten editar en píxeles: > > * px\* significa que el tamaño que ves es relevante para el breakpoint en el que estás trabajando actualmente. > * px significa que el tamaño se fija para todos los breakpoints. --- ## Elegir el comportamiento adaptativo de un elemento Cuando agregas un elemento a la página, ya viene con un comportamiento adaptativo incorporado. Esto significa que no tienes que preocuparte por cómo se ve el elemento en las diferentes pantallas: el comportamiento adaptativo garantiza que se redimensione. Sin embargo, es posible que desees cambiar el comportamiento adaptativo si ves uno que sea más adecuado para tu diseño. **¿Cuál es la diferencia entre los comportamientos disponibles?** Cada comportamiento adaptativo tiene una lógica específica y automática en la forma en que se redimensiona el elemento en las distintas pantallas. Los comportamientos disponibles se ajustaron según el elemento. Los más comunes son los siguientes: * **Escalar proporcionalmente:** las proporciones del elemento (ancho y alto) mantienen la misma proporción en todas las pantallas. * **Ancho relativo:** el ancho del elemento cambia automáticamente, en relación con su elemento principal. * **Fijo:** el elemento siempre permanece del mismo tamaño, no cambia de tamaño en ninguna pantalla. * **Estirar:** el elemento se estira para ajustarse a su contenedor principal en cada breakpoint. * **Adaptar:** no hay espacios entre el elemento y su cuadro de límite. El tamaño del cuadro de límite en cada breakpoint depende del contenido que se encuentre dentro. **Nota:** Este es también el comportamiento predeterminado para una pila horizontal. **Comportamiento de la sección:** * **Altura fija:** la sección siempre permanece a la misma altura, independientemente del tamaño de la pantalla. * **Ajustar a la pantalla:** esto hace que la sección ocupe toda la altura de la ventana gráfica (100 vh). Si es necesario, puedes ajustar el vh para que ocupe menos espacio. **Comportamiento del texto:** * **Envolver:** el tamaño de la fuente permanece igual en todos los breakpoints, pero el texto se ajusta para adaptarse a su cuadro de límite en pantallas más pequeñas. Esto agrega más filas para mostrar el texto. * **Adaptar:** esto no deja espacios entre el texto y su cuadro de límite.También significa que la cantidad de filas del texto siempre permanece igual, independientemente del tamaño de la pantalla. > **Nota:** El comportamiento adaptativo que selecciones afectará a las unidades de tamaño en uso. Por ejemplo, al seleccionar Comportamiento adaptativo fijo, la medida cambia de px\* a px. ### Para elegir un comportamiento adaptativo diferente: 1. Selecciona el breakpoint correspondiente. 2. Selecciona el elemento. 3. Haz clic en el icono **Abrir Inspector profesional** ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/06/14/2dd40586-1f79-4376-aee0-387212a246bb/dfed4075-2e24-4ad8-a7c4-8857038d5f16.png) en la parte superior derecha del editor. ![La flecha de Abrir Inspector profesional en la que haces clic en el Editor de Wix Studio para abrir el panel](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/03/07/69c68839-ed1a-4d4f-bc47-ee1332791b27/70af1fd3-bf77-47b6-9f50-4d12d442367d.png) 1. Selecciona una opción del menú desplegable **Comportamiento adaptativo**. ![El menú desplegable Comportamiento adaptativo cuando está abierto y las opciones disponibles para un elemento de texto, con las animaciones de vista previa](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/09/11/5cd25cf8-cafa-4e54-a095-c1b2b5f7997e/65cc4edd-7240-4fa4-acdc-8ff2c3c180a9.gif) > **¿Estás tratando con los espacios vacíos no deseados en el sitio online?** Echa un vistazo a [este video de solución de problemas](https://www.youtube.com/watch?v=v55nO7cf8p4) (contenido en inglés) para obtener más información sobre cómo afecta el comportamiento adaptativo y cómo resolver este problema. --- ## Usar medidas de tamaño avanzadas Los ajustes avanzados del Inspector profesional permiten una personalización más profunda del tamaño del elemento por breakpoint. En lugar de trabajar con px\* y elegir un comportamiento adaptativo, este modo te permite ver las medidas que estamos usando en segundo plano (por ejemplo, px, %, vh) y ajustarlas según tus necesidades. **¿Cuáles son las medidas disponibles?** Puedes elegir la(s) que prefieras usando lo siguiente: * **Píxeles (px):** si quieres que el elemento permanezca exactamente igual en todos los tamaños de pantalla, simplemente puedes establecer su altura y ancho en valores de px. * **Porcentaje (%):** el valor de ancho/alto del elemento depende de las dimensiones de su elemento principal. Esto garantiza que el elemento cambie de tamaño en proporción a su elemento principal. * Por ejemplo, puedes acoplar un elemento de texto (elemento secundario) a un contenedor (elemento principal) y establecer su ancho en 50%. De esta manera, el texto siempre ocupará el 50% del ancho del contenedor, independientemente del tamaño de la pantalla. * **Ancho y alto de la ventana de visualización (vw y vh):** estas medidas representan el ancho y la altura de una ventana de visualización determinada (navegador). * Por ejemplo, 1vw de ancho es igual al 1% del ancho del navegador. * **Contenido máximo (max-c):** puedes usar esta medida para establecer el ancho de un elemento y hacer que dependa del tamaño de sus elementos secundarios, sin importar cuán grande sea el contenido o cuántas palabras contenga. El elemento principal se ajusta al contenido. * **Cálculo:** usando principios matemáticos básicos, puedes escribir una "fórmula" que determine el ancho o la altura de un elemento. Incluso puedes combinar diferentes medidas en este cálculo (por ejemplo, vh y px). * Por ejemplo, puedes hacer que un encabezado y una sección ocupen toda la altura de la ventana de visualización (100vh). Si la altura del encabezado se establece en 100 px, el cálculo de la altura de la sección sería: (100vh - 100px). Esto resta la altura del encabezado de la ventana gráfica. **Ancho y alto automáticos** Para algunos elementos, el ancho o la altura ya están configurados en **Auto**. Esto significa que el contenido del elemento determina el ancho/alto, lo que te permite agregar o eliminar contenido sin tener que preocuparte por el redimensionamiento. > La habilitación de los ajustes avanzados se aplica al elemento específico que selecciones, en todos los breakpoints. El modo de ajustes avanzados permanece habilitado para ese elemento, para facilitar el acceso, pero puedes desactivarlo en cualquier momento. ### Para acceder a los ajustes avanzados de tamaño y editarlos: 1. [Ve al editor](https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26). 2. Selecciona el elemento correspondiente. 3. Haz clic en el icono **Abrir Inspector profesional** ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/06/14/2dd40586-1f79-4376-aee0-387212a246bb/dfed4075-2e24-4ad8-a7c4-8857038d5f16.png) en la parte superior derecha del editor. ![Captura de pantalla del panel Inspector profesional abriéndose en el Editor de Wix Studio.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/03/07/ed25ff0f-6b3d-4d1c-9155-e9b1c788a0b5/326f9801-aa4e-4ca8-8989-360b80ec33f2.png) 1. Haz clic en el icono **Más acciones** ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/09/0ba33e98-0c9f-4d22-999e-430511e01828/3318f437-f255-4798-800c-734d0ad45021.png) junto a **Tamaño**. 2. Habilita la palanca **Ajustes avanzados**. 3. Edita el tamaño según sea necesario: ancho, alto y valores mínimos y máximos. **Consejo:** Cambia a una unidad diferente (por ejemplo, de px a %) haciendo clic en el Inspector profesional. Esto abre una lista de las medidas disponibles para el elemento. ![Se cambian a los ajustes avanzados en la sección Tamaño del panel Inspector profesional](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/09/11/6789f4e1-706d-4aa4-bd61-b4d519b2d50e/c1bbd01d-ff93-47a2-9d62-d78ae6b187ee.gif) > **Configurar la altura de la sección:** No recomendamos establecer la altura en píxeles, ya que esto podría hacer que los elementos no se muestren según lo previsto. Por ejemplo, pueden desbordarse o aparecer recortados. --- ## Configurar las preferencias de tamaño Elige tus preferencias de tamaño para el sitio que estás diseñando. Si te gusta trabajar con unidades de medida avanzadas de CSS, puedes habilitar los ajustes avanzados de tamaño en el editor. De manera alternativa, si prefieres configurar el tamaño por elemento, puedes dejar las medidas tal y como están. ### Para establecer las preferencias de tamaño para un sitio: 1. Haz clic en el icono de **Wix Studio** ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/13/d9a1d8f1-9b06-431b-a37c-cad1e9a147d0/1905b305-d3ce-4263-8ba1-38695a41936e.png) en la parte superior izquierda. 2. Pasa el cursor sobre **Ver**. 3. Pasa el cursor sobre **Preferencias de tamaño**. 4. Elige la preferencia que deseas: * **Mostrar siempre preferencias avanzadas:** el tamaño en el Inspector profesional siempre está configurado como avanzado. **Nota:** Este modo desactiva la opción de volver a cambiar elementos específicos desde los ajustes avanzados. * **Configurar para cada elemento:** tú estableces las preferencias de tamaño para cada elemento. ![Captura de pantalla del menú superior en el Editor de Wix Studio, donde puedes controlar las preferencias de tamaño](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/09/09/72c16f12-bad3-461c-8ee0-829e0bea3265/e46de62a-db0b-4983-a878-1416346a0aba.png) --- ## Preguntas frecuentes Haz clic en una de las siguientes preguntas para obtener más información sobre los tamaños de los elementos. **¿Cuándo debo usar los ajustes avanzados?** Los ajustes avanzados de tamaño te proporcionan un control total del tamaño del elemento en cada breakpoint. Por lo general, no es necesario cambiar al modo avanzado: el comportamiento adaptativo del elemento garantiza que se vea tal y como quieres en cada pantalla. Sin embargo, si tienes una unidad de tamaño específico con la que deseas trabajar (por ejemplo, vh, vw, max-c), ya sea fluido o fijo, debes cambiar a las medidas avanzadas. **¿Están disponibles todos los comportamientos adaptativos para los elementos relacionados con las apps de Wix?** Los elementos y widgets relacionados con las apps de Wix (por ejemplo Wix Stores, Wix Blog) solo ofrecen ciertos comportamientos adaptativos, aquellos que funcionan mejor para cada elemento. Por ejemplo, los comportamientos adaptativos disponibles para el elemento Página de categorías son "Estirar", "Fijo" y "Ancho relativo". **Configuré una sección para que se escale proporcionalmente, pero los elementos no se escalan. ¿A qué se debe esto?** Asegúrate de establecer también el comportamiento adaptativo de los elementos. Por ejemplo, si configuraste una sección en "Escalar proporcionalmente", pero un elemento secundario está configurado en "Fijo", ese elemento permanecerá fijo en todos los breakpoints. **Nota:** Estamos investigando un problema por el cual algunos botones y menús no muestran el comportamiento "Escalar proporcionalmente" en el Inspector profesional. Si estás experimentando este problema, puedes [seguirlo aquí](https://support.wix.com/es/article/wix-studio-algunos-botones-y-menús-no-se-escalan-proporcionalmente) y recibir un email cuando se solucione. **¿Por qué no puedo ajustar el tamaño de ciertos elementos desde el panel Inspector profesional?** En algunos casos, la posibilidad de ajustar el tamaño de un elemento depende de su relación con los elementos primarios o secundarios. En los repetidores, por ejemplo, la opción de altura está deshabilitada en el panel Inspector profesional porque la altura del repetidor está determinada por la altura de sus elementos (es decir, los elementos secundarios). Al ajustar la altura de los ítems, la altura del repetidor cambia automáticamente. Por otro lado, al seleccionar un ítem del repetidor, verás que la opción de ancho está deshabilitada. Esto se debe a que el ancho del ítem está vinculado al ancho general del repetidor. Para ajustar el ancho del ítem, deberás hacer que el repetidor sea más ancho o más angosto. **¿Por qué las imágenes o los videos no se escalan correctamente en diferentes tamaños de pantalla?** Este problema suele ocurrir cuando el comportamiento adaptativo de la imagen o del video no está configurado para que se escale proporcionalmente. Para solucionar esto, ve al panel Inspector profesional y configura el comportamiento adaptativo en "Escalar proporcionalmente". Para los videos de fondo, usa los [ajustes del fondo de la sección](https://support.wix.com/es/article/editor-de-wix-studio-cambiar-y-personalizar-el-fondo-de-una-sección#adding-a-video-to-the-section-background) en lugar de un reproductor de video para garantizar un escalado adecuado. Además, algunos elementos relacionados con las apps, como la galería Wix Pro, tienen sus propios ajustes internos de tamaño o proporción. En estos casos, te recomendamos verificar el panel Ajustes del elemento. **¿Cómo corrijo la superposición de elementos en la versión móvil?** Al organizar los elementos, pueden espaciarse a la perfección en el editor, pero se superponen al revisar el sitio online en diferentes ventanas gráficas. La superposición suele ocurrir debido a la forma en la que se posicionan los elementos o debido a su comportamiento adaptativo. Si los elementos del sitio de tu cliente se superponen en diferentes tamaños de pantalla, verifica la posición de los elementos, el acoplamiento y el comportamiento adaptativo en el panel Inspector profesional. Por ejemplo, si los elementos están configurados como "Fijos", la solución puede ser seleccionar un comportamiento adaptativo que cambie el tamaño de cada elemento en las pantallas más pequeñas. Además, si los elementos comparten el mismo elemento principal, pero no hay ninguna relación (por ejemplo, una pila) definida entre ellos, actuarán de forma independiente y pueden superponerse. Más información sobre [cómo evitar la superposición en los diferentes los breakpoints](https://support.wix.com/es/article/editor-de-wix-studio-solucionar-problemas-de-capacidad-de-respuesta#overlapping-elements-across-breakpoints).