Voltear (flip) horizontal o verticalmente cualquier módulo de Divi sin plugins

Tutorial Divi. Cómo crear efecto flip con cualquier módulo en Divi sin un complemento

El efecto flip (horizontal o verticalmente) al pasar el cursor por un módulo es una forma divertida y original para que los usuarios interactúen con tu sitio web. No solo proporciona una animación genial, sino que también nos  permite ofrecer información adicional en una determinada zona. Por ejemplo, en un módulo anuncio. 

En este tutorial, aprenderás a convertir módulos de Divi en tarjetas para voltear sin usar ningun plugin. Ya sé que hay plugins que hacen esto de forma sencilla y rápida. También es cierto que un pluging hará tu página un poco más lenta. Vale, uno no…Pero si te acostumbras a usar plugins en tus proyectos, tu servidor terminará resintiéndose. Por otro lado, el simple hecho de explorar formas de usar Divi te hará cada vez más competente como diseñador web. 

Con este método, podrás utilizar un módulo Divi como parte frontal de una tarjeta y otro módulo Divi como parte posterior. Incluso puedes diseñar cada módulo (frontal y posterior) como quieras utilizando el divi builder. La funcionalidad se logra a través de unos poquitos fragmentos de CSS (nada de jquery). A continuación, y como siempre, puedes ver cómo quedará nuestra práctica cuando terminemos.

La idea. Introducción a la práctica

La inspiración para este ejercicio proviene de este ejemplo básico de cómo diseñar tarjetas volteables. Elegant themes lo adaptó en este post. Y, finalmente, yo lo he reinterpretado, he cambiado algún detalle para intentar hacer el tutorial más sencillo de aplicar.

Básicamente asignaremos las clases div a las filas, columnas y módulos Divi a partir del código CSS proporcionado. El diseño Divi consiste en una sección regular con cuatro filas de una columna. En cada fila, tenemos dos módulos tipo anuncio apilados uno encima del otro (aunque cualquier módulo Divi también funcionaría).

Fíjate en la estructura:

El módulo superior será la parte frontal (anverso) del efecto y el módulo inferior será la parte trasera (el reverso). Aplicaremos la propiedad flex («display: flex») a la sección, lo que hará que las filas se distribuyan horizontalmente como columnas. Esto permite que los módulos se estructuren de izquierda a derecha en cuatro columnas. Te lo iré mostrando a lo largo del tutorial.

Primeros pasos. Preparación de la sección

Si quieres añadir el efecto dentro de una página que ya tengas, inserta una sección regular donde desees dentro de esa página. Si preferimos hacerla en una nueva página o entrada. Así que creamos una nueva entrada o página. Esto nos proporciona una sección estándar con una fila a la que añadimos una columna y un módulo que en este ejercicio será tipo anuncio. Añade un título y una imagen al módulo. Luego podrás cambiar el contenido si quieres.

Con esta base, vamos a acceder a la vista de constructor visual porque el resto lo vamos a hacer ahí. Así que haz click en el botón Build On tehe Front End en tu escritorio WordPress. 

Ajustando la fila

Ya en la vista Front End, configuramos la fila de la siguiente manera. 

En la pestaña diseño de los ajustes de la fila, navegamos hasta la sección separación y configuramos:

Margen personalizado: Base: 20px. Izquierda 20px y derecha 20px. (para que haya espacio entre los módulos)

Relleno personalizado: Superior: 0px. Base 0px.

Así debes tener los ajustes.

Configurando el módulo

Ahora es el momento de configurar nuestro módulo anuncio. Recuerda que puedes usar cualquier módulo, aunque evidentemente hay módulos que se adaptan mejor a las posibilidades de este efecto. Sin duda, el módulo anuncio encaja  perfectamente. Por lo tanto abrimos los ajustes del módulo y personalizamos.

Pestaña contenido. Aquí añade un imagen (nosotros hemos puesto una de 64×64 px) o icono, pon un título y asigna un color de fondo.

Pestaña diseño. Configúralo a tu gusto. Yo he elegido la siguiente configuración:

Texto del título en mayúscula, tamaño 14px, espaciado entre letras 4px, y hemos redondeado las esquinas 8 píxeles. Borde, gris de 1 px. Por último, en separación > relleno personalizado, introducimos 42 px en Sup/base y 10 px en izquierda y derecha. Esto aporta aire arriba, abajo y a los lados del contenido del módulo.

Pestaña avanzado. Solo nos resta asignarle la clase CSS. Así que en esta pestaña, ID Y CLASES CSS> CLASE CSS, escribimos flip-box-front. Aquí una captura de algunos de los ajustes del módulo anuncio Divi.

Creando el reverso.

Vale, ya está lista la vista inicial, el anverso. Vamos a por el reverso, esto es, cómo se verá cuando pasemos el ratón por el módulo anuncio de Divi. Duplicamos el módulo que tenemos (aparecerá debajo del original) y cambiamos un poco su aspecto. Yo he cambiado el color de fondo y he añadido texto en la zona de contenido (mira el ejemplo arriba). En clase css, cambiamos la que tiene del módulo anterior por flip-box-back. Guardamos y seguimos.

Aplicando las clases a la fila.

Ya tenemos casi acabada las dos caras que tendrá cada módulo y que girará sobre sí mismo.

Sólo nos falta unos toques finales, antes de crear, a partir de éstos, los siguientes módulos. Recuerda que para cada efecto necesitamos dos módulos que estarán en una fila. Al final, 4 efectos = 4 filas con dos módulos (anverso y reverso) cada una.

Antes de duplicar la fila para crear los tres módulos restantes, vamos a aplicar las clases necesarias para que se ejecute correctamente el efecto y no tener que introducirlas en cada fila. De manera que abrimos la configuración de la fila (1) y, en la pestaña avanzado (2):

(3) ID Y CLASES CSS> CLASE CSS, escribimos flip-box-row

(4) ID Y CLASES CSS> CLASE CSS PARA COLUMNA, escribimos flip-box-column

Guardamos y duplicamos 3 veces la fila.

Tenemos ahora 4 filas y cada fila contiene dos módulos anuncio. Uno para el anverso y otro para el reverso. Las filas están dispuestas verticalmente, o sea, una bajo la otra, como es lógico. Fíjate en la imagen inferior. Así debe verse el ejercicio llegados a este punto.

Cambiando la disposición de las filas

Ahora vamos a forzar un poco la lógica (je je, en sentido figurado) y vamos a hacer que la disposición de las filas sea horizontal, como si tuviéramos 4 columnas. Lo conseguiremos con la propiedad flex.

Abrimos los ajustes de la sección, y en la pestaña avanzado, css personalizado > elemento principal, escribimos: display:flex;

¿Ves como cambia la disposición de las Filas? ¡Genial!

Ahora tenemos que cambiar los textos, el icono o las imágenes de cada módulo duplicado. Cuando estén todos los módulos a nuestro gusto es hora de insertar el CSS que hará la magia. En el vídeo verás algún truquillo para hacer todas estas operaciones de una manera rápida y eficaz.

El CÓDIGO CSS

Este es el código que debes poner en los ajustes de la página. También podrías ponerlo en el panel CSS del tema, pero creo que es más útil y práctico ponerlo en la página.

/*Efecto flip 3d en DIVI*/
@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);
}
}

Para verlo correctamente sal del constructor visual. Puedes dejarlo así y probar en tablet y móviles.

Puedes cambiar los valores rotatey por rotatex para convertir el giro de horizontal en vertical. Lo he puesto en naranja en el código para que puedas localizar mejor donde cambiar.

Si todo ha ido bien ya debería estar tú efecto ejecutándose correctamente.

Pd: Si el resultado no es el esperado en móvil y tablet, puedes poner solo la vista activa del módulo reverso para estos dispositivos. Pon la vista solo para escritorio en la sección del efecto. Duplica la sección, en avanzado, visible solo para tablet y móvil. Borramos los módulos anverso (los de arriba de cada fila) y elimina las clases de los módulos, filas y sección.

De todas formas, he creado un vídeo donde además podrás ver algún truquillo que te hará optimizar tu flujo de trabajo en Divi.