Cómo cambiar el estilo de varios elementos al pasar el mouse o hacer clic en Divi

Eventualmente, en el mundo del diseño web, los codificadores y no codificadores buscarán agregar personalizaciones y funcionalidades más avanzadas a sus sitios web Divi. Por lo general, esto implica el uso de Javascript / JQuery para cambiar el estilo de los elementos de la página por diferentes razones. Es posible que desee que aparezca un formulario de contacto al hacer clic en un botón. O puede que desee cambiar una imagen al pasar el cursor sobre un enlace.

En este tutorial, le mostraremos cómo cambiar el estilo de varios elementos al pasar el mouse o hacer clic en Divi. Primero, aprovecharemos las opciones de diseño integradas de Divi para diseñar un diseño de sección. Luego, presentaremos un fragmento simple de jQuery que puede usar en combinación con CSS personalizado para ajustar el estilo de cualquier elemento en esa sección al pasar el mouse o hacer clic en un botón. Esto puede parecer complicado (especialmente para los principiantes) pero puede que se sorprenda de lo simple que es lograrlo.

¡Empecemos!

Vistazo

Aquí hay un vistazo rápido al diseño que crearemos en este tutorial.

Aquí está el diseño de diseño de la sección que se cambia al pasar el cursor sobre el botón.

Y aquí está el mismo diseño de diseño de sección que se cambia al hacer clic en el botón. Observe que el texto del botón también cambia al hacer clic.

Descarga el diseño GRATIS

Para poner sus manos sobre los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.

Haga clic en el botón Importar.

En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.

Luego haga clic en el botón Importar.

Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

1. Si aún no lo ha hecho, instale y active Divi Theme.
2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
3. Elija la opción "Construir desde cero".

Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.

Parte 1: Diseñar el diseño de la sección

Para comenzar, cree una nueva fila de dos columnas.

Configuración de la sección

Antes de agregar módulos, abra la configuración de la sección y actualice lo siguiente:

• Color de fondo: #ffffff

• Estilo de divisor superior: ver captura de pantalla
• Color del divisor superior: #ffffff
• Altura del divisor superior: 5vw

• Estilo del divisor inferior: igual
• Color del divisor inferior: #ffffff
• Altura del divisor inferior: 5vw

• Acolchado: 6vw superior, 6vw inferior

Antes de la imagen

En la columna izquierda de la fila de dos columnas, agregue un nuevo módulo de imagen.

Luego cargue la imagen que desea exhibir. Para este tutorial, usamos una imagen del paquete de diseño de gestión de aprendizaje (LMS) que tiene aproximadamente 800 px por 550 px.

En la pestaña de diseño, actualice la alineación y habilite la opción forzar ancho completo.

• Alineación de la imagen: centro
• Forzar ancho completo: SÍ

Después de la imagen

A continuación, crearemos otra imagen que mostraremos cuando pasemos el mouse / hagamos clic en un botón.

Para crear la imagen, duplique el módulo de imagen anterior.

Luego sube una nueva imagen. La imagen debe tener el mismo tamaño que la otra imagen, ya que reemplazará a la otra imagen al pasar el mouse / hacer clic.

Para esta imagen, le vamos a dar una posición absoluta. Esto hará que la imagen se ubique directamente encima de la otra imagen sin ocupar espacio real en la página.

• Posición: Absoluto

En la pestaña Diseño, cambie la opacidad en las opciones de filtro para que la imagen sea completamente invisible.

• Opacidad: 0%

Agregar encabezado de texto

En la columna de la derecha, agregue un nuevo módulo de texto.

Luego pegue el siguiente HTML en el área de contenido del cuerpo:

<h3><span>Design</span> Anything You Want <span>with Divi</span></h3>

Observe que algunas de las palabras del texto están envueltas con etiquetas de extensión. Esto es para que podamos orientar y diseñar esas palabras más adelante con un CSS personalizado.

En la pestaña de diseño, actualice las opciones de estilo H3 de la siguiente manera:

• Fuente del encabezado 3: Montserrat
• Peso de la fuente del encabezado 3: Ultra Bold
• Estilo de fuente del título 3: TT
• Tamaño del texto del encabezado 3: 65 px (escritorio y tableta), 40 px (teléfono)
• Encabezado 3 espaciado de letras: 0.8em
• Altura de la línea del título 3: 1.3em

Eso se encarga del diseño de la sección que contiene los elementos de diseño que cambiaremos al pasar el mouse / hacer clic en un botón. En la siguiente sección, agregaremos el botón que usaremos para iniciar los cambios de estilo.

Crear sección para botón

Crea una nueva sección regular debajo de la sección actual.

Luego agregue una fila de una columna a la sección.

Agregar botón

En la columna, agregue un nuevo módulo de botones.

Cambie el texto del botón para que lea "Ver después".

Vaya a la pestaña de diseño y actualice el diseño del botón de la siguiente manera:

• Usar estilos personalizados para el botón: SÍ
• Tamaño del texto del botón: 16px
• Color del texto del botón: #ffffff
• Fondo del botón: # 4b4baf
• Fondo del botón (desplazamiento): # 67ddc1
• Ancho del borde del botón: 0px
• Espacio entre letras del botón: 4px
• Fuente del botón: Montserrat
• Peso de la fuente del botón: Semi negrita
• Estilo de fuente del botón: TT

Parte 2: Agregar clases CSS a los elementos

Ahora que nuestro diseño está en su lugar, vamos a lograr el resto de los cambios de diseño utilizando código personalizado (CSS y JQuery). Pero antes de comenzar a agregar nuestro código personalizado, necesitamos agregar clases CSS a todos los elementos que deseamos cambiar al pasar el mouse / hacer clic en el botón.

Agregar clase CSS a la sección

Para agregar una clase CSS a la sección, abra la configuración de la sección y haga clic en la pestaña avanzada. Luego ingrese la siguiente clase CSS:

• Clase CSS: et-change-style_section

Agregar clase CSS a las imágenes

A continuación, abra la configuración de la primera imagen en la columna de la izquierda y agregue la siguiente clase CSS:

• Clase CSS: et-before-image

Esta será la imagen que se muestra "antes" del botón de desplazamiento / clic.

Usando las capas modales, abra la configuración de la segunda imagen (la que está oculta con el filtro de opacidad) y agregue la siguiente clase CSS:

• Clase CSS: et-after-image

Esta será la imagen que se muestra "después" del botón de desplazamiento / clic.

Agregar clase CSS al texto

A continuación, agregue la siguiente clase CSS al módulo de texto en la columna de la derecha:

• Clase CSS: et-style-text

Agregar clase CSS al botón

Por último, agregue una clase CSS personalizada en el botón en la sección inferior de la siguiente manera:

• Clase CSS: et-toggle-button

Necesitamos esta clase para apuntar al botón para la funcionalidad de desplazamiento / clic en el código más adelante.

Parte 3: agregue código personalizado para cambiar estilos al pasar el mouse o hacer clic

Ahora que todas nuestras clases CSS están en su lugar, ahora podemos agregar el código necesario para cambiar el estilo de todos esos elementos al pasar el mouse / hacer clic en el botón.

Agregar módulo de código

Para agregar el código, agregue un módulo de código debajo del botón en la sección inferior.

Pegar código jQuery

Luego pegue el siguiente archivo JQuery. Asegúrese de envolver el código en etiquetas de script porque estamos agregando el código a un documento HTML (no a un archivo JS).

(function($) {
    $(document).ready(function(){
        $('.et-toggle-button').hover(function(){
            $('.et-change-style_section').toggleClass('et-change-style_active');
            var $this = $(this);
            $this.toggleClass('et-toggle-button_active');
        });
    });
})( jQuery );

Si echas un vistazo al código, deberías reconocer las clases CSS que agregamos al botón y a la sección.

La clase de botón (".et-toggle-button") se está utilizando para apuntar al elemento que iniciará una función al pasar el mouse.

Al pasar el mouse, la función encontrará el elemento con la clase de sección ".et-change-style_section" y alternará / agregará una nueva clase (".et-change-style-active") cuando el cursor esté sobre el botón.

El botón también está siendo apuntado (a través de "$ this") para alternar una nueva clase (".et-toggle-button_active") en el estado de desplazamiento.

La clave para cambiar los estilos de estos elementos al pasar el mouse es agregar / alternar estas nuevas clases CSS adicionales a la sección y al botón.

Por ejemplo, una vez que la sección con la clase ".et-change-style_section" recibe esa clase adicional (".et-change-style_active"), podemos usar CSS personalizado para cambiar el estilo de la sección que se le dio originalmente a través de las opciones de Divi incorporadas.

Cambiar el estilo de los elementos con CSS personalizado

Abra el módulo de código y pegue el siguiente CSS personalizado sobre el script JQuery, asegurándose de envolverlo en las etiquetas de estilo necesarias.

 .et_pb_section.et-change-style_section.et-change-style_active {
   background-color:#484db0 !important;
 }

Observe que la clase de sección inicial se combina con la nueva clase como selector. El CSS que sigue solo se aplicará a la sección cuando se adjunte esa nueva clase. Cuando no está adjunto, se mostrará el diseño original. En este ejemplo, el color de fondo de la sección cambiará al pasar el cursor sobre el botón.

A continuación, pegue el siguiente CSS adicional dentro de las etiquetas de estilo.

  .et-change-style_active .et-after-image {
    filter: opacity(100%);
  }
  .et-change-style_active .et-before-image {
    filter: opacity(0%);
  }  

Debido a que la sección principal recibe una clase al pasar el mouse, puede apuntar a los elementos secundarios de la sección (como las imágenes) usando esa misma clase CSS. Pero debido a que es una clase en un contenedor / sección principal, la clase CSS debe preceder a la clase del elemento que está buscando cambiar. En este ejemplo, la clase CSS (".et-change-style_active") dada a la sección principal viene antes que la clase dada las imágenes secundarias (".et-after-image" y ".et-before-image").

El CSS de la imagen posterior mostrará la imagen al desplazar el botón. Y el CSS de la imagen anterior ocultará la imagen al desplazar el botón. El resultado es que la imagen inicial se cambia a una nueva al desplazar el botón.

Luego pegue el resto del CSS dentro de las etiquetas de estilo:

  .et-change-style_active .et-style-text h3, .et-change-style_active .et-style-text p {
    color: #ffffff;
  }
  .et-change-style_active .et-style-text h3 span {
    color: #67ddc1;
  }
  .et-toggle-button_active {
    transform: scale(1.1);
    background-color: #67ddc1 !important;
  }  
  .et-change-style_active, .et-before-image, .et-after-image, .et-style-text h3  {
    transition: all 0.3s;
  }

Estos fragmentos de CSS utilizan el mismo concepto para cambiar el estilo del elemento cuando la sección (o botón) tiene la nueva clase.

Resultado final (desplazamiento)

Una vez que se haya agregado el código, guarde los cambios y abra la página para ver el resultado. Observe cómo se cambian los elementos que apuntamos al pasar el mouse sobre el botón.

Cambiar estilos al hacer clic en lugar de desplazarse

Si desea cambiar el estilo de esos mismos elementos al hacer clic en el botón (en lugar de desplazarse), todo lo que necesita hacer es realizar algunos cambios en JQuery. La mayor parte del código permanecerá igual. La principal diferencia es que el método "hover" se reemplaza por "clic". Y hemos agregado un fragmento de código útil que cambia el texto del botón al hacer clic.

Para agregar la funcionalidad de clic, reemplace el JQuery actual con lo siguiente (nuevamente, asegúrese de que esté envuelto en las etiquetas del script):

(function($) {
    $(document).ready(function(){
        $('.et-toggle-button').click(function(e){
            e.preventDefault();
            $('.et-change-style_section').toggleClass('et-change-style_active');
            var $this = $(this);
            $this.toggleClass('et-toggle-button_active');
            if ($this.hasClass('et-toggle-button_active')){
                $this.text('See Before');
            } else {
                $this.text('See After');
            }
        });
    });
})( jQuery );

Aquí esta el resultado final.

Pensamientos finales

Ser capaz de apuntar y cambiar el estilo de varios elementos en una página al pasar el mouse o hacer clic en algo es una habilidad útil en el diseño web. Puede utilizar esta técnica para una variedad de casos de uso (antes y después, llamadas a la acción, etc.). Seguro, es útil saber un poco de CSS y JS / JQuery. Pero, como ha visto en este tutorial, ¡no necesita conocer un tono de código para obtener resultados sorprendentes!

Espero tener noticias tuyas en los comentarios.

¡Salud!