Para cierto tipo de negocio, como un servicio de edición de fotos, agregar una comparación de imágenes puede ser una herramienta útil para describir su servicio. Puede agregar la comparación de imágenes a la página de inicio, la página de destino o cualquier página donde hable sobre el servicio que ofrece.
Elementor de hecho, no ofrece ningún widget o funcionalidad para agregar comparación de imágenes, pero puede obtenerlo mediante un complemento. Hay módulos adicionales Elementor que ofrecen un widget para agregar una comparación de imágenes. Tres de los cuales son: Complementos Esenciales, Complementos felices, y JetElements.
En este artículo le mostraremos cómo agregar comparación de imágenes en Elementor utilizando JetElements.
JetElements en sí mismo es un complemento premium para Elementor desarrollado por Crocoblock. Es parte de la familia JetPlugins. El complemento viene con un widget llamado Imágenes de comparación que puede usar para agregar una comparación de imágenes a la página de Elementor.
Cómo agregar una comparación de imágenes en Elementor
Asegúrese de tener el complemento JetElements instalado y activado antes de comenzar. Si eres nuevo en Elementor, puedes leer nuestro artículo anterior para aprender cómo usar Elementor.
Agregaremos directamente el widget Imágenes de comparación en este articulo
Antes de comenzar, puede preparar dos imágenes para comparar. Por ejemplo, puede preparar una imagen de antes y una imagen de después. Una vez que esté listo, simplemente arrastre el widget Imágenes de comparación en el cuadro de edición de Elementor.
De forma predeterminada, el widget de comparación de imágenes de JetElements crea dos comparaciones de imágenes. Si solo necesita crear una comparación de imágenes (dos imágenes para comparar), puede eliminar una de las comparaciones de imágenes existentes.
Lea también: Elementor: Cómo agregar la animación de Lottie
Para agregar la imagen de antes y después, abra la comparación de imágenes existente (haciendo clic en ella) para editar la contenido. Simplemente seleccione la imagen anterior en el antes de la foto sección y seleccione la imagen después en la despues de la foto sección. Como puede ver, también puede anular las etiquetas de cada sección.
Una vez completada la selección de imágenes, puede abrir el bloque Ajustes para establecer la posición inicial del separador. Si desea agregar más de una comparación de imágenes, puede establecer la configuración del carrusel.
Luego puede cambiar el estilo de su comparación de imágenes cambiando a la pestaña Estilo. Puede abrir cinco bloques de ajuste para diseñar su comparación de imágenes. Pero si solo necesita agregar una comparación de imágenes, solo necesita abrir los primeros tres bloques.
- general
Puede abrir este bloque para configurar el relleno, la sombra del cuadro, el tipo de borde y el radio del borde.
- Label
Puede abrir este bloque para diseñar etiquetas de comparación (la etiqueta "antes" y "después"). Puede configurar cosas como la alineación horizontal, la alineación vertical, el color del texto, el color de fondo, la tipografía (familia de fuentes, estilo de fuente, tamaño de fuente), etc.
- Handle
Puede abrir este bloque para diseñar el mango. Puede configurar cosas como la alineación del controlador, el ancho del control, la altura del control, el color del controlador (ya sea en estado normal o al pasar el mouse), etc.
Si agrega más de una comparación de imágenes, también puede abrir los bloques Flechas de carrusel et Puntos de carrusel para diseñar flechas y puntos de navegación.
Eso es. Puede hacer clic en el botón PUBLICAR / ACTUALIZACIÓN para publicar /editar su página una vez que haya terminado de editarla.
¡Consigue Elementor Pro ahora!
Conclusión
Listo ! Eso es todo por este artículo que le muestra cómo agregar comparación de imágenes en Elementor. Si tiene alguna inquietud sobre cómo llegar, háganoslo saber dentro de comentarios.
Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
