Flip Cards es una forma divertida para que los usuarios interactúen con su sitio web. No solo proporciona una animación genial, sino que también le permite ofrecer información adicional en una ubicación concisa. ¡En este tutorial, le mostraré cómo convertir módulos Divi en tarjetas invertidas sin usar un complemento! Con este método, podrá utilizar un módulo Divi como anverso de una tarjeta y otro módulo Divi como reverso de una tarjeta. Incluso puedes diseñar cada módulo (anverso y reverso) como quieras usando el constructor divi . La funcionalidad se logra a través de unos pocos fragmentos de CSS (sin jquery).
Creo que te sorprenderá lo simple y divertido que puede ser construir estas tarjetas.
¡Vamos a sumergirnos!
Aquí hay un adelanto del diseño que construiremos hoy.
Suscríbete a nuestro canal de Youtube
Lo que necesitas para este tutorial
¡Todo lo que necesitarás para este Tutorial es Divi! No se necesita complemento. También utilizaremos el paquete de diseño para desarrolladores de aplicaciones, que es GRATUITO y está disponible en Divi Builder.
La idea básica explicada
La inspiración para este concepto en realidad provino de este ejemplo básico de cómo diseñar cartas invertidas. Todo lo que se necesitó fue un poco de reingeniería para asignar las clases div a las filas, columnas y módulos de Divi y luego limpiar un poco el CSS.
El diseño de Divi consta de una sección regular con cuatro filas de una columna. En cada fila, agregué dos módulos publicitarios apilados uno encima del otro (aunque cualquier módulo Divi también funcionaría). La publicidad superior sirve como el anverso de la tarjeta invertida y la publicidad inferior sirve como el reverso de la tarjeta invertida. Al aplicar «display:flex» a la sección, las filas se estructuran horizontalmente como columnas. Esto permite alinear las tarjetas una al lado de la otra en cuatro columnas.
Así es como se ve la configuración antes de agregar el CSS personalizado.
Luego agregué el CSS personalizado a la configuración de la página y agregué las clases de CSS correspondientes a cada fila, columna y módulo.
¡Eso es todo!
Creación de tarjetas Divi Flip usando un diseño prefabricado
Agregar el diseño prefabricado a su página
Para que todo funcione, continúe y cree una nueva página, asígnele un título a la página y luego haga clic para usar el Divi Builder. Seleccione la opción «Elegir un diseño prefabricado». En la ventana emergente Cargar desde biblioteca, seleccione el paquete de diseño de desarrollador de aplicaciones y luego haga clic para usar el diseño de la página de destino del desarrollador de aplicaciones.
Una vez que el diseño se cargue en la página, publique su página y luego haga clic en el botón «Crear en el front-end». Ahora está listo para comenzar a crear las tarjetas invertidas.
Configuración de la sección, las filas y los módulos
Debajo de la primera sección del diseño, agregue una nueva sección regular con una fila de una columna. No agregue ningún módulo todavía. Abra la configuración de la fila y actualice lo siguiente:
Margen personalizado: 20 px en la parte inferior
Relleno personalizado: 0 px en la parte superior, 0 px en la parte inferior
Guardar ajustes.
Luego, duplique la fila tres veces para que tenga un total de cuatro filas en la sección.
Ahora abra la configuración de la sección y agregue el siguiente CSS personalizado al elemento principal:
|
01
|
display:flex; |
Esto cambia las filas para que se muestren horizontalmente, lo que básicamente convierte nuestras filas en cuatro columnas, aunque técnicamente siguen siendo filas Divi, cada una con una columna.
Agregar los módulos a las filas
Aquí es donde nuestro diseño prefabricado resulta útil para este tutorial. Usaremos los cuatro módulos publicitarios en la sección superior del diseño para impulsar el diseño de nuestras tarjetas invertidas. Usando las opciones del botón derecho o las teclas de acceso rápido ctrl+c y ctrl+v (windows) y cmd+c cmd+v (mac), copie y pegue los módulos prefabricados en cada una de las filas que acabamos de crear. Asegúrese de que cada fila tenga versiones duplicadas del mismo módulo.
Ahora su sección debería verse así.
Diseño de los módulos de tarjetas plegables frontal y posterior
Los dos módulos apilados en cada fila se utilizarán como anverso y reverso de las tarjetas invertidas. El módulo superior de cada fila servirá como parte delantera y el módulo inferior como parte trasera. Dado que el diseño de la tarjeta frontal (módulo superior) ya está hecho gracias a nuestro diseño prefabricado, todo lo que tenemos que hacer es ajustar el diseño y el contenido de la tarjeta trasera (módulo inferior).
Usando la función de selección múltiple Divi, seleccione todos los módulos inferiores en cada fila y luego abra la configuración del elemento para personalizar los cuatro módulos al mismo tiempo.
Ahora podemos actualizar las opciones de configuración de elementos para diseñar la versión posterior de nuestras tarjetas invertidas. Actualice la configuración del elemento de la siguiente manera:
Contenido: «Esta es una descripción».
Color de fondo: #00a2fa
Color del texto: Claro
Adición de CSS personalizado y clases de CSS
Ahora es el momento para el CSS personalizado que nos dará la funcionalidad de la tarjeta invertida. Abra la configuración de la página y agregue el siguiente CSS personalizado:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
@media (min-width:981px){.flip-box-row { background-color: transparent; width: 250px; height: 250px; -webkit-perspective: 1000px; perspective: 1000px;}.flip-box-column { position: relative; width:100%; height: 100%; -webkit-transition: transform 0.8s; transition: transform 0.8s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;}.flip-box-row:hover .flip-box-column { -webkit-transform: rotateY(180deg); transform: rotateY(180deg);}.flip-box-front, .flip-box-back{ position: absolute; width:100%; height: 100%; -webkit-transform: translate3d(0,0,0); -webkit-backface-visibility: hidden; backface-visibility: hidden;}.flip-box-back { -webkit-transform: rotateY(180deg); transform: rotateY(180deg);}} |
Tenga en cuenta que las clases de CSS anteriores se nombran de una manera que debería ayudarlo a comprender lo que hace cada una. También es un indicador útil de dónde debemos agregar esas clases de CSS a nuestros elementos Divi. Por ejemplo, la clase «flip-box-row» está destinada a diseñar cada una de las cuatro filas; por lo tanto, cada fila debe tener esa clase CSS.
Agregar clases CSS a los elementos Divi
Usando Multiselect, seleccione los cuatro módulos superiores (tarjetas frontales) en cada una de las filas. Luego agregue la siguiente clase CSS:
Clase CSS: flip-box-front
Luego, use la selección múltiple para seleccionar los cuatro módulos inferiores (tarjetas traseras) en cada una de las filas y agregue la siguiente Clase CSS a esos módulos:
Clase CSS: flip-box-back
Por último, use la selección múltiple para seleccionar las cuatro filas y asígneles las siguientes clases de CSS:
Clase CSS: columna flip-box-row
Clase CSS: columna flip-box
Diseño Final en Escritorio
Con todas nuestras clases de CSS agregadas, nuestras tarjetas invertidas son completamente funcionales. Echa un vistazo al diseño final en el escritorio.
Personalización del diseño para dispositivos móviles
En el código CSS personalizado que ya agregamos a la configuración de la página, hay una consulta de medios que limita la funcionalidad de la tarjeta invertida solo al escritorio. Sin embargo, aún debemos ocultar las versiones frontales de nuestras tarjetas invertidas en tabletas y teléfonos inteligentes, así como asegurarnos de que nuestras filas se apilen bien al ajustar el ancho del navegador.
Para ocultar nuestros módulos de publicidad de tarjetas frontales, use la selección múltiple para seleccionar todos los módulos superiores (tarjetas frontales) en cada fila (esto será más fácil en el modo de vista de estructura alámbrica ya que las cosas se moverán en el generador frontal) y actualice lo siguiente:
Deshabilitar en: Teléfono y Smartphone
Luego abra la configuración de la sección y agregue una línea más de CSS al elemento principal además de la agregada anteriormente:
|
01
|
flex-wrap:wrap; |
Esto asegurará que las filas se apilen en el dispositivo móvil.
Ahora veamos el diseño final en tabletas y teléfonos inteligentes.
Opción de bonificación: ¡Tarjetas con volteo vertical!
Si desea que sus tarjetas invertidas giren verticalmente en lugar de horizontalmente, solo necesita cambiar dos letras (literalmente) en el CSS personalizado. Abra la configuración de la página y ubique los dos lugares donde se usa «transformar: rotar Y (180 grados)». Luego reemplace la «Y» con «X». Si aún no lo ha adivinado, esto cambia la rotación para girar sobre el eje X en lugar del eje Y.
¡Cosas bastante geniales! Mira el resultado.
Pensamientos finales
No tiene que recurrir a un complemento para crear Flip Cards de excelente apariencia en Divi. Con este tutorial, tiene un marco para crear innumerables diseños y combinaciones de contenido de tarjetas invertidas. No olvide que puede elegir dos módulos cualquiera para que sirvan como anverso y reverso de sus tarjetas. ¡Así que siéntete libre de ser creativo!
Espero que esto haya sido útil y espero saber de usted en los comentarios a continuación.
¡Salud!