Editor de Wix Studio: usar contenedores

4 min de lectura
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.
En este artículo, obtén más información sobre lo siguiente:

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:

  1. Haz clic en Agregar elementos a la izquierda del editor.
  2. Selecciona Contenedores.
  3. Elige un estilo para el contenedor (Vacíos, Diseñados o Interactivos).
  4. Haz clic en el contenedor elegido y arrástralo para agregarlo a la página.
El panel Agregar elementos en el Editor de Wix Studio. El cursor pasa sobre un contenedor vacío.

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:

  1. Selecciona el contenedor correspondiente.
  2. Haz clic en el icono Abrir Inspector profesional  en la parte superior derecha del editor.
Captura de pantalla de cómo abrir el panel Inspector profesional en el Editor de Wix Studio.
  1. 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. 
La pestaña de diseño de un contenedor en el Inspector profesional. El cursor está configurando las esquinas.

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:

  1. Haz clic en el elemento correspondiente.
  2. Arrástralo a la posición que desees en el contenedor.
  3. Suelta el elemento cuando aparezca el mensaje Adjuntar.
Se está arrastrando un elemento de texto al contenedor. Se muestra 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:

  1. Selecciona el contenedor correspondiente.
  2. Haz clic en el icono Más acciones .
  3. Haz clic en Aplicar cuadrícula CSS avanzada.
  4. Elige un estilo en el menú desplegable 1x1.
    Consejo: Selecciona Otro si deseas establecer tu propio número de filas y columnas. 
Un contenedor en el editor. Se está seleccionando una cuadrícula CSS en el menú desplegable.

¿Te ha sido útil?

|