Seleccionar página

CSS EN DIVI EFECTOS HOVER AVANZADOS

Un poco de inspiración creativa y sutil sobre el efecto de desplazamiento, mediante técnicas CSS modernas, que incluyen translate en 3D y pseudo elementos.

Ya tiene casi un mes que no hemos publicado nada, tranquilos no nos hemos olvidado de escribir en DiviCon, hemos estado un poco ocupados.

Y Tomás Saint-Romain Admin de nuestro grupo de Fuerza DiviCon y amigo nos hizo un tutorial especial para todos los integrantes de DiviCon

Este tutorial trata sobre hover effect avanzados donde utilizaremos css un poco más técnico, dejemos el rollo.

y vamos a lo que venimos, que es aprender algo nuevo


Descarga

Lo primero que debemos hacer es ir al tutorial original y descargar el código fuente del artículo completo. Haga clic aquí para descargar. (Opcional puedes copiar los códigos más abajo)

Demos

En la página pueden ver el demo1/demo2 de cada hover si desean.

Código Html

Después de descargar la fuente, en la misma página
Desplácese hacia abajo un poco y verá algunos HTML.


Código html - hover effect
Código html – hover effect


Edición HTML

Ahora que tenemos todo lo que necesitamos, comencemos a armar esto en nuestro sitio Web. Navegue a la página en su sitio web que está construyendo (pagina/entrada), agregue una nueva sección con una fila (en este ejemplo estoy usando a 1⁄2 – 1⁄2 columna) y luego agrego un módulo de TEXTO a una de las columnas.

Módulo de texto - columna 1/2 - html
Módulo de texto – columna 1/2 – html

Ahora en el módulo de texto, en la pestaña TEXT (no en la pestaña visual), añada el código HTML que copió al editor de texto o al bloc de notas y luego pulse guardar y salir.

Añada el código html en la pestaña TEXT
Añada el código html en la pestaña TEXT

Con la estructura en su lugar, volvamos al sitio web de demostración y veamos cuál de los efectos de desplazamiento de imagen queremos usar. Para este ejemplo estamos usando «Layla»


Código CSS

Efecto hover layla
Efecto hover layla

Ahora queremos buscar el efecto Hover que estamos usando, así que en este caso es Layla. Copiaremos todo el CSS para «Layla» y añadiremos eso a nuestro editor de texto también.

El CSS se verá algo como esto y va directamente en su Divi o WordPress personalizado panel CSS: (COPIALO Y PEGALO EN EL CSS)



HASTA AQUÍ!!!
A DONDE IBAS ?


Perfecto si llegaste hasta aquí todo estará saliendo a la perfección!!! Ahora navegue de nuevo a la página con nuestro módulo de texto (Punto 2) y abra la pestaña de texto dentro del módulo.

Dentro de este módulo usted verá < figure clase = «effect-lily» > queremos cambiar el «Lily» al efecto que elegimos que es Layla en este ejemplo.
Así que cámbialo a < figure class = «effect-layla» >

Añadiendo una imagen

También necesitamos añadir una imagen en el < img src = «img/1. jpg»
navegue a sus medios y copie la URL de la imagen que desea usar y péguela en el lugar de – IMG/1. jpg –

Les quedara algo de este estilo…

Imágen modificación de dirección
Ejemplo dirección cambio de imagen

Si desean ponerle otro título a su imagen solo deben cambiar esta sección Todo este proceso es para 1 solo efecto, es bastante, pero te ahorramos todo

En caso que deseen cambiarle el color ya sea a el
Titulo / Subtitulo / Fondo / Barras deben hacer lo siguiente:

Subtitulo => Cambio de Color CSS

Para el subtitulo deben hacer lo siguiente:
Deberán ir al código en la sección de CSS donde dice .grid figure figcaption Y donde dice color #000 deberán cambiarlo por el color que desean! En este caso el

Subtitulo  Cambio de Color CSS
Subtitulo Cambio de Color CSS

Una vez realizado este proceso lo guardan y podrán ver los cambios actualizando su página:

Para cambiar el Fondo debemos hacer lo mismo

Fondo y Barras cambio de color

Fondo

Fondo cambio de color
Fondo cambio de color

Barras superior o posterior

cambio de color superior o posterior
cambio de color superior o posterior

Derecha o izquierda

Derecha o izquierda cambio de color
Derecha o izquierda cambio de color

También podremos cambiarle en ancho de las mismas o la longitud

Título

Para cambiar el color del título colocamos delante del h2 style «color:#ffffff»; y en el lugar de las f ́s colocamos el código de color que queramos

Cambio de color del título
Cambio de color del título

Colocar link a la Imagen

Para colocar un link a la imagen que queramos que nos redirija a otra pestaña debemos cambiar el siguiente código del HTML:

Donde está el # colocamos el link donde queremos que nos redirija la imagen. Y eso es todo por este tutorial!!!
En la carpeta encontraras los otros efectos


DIVI HOVER EFFECT CSS AVANZADOS y ÚNICOS 😜 #DiviConwordpres

descargar-divi-json-wordpress
Descargar varios css hover effect

Tutorial realizado por Tomás Saint-Romain

Si te gusto siguenos en Facebook en la comunidad
de Fuerza DiviCon


10% de descuento en su tema Divi

ÚNETE A NUESTRO GRUPO DE FACEBOOK

¿Te parece interesante este artículo?
Puntaje
[Total: 1 Average: 5]

Pin It on Pinterest

Shares