Centro de Ayuda Wix
    Inicio
  1. Crear tu sitio
  2. Usar el Editor de Wix
  3. Agregar y personalizar elementos
  4. Cajas y contenedores
    5. Editor de Wix: personalizar una ventana interactiva

Editor de Wix: personalizar una ventana interactiva

7 min de lectura
Personaliza cualquier ventana interactiva para que se vea exactamente como quieres. Puedes elegir una superposición para cubrir la página alrededor de la ventana interactiva, establecer la posición de esta y cambiar el fondo para crear un diseño único para tu marca. 
En este artículo, aprenderás cómo:
Captura de pantalla de una ventana interactiva personalizada en un sitio Wix en vivo.

Ajustar el estilo de la ventana interactiva

Establece dónde aparece la ventana interactiva en tu página. Puedes elegir una esquina de la página donde debe aparecer y ajustar la distancia de la ventana interactiva desde los bordes de la pantalla (delimitación).

Para elegir el estilo de la ventana interactiva:

  1. Abre la ventana interactiva correspondiente desde el panel Agregar.
  2. Haz clic en la ventana interactiva.
  3. Haz clic en el icono Estilo .
  4. Elige cómo quieres ajustar el estilo:
    • Posición: elige la posición de la ventana interactiva en la página.
    • Distancia horizontal: mueve el cuadro a la izquierda o a la derecha de la pantalla.
    • Distancia vertical: mueve el cuadro hacia arriba o hacia abajo en la pantalla.
El panel de estilo de la ventana interactiva. El cursor pasa sobre la opción de colocar la ventana interactiva en el centro.

Cambiar la superposición de la ventana interactiva

La superposición es el espacio alrededor de la ventana interactiva que bloquea el resto de tu sitio. Esto ayuda a los visitantes a centrarse en el mensaje de la ventana interactiva. Puedes elegir un fondo de color, imagen o video para la superposición y ajustarlo según sea necesario.

Para cambiar la superposición:

  1. Abre la ventana interactiva correspondiente desde el panel Agregar.
  2. Haz clic en la superposición (el espacio alrededor de la ventana interactiva).
  3. Haz clic en Cambiar fondo de superposición.
  4. Elige el tipo de superposición que deseas en la ventana interactiva: 
    • Color: selecciona un color para la superposición en el Selector de color.
    • Imagen: selecciona tu propia imagen, una de Wix o de Shutterstock.
    • Video: selecciona un video de Wix gratuito o sube el tuyo.
  5. (Opcional) Haz clic en Ajustes para ajustar la superposición a tu gusto.
Consejo:
Te recomendamos que hagas la superposición ligeramente transparente para que los visitantes aún puedan ver la página detrás de la ventana interactiva, pero entiendan que está bloqueada.
El panel de fondo de superposición. El cursor pasa sobre el botón
Notas:
  • No puedes editar la superposición de la ventana interactiva en la versión móvil del sitio.
  • Si agregas una superposición de color o imagen en la versión de escritorio, esto se aplica automáticamente al sitio móvil. Sin embargo, si agregas una superposición de video, esta se convertirá en una imagen fija del video en la versión móvil del sitio.

Configurar el fondo de la ventana interactiva

Elige tener un fondo de color, de imagen o de video en la ventana interactiva. Según el tipo que elijas, también puedes ajustar la configuración, como la visibilidad y la escala.

Para elegir un fondo para la ventana interactiva:

  1. Abre la ventana interactiva correspondiente desde el panel Agregar.
  2. Haz clic en la ventana interactiva.
  3. Haz clic en el icono Diseño .
  4. Haz clic en el tipo de fondo que deseas para tu ventana interactiva:
    • Color: selecciona un color del Selector de color o agrega y ajusta un degradado impresionante. 
    • Imagen: selecciona tu propia imagen, una de Wix o de Shutterstock.
    • Video: selecciona un video de Wix gratuito o sube el tuyo.
  5. (Opcional) Haz clic en Ajustes para ajustar la superposición a tu gusto.
El fondo de la ventana interactiva en el Editor. El cursor pasa sobre la opción

Personalizar el botón Cerrar de la ventana interactiva

Ajusta el aspecto y el estilo del botón en el que los visitantes hacen clic para cerrar la ventana interactiva. Puedes elegir el texto, establecer la alineación del texto del botón y personalizar su diseño para la vista Normal y Efecto cursor de modo que se destaque.

Para editar y alinear el texto del botón:

  1. Abre la ventana interactiva correspondiente desde el panel Agregar.
  2. Haz clic en el botón.
  3. Cambia el texto que aparece en el botón:
    1. Haz clic en Cambiar texto.
    2. Ingresa el texto en el campo.
    3. Pulsa Enter en el teclado.
  1. Ajusta la alineación del texto en el botón:
    1. Haz clic en el icono Estilo .
    2. Elige cómo se alinea el texto: a la izquierda, al centro o a la derecha del botón.
El panel de estilo del botón de cierre. El cursor pasa sobre la opción para alinear el texto hacia el centro.

Para diseñar el botón Cerrar de la ventana interactiva:

  1. Abre la ventana interactiva correspondiente desde el panel Agregar.
  2. Haz clic en el botón.
  3. Haz clic en el icono Diseño . 
  4. Elige un diseño y haz clic en Personalizar para realizar más cambios en el diseño.
  5. Haz clic en un preajuste en la parte superior.
  6. Selecciona para qué estado deseas ajustar el diseño:
    • Normal: cómo se ve el botón antes de que un visitante interactúe con él.
    • Efecto cursor: cómo se ve el botón cuando un visitante pasa el cursor sobre él.
  7. Elige lo que quieras personalizar:
  • Rellenos de fondo : elige un color del fondo para el botón y ajusta su visibilidad.
  • Bordes undefined: agrega bordes al botón para que contrasten con la ventana interactiva. Elige un color y establece el ancho para que sea tan grande o pequeño como necesites.
  • Esquinas undefined: elige cómo quieres que se vean las esquinas del botón. Puedes ajustar cada esquina de forma diferente y hacerlas más redondas o más cuadradas.
  • Sombreado undefined: agrega sombras al botón para obtener un efecto 3D genial. Puedes establecer el tamaño, la visibilidad, el ángulo y más para aumentar su impacto.
  • Texto undefined: personaliza el texto del botón con ajustes como la fuente, el tamaño y el espaciado. También puedes agregar formatos como negrita y cursiva, y elegir el color.
Nota:
Las opciones de personalización disponibles dependen de lo siguiente:
  • El diseño preestablecido que escoges.
  • El estado para el que eliges diseñar (normal o efecto cursor).
El panel de diseño del icono de cierre. El cursor pasa sobre la pestaña Texto, que está abierta.

Personalizar el icono X

Si has habilitado un icono X (cerrar la ventana interactiva), ajusta su aspecto para que se adapte a la estética de la ventana interactiva y la superposición. Elige entre una variedad de diseños y personaliza el color, la visibilidad y los bordes.

Para personalizar el icono X:

  1. Abre la ventana interactiva correspondiente desde el panel Menús y páginas.
  2. Haz clic en el icono Cerrar ventana interactiva (X).
  3. Haz clic en el icono Diseño .
  4. Elige cómo quieres personalizar el icono X:
    • Seleccionar un nuevo diseño: haz clic en un preajuste del panel para establecer un nuevo diseño para el icono.
    • Personalizar el icono: haz clic en Personalizar y edita el icono como desees:
      • Rellenos de fondo: selecciona el color del icono en el selector de color y usa el control deslizante para hacerlo más o menos visible.
      • Bordes: elige un color para los bordes del icono y establece su ancho (en píxeles).
El panel de diseño del icono X. El cursor pasa sobre el control deslizante de ancho de los bordes.

¿Te ha sido útil?

|

En este artículo

  • Ajustar el estilo de la ventana interactiva
  • Cambiar la superposición de la ventana interactiva
  • Configurar el fondo de la ventana interactiva
  • Personalizar el botón Cerrar de la ventana interactiva
  • Personalizar el icono X