Cómo diseñar tarjetas de visita con animación Flip en Click para mostrar a su equipo en Divi

Diseñar tarjetas de presentación que se muevan al hacer clic puede ser una adición creativa a cualquier sección o página de un miembro del equipo en su sitio web. Las tarjetas de visita ya son un método familiar e intuitivo para proporcionar información concisa sobre una persona que trabaja para una empresa. Así que tiene sentido ofrecer ese mismo diseño en la web. Además, la información proporcionada en cada tarjeta puede volverse aún más dinámica e interactiva, lo que permite al usuario copiar información y / o hacer clic en enlaces dentro de la tarjeta de presentación.

En este tutorial, le mostraremos cómo diseñar una tarjeta de presentación única en Divi que también tiene la funcionalidad de voltear al hacer clic para revelar la información sobre la persona, como una tarjeta de presentación real.

¡Saltemos y comencemos!

Vistazo

Aquí hay un vistazo rápido al diseño que crearemos en este tutorial.

Descarga el diseño GRATIS

Para poner sus manos sobre los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.

Haga clic en el botón Importar.

En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.

Luego haga clic en el botón Importar.

Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

1. Si aún no lo ha hecho, instale y active Divi Theme.
2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
3. Elija la opción "Construir desde cero".

Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.

Diseñar una tarjeta de presentación que se voltea al hacer clic en Divi

La configuración de filas y columnas

Para empezar, cree una fila de una columna en la sección normal.

Abra la configuración de la fila y actualice lo siguiente:

• Ecualizar alturas de columna: SÍ
• Ancho: 90%
• Ancho máximo: 1200px

Abra la configuración de la columna y dele un poco de relleno de la siguiente manera:

• Relleno (escritorio y tableta): 30 píxeles en la parte superior, 30 píxeles en la parte inferior, 50 píxeles a la izquierda, 50 píxeles a la derecha
• Relleno (teléfono): 15 píxeles en la parte superior, 15 píxeles en la parte inferior, 15 píxeles a la izquierda, 15 píxeles a la derecha

En la pestaña avanzada, agregue la siguiente clase CSS a la columna:

• Clase CSS: tarjeta-columna

Esta clase servirá como un objetivo en nuestro código para activar el evento de clic que provocará la animación de volteo más adelante.

Columna duplicada

Ahora que tenemos una configuración de columna, duplique la columna para que tengamos un diseño de dos columnas con cada columna con el mismo relleno y clase CSS.

Construyendo la carta trasera

El primer elemento del diseño de la tarjeta de presentación es lo que llamaremos la tarjeta posterior que servirá como fondo de la tarjeta de presentación con la información de la tarjeta. Para crear la tarjeta frontal, agregue un divisor a la columna 1.

Abra la configuración del divisor y haga clic para que el divisor NO esté visible. Solo usamos el divisor para una imagen de fondo para la tarjeta de presentación.

Luego actualice las siguientes opciones:

Color de fondo

• Color de fondo: # 322b3f

Gradiente de fondo

• Color de degradado de fondo a la izquierda: rgba (50,43,63,0.72)
• Gradiente de fondo Color derecho: # 322b3f
• Tipo de degradado: radial
• Posición final: 34%
• Colocar degradado sobre la imagen de fondo: SÍ

Imagen de fondo

• Imagen de fondo: [cargar imagen o retrato de un miembro del equipo]
• Tamaño de la imagen de fondo: ajuste
• Posición de la imagen de fondo: Centro

Dimensionamiento

• Ancho: 100%
• Altura mínima: 300 px
• Altura: 100%

Sombra de la caja

• Box Shadow: ver captura de pantalla
• Posición vertical de la sombra del cuadro: 0px
• Fuerza de desenfoque de sombra de caja: 50px

Clase CSS y posición absoluta

A continuación, agregue la siguiente clase CSS al divisor:

• Clase CSS: tarjeta trasera

Y actualice la posición a absoluta:

• Posición: Absoluto

Creación del logotipo de la tarjeta trasera

Con la tarjeta trasera (divisor) en su lugar, podemos comenzar a agregar los elementos de información de nuestra tarjeta. Para empezar, agregaremos un logo en la esquina superior izquierda.

Agregue un módulo de imagen debajo del módulo de tarjeta divisora ​​/ trasera.

Luego, cargue una imagen de logotipo que tenga alrededor de 60 px por 60 px.

Luego actualice la imagen con una clase CSS y una posición absoluta de la siguiente manera:

Clase CSS

• Clase CSS: contenido de tarjeta

Posición

• Posición: Absoluto
• Desplazamiento vertical: 30 px (escritorio y tableta), 15 px (teléfono)
• Desplazamiento horizontal: 50px (escritorio y tableta), 10px (teléfono)

El nombre

Para crear el nombre de la tarjeta de presentación, agregue un nuevo módulo de texto debajo de la imagen del logotipo.

Actualice el contenido del cuerpo con el nombre de la persona que desea que aparezca en la tarjeta de presentación.

En la pestaña de diseño, actualice las opciones de estilo de texto de párrafo de la siguiente manera:

• Fuente de texto: Poppins
• Color del texto del texto: #ffffff
• Texto Tamaño del texto: 28px (escritorio y tableta), 22px (teléfono)
• Espaciado entre letras: 1px
• Alineación de texto: derecha

El puesto de trabajo (o función)

Para agregar la posición (o función) de la persona en la tarjeta, duplique el módulo de texto anterior con el nombre.

Luego actualice el contenido corporal con la posición (o función) de la persona.

Luego actualice la configuración de diseño para el módulo de texto de posición de la siguiente manera:

• Estilo de fuente de texto: TT
• Texto Tamaño del texto: 16px (escritorio y tableta), 14px (teléfono)
• Margen: 15px inferior

La empresa

Para agregar el nombre de la empresa a la tarjeta de presentación, duplique el módulo de texto anterior (posición).

Luego actualice el contenido del cuerpo con el nombre de la empresa.

Luego actualice la configuración del texto de la empresa de la siguiente manera:

• Peso de la fuente del texto: Ligero
• Estilo de fuente de texto: predeterminado
• Texto Tamaño del texto: 22px (escritorio y tableta), 18px (teléfono)
• Alineación de texto: izquierda

El numero de telefono

Para crear el número de teléfono de la tarjeta de presentación, agregue un módulo de propaganda debajo del módulo de texto (empresa).

Actualice el contenido del cuerpo de la propaganda (del teléfono) con el número de teléfono que desea que aparezca en la tarjeta.

Haga clic para usar un icono de teléfono para la propaganda.

En la configuración de diseño, actualice lo siguiente:

• Color del icono: rgba (162,71,232,0.6)
• Ubicación de la imagen / icono: Izquierda
• Usar tamaño de fuente de icono: SÍ
• Tamaño de fuente del icono: 20px
• Fuente del cuerpo: Poppins
• Color del texto del cuerpo: #ffffff
• Tamaño del texto del cuerpo: 16px
• Margen: 10px inferior

La direccion de correo electronico

Para mostrar la dirección de correo electrónico en la tarjeta, duplique el módulo de propaganda (teléfono) y actualice el contenido del cuerpo con la dirección de correo electrónico.

Luego actualice el ícono a un ícono de sobre.

El sitio web

Para incluir el sitio web en la tarjeta, duplique el módulo de propaganda (del teléfono) y actualice el contenido del cuerpo con el sitio web.

Luego actualice el icono con un icono más apropiado.

Los iconos de seguimiento de redes sociales

Para nuestro último contenido de tarjeta, vamos a agregar íconos de seguimiento de redes sociales a la tarjeta. Para hacer esto, agregue un módulo de seguimiento de redes sociales debajo de la propaganda (sitio web).

En el modal de Configuración de seguimiento de redes sociales, actualice cada una de las redes sociales con un fondo transparente.

(también puede agregar las URL de enlace según sea necesario más adelante)

Luego, dale al módulo una alineación correcta.

Agregar la misma clase CSS a todos los módulos de contenido de la tarjeta

Una vez que hayamos terminado de crear todos los módulos de contenido de la tarjeta para la tarjeta de presentación, debemos dar a todos esos módulos la misma clase CSS. Para hacer esto, use la función de selección múltiple para seleccionar todos los módulos de contenido de la tarjeta (logotipo, nombre, posición, teléfono, correo electrónico, sitio web e íconos de redes sociales), luego abra la configuración del elemento y agregue la siguiente clase:

• Clase CSS: contenido de tarjeta

Vamos a apuntar a esta clase con nuestro código CSS personalizado para ocultar y mostrar el contenido antes y después de la animación de la tarjeta frontal.

La tarjeta frontal

Ahora que nuestra tarjeta posterior está terminada con todo el contenido de la tarjeta en su lugar, estamos listos para crear la tarjeta frontal que se colocará en la parte superior de la tarjeta posterior y el contenido de la tarjeta posterior. Para hacer esto, vamos a diseñar la tarjeta frontal usando un módulo de imagen en la columna 2. Luego lo moveremos para colocarlo en la parte superior de la tarjeta posterior en la columna 1.

Primero, agregue un módulo de imagen a la columna 2.

Cargue la misma imagen de logotipo (60 px por 60 px) que se usó para el logotipo de la tarjeta posterior que se usará como imagen.

A continuación, abra la configuración del módulo de la tarjeta trasera (divisor) y copie el diseño de fondo.

Luego abra la configuración de imagen para la tarjeta frontal que estamos diseñando y pegue el diseño de fondo en la opción de fondo del módulo de imagen.

En la pestaña de diseño, actualice el espaciado de la imagen de la siguiente manera:

• Relleno (escritorio y tableta): 30 píxeles en la parte superior, 50 píxeles en la izquierda
• Relleno (teléfono): 15 píxeles en la parte superior, 10 píxeles en la izquierda

Ajustes avanzados

En la pestaña avanzada, asigne a la imagen la siguiente clase CSS:

• Clase CSS: tarjeta frontal

Agregue el siguiente CSS personalizado al elemento principal:

[/ css]
altura: 100%;
ancho: 100%;
[/ css]

Actualice las opciones de posición:

• Posición absoluta
• Índice Z: 13

La altura y el ancho personalizados (combinados con la posición absoluta) hacen que el módulo que contiene la imagen (o el logotipo) abarque toda la altura y el ancho de la columna principal. Entonces, aunque es un módulo de imagen, lo estamos usando para mostrar dos imágenes en capas (el logotipo y la imagen de fondo) como una bonita tarjeta frontal para el diseño de nuestra tarjeta de presentación.

No olvide cambiar la imagen de fondo por una nueva. En este caso, estoy usando un retrato diferente de la misma persona.

Una vez hecho esto, arrastre el módulo de imagen de la tarjeta frontal a la columna 1. Debe cubrir completamente la tarjeta posterior.

El código personalizado

El último paso es agregar CSS y JQuery personalizados para completar la funcionalidad de hacer realmente la animación de giro de la tarjeta de presentación al hacer clic.

Para agregar el código, agregue un módulo de código debajo del módulo de seguimiento de redes sociales dentro de la columna 1.

El CSS personalizado

Pegue el siguiente código CSS entre las etiquetas de estilo :

.card-column {
  perspective: 1400px;
}
.front-card:hover {
  cursor: pointer;
}

.front-card,
.back-card {
  transition: all 500ms ease-in-out;
  transform-style: preserve-3d;
}

.back-card {
  transform: rotateX(-180deg) rotateY(0deg) rotateZ(0deg) !important;
}

.divi-transform-active .back-card {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
}

.divi-transform-active .front-card {
  transform: rotateX(180deg) rotateY(0deg) rotateZ(0deg);
  transform-origin: 50% 50%;
}

.card-content {
  transition: all 300ms ease-out 0ms;
}

.divi-transform-active .card-content {
  transition: all 300ms ease-out 500ms;
  opacity: 1 !important;
}

.divi-transform-active .front-card {
  opacity: 0;
  visibility: hidden;
}

El JQuery

Debajo del CSS, pegue el siguiente JQuery entre las etiquetas del script

(function ($) {
  $(document).ready(function () {
    $cardColumn = $(".card-column");
    $cardContent = $(".card-content");

    $cardContent.css("opacity", "0");

    $cardColumn.on("click", function (e) {
      $(this).addClass("divi-transform-active");
      e.stopPropagation();
    });
    $(document).on("click", function (e) {
      if ($(e.target).is($cardColumn) === false) {
        $cardColumn.removeClass("divi-transform-active");
      }
    });
  });
})(jQuery);

Creación de tarjetas de visita adicionales

Para crear tarjetas de presentación adicionales, todo lo que necesita hacer es duplicar la columna que contiene todos los módulos que usamos para construirla. Una vez que duplique la columna, deberá eliminar el módulo de código adicional. Tener dos módulos de código con código duplicado no funcionará.

Una vez que la columna / tarjeta esté duplicada, simplemente actualice las imágenes de fondo y el contenido de la tarjeta usando los módulos según sea necesario para una nueva tarjeta de presentación.

Resultado final

Aquí está el resultado final del diseño de la tarjeta de presentación con la animación de volteo al hacer clic. Cuando haga clic en la imagen de la tarjeta frontal, se volteará y desaparecerá, el divisor de la tarjeta posterior también se volteará pero permanecerá visible. La información de la tarjeta se desvanece a la vista después de que se completa la animación de volteo. Para darle la vuelta a la tarjeta, todo lo que necesita hacer es hacer clic fuera de la columna que contiene la tarjeta. No quería que la tarjeta volviera a girar al hacer clic en la tarjeta (como una palanca) para que el usuario pueda hacer clic en los elementos dentro de la tarjeta.

Pensamientos finales

Con suerte, este diseño de tarjeta de presentación interactiva lo ayudará a ser más creativo en la forma en que muestra la sección o las páginas de los miembros de su equipo en su sitio web. De hecho, esta técnica no se limita a las tarjetas de visita. Puede usarlo para casi cualquier información que desee mostrar. Pruébelo y compruebe si se adapta bien a su próximo proyecto.

Espero tener noticias tuyas en los comentarios.

¡Salud!