+41 78 955 3005
Sabemos que una de las mejores cosas para aquellos que se encargan de crear o mantener su  sitio web, es personalizar y destacar elementos del mismo. Es por ello que te enseñaremos a crear Flip cards con animación CSS3, de forma sencilla y efectiva Como ya hemos mencionado anteriormente, esto es muy sencillo de hacer y para simplificar aún más las cosas, acá te damos la oportunidad de descargar en un archivo las tres secciones que utilizamos en este tutorial.
Nota: Este tutorial es gracias al artículo de davidwalsh

¡Comencemos ahora!

El primer paso es agregar una sección y luego agregar una o más columnas con un módulo de código.
barra de promocion Divi
Para personalizar el código te mostraremos como puedes proceder solo teniendo que cambiar el icono de la etiqueta y cambiar el texto del título y párrafos y agregar un link al botón
barra de promocion Divi
A continuación 3 ejemplos de Flip cards utilizando el código CSS que deberás agregar al panel de opciones de Divi o tema hijo de Divi

Agregar JQuery

Código:

Agrega este Script en panel de opciones, para ello dirígete a la pestaña integraciones> Agregar código al <head> de su blog

Ahora los 3 ejemplos de Flip card

1. Flip Card Horizontal

Esta cuenta con animación horizontal que muestra la parte posterior de la tarjeta.
Código:
barra de promocion Divi

2. Flip Card Vertical

Igual al anterior variando la dirección la cual es de modo vertical.
Código:
barra de promocion Divi

3. Flip Card con imagen de fondo

Puedes personalizarlo a tu gusto, en este caso, agregar una imagen de fondo en la sección frontal con un gradiente lineal para crear un efecto de superposición y resaltar el texto.
Código:
barra de promocion Divi
Esto es todo!. Si deseas conocer más acerca de divi puedes encontrar información que te interese en nuestra sección Documentación de Divi en español
Tema hijo Divi y Plugins para mejorar el Diseño tu Pagina Divi

Suscríbete a nuestra Newsletter

Para recibir Actualizaciones, Promociones y Tutoriales

Felicitaciones! Te has suscrito a nuestra Newsletter correctamente.

Pin It on Pinterest

Share This