¿Quieres cambiar de imagen con el clic de un botón con el creador de página Elementor ? En este nuevo tutorial, le mostraremos cómo hacerlo.

Si no tienes idea de lo que queremos hablarte hoy, te invitamos a ver el siguiente video:

Entonces volvamos a por qué estamos aquí.

Lea también: Cómo cambiar una imagen al pasar el cursor sobre el texto con Elementor

Para completar este tutorial, necesitará la versión Pro de Elementor, ya que usaremos un código CSS personalizado que solo es compatible con esta versión deElementor.

Vamos a crear una sección con 2 columnas, luego en el panel lateral, vamos a definir el hauteur en Altura mínimay luego Altura mínima hagamos clic en VH y coloque el control deslizante en 100.

Arrastremos el widget Imagen a la columna izquierda e insertemos una imagen de nuestra biblioteca.

En la columna de la derecha, insertemos un Widget de título titulado Elige lo mejor. en la pestaña Estilo hagamos clic en tipografía y modificar el Altura de línea en 1.

Ver tambien Cómo cambiar una imagenge al pasar el cursor sobre el texto con Elementor

Agreguemos debajo del widget Título, un Widget de editor de texto.

Encima del widget Título, coloquemos un widget separador en su pestaña. Contenidovamos a agarrar 270 por ancho. Hagamos clic en Texto para Agregar elemento, luego ingrese tendencia como texto. en la pestaña Estilo, modifique la Grasa y el hueco en 2.

Descubre también: Cómo mostrar texto sobre una imagen con Elementor

En la sección Texto, haga clic en tipografía, vamos a cambiar la fuente, el Tamaño español en 18, la grasa en 600.

Debajo del widget Editor contenido, presentemos una Sección interna, elimine una de las columnas de la Sección Interna y suelte en esta última un botón-widget

Modifiquemos el botón yendo al panel lateral y en la pestaña Contenido, haga clic en biblioteca de iconos en icono e inserte el icono Cesta de la compra, también vamos a borrar el contenido del botón en textos

vamos a la pestaña Estilo del botón y en Radio del borde, haga clic en % y apoderarse 50 para todos los radios de bordillo y en Márgenes internosvamos a agarrar 20.

Personalicemos el color del botón cambiando el color de este último haciendo clic en Clásico para Tipo de fondo y Cambiemos el color de acuerdo con el color de resaltado en la imagen.

Luego haga clic en la pestaña Avanzado de nuestro botón, luego en posicionamiento y Manga seleccionemos En línea (automático). En la sección Avanzado dePestaña Avanzadovamos a agarrar 10 para el Margen derecho.

Dupliquemos este botón 4 veces y modifiquemos los colores de estos botones.

A continuación, dupliquemos nuestro widget de imagen 4 veces y luego modifiquemos sus imágenes.

En'Lengüeta avanzadavamos a agarrar todas las imágenes en el campo Clases de CSS de cada una de nuestras imágenes.

Luego en el campo ID CSS ingrese red-image para la imagen resaltada en rojo, green-image para la imagen resaltada en verde, brown-image para la imagen resaltada en marrón, y así sucesivamente.

Seleccionemos nuestro Sección y en elPestaña Avanzado, en el campo Personalizado CSS copia y pega el siguiente fragmento de código:

.all-images{
    display: none;
}
#red-image{
    display: block;
}

(Si no tiene esta sección, entonces no tiene la versión Pro, si desea continuar, debe actualizar su versión)

A continuación, coloquemos un widget HTML en nuestra página, copie y pegue el siguiente fragmento de código en la sección Código HTML:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
    $('[data-showme]').on('click', function(){
        var showme = $(this).attr('data-showme')
        
        $('.all-images').hide()
        $('#' + showme).show()
    })
})
</script>

Seleccionemos el primer botón, en el campo Atributos personalizados de la Sección de atributos, copie y pegue el siguiente fragmento de código:

data-showme|IMAGE-ID-NAME

Modifiquemos la parte IMAGEN-ID-NOMBRE por las ID de sus botones, estas son las ID de imagen roja, imagen verde y imagen azul, y así sucesivamente.

Entonces, para cada botón, cambiemos el código IMAGEN-ID-NOMBRE al color del botón apropiado

Actualice su trabajo y obtenga una vista previa en el modo de escritorio, tableta y teléfono inteligente mientras prueba sus botones.

En modo smartphone puedes, por ejemplo, alinear los botones en el centro, reducir los márgenes y mucho más.

Ahí tienes, acabas de hacer esta tarea fácilmente.

¡Obtenga Elementor Pro ahora!

Conclusión

Listo ! Eso es todo por este artículo que le muestra cómo cambiar una imagen al pasar el cursor sobre un texto. 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.

...