¡Tu licencia Divi con un -20% de DescuentoOferta aquí

Cómo crear Flip Cards con cualquier módulo en Divi sin complementos

Oct 9, 2020 | Tutoriales para Divi

Las Flip Cards son una forma divertida para que los usuarios interactúen con su sitio web. No solo proporciona una animación de volteo 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 parte frontal de una tarjeta y otro módulo Divi como parte posterior de una tarjeta. Incluso puede diseñar cada módulo (anverso y reverso) como desee utilizando el constructor divi. La funcionalidad se logra a través de solo unos pocos fragmentos de CSS (sin jquery).

Creo que se sorprenderá de lo simple y divertido que puede ser construir estas tarjetas.

¡Vamos a sumergirnos!

Escurrir el bulto

Aquí hay un adelanto del diseño que construiremos hoy.

tarjetas divi flip

tarjetas divi flip

Qué necesitas para este tutorial

¡Todo lo que necesita para este tutorial es Divi! No se necesita ningún complemento. También usaremos el paquete de diseño de desarrollador de aplicaciones, que es GRATIS y está disponible dentro de 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 tarjetas invertidas. Todo lo que se necesitó fue una pequeña 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 Divi consta de una sección regular con cuatro filas de una columna. En cada fila, agregué dos módulos de propaganda apilados uno encima del otro (aunque cualquier módulo Divi funcionaría también). La propaganda superior sirve como el frente de la tarjeta invertida y la propaganda 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 que las tarjetas se alineen una al lado de la otra en cuatro columnas.

Así es como se ve la configuración antes de agregar el CSS personalizado.

tarjetas divi flip

tarjetas divi flip

Luego agregué el CSS personalizado a la configuración de la página y agregué las clases CSS correspondientes a cada fila, columna y módulo.

¡Eso es!

Creación de tarjetas Divi Flip con un diseño predefinido

Agregar el diseño prediseñado a su página

Para que todo funcione, sigue adelante y crea una nueva página, dale un título a la página y luego haz clic para usar Divi Builder. Seleccione la opción «Elegir un diseño prediseñado». 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.

tarjetas divi flip

Una vez que el diseño se cargue en la página, publique su página y luego haga clic en el botón «Construir en la interfaz». Ahora está listo para comenzar a crear las Flip Cards.

Configurar 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 abajo Relleno personalizado: 0 px arriba, 0 px abajo

Guardar ajustes.

Luego, duplique la fila tres veces para que tenga un total de cuatro filas en la sección.

tarjetas divi flip

Ahora abra la configuración de la sección y agregue el siguiente CSS personalizado al elemento principal:

01
display:flex;

tarjetas divi flip

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.

Adición de módulos a las filas

Aquí es donde nuestro diseño prefabricado resulta útil para este tutorial. Usaremos los cuatro módulos de propaganda en la sección superior del diseño para impulsar el diseño de nuestras tarjetas invertidas. Usando las opciones de clic derecho o las teclas de acceso rápido ctrl + cy 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.

tarjetas divi flip

Ahora tu sección debería verse así.

tarjetas divi flip

Diseño de los módulos de tarjetas con tapa frontal y posterior

Los dos módulos apilados en cada fila se utilizarán como anverso y reverso de las cartas invertidas. El módulo superior en cada fila servirá como frente y el módulo inferior servirá como reverso. 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 posterior (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.

tarjetas divi flip

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

tarjetas divi flip

Adición de clases CSS y CSS personalizadas

Ahora es el momento del 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);
}
}

tarjetas divi flip

Tenga en cuenta que las clases CSS anteriores se nombran de una manera que debería ayudarlo a comprender qué está haciendo cada una. También es un indicador útil de dónde debemos agregar esas clases 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

Con 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

tarjetas divi flip

Luego, use la selección múltiple para seleccionar los cuatro módulos inferiores (tarjetas posteriores) en cada una de las filas y agregue la siguiente clase CSS a esos módulos:

Clase CSS: flip-box-back

tarjetas divi flip

Por último, utilice la selección múltiple para seleccionar las cuatro filas y darles las siguientes clases CSS:

Clase CSS:
columna flip-box-fila Clase CSS: columna flip-box-column

tarjetas divi flip

Diseño final en escritorio

Con todas nuestras clases de CSS agregadas, nuestras tarjetas invertidas son completamente funcionales. Mira el diseño final en el escritorio.

tarjetas divi flip

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, todavía tenemos que ocultar las versiones frontales de nuestras tarjetas plegables 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 propaganda de la tarjeta frontal, 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 de interfaz) y actualice lo siguiente:

Desactivar en: teléfono y smartphone

tarjetas divi flip

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 que agregó anteriormente:

01
flex-wrap:wrap;

tarjetas divi flip

Esto asegurará que las filas se apilen en el móvil.

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

¡20% de Descuento en Divi!

Sitios web y usuarios ilimitados

Únete a más de 700.000 clientes y obten acceso a Divi, Extra, Bloom, Monarch y mucho más. Impulsa a todo tu equipo y crea sitios web ilimitados con una licencia.

¡Ir al descuento!



You have Successfully Subscribed!

Pin It on Pinterest

Share This