Eventualmente, en el mundo del diseño web, tanto los codificadores como los 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 motivos. Es posible que desee que aparezca un formulario de contacto al hacer clic en un botón. O es posible que desee cambiar una imagen al pasar el mouse 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 cuando se desplaza o hace clic en un botón. Esto puede sonar complicado (especialmente para los principiantes), pero se sorprenderá de lo simple que es lograrlo.
¡Empecemos!
Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.
Aquí está el diseño del diseño de la sección que se cambia al pasar el mouse 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 en 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
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:
- Si aún no lo has hecho, instala y activa el tema Divi .
- Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
- Elija la opción «Construir desde cero».
Después de eso, tendrás 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 de dos columnas.
Ajustes de sección
Antes de agregar cualquier módulo, 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 de divisor inferior: mismo
- Color del divisor inferior: #ffffff
- Altura del divisor inferior: 5vw
- Acolchado: 6vw arriba, 6vw abajo
Antes de la imagen
En la columna izquierda de la fila de dos columnas, agregue un nuevo módulo de imagen.
Luego sube la imagen que quieres mostrar. Para este tutorial, estamos usando 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 imagen: centro
- Forzar ancho completo: SÍ
Después de la imagen
A continuación, vamos a crear 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, ya que reemplazará la otra imagen al pasar el mouse o hacer clic.
Para esta imagen, le vamos a dar 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, 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 código HTML en el área de contenido del cuerpo:
|
01
|
<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 intervalo. Esto es para que podamos orientar y diseñar esas palabras más adelante con algún CSS personalizado.
En la pestaña de diseño, actualice las opciones de estilo H3 de la siguiente manera:
- Título 3 Fuente: Montserrat
- Encabezado 3 Peso de fuente: Ultra negrita
- Título 3 Estilo de fuente: TT
- Título 3 Tamaño del texto: 65 px (computadora de escritorio y tableta), 40 px (teléfono)
- Encabezado 3 Espaciado entre letras: 0,8 em
- Encabezado 3 Altura de línea: 1,3 em
Eso se ocupa del diseño de la sección que contiene los elementos de diseño que cambiaremos al pasar el mouse por encima o al hacer clic en un botón. En la siguiente sección, agregaremos el botón que usaremos para iniciar los cambios de estilo.
Cree una nueva sección regular debajo de la sección actual.
Luego agregue una fila de una columna a la sección.
En la columna, agregue un nuevo módulo de botones.
Cambie el texto del botón para que diga «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
- Espaciado entre letras de botones: 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á listo, vamos a realizar 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 deseamos cambiar al pasar el mouse o 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 el modal de capas, 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 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
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 función de desplazamiento/clic en el código más adelante.
Parte 3: Agregar 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, ahora podemos agregar el código necesario para cambiar el estilo de todos esos elementos al pasar el mouse por encima/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 JQuery. Asegurarse de envolver el código en etiquetas de script porque estamos agregando el código a un documento HTML (no a un archivo JS).
|
01
02
03
04
05
06
07
08
09
|
(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 observa el código, debería reconocer las clases de CSS que agregamos al botón y la sección.
La clase de botón («.et-toggle-button») se utiliza 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 se desplace sobre el botón.
El botón también se está apuntando (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 integradas de Divi.
Cambiar el estilo de los elementos con CSS personalizado
Abra el módulo de código y pegue el siguiente CSS personalizado sobre el JQuery Script, asegurándose de incluirlo en las etiquetas de estilo necesarias.
|
01
02
03
|
.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.
|
01
02
03
04
05
06
|
.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 desea cambiar. En este ejemplo, la clase CSS («.et-change-style_active») dada a la sección principal viene antes de la clase dada a las imágenes secundarias («.et-after-image» y «.et-before-image»).
El CSS para la imagen posterior mostrará la imagen al pasar el botón. Y el CSS para la imagen anterior ocultará la imagen al pasar el botón. El resultado es que la imagen inicial se cambia a una nueva al pasar el botón.
A continuación, pegue el resto del CSS dentro de las etiquetas de estilo:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
.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 los elementos a los que apuntamos se cambian al pasar el mouse sobre el botón.
Cambiar estilos al hacer clic en lugar de pasar el mouse
Si desea cambiar el estilo de esos mismos elementos al hacer clic en el botón (en lugar de pasar el mouse), 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 de «desplazamiento» se reemplaza con «clic». Y hemos agregado un útil fragmento de código que cambia el texto del botón 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 las etiquetas del script):
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
(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 orientar y cambiar el estilo de múltiples elementos en una página cuando se desplaza o hace clic en algo 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, llamadas a la acción, etc.). Seguro, ayuda saber un poco de CSS y JS/JQuery. Pero, como has visto en este tutorial, ¡no necesitas saber nada de código para obtener resultados sorprendentes!
Espero escuchar de usted en los comentarios.
¡Salud!