Cómo diseñar tarjetas de visita atractivas con una animación de volteo en DIVI

Rifat Divi Tutorials May 11, 2021

Las tarjetas de visita son una forma popular de introducir a un individuo corporativo a una persona. Lleva toda la información necesaria sobre ese individuo y ofrece su información de contacto útil. ¿Qué tal una tarjeta de visita virtual en un sitio web que voltea y hace el mismo trabajo? "Definitivamente será más dinámico, y se le adjuntarán enlaces sociales para que cualquiera pueda comunicarse fácilmente con el individuo. Bueno, esto suena realmente interesante y lo haremos. ¡Aprende sobre este diseño hoy, en Dos! Entonces. Vamos a empezar.

Vista previa de diseño

Hoy construiremos este diseño. se ve interesante, ¿eh?

Parte 1: Diseño de tarjeta de visita que se enciende.

AÑADIR: Fila 1

Comience con agregar una fila de una columna a la sección normal.

Actualice la siguiente configuración.

Create Amazing Websites

Con el mejor generador de páginas gratuito Elementor

Empezar ahora
  • Ecualizar las alturas de la columna: si
  • Ancho: 90%
  • Ancho máximo: 1200px

Abra la configuración de la columna y agregue un poco de acolchado.

Relleno

  • Desktop - 30px en la parte superior e inferior, 50px en la izquierda y la derecha.
  • Tablet - 30px en la parte superior e inferior, 50px en la izquierda y la derecha.
  • Teléfono - 15px en la parte superior e inferior, 15px en la izquierda y la derecha

Agregue la siguiente clase CSS desde la pestaña Avanzado. Este código funcionará como un disparador para hacer clic para nuestra animación Flip.

  • CSA CSS: CARD-COLUMN

Clonación de columnas

Ahora columna anterior duplicada. Ahora tenemos un diseño de columna y cada uno de ellos tiene la misma clase de acolchado y CSS.

Construyendo la tarjeta posterior

Primero, crearemos la tarjeta de presentación que generalmente estará en la parte posterior y vendrá al frente al hacer clic. Aquí pondremos toda la información sobre un individuo. Lo llamaremos tarjeta trasera. Para crear esto, adjuntaremos un divisor en la columna 1. Luego, desactivamos la visibilidad del divisor desde la configuración del divisor porque solo usaremos el divisor para adjuntar la imagen a la tarjeta.

Color de fondo

  • Color de fondo: # 322B3F

Gradiente de fondo

  • Gradiente de fondo Color izquierdo: RGBA (50,43,63,0.72)
  • Fondo degradado Color derecho: # 322B3F
  • Tipo de degradado: radial
  • Posición final: 34%.
  • Place degradado por encima de la imagen de fondo: si

Imagen de fondo

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

Dimensionamiento

  • Ancho: 100%
  • Min altura: 300px
  • Altura: 100%

Sombra de la caja

  • Sombra de la caja: ver captura de pantalla
  • Caja de la sombra Posición vertical: 0px
  • Box Shadow Blur Fuerza: 50px

Clase CSS y posición

Ahora agregue la clase CSS al divisor y actualice la posición.

  • CSS CSS: Tarjeta trasera
  • Posición: Absolute

Añadir: Logo en la tarjeta posterior

Tenemos nuestra tarjeta trasera en su lugar, agregaremos el logotipo ahora.

Ahora sube el logotipo. El tamaño debe ser alrededor de 60px * 60px.

Clase de CSS

  • CSA CSS: Contenido de la tarjeta

Posición

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

AÑADIR: Nombre del titular de la tarjeta

Ahora agregue un módulo de texto en el módulo de logotipo a la tarjeta para su nombre. y actualice el nombre de la persona que desea presentar.

Haga esto siguiente cambiado en la pestaña de diseño.

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

Añadir: La posición de trabajo

Duplique el módulo de texto anterior para agregar la posición del trabajo. A Edite el contenido del cuerpo y haga ajustes en la pestaña de diseño.

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

AÑADIR: Nombre de la empresa

Para agregar el nombre de la empresa, duplique el módulo de texto anterior y cambie el contenido del cuerpo.

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

AÑADIR: Número de contacto

Para agregar el número de contacto del individuo. Agregue un módulo Blurb en el módulo de texto de la empresa. Actualice el contenido del cuerpo con el número de teléfono y agregue un icono.

Desde la configuración del diseño, actualice lo siguiente:

  • Color del icono: # 20bfac
  • Imagen / Icono de colocación: izquierda
  • Usa el icono Tamaño de fuente: Sí
  • Icono Tamaño de fuente: 20px
  • Fuente del cuerpo: Poppins
  • Color del texto del cuerpo: #FFFFFFF
  • Tamaño del texto del cuerpo: 16px
  • Margen: Fondo 10px

Agregar dirección de correo electrónico

Duplique el módulo de Blurb anterior y actualice el contenido del cuerpo como dirección de correo electrónico. Luego, actualice el icono como un sobre.

AÑADIR: El sitio web

Haz lo mismo que hicimos por la sección de correo electrónico. Copie el módulo de Blurb anterior y cambie el contenido.

AÑADIR: Iconos de redes sociales

El módulo final que agregaremos en la tarjeta posterior es el módulo de seguimiento de las redes sociales. Agregue este módulo en el último módulo Blurb.

Desde la configuración, haga que cada icono social sea transparente y agregue una URL si lo necesita. Para hacer todos los iconos transparentes, abra cada módulo de medios sociales y arrastre la barra marcada blanca hacia abajo. Cambiará el trabajo.

Además, desde la pestaña de diseño, alinee las redes sociales, siga los iconos en la derecha.

AÑADIR: misma clase a todos los módulos

Dado que se realizan la colocación y la personalización de todos nuestros módulos, ahora los seleccionaremos utilizando la función MULTI-SELECT Dos y agregaremos una clase CSS común. De acuerdo con esta clase CSS, agregaremos el código CSS que mostrará el contenido de la tarjeta a través de la animación de Flip.

  • CSA CSS: Contenido de la tarjeta

Sostenga "CMD" o "CTRL" y haga clic en los elementos para seleccionarlos. Luego haga clic en Configuración de cualquier módulo y haga el ajuste.

Construyendo la tarjeta frontal

Nuestra tarjeta trasera se realiza y ahora trabajaremos en la tarjeta frontal que se sentará en el lugar de la tarjeta posterior y ocultaremos su contenido en la parte posterior. Diseñaremos la tarjeta frontal a través de un módulo de imagen en la columna 2, que reemplazará la tarjeta en la columna 1. Al principio, agregaremos un módulo de imagen en la columna 2 y agregaremos un logotipo (60px * 60px) en el módulo.

Ahora, abra la configuración del módulo divisor de la tarjeta posterior y copie el fondo.

Ahora abra la configuración de la imagen para la tarjeta frontal y pégala.

Desde la sección de diseño, actualice el espaciado de la imagen de la siguiente manera:

  • Acolchado (escritorio y tableta): Top 30px, 50px Izquierda
  • Acolchado (teléfono): 15px Top, 10px Izquierda

Ajustes avanzados

Desde la pestaña Avanzado, le dé a esta imagen una clase CSS.

  • Clase CSS: Front-Tarjeta

Agregue el CSS personalizado en el elemento principal.

height: 100%;
width: 100%;

Además, actualice la configuración de la posición.

  • Posición absoluta
  • Índice Z: 13

Ahora, como se hace con la tarjeta delantera, arrástrelo sobre el módulo de la tarjeta posterior en la columna 1.

Parte 2: Agregar código personalizado

Finalmente, agregaremos un código CSS y jQuery personalizado para llevar la animación de Flip a nuestro diseño de tarjeta de presentación. Para esto, agregue un módulo de código debajo de la columna 1.

AÑADIR: Código CSS

Ahora agregue el código a continuación dentro del módulo de código. Asegúrese de mantenerse dentro de una etiqueta 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;
}

AÑADIR: Código JQERY

Agregue el siguiente código de jQuery por debajo del código CSS. No olvides mantenerlos dentro de las etiquetas de 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);

Creando más tarjetas de visita

Para agregar más tarjetas de visita de sus compañeros de equipo, necesitamos clonar la columna tantas veces como necesite. Pero, asegúrese de haber eliminado los módulos de código de las tarjetas clonadas porque tener dos módulos de código romperán el diseño.

Ahora modifique cada tarjeta de acuerdo con cada persona que desea contar aquí.

Visión final

Después de todo el trabajo que hemos hecho, nuestro diseño se ve así. Haga clic en cada tarjeta y volteará y mostrará información sobre el individuo. Luego, haga clic en Afuera y volverá a su posición anterior.

Conclusión

La tarjeta de visita interactiva es una excelente manera de mostrar a sus compañeros de equipo en el sitio web. ¡Puede usar esto para mostrar información sobre nuestros proyectos, compartir ideas y muchos más! Pulse Share Si encuentra útil este tutorial y si tiene alguna pregunta o consulta, puede comentar a continuación.

Divi WordPress Theme