Añade el widget Antes/Después
Utiliza el widget Antes/Después para mostrar las actualizaciones recientes que hayas introducido. Esto resulta especialmente útil en sectores como la belleza, las remodelaciones, el diseño u otras industrias de servicios, ya que ayuda a los clientes potenciales a ver los resultados tangibles de tu experiencia.
En este artículo, hablaremos sobre cómo añadir y personalizar el widget Antes/Después.
Añade el widget
En el creador de sitios web, elige la página a la que quieres añadir el widget. Haz clic en Añadir widget y selecciona Antes/Después.
Añade imágenes
En los ajustes del widget, sube las imágenes de Antes y Después. Decide cómo añadir tus imágenes:
| Administrador de archivos | Abre el administrador de archivos donde puedes seleccionar una imagen existente o subir una nueva. |
| Administrador de stock | Abre una ventana modal donde puedes elegir una imagen de las fotos de stock gratuitas de Unsplash.
Puedes buscar por el nombre de la imagen, seleccionar una imagen de la lista y hacer clic en Seleccionar en la parte inferior para añadirla a tu página. |
Puedes personalizar y gestionar las imágenes subidas. Esto es lo que puedes hacer con tu imagen:
| Editar | Haz clic en el ícono de la imagen.
Más información: Cómo editar imágenes con el creador de sitios web. |
| Subir nueva | Haz clic en el ícono de subir. |
| Eliminar | Haz clic en el ícono de la papelera. |
Personaliza el widget
Para asegurarte de que el widget se adapte al estilo de tu sitio web, puedes personalizar su apariencia.
Una vez que hayas añadido tus imágenes, aparecerán los siguientes ajustes:
| Dirección y color del controlador | Elige la dirección del controlador para comparar las imágenes: Vertical (izquierda/derecha) u Horizontal (arriba/abajo)
También puedes elegir el color del controlador y la línea que divide las imágenes. |
| Posición inicial | Establece qué parte de cada imagen será visible cuando se cargue la página. Por ejemplo, 50% mostrará partes iguales de las imágenes “Antes” y “Después”.
Para ajustar esto, utiliza el deslizador o introduce un porcentaje. |
| Ancho | Establece el ancho del widget dentro del bloque (en píxeles). |
| Alineación del contenido | Establece la alineación del widget: izquierda, centro o derecha. |
Para guardar tus cambios, haz clic en Publicar.
Copia el ID del elemento
Cada imagen tiene un ID que la distingue en la página. Con él, puede añadir estilos y scripts, mostrar pop-ups y rastrear eventos para dicho elemento.
Para copiar un ID, haz clic en él. Si deseas editar un ID, haz clic en el ícono del lápiz.
Más información: ID de bloques y widgets.
Última actualización: 24.07.2025
o