Editor de Wix Studio: usar contenedores
3 min
En este artículo
- Agregar contenedores a un sitio
- Diseñar los contenedores
- Adjuntar elementos a los contenedores
- Aplicar una cuadrícula a un contenedor
Los contenedores son herramientas de diseño adaptativas que te ayudan a optimizar y estructurar el contenido del sitio. Puedes personalizarlos para complementar el diseño del sitio y adjuntar elementos como texto, archivos multimedia y botones.
Agregar contenedores a un sitio
Comienza por agregar un contenedor que se adapte a las necesidades de diseño y de contenido del cliente. Puedes elegir entre una variedad de contenedores prediseñados e interactivos, o comenzar desde cero con un diseño en blanco.
Para agregar un contenedor:
- Haz clic en Agregar elementos a la izquierda del editor.
- Selecciona Contenedores.
- Elige un estilo para el contenedor (Vacíos, Diseñados o Interactivos).
- Haz clic en el contenedor elegido y arrástralo para agregarlo a la página.
a la izquierda del editor.
Diseñar los contenedores
Personaliza el diseño del contenedor para que se adapte a la estética del sitio. Puedes cambiar el color del fondo, establecer el radio y más.
Para diseñar un contenedor:
- Selecciona el contenedor correspondiente.
- Haz clic en el icono Abrir Inspector profesional en la parte superior derecha del editor.
en la parte superior derecha del editor.
- Elige cómo quieres personalizar el contenedor en Diseño:
- Fondo: establece el fondo y hazlo más o menos visible:
- Color: selecciona entre los colores del tema del sitio o tu propio tono personalizado.
- Degradado: aplica un degradado o un degradado lineal al contenedor. Puedes elegir los colores, los ángulos y más.
- Efecto cristal: aplica un efecto de cristal esmerilado al contenedor y establece la intensidad del desenfoque.
- Borde: agrega un borde al contenedor y usa las opciones para establecer el tamaño, el color y la opacidad.
- Esquinas: ajusta el radio de las esquinas del contenedor (en px) para hacerlas más redondas o angulosas.
- Sombreado: agrega y personaliza un efecto de sombra en el contenedor.
- Fondo: establece el fondo y hazlo más o menos visible:
Adjuntar elementos a los contenedores
Cuando colocas elementos dentro de un contenedor, se adjuntan automáticamente. Esto significa que puedes arrastrar el contenedor y los elementos que lo acompañan como un conjunto, y verlos juntos en el panel Capas.
Para adjuntar un elemento a un contenedor:
- Haz clic en el elemento correspondiente.
- Arrástralo a la posición que desees en el contenedor.
- Suelta el elemento cuando aparezca el mensaje Adjuntar.
Aplicar una cuadrícula a un contenedor
Aplica una cuadrícula CSS avanzada al contenedor para estructurar su estilo. Puedes elegir el número de filas y de columnas que deseas, y establecer su tamaño usando medidas adaptativas (por ejemplo, fr, mín./máx., %)
Para aplicar una cuadrícula a un contenedor:
- Selecciona el contenedor correspondiente.
- Haz clic en el icono Más acciones .
- Haz clic en Aplicar cuadrícula CSS avanzada.
- Elige un estilo en el menú desplegable 1x1.
Consejo: Selecciona Otro si deseas establecer tu propio número de filas y columnas.
.