header-logo
Crea tu sitio web y haz crecer tu negocio con Wix
Crea y gestiona tu sitio con las funciones intuitivas de Wix
Gestiona suscripciones, planes y facturas
Gestiona tu negocio y conecta con los miembros
Aprende a comprar, conectar o transferir un dominio
Herramientas para ampliar tu negocio y tu presencia online
Herramientas de marketing y SEO para impulsar tu negocio
Funciones avanzadas para trabajar de forma eficaz
Soluciones, problemas conocidos y contacto
placeholder-preview-image
Mejora tus habilidades con nuestros cursos y tutoriales.
Obtén consejos para diseño web, marketing y mucho más.
Mejora el tráfico orgánico en buscadores.
Crea un sitio con nuestra plataforma full-stack.
Vincúlate con un especialista que te ayude a alcanzar tus objetivos
placeholder-preview-image

Editor de Wix Studio: agregar y configurar una flexbox

3 min
En este artículo
  • Paso 1 | Agrega una flexbox
  • Paso 2 | Agrega ítems a la flexbox
  • Paso 3 | Agrega elementos a la flexbox
Usa flexboxes para optimizar la forma en la que muestras el contenido. Estas herramientas de estilo avanzadas se componen de contenedores adaptativos que se adaptan a la perfección a cualquier tamaño de pantalla. Elige entre una variedad de tipos de visualización, como Columnas, Mosaico y Tipo cinta, para mejorar el estilo y la funcionalidad del sitio de tu cliente.

Paso 1 | Agrega una flexbox

Para comenzar, dirígete al panel Agregar elementos, selecciona un preajuste de flexbox y arrástralo a la página. Puedes cambiar el número de ítems y la forma en la que se muestran más adelante.

Para agregar una flexbox:

  1. Haz clic en Agregar elementos  a la izquierda del editor.
  2. Haz clic en Herramientas de estilo.
  3. Haz clic en Flexboxes.
  4. Arrastra y suelta la flexbox elegida a la página.
El panel Agregar elementos en el Editor de Wix Studio. El cursor pasa el cursor sobre un estilo de flexbox.
Descubre cómo funciona:
Arrastra las manillas en el lienzo para ver cómo se reorganiza sin problemas el contenido de la flexbox en los distintos breakpoints. 

Paso 2 | Agrega ítems a la flexbox

Las flexboxes se componen de varios ítems que son contenedores adaptativos. Puedes cambiar el número de ítems en una flexbox y el tamaño de los ítems cambiará automáticamente para que se ajusten al espacio disponible. 
Para agregar un nuevo elemento, puedes hacer clic en Agregar ítem o usar el panel Administrar elementos en el Inspector profesional. 
Flexbox en blanco en el Editor. El cursor pasa el cursor sobre el botón Agregar ítems.

Paso 3 | Agrega elementos a la flexbox

Elige lo que deseas mostrar en la flexbox agregando elementos a los ítems. Puedes ocultar o mostrar elementos en diferentes breakpoints para crear una experiencia única para los visitantes, sin importar el dispositivo.

Para agregar elementos a un ítem:

  1. Haz clic en Agregar elementos  a la izquierda del editor.
  2. Selecciona el tipo de elemento que deseas agregar.
  3. Haz clic en el elemento elegido para agregarlo a la página.
  4. Arrastra el elemento al ítem de la flexbox y suéltalo cuando veas que aparece la palabra Adjuntar.
Un botón que ha sido arrastrado a una flexbox. Se muestra el mensaje Adjuntar.
¿Cuál es el siguiente paso?
Personaliza y administra la flexbox para mostrar el contenido que quieras, como quieras.