Cómo agregar efectos de desplazamiento avanzados al módulo Blurb de Divi usando Hover.css

En el tutorial de Divi de hoy, le mostraremos cómo agregar algunos efectos de desplazamiento avanzados a los módulos Blurb de Divi usando Hover.css. Por supuesto, Divi tiene todo lo que necesita para crear anuncios publicitarios impresionantes para cualquier tipo de página que se le ocurra. Pero en nuestra comunidad sabemos que hay muchos diseñadores que siempre buscan llevar a Divi a sus límites (y a veces más allá) para que el sitio de un cliente sea tan diferente al de la competencia. Así que este tutorial está dirigido a todos los que disfrutan aprovechando las funciones avanzadas de Divi.

Echemos un vistazo a lo que crearemos hoy.

Vista previa: el resultado final

Al final de esta publicación (y después de haberlo guiado a través de hover.css), le mostraremos cómo lograr el siguiente resultado:

Por supuesto, eso es solo la punta del iceberg en términos de lo que es posible con hover.css, pero lo ayudará a comenzar.

La inspiración

Nos inspiramos en XD Web Design, que utiliza los efectos hover.css para diferentes anuncios publicitarios en su sitio web. En publicaciones anteriores, ha habido solicitudes de comentarios que mostraron interés en cómo recrear ciertos módulos de Blurb. Aunque no vamos a recrearlos exactamente, le mostraremos los conceptos básicos para agregar estos efectos para que pueda experimentar fácilmente después.

Cómo agregar efectos de desplazamiento avanzados al módulo Blurb de Divi usando Hover.css

Suscríbete a nuestro canal de Youtube

Obtenga Hover.css en su sitio web

Antes de entrar en cualquier otra cosa, primero le presentaremos hover.css. Hover.css consta de una gran cantidad de efectos que puede utilizar en cualquier tipo de elemento de su sitio web. Hay dos formas principales de agregar los efectos hover.css a su sitio web; agregando el archivo CSS o eligiendo los efectos que desea tener y simplemente usando ese CSS dentro de Divi Builder.

Dado que vamos a necesitar hacer algunos pequeños ajustes a las líneas de código CSS para los elementos dentro de los módulos, le mostraremos cómo agregar manualmente las pocas líneas de código CSS que necesitará para crear el resultado final. Sin embargo, si prefiere tener todos los efectos en su sitio web, también puede hacerlo simplemente agregando el archivo CSS a su directorio de WordPress.

Descarga Hover.css

Ahora, para comenzar, necesitará el archivo hover.css que puede encontrar en el sitio web de Ian Lunn. Alternativamente, también puede hacer clic aquí para ser enviado directamente a los archivos en Github. Una vez que haya descargado el archivo, descomprímalo.

Licencia de compra

Lo siguiente que deberá tener en cuenta es el hecho de que hover.css no es gratuito. Si utiliza su sitio web con fines comerciales, es imprescindible adquirir la licencia. Tienes dos tipos de posibilidades de compra:

• La licencia de desarrollador ($ 14 y válida para 1 proyecto)
• La licencia de equipo ($ 18 y válida para proyectos ilimitados)

Dependiendo de su necesidad, puede comprar su licencia y utilizar los efectos en su (s) sitio (s) web.

La Lista de Hovers

Continuando, echemos un vistazo a los diferentes efectos de desplazamiento que están a su disposición con hover.css. Tienes un montón de ellos que pertenecen a varias categorías. Hay siete categorías en total:

• Transiciones 2D
• Transiciones de fondo
• Iconos
• Transiciones fronterizas
• Transiciones de sombra y resplandor
• Burbujas de discurso
• Chinos

Cada uno de estos efectos contiene una serie de efectos que pueden darle ese toque adicional a sus Módulos Blurb o cualquier otro tipo de módulo en su sitio web.

Instalando

Aunque puede instalar hover.css incluyéndolo directamente en su tema hijo, también puede usar partes y partes de él. Eso es lo que haremos en este tutorial. Tomaremos el código CSS de un efecto en particular y lo agregaremos directamente a nuestro Divi Builder. La razón por la que estamos haciendo esto es que en algunos casos (donde queremos que un efecto se aplique solo a un elemento de un módulo), tendrá que modificar ligeramente el código que se proporciona.

Vaya a su carpeta descargada descomprimida y busque el archivo hover.css.

Abra este archivo con un editor de código, como Notepad ++, y verá todos los efectos alineados uno tras otro. Los nombres que se utilizan en el archivo CSS son los mismos que en el sitio web. Puede ir al sitio web y ver qué animación le gusta. Luego, puede volver al archivo CSS y simplemente buscar el nombre.

Creación de su módulo de publicidad interactiva

Ahora que le hemos mostrado cómo utilizar fácilmente hover.css, es hora de mostrarle cómo recrear un módulo Blurb interactivo mientras utiliza los efectos que se proporcionan. Como recordatorio, echemos un vistazo al resultado final:

Agregar una fila de tres columnas

Lo primero que debe hacer es agregar una fila de tres columnas a una nueva sección en una nueva página o página existente. Le mostraremos cómo agregar el primer módulo de Blurb y luego, puede agregar módulos de Blurb a las otras columnas repitiendo los mismos pasos.

Hacer la fila de ancho completo

Lo siguiente que deberá hacer es hacer que la fila sea de ancho completo. Para hacer eso, abra la configuración de su fila y vaya a la pestaña Diseño. Dentro de la pestaña Diseño; habilite la opción 'Hacer esta fila de ancho completo' dentro de la subcategoría Tamaño.

Aplicar relleno de columna

Lo siguiente que deberá hacer es agregar algo de relleno de columna mientras aún se encuentra en la pestaña Diseño de la configuración de la fila. Desplácese hacia abajo y agregue un 5% al ​​relleno inferior de la columna 1.

Aplicar sombra de cuadro y radio de borde a la columna

Y lo último que deberá hacer dentro de la configuración de la fila es ir a la pestaña Avanzado. Dentro de la pestaña Avanzado, desplácese hacia abajo hasta el Elemento principal de la columna 1 y copie y pegue las siguientes líneas de código CSS:

-webkit-box-shadow: 0 19px 38px rgba(0,0,0,0.15), 0 15px 12px rgba(0,0,0,0.10);
-moz-box-shadow: 0 19px 38px rgba(0,0,0,0.15), 0 15px 12px rgba(0,0,0,0.10);
box-shadow: 0 19px 38px rgba(0,0,0,0.15), 0 15px 12px rgba(0,0,0,0.10);
border-radius: 6px;

Una vez que haya hecho eso, puede cerrar la configuración de la fila.

Agregar módulo de imagen

Lo siguiente que haremos es agregar un módulo de imagen a la primera columna. Técnicamente, esto no es parte del Módulo Blurb, pero en su resultado final, parece que van de la mano. Eso es principalmente porque estamos usando la columna como una especie de caja que reúne todos los módulos y los hace encajar entre sí.

Sube una imagen y deja el Módulo de imagen como está por ahora.

Agregar módulo Blurb

Lo siguiente que necesitaremos agregar a la fila es el módulo Blurb. Una vez que haya agregado el módulo Blurb, deberá realizar varios cambios. Comience agregando el texto del encabezado, el texto del contenido y eligiendo el ícono y continúe con la pestaña Diseño.

Personalizar icono

Dentro de la pestaña Diseño, lo primero que encontrará es la subcategoría Imagen e ícono. Dentro de esa subcategoría, asegúrese de que se apliquen los siguientes cambios:

• Color del icono: #FFFFFF
• Icono de círculo: SÍ
• Color del círculo: # 004370
• Ubicación de la imagen / icono: parte superior
• Usar tamaño de fuente de icono: SÍ
• Tamaño de fuente del icono: 45px (escritorio), 40px (tableta), 37 (teléfono)

Personalizar el texto del encabezado

Desplácese hacia abajo en la misma pestaña y realice los siguientes cambios en la subcategoría Texto del encabezado:

• Tamaño de fuente del encabezado: 16 (escritorio y tableta), 14 (teléfono)
• Color del texto del encabezado: # 004370
• Altura de la línea de encabezado: 2.2em

Agregar margen personalizado

A continuación, deberá agregar el margen personalizado al módulo Blurb:

• Superior: 25%
• Derecha: 5%
• Izquierda: 5%
• Inferior: 5%

Agregar margen inferior al título de la propaganda

Por último, pero no menos importante, vaya a la pestaña Avanzado y agregue '3px' al margen inferior del Título del anuncio:

Adición de efectos Hover.css a los módulos

La última parte de esta publicación implica agregar los efectos hover.css. Primero agregaremos los efectos de desplazamiento al módulo de imagen y al módulo de propaganda y, en la siguiente parte de esta publicación, agregaremos un efecto de desplazamiento a solo un elemento del módulo de propaganda.

Agregue la clase CSS al módulo de imagen

Abra la configuración de su imagen y vaya a la pestaña Avanzado. Dentro de la pestaña Avanzado, escriba la clase CSS del efecto de desplazamiento que desea usar. En este caso, estamos aplicando el efecto de rizado que tiene 'hvr-ripple-out' como su nombre de clase CSS. De nuevo; puede encontrar estos nombres de clases dentro del archivo hover.css en su carpeta comprimida.

Agregue la clase CSS al módulo Blurb

Del mismo modo, abra la configuración de Blurb y vaya a la pestaña Avanzado. En este caso, vamos a aplicar el efecto de desplazamiento por contracción al módulo completo. Entonces, escriba 'hvr-shrink' en el campo Clase CSS.

Agregar el código CSS

Continuando, agregue las siguientes líneas de código CSS a la configuración de su página haciendo clic en el siguiente botón:

Continúe colocando las siguientes líneas de código CSS en el campo CSS personalizado:

.hvr-shrink {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}

@-webkit-keyframes hvr-ripple-out {
100% {
top: -12px;
right: -12px;
bottom: -12px;
left: -12px;
opacity: 0;
}
}
@keyframes hvr-ripple-out {
100% {
top: -12px;
right: -12px;
bottom: -12px;
left: -12px;
opacity: 0;
}
}
.hvr-ripple-out {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
}
.hvr-ripple-out:before {
content: '';
position: absolute;
border: #004370 solid 6px;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
.hvr-ripple-out:hover:before, .hvr-ripple-out:focus:before, .hvr-ripple-out:active:before {
-webkit-animation-name: hvr-ripple-out;
animation-name: hvr-ripple-out;
}

Estas son casi exactamente las mismas líneas de código CSS que puede encontrar en el archivo hover.css. Lo único que difiere es el color del borde que se utiliza para el efecto de ondulación. Es del mismo color que el que se usa en el ícono del círculo.

Use los efectos Hover.css para elementos separados dentro del módulo Blurb

El tercer efecto que hemos agregado a esta propaganda es la línea que aparece después de pasar el cursor sobre el título de la propaganda. El módulo Blurb contiene diferentes elementos. Por lo tanto, no podemos simplemente usar la clase hover.css en la lista. En su lugar, tenemos que asignar un ID de CSS al módulo y usar la clase CSS asignada específicamente al título de Blurb.

Agregue la ID de CSS al módulo Blurb

Comience agregando la ID de CSS al módulo Blurb. En este caso, estamos usando 'centro'.

Agregar el código CSS

Continúe copiando y pegando las siguientes líneas de código en el mismo lugar donde colocó el código CSS anterior:

#center.et_pb_blurb_0.et_pb_blurb h4 {
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
overflow: hidden;
}
#center.et_pb_blurb_0.et_pb_blurb h4:before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
bottom: 0;
background: #004370;
height: 4px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#center.et_pb_blurb h4:hover:before, #center.et_pb_blurb_0.et_pb_blurb h4:focus:before, #center.et_pb_blurb_0.et_pb_blurb h4:active:before {
left: 0;
right: 0;
}

El nombre de clase que usa dentro del código difiere de un módulo a otro. Si desea que esto se aplique a un solo módulo, tendrá que usar la clase asignada al Título de anuncio de ese módulo en particular:

Sin embargo, si desea que el código se aplique a todos los anuncios, use las siguientes líneas de código CSS:

#center.et_pb_blurb h4 {
 -webkit-transform: perspective(1px) translateZ(0);
 transform: perspective(1px) translateZ(0);
 box-shadow: 0 0 1px transparent;
 position: relative;
 overflow: hidden;
}
#center.et_pb_blurb h4:before {
 content: "";
 position: absolute;
 z-index: -1;
 left: 50%;
 right: 50%;
 bottom: 0;
 background: #004370;
 height: 4px;
 -webkit-transition-property: left, right;
 transition-property: left, right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
#center.et_pb_blurb h4:hover:before, #center.et_pb_blurb_0.et_pb_blurb h4:focus:before, #center.et_pb_blurb_0.et_pb_blurb h4:active:before {
 left: 0;
 right: 0;
}

¡Eso es todo! Ahora puede seguir los mismos pasos para lograr el mismo resultado. Continúe clonando los módulos y utilizándolos también en las otras filas.

Pensamientos finales

En este tutorial de Divi, le mostramos principalmente cómo usar los muchos efectos que proporciona hover.css. Además de eso, también le mostramos cómo puede usar los diferentes efectos para crear Módulos Blurb interactivos en su sitio web. Si tiene alguna pregunta o sugerencia; ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!

¡Asegúrese de suscribirse a nuestro boletín informativo por correo electrónico y al canal de YouTube para que nunca se pierda un gran anuncio, un consejo útil o un obsequio de Divi!

Imagen destacada por obra de arte / shutterstock.com