¿Quieres cambiar el estilo de varios elementos? Divi al pasar el mouse o después de hacer clic?
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.
A continuación, presentaremos un fragmento de jQuery simple que puede usar en combinación con CSS personalizado para ajustar el estilo de cualquier elemento en esta sección cuando pasa el cursor sobre un botón o hace clic en él.
Esto puede sonar complicado (especialmente para principiantes), pero te sorprenderá lo simple que es hacerlo.
Vamos a empezar!
vista
Aquí hay una breve descripción del diseño que lograremos en este tutorial.
Cambio de elementos al pasar el botón
Modificación de los elementos después de hacer clic en el botón
Comencemos creando una página con Divi Builder
Ver también: Divi: cómo crear un menú de rueda giratoria al pasar el mouse
Desde el tablero de WordPress, vaya a Páginas> Agregar nuevo para crear una nueva página.
Dale un título que tenga sentido para ti y haz clic en Utilice Divi Builder
A continuación, haga clic Empezar a construir (Construir desde cero)
Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.
Parte 1: Diseño del diseño de la sección
Para comenzar, cree una nueva fila con dos columnas.
Configuraciones de sección
Antes de agregar módulos, abra la configuración de la sección y actualice lo siguiente:
- Fondo: #ffffff
Agreguemos un separador de sección
- Divisor (superior)
- Estilo: ver captura de pantalla
- Color: #ffffff
- Altura: 5vw
- Divisor (Inferior)
- Estilo: ver captura
- Color: #ffffff
- Altura: 5vw
- Relleno (superior e inferior): 6vw
Imagen (antes de pasar el mouse)
En la columna izquierda de la fila de dos columnas, agregue un nuevo módulo de imagen.
A continuación, cargue la imagen que desea resaltar.
En la pestaña Diseño, actualice la alineación y habilite la opción Fuerza de ancho completo.
- Alineación de la imagen: centrada
- Fuerza de ancho completo: SÍ
Imagen (al pasar el mouse por encima o después de hacer clic)
A continuación, crearemos otra imagen que mostraremos cuando pasemos el mouse sobre un botón o hagamos clic en él.
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 porque reemplazará a la otra imagen al pasar el mouse o hacer clic.
Para esta imagen, le daremos una posición absoluta. Esto hará que la imagen se asiente directamente sobre la otra imagen sin ocupar espacio real en la página.
- Posición: Absoluta
En la pestaña Diseño, cambia la opacidad debajo de las opciones de filtro para que la imagen sea completamente invisible.
- Opacidad: 0%
Agregar un módulo de texto
En la columna de la derecha, agregue un nuevo módulo de texto.
Luego pegue el siguiente código HTML en el cuadro contenido del cuerpo:
<h3><span>Créer</span> Votre Blog <span>avec BlogPasCher</span></h3>
Tenga en cuenta que algunas palabras en el texto están rodeadas de etiquetas. lapso. Así es como podemos orientar y personalizar estas palabras más tarde con CSS personalizado.
En la pestaña Diseño, actualice las opciones de estilo H3 de la siguiente manera:
- Título 3:
- Fuente: Montserrat
- Grosor de fuente Grosor de fuente: ultranegrita
- Estilo: TT
- Tamaño del texto: 60 px (computadora y tableta), 40 px (teléfono)
- Espaciado entre letras: 0,06 em
- Altura de la línea: 2 cm
En la siguiente sección, agregaremos el botón que usaremos para iniciar los cambios de estilo.
Crear una sección para el botón.
Primero necesitamos crear una nueva sección regular debajo de la sección actual.
Luego agregue una fila a una columna de la sección.
Añadir un botón
En la columna, agregue un nuevo módulo Botón.
Cambie el texto del botón para que diga "Continuación...".
Cambiar a pestaña 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: 16px
- Color del texto: #ffffff
- Fondo del botón (escritorio): #4b4baf
- Botón de fondo (Hover): #67ddc1
- Ancho del borde: 0 píxeles
Lea también: Divi: Cómo agregar un ícono de hamburguesa al módulo Menú
- Espaciado entre letras de botones: 4px
- Fuente: Montserrat
- Peso de fuente: semi negrita
- Estilo de fuente del botón: TT
- Margen (inferior): 0px
- Relleno (superior e inferior): 1.5 em
- Relleno (izquierdo y derecho): 4em
Parte 2: agregar clases CSS a los elementos
Ahora que nuestro diseño está listo, haremos el resto de los cambios de diseño usando código personalizado (CSS y JQuery).
Pero antes de comenzar a agregar nuestro código personalizado, debemos agregar clases de CSS a todos los elementos que queremos cambiar cuando pasamos el mouse por encima o hacemos clic en el botón.
Agregar una 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 Avanzado. Luego ingrese la siguiente clase CSS:
- Clase CSS: et-change-style_section
Agregue una clase CSS a los módulos de imagen
A continuación, abra la configuración de la primera imagen en la columna izquierda y agregue la siguiente clase CSS:
- Clase CSS: et-before-image
Esta será la imagen que se mostrará "antes" de pasar el mouse o hacer clic en el botón.
Usando el modo de capa, abra la configuración para la segunda imagen (la que está oculta con el filtro de opacidad) y agregue la siguiente clase CSS:
- Clase CSS: et-después de la imagen
Esta será la imagen que se mostrará "después" de pasar el mouse/hacer clic en el botón.
Agregue una clase CSS al módulo de texto
Luego, agregue la siguiente clase CSS al módulo de texto en la columna derecha:
- Clase CSS: et-style-text
Agregue una clase CSS al módulo Botón
Finalmente, agregue una clase CSS personalizada al botón en la sección inferior de la siguiente manera:
- Clase CSS: et-toggle-button
Necesitamos esta clase para orientar el botón para la función 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 de CSS están en su lugar, podemos agregar el código necesario para cambiar el estilo de todos estos elementos cuando pasas el cursor por encima o haces clic en el botón.
Agregar un módulo de código
Para agregar el código, agregue un módulo Código debajo del botón en la sección inferior.
Pegue el código jQuery
Luego pegue el siguiente JQuery. Asegúrese de envolver el código en etiquetas de secuencias de comandos a medida que agregamos 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 );
Cambia el estilo de los elementos con CSS personalizado
Abra el módulo Código y pegue el siguiente CSS personalizado sobre el script JQuery, asegurándose de incluirlo en las etiquetas de estilo necesarias.
.et_pb_section.et-change-style_section.et-change-style_active {
background-color:#484db0 !important;
}
Luego pegue el siguiente CSS adicional en las etiquetas de estilo.
.et-change-style_active .et-after-image {
filter: opacity(100%);
}
.et-change-style_active .et-before-image {
filter: opacity(0%);
} 
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 usan el mismo concepto para cambiar el estilo del elemento cuando la sección (o botón) tiene la nueva clase.
Resultado final (resumen)
Una vez agregado el código, guarde los cambios y abra la página para ver el resultado. Observe cómo cambian los elementos a los que apuntamos cuando pasa el mouse sobre el botón.
Cambiar estilos al hacer clic
Para agregar la función de clic, reemplace el JQuery actual con lo siguiente (nuevamente, asegúrese de que esté envuelto en etiquetas de 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('Précédent...');
} else {
$this.text('Suite...');
}
});
});
})( jQuery );
Aquí está el resultado final.
¡¡¡Descarga DIVI ahora!!!
Conclusión
Ser capaz de apuntar y diseñar múltiples elementos en una página cuando pasas el mouse sobre algo o haces clic en él es una habilidad útil en el diseño web.
Puede usar esta técnica para una variedad de casos de uso (antes y después, CTA, etc.)
Por supuesto, ayuda saber un poco de CSS y JS/JQuery. Pero, como ha visto en este tutorial, ¡no necesita un conocimiento profundo de codificación para obtener resultados sorprendentes!
Esperamos que este tutorial lo inspire para sus próximos proyectos Divi. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
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.
...
