Muestra vídeos, imágenes y audio en tu sitio web para captar la atención de los visitantes. Usa estos widgets para mostrar tus productos y aumentar la interacción en tus páginas.
El widget Media Slider ofrece diapositivas de vídeo, imagen y texto con diversos diseños. Úselo para testimonios, preguntas frecuentes, presentaciones de productos o secciones de servicio y para ofrecer contenido interactivo a los visitantes.
Antes de empezar
- El sonido está deshabilitado para los videos utilizados como fondos de diapositivas.
- La reproducción automática de videos depende de las restricciones del navegador y los ajustes del dispositivo, como el modo de ahorro de energía. Para obtener ayuda, consulta Solución de problemas del widget de video.
- Se puede incluir un máximo de 25 diapositivas.
- Los archivos admitidos incluyen
.svg, .png, .jpg, .gify todos los formatos de video.
- Haga clic en el widget y seleccione la pestaña Contenido.
- Para agregar una nueva diapositiva, haga clic en Agregar nueva diapositiva.
- Seleccione + Haga clic para agregar medios para abrir la Biblioteca de medios.
- Para agregar nuevas imágenes a su biblioteca multimedia, en la pestaña Imágenes:
- Haga clic en + Subir imágenes para añadir imágenes desde su ordenador. Puede seleccionar varias imágenes.
- Haga clic en Importar imágenes para importar imágenes desde una fuente externa:
- Seleccione "Desde un sitio", ingrese al sitio web correspondiente y haga clic en "Mostrar imágenes". Seleccione las imágenes relevantes y haga clic en "Importar imágenes".
- Seleccione Entre las plataformas en línea, conéctese a la plataforma correspondiente y siga las instrucciones en pantalla.
- Haga clic en Listo.
-
Para agregar nuevos videos a su biblioteca multimedia, en la pestaña Videos:
Haga clic en + Cargar videos, conecte la plataforma correspondiente y siga las instrucciones en pantalla.
- Haga clic en Listo.
Acciones adicionales:
- Para duplicar una diapositiva, pase el cursor sobre ella y haga clic en
. - Para reemplazar una diapositiva, seleccione la diapositiva y haga clic en
junto a "Reemplazar". - Para eliminar una diapositiva, pase el cursor sobre ella y haga clic en
, o seleccione la diapositiva y haga clic en junto a "Reemplazar". - Para posicionar la diapositiva, seleccione la posición direccional correspondiente.
- Para agregar texto alternativo, ingrese el texto requerido en "Etiqueta de texto alternativo de la imagen" o haga clic en el icono
para usar el Asistente de IA. Este genera texto alternativo en el idioma actual de la página. - Para agregar texto en la diapositiva, ingrese el texto requerido en el campo provisto.
- Para agregar una descripción de diapositiva, ingrese el texto requerido en el campo provisto.
- Para mostrar u ocultar un botón en la diapositiva, haga clic en
. Introduzca el texto del botón en el campo provisto. - Para agregar un enlace en el botón, haga clic en Agregar un enlace y seleccione la opción correspondiente.
- Para eliminar todas las diapositivas, haga clic en Eliminar todo.
Inserta imágenes para decorar tu sitio web o mostrar productos. También puedes configurar imágenes para que actúen como botones que enlazan a otras páginas, archivos o ventanas emergentes.
Antes de empezar
- Los sitios admiten hasta 15.000 archivos multimedia.
- El límite de tamaño por archivo es de 50 MB.
- Evite espacios o caracteres especiales en los nombres de archivos.
- Garantiza que tienes permiso para utilizar fotografías de terceros.
- Tipos de archivos admitidos:
png, jpg, jpeg, gif, svg, webp, ico.
- Haz clic en el widget y selecciona la pestaña Contenido .
-
En la ventana emergente "Vista rápida del selector de imágenes", busca y selecciona imágenes, texturas o GIF. También puedes hacer clic en + Subir para seleccionar fotos de tus archivos personales. Puedes seleccionar varias imágenes.
Haz clic en Vista completa para ver más opciones de elección de imágenes.
- Para eliminar el fondo de la imagen, haga clic en
junto a "Reemplazar". - Para agregar texto alternativo, ingrese el texto requerido en "Etiqueta de texto alternativo de la imagen" o haga clic en para usar el Asistente de IA, este genera texto alternativo en el idioma actual de la página.
- Para reemplazar una imagen, seleccione la diapositiva y haga clic en junto a "Reemplazar".
- Para agregar una información sobre herramientas a la imagen al pasar el mouse sobre ella, ingrese el texto requerido en el campo "Información sobre herramientas".
- Para agregar un título a la imagen al pasar el mouse sobre ella, ingrese el texto requerido en el campo "Título".
- Para reemplazar la imagen al pasar el mouse, haga clic en + Imagen y seleccione la imagen requerida.
- Haga clic en junto a "Reemplazar" para editar la imagen alternativa. Más información sobre el editor de imágenes. Haga clic en Guardar.
- Haga clic en junto a "Reemplazar" para eliminar la imagen alternativa.
- Haga clic en
- Para eliminar el fondo de la imagen, haga clic en
- Para agregar texto alternativo, ingrese el texto requerido en "Etiqueta de texto alternativo de la imagen" o haga clic en Para usar el Asistente de IA, este genera texto alternativo en el idioma actual de la página.
Haga clic en el widget y seleccione la pestaña Diseño para cambiar el diseño de la imagen, las animaciones, las opciones de visualización y el estilo.
Nota:
Deshabilitar la optimización de imágenes podría afectar la velocidad y/o el rendimiento de la página.
Usa el control deslizante de imágenes para mostrar un carrusel de imágenes en tu sitio web para testimonios, preguntas frecuentes, presentaciones de productos o secciones de servicio. Esto proporciona una prueba social y fomenta la confianza con tus clientes.
Antes de empezar
Los archivos admitidos incluyen .svg, .png, .jpg, .gif y todos los formatos de vídeo.
- Haz clic en el widget y selecciona la pestaña Contenido.
- Para agregar una nueva imagen, haz clic en Agregar imagen.
- Haz clic en + Subir imágenes para añadir imágenes desde tu ordenador. Puedes seleccionar varias imágenes.
- Haz clic en Importar imágenes para importar imágenes desde una fuente externa:
- Selecciona "Desde un sitio", ingresa al sitio web correspondiente y haz clic en "Mostrar imágenes". Selecciona las imágenes relevantes y haz clic en "Importar imágenes".
- Selecciona Desde las plataformas en línea, conéctate a la plataforma correspondiente y sigue las instrucciones en pantalla.
- Selecciona las imágenes relevantes y haz clic en Listo.
- Haz clic en la X de una imagen para eliminarla. También puedes hacer clic en "Eliminar todas las imágenes" para eliminarlas todas.
Ajustes de imagen
Haz clic en una imagen existente para abrir la "Ajustes de imagen", donde encontrarás las siguientes ajustes de imagen adicionales:
- Para reemplazar una imagen, haga clic en junto a "Reemplazar".
- Para eliminar una imagen, haga clic en junto a "Reemplazar".
- Para posicionar la diapositiva, seleccione la posición direccional correspondiente.
- Para agregar un enlace al botón, haga clic en Agregar un enlace y seleccione la opción correspondiente.
- Para mostrar u ocultar el título de una imagen, haga clic en . Introduzca el texto requerido en el campo "Título del control deslizante".
- Para mostrar u ocultar el título de una imagen, haga clic en . Ingrese el texto requerido en el campo "Título del control deslizante".
- Para mostrar u ocultar un botón en la diapositiva, haga clic en . Introduzca el texto del botón en el campo provisto.
- Para agregar texto alternativo, ingrese el texto requerido en "Etiqueta de texto alternativo de la imagen" o haga clic en el icono para usar el Asistente de IA, el cual genera texto alternativo en el idioma actual de la página.
Añade varias imágenes a la vez con el widget de Galería de fotos. Los visitantes pueden abrir imágenes en una galería de lightbox o hacer clic en ellas para acceder a enlaces, anclas o direcciones de correo electrónico.
- Haz clic en el widget y selecciona la pestaña Contenido.
- Haz clic en + Imagen para agregar una nueva imagen.
-
En la ventana emergente "Vista rápida del selector de imágenes", busca y selecciona imágenes, texturas o GIF. También puedes hacer clic en + Subir para seleccionar fotos de tus archivos personales. Puedes seleccionar varias imágenes.
Haz clic en Vista completa para ver más opciones de elección de imágenes.
- Para reemplazar una imagen, haga clic en junto a "Reemplazar".
- Para eliminar una imagen, haga clic en junto a "Reemplazar".
- Para posicionar la diapositiva, seleccione la posición direccional correspondiente.
- Para agregar un enlace al botón, haga clic en Agregar un enlace y seleccione la opción correspondiente.
- Para mostrar u ocultar el título de una imagen, haga clic en . Introduzca el texto requerido en el campo "Título".
- Para mostrar u ocultar la descripción de una imagen, haga clic en . Introduzca el texto requerido en el campo "Descripción".
- Para mostrar u ocultar un botón en la diapositiva, haga clic en . Introduzca el texto del botón en el campo provisto.
- Para agregar texto alternativo, ingrese el texto requerido en "Etiqueta de texto alternativo de la imagen" o haga clic en el icono para usar el Asistente de IA, que genera texto alternativo en el idioma actual de la página.
Agregar un feed de Instagram
Los usuarios con una cuenta de Instagram privada o pública (no cuentas comerciales) pueden agregar un feed de Instagram al widget de la galería de fotos.
Seleccione de una biblioteca de más de 1000 íconos listos para usar o cargue su propio archivo SVG.
Antes de empezar
- Los archivos SVG se pueden redimensionar sin perder resolución.
- Para mantener la velocidad del sitio, simplifique el código SVG complejo utilizando una herramienta de optimización o convierta vectores con alto nivel de detalle en formatos aplanados como .png, .jpeg, etc.
- Haga clic en el widget y seleccione la pestaña Contenido.
- Haga clic en Cambiar icono para abrir la biblioteca de iconos.
- Busque y seleccione un ícono. También puede hacer clic en + Subir para añadir archivos desde una plataforma externa.
- Para vincular el icono, haga clic en Vincular icono y seleccione la opción correspondiente.
- Escriba el texto alternativo para el ícono o haga clic Usar el Asistente de IA para generar texto alternativo. Este texto permite que los motores de búsqueda reconozcan el contenido del ícono. Use texto que describa claramente el ícono.
Haga clic en el widget y seleccione la pestaña Diseño para cambiar el diseño del icono, las animaciones, las opciones de visualización y el estilo de los botones.
Active Flotante para establecer el ícono en una posición fija en la pantalla.
Sube videos o integra contenido de YouTube, Vimeo o Dailymotion. Los videos son una forma eficaz de comunicar el valor de tu negocio y aumentar las conversiones.
Antes de empezar
- Los archivos subidos son públicos. No subas información confidencial.
- Subir un video no afecta la velocidad del sitio.
- Los sitios admiten hasta 100 archivos de vídeo.
- El límite de tamaño por archivo es de 200 MB.
- Haz clic en el widget y selecciona la pestaña Contenido.
- Haz clic en "Seleccionar video" para seleccionar un video de la videoteca. Haz clic en "Subir" para añadir archivos de una plataforma externa. También puedes pegar una URL de YouTube, Vimeo o Dailymotion.
- Activa Ocultar videos relacionados para deshabilitar los videos relacionados recomendados de la plataforma que has utilizado.
- Para eliminar un video, haz clic en Eliminar.
Haz clic en el widget y selecciona la pestaña Diseño para personalizar la apariencia del video.
Usa el widget Forma para resaltar mensajes, crear botones personalizados o anunciar precios de oferta. Puedes añadir imágenes, texto y sombras a cualquier forma.
- Haz clic en el widget y selecciona la pestaña Contenido.
- Selecciona tu forma preferida.
- Haz clic en "Agregar enlace" para hacerlo procesable. Selecciona la opción correspondiente.
- Para mostrar u ocultar un título, haz clic en Introduce el texto requerido en el campo "Título".
- Para mostrar u ocultar una descripción, haz clic en Introduce el texto requerido en el campo "Descripción".
- Para mostrar u ocultar una información sobre herramientas en la diapositiva, haz clic en . Introduce el texto de la información sobre herramientas en el campo provisto.
- Para agregar texto alternativo, ingresa el texto requerido en "Etiqueta de texto alternativo de la imagen" o haz clic en el icono Para usar el Asistente de IA, este genera texto alternativo en el idioma actual de la página.
Haga clic en el widget y seleccione la pestaña Diseño para personalizar la apariencia del ícono.
- Haga clic en Espaciado para utilizar márgenes negativos si desea superponer otros widgets.
- Active Flotante para establecer la forma en una posición fija en la pantalla.
Para crear una forma en el encabezado:
- Cree una fila con dos columnas.
- Elija una forma amorfa y agréguela a la columna del lado derecho.
- Haga la forma tan grande como la columna.
- En el Editor de diseño, seleccione el diseño con la imagen de fondo y reemplace la imagen con la que desee.
Para usar una forma como botón agregando un enlace y un efecto de desplazamiento:
- Seleccione la forma del círculo y agregue un título y una descripción.
- Seleccione colores para la forma y el texto.
- Para colocar la forma en la esquina de una imagen, use un margen negativo en el lado izquierdo de la forma (espaciado > margen > -50 px margen izquierdo y superior).
Para utilizar formas para resaltar un plan o servicio específico:
- Elija la forma de la bandera y agregue un título y una breve descripción.
- Desactive la opción Mantener proporción para poder ajustar solo el ancho.
- Seleccione colores para la forma y el texto.
- Para posicionar la forma de manera que se superponga a la parte superior de una columna, use un margen superior negativo (espaciado > margen > margen superior de -30 px).
O use una forma para crear un botón de desplazamiento:
- Elija la forma de diamante y agregue un título.
- Desactive la opción Mantener proporción para poder ajustar solo el ancho.
- Seleccione colores para la forma y el texto.
- Para colocar la forma encima de una imagen, utilice un margen superior negativo (espaciado > margen > margen superior de -50 px).
Muestra una atractiva comparación visual con el widget Antes y Después. Incluye un control deslizante que permite a los visitantes navegar entre dos imágenes.
- Haga clic en el widget y seleccione la pestaña Contenido .
- Imagen anterior: Haga clic en + Imagen para seleccionar su "Imagen anterior".
- Imagen posterior: haga clic en + Imagen para seleccionar su "Imagen posterior".
- Seleccione una imagen para abrir sus ajustes:
- Para reemplazar una imagen, haga clic en junto a "Reemplazar".
- Para eliminar una imagen, haga clic en junto a "Reemplazar".
- Para darle una etiqueta a la imagen, ingrese el texto requerido en el campo "Etiqueta".
- Para agregar texto alternativo, ingrese el texto requerido en "Etiqueta de texto alternativo de la imagen" o haga clic en el icono para usar el Asistente de IA, este genera texto alternativo en el idioma actual de la página.
- Para reemplazar una imagen, haga clic en
Haga clic en el widget y seleccione la pestaña Diseño para personalizar la apariencia del widget:
- Haga clic en Imágenes y control deslizante para personalizar la apariencia del control deslizante.
- Utilice la sección Etiquetas para diseñar el texto para diferentes dispositivos.
Comparta podcasts, canciones o tutoriales insertando archivos de SoundCloud o Mixcloud. Copie el enlace de la fuente y añádalo a su sitio web mediante el widget.
- Haga clic en el widget y seleccione la pestaña Editar.
- Haga clic en "Seleccionar audio" para elegir un archivo de audio. Haga clic en "Subir audio" para añadir un archivo de audio de una plataforma externa. También puede pegar la URL de SoundCloud o Mixcloud en el campo.
Haga clic en el widget y seleccione la pestaña Diseño para personalizar la apariencia del widget.
Las opciones de diseño dependen de la plataforma utilizada. Para mantener la coherencia en los diseños, utilice la misma plataforma (SoundCloud o Mixcloud) para todos los archivos de audio de su sitio web.
Añade animaciones de calidad vectorial a tu sitio web con el widget de animación Lottie. Puedes explorar LottieFiles para encontrar animaciones existentes o subir tus propios archivos JSON.
- Haz clic en el widget y selecciona la pestaña Contenido .
- Pega la URL de la animación de Lottie.
- Selecciona Animación en bucle o Animar al hacer clic .
- Para agregar un enlace en el botón, haz clic en Agregar un enlace y selecciona la opción correspondiente.
Nota:
Si utilizas un LottieFile gratuito, debes incluir las credenciales del creador según el acuerdo de licencia.
Haz clic en el widget y selecciona la pestaña Diseño para cambiar el tamaño de la animación o cerrar sus proporciones.