Centro de Ayuda Wix
    Inicio
  1. Wix Studio, Partners y Enterprise
  2. Wix Studio
  3. Usar el Editor de Wix Studio
  4. Agregar elementos en el Editor de Wix Studio
    5. Editor de Wix Studio: administrar y personalizar las flexboxes

Editor de Wix Studio: administrar y personalizar las flexboxes

5 min de lectura
Administra y personaliza las flexboxes para crear una experiencia única para los visitantes. Puedes cambiar el tamaño de los elementos para que se ajusten a la estructura de la página, ajustar la configuración de visualización y agregar, eliminar y reordenar elementos a medida que avanzas.
En este artículo, aprende cómo hacer lo siguiente:

Administrar los ítems de la flexbox

Administra los elementos de la flexbox sobre la marcha para personalizar aún más tu contenido y mantenerlo actualizado. Puedes ocultar elementos en ciertos breakpoints, cambiar su orden y más. 

Para administrar los ítems de la flexbox desde el Inspector profesional:

  1. Haz clic en la flexbox.
  2. Haz clic en la flecha Abrir Inspector profesional  en la parte superior derecha del Editor.
  3. (En el Inspector profesional) Haz clic en Administrar junto al número de ítems. 
  4. Elige qué quieres hacer con tus ítems:
  • Reordenar: 
    • Mantén pulsado el icono Reordenar  junto al elemento correspondiente y arrástralo a su nueva posición. 
  • Administrar:
    1. Haz clic en el icono Más acciones junto al ítem correspondiente. 
    2. Administra los ítems con las siguientes opciones:
    • Duplicar: haz una copia de un ítem específico.
    • Renombrar: asigna a cada ítem un nombre que puedas reconocer.
    • Eliminar: elimina el ítem por completo.
    • Ocultar: oculta el ítem del breakpoint específico en el que estás trabajando.
La sección Administrar ítems del panel Inspector profesional. El cursor pasa el cursor sobre la opción para cambiar el nombre de un elemento.

Personalizar la visualización de la flexbox

Selecciona una modo de visualización para la flexbox para complementar la estructura de la página. Dependiendo del tipo de visualización que elijas, puedes personalizar aún más su apariencia ajustando las opciones como los espacios, la dirección y el ancho. 

Para personalizar la visualización:

  1. Haz clic en la flexbox.
  2. Haz clic en la flecha Abrir Inspector profesional  en la parte superior derecha del Editor.
  3. Selecciona la pestaña Diseño .
  4. Haz clic en Estilo.
  5. (Opcional) Haz clic en Tipo de visualización y selecciona un tipo de visualización en el menú desplegable.
  6. Personaliza la flexbox según el tipo de visualización que elijas:
    • Dirección: decide si los ítems se organizan de izquierda a derecha o de derecha a izquierda. 
    • Proporción de los ítems: haz clic en Igualar para dar a todos los ítems de la flexbox las mismas definiciones de tamaño.
    • Ancho del elemento: selecciona el ancho de los ítems de la flexbox en porcentaje o configúralos todos como ancho máximo.
    • Espacios: ingresa un valor (en px, vh, vw o escala) para los espacios horizontales y verticales entre los ítems de la flexbox. Nota: Si eliges las visualizaciones "Tipo cinta" o "Diapositivas", las opciones disponibles (horizontal o vertical) dependen de la dirección que elijas.
    • Alineación del elemento: elige cómo se deben alinear y posicionar los ítems. Dependiendo del aspecto que quieras lograr, puedes alinear los elementos con los bordes de la flexbox (Inicio o Al final) o crear un espacio entre los ítems o alrededor de ellos.
    • Contenido con desbordamiento: selecciona si deseas ocultar o mostrar el contenido desbordado.
    • Dirección del deslizador: muestra los ítems en un deslizador horizontal o vertical.
    • Ajustar el desplazamiento al alineado: haz clic en la palanca para habilitarla. Al desplazarse por las diapositivas de la flexbox, este se "ajusta" a cada ítem (diapositiva) para que los visitantes no se la pierdan.
    • Ítems por diapositiva: establece cuántos elementos se muestran por acción de diapositiva.
    • Navegación: agrega flechas, botones o texto para ayudar a los visitantes a navegar por los elementos.
    • Barra de desplazamiento: muestra u oculta una barra de desplazamiento para que los visitantes se desplacen por los elementos.
La sección Estilo del panel Inspector profesional. El cursor pasa el cursor sobre el campo de espacios.
Notas:
  • Las opciones de personalización que se muestran dependen del estilo de visualización que elijas.
  • Algunos navegadores antiguos no son compatibles con los espacios en blanco (por ejemplo, Chrome 76-83, Safari 12-14 y Edge 79-83). Esto significa que los visitantes que acceden a tu sitio desde estos navegadores no ven los espacios que estableciste entre los elementos de la flexbox. 
Trabajar con breakpoints:
  • Puedes establecer un estilo diferente para cada breakpoint.
  • Recomendamos el estilo de columna o tipo cinta deslizante para pantallas más pequeñas, como las de los dispositivos móviles.

Cambiar el tamaño de los elementos de la flexbox

Puedes cambiar el tamaño de cada elemento individual de la flexbox para hacerlo más grande o más pequeño que los demás. Usa el panel Inspector profesional para ajustar el ancho y la altura de cada ítem, así como los márgenes horizontales y verticales alrededor de los ítems.

Para cambiar el tamaño de un ítem:

  1. Haz clic en la flexbox.
  2. Selecciona el ítem cuyo tamaño deseas cambiar.
  3. Haz clic en la flecha Abrir Inspector profesional  en la parte superior derecha del Editor.
  4. Selecciona la pestaña Diseño y selecciona cómo quieres ajustar el ítem:
    • Tamaño: ingresa el tamaño elegido en el campo y selecciona la unidad de medida.
    • Posición: selecciona la opción Márgenes/Relleno correspondiente e ingresa la cantidad elegida en el campo.
La pestaña Diseño del panel Inspector profesional. El cursor se desplaza sobre el campo de ancho mínimo.

¿Te ha sido útil?

|

En este artículo

  • Administrar los ítems de la flexbox
  • Personalizar la visualización de la flexbox
  • Cambiar el tamaño de los elementos de la flexbox