Cómo diseñar Visitar libros con Flip Animation al hacer clic para presentar a su equipo en Div

Diseñar tarjetas de visita que vuelvan a hacer clic puede ser una ventaja creativa para cualquier sección o página de los miembros del equipo en su sitio web. Las tarjetas de presentación ya son un método familiar e intuitivo para proporcionar información concisa sobre una persona que trabaja para una empresa. Por lo tanto, tiene sentido ofrecer el 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 los enlaces dentro de la tarjeta de presentación. En este tutorial, le mostraremos cómo diseñar una tarjeta de presentación única en DIV, que también tiene la funcionalidad de anular el clic para revelar la información sobre la persona, como es una tarjeta de presentación real.
¡Vamos a saltar y comenzar! Él saca la vista con un vistazo rápido al diseño que construiremos en este tutorial. Descargue el aspecto gratuito para poner su mano en los dibujos en este tutorial, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la aparición de la sección en la Biblioteca de la Divica, navegue en la Biblioteca de la Divica.
Haga clic en el botón Importar. En la ventana de portabilidad emergente, seleccione la pestaña Importar y elija el archivo de descarga en su computadora. Luego haga clic en el botón Importar.
Después de haber terminado, la aparición de la sección estará disponible en Divi Builder. Pasemos al tutorial, ¿no? Qué necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

Si aún no lo ha hecho, instale y active el tema de Div.
Cree una nueva página en WordPress y use Divi Builder para editar la página principal (Visual Builder).
Elija la opción “Construir desde cero”.
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div.
Diseñando una tarjeta de presentación que gira la configuración de la fila y la columna en las divisiones para comenzar, cree una fila con una columna en la sección habitual.
Abra la configuración de la fila y actualice lo siguiente:

Igualar las alturas de la columna: sí
Ancho: 90%
Ancho máximo: 1200 PX
Abra la configuración de la columna y déle un relleno de la siguiente manera:

Revestimiento (escritorio y tableta): 30 px arriba, 30 px abajo, 50 px izquierda, 50 px optus (teléfono): 15 px arriba, 15 px izquierda, 15 px a la derecha a la derecha
En la pestaña avanzada, agregue la siguiente clase CSS a la columna:
Clase CSS: columna de tarjeta

Esta clase servirá como objetivo en nuestro código para activar el evento de clic que causará animación FLIP más adelante.
Columna duplicada ahora que tenemos una configuración de una columna, duplicar la columna para que tengamos dos columnas, cada columna que tenga la misma clase de relleno y CSS.
Construyendo el libro trasero El primer elemento del diseño del libro de diseño es lo que llamaremos el libro trasero, que servirá como antecedentes de la tarjeta de presentación. Para crear la tarjeta delantera, agregue un divisor a la columna 1.

Abra la configuración del divisor y haga clic para que el divisor no sea visible. Utilizamos el divisor solo 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
Sótano de gradiente izquierdo izquierdo: RGBA (50,43,63.0.72)
Color derecho del gradiente de fondo: # 322B3F
Tipo de gradiente: radial
Posición final: 34%
Coloque el gradiente sobre la imagen de fondo: sí
Imagen de fondo
Imagen de fondo: [Cargue la imagen o retrato de los miembros de su equipo] Tamaño de la imagen de fondo: adecuado
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

Box Shadow Posición vertical: 0px
Poder de poco claro de la sombra de la caja: 50 px
Clase CSS y posición absoluta y luego agregue la siguiente clase CSS al divisor:
Clase CSS: tarjeta de fondo

Y actualice la posición en absoluto: posición: absoluta
Creando el logotipo de la tarjeta con la tarjeta de fondo (divisor) en posición, podemos comenzar a agregar nuestros elementos de tarjeta. Para empezar, agregaremos un logotipo a la esquina superior izquierda. Agregue un módulo de imagen debajo del módulo de divisor / tarjeta trasera.
Luego suba una imagen del logotipo que tenga aproximadamente 60 px con 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
Gap Gap: 30 PX (escritorio y tableta), 15 PX (teléfono)
Compensación horizontal: 50 PX (escritorio y tableta), 10 px (teléfono)
El nombre para crear el nombre de la tarjeta de presentación, agregue un nuevo módulo de texto en la imagen del logotipo.
Actualice el contenido del cuerpo con el nombre de la persona que desea presentar en la tarjeta de presentación.
En la pestaña Diseño, actualice las opciones de estilo de texto del párrafo de la siguiente manera:

Texto de fuente: Poppins

Color de texto de texto: #ffffff

Tamaño de texto de texto: 28 PX (escritorio y tableta), 22 PX (teléfono)
Espacio de letras: 1 PX
Alineación del texto: Derecho
Posición de la publicación (o rol) Para agregar la posición (o rol) de la persona en la tarjeta, copie el módulo de texto anterior con el nombre.
Luego actualice el contenido del cuerpo con la posición (o rol) de la persona.
Luego actualice la configuración de diseño para el módulo de posición de la siguiente manera:

Text -Text Style: TT

Tamaño de texto de texto: 16 PX (escritorio y tableta), 14 PX (teléfono)

Marja: 15 PX a continuación
La compañía para agregar el nombre de la compañía a la tarjeta de presentación, copie el módulo de texto anterior (posición).
Luego actualice el contenido del cuerpo con el nombre de la compañía.
Luego actualice la configuración de texto de la empresa de la siguiente manera: El peso de la fuente de texto: Light

Estilo de fuente de texto: predeterminado

Tamaño de texto de texto: 22 PX (escritorio y tableta), 18 PX (teléfono)

Alineación de texto: izquierda
El número de teléfono para crear el número de teléfono de la tarjeta de presentación, agregue un módulo de propaganda en el módulo de texto (empresa).
Actualice el contenido del cuerpo de propaganda (teléfono) con el número de teléfono que desea presentar 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:
Icono de color: RGBA (162,71,232,0,6)

Colocación de la imagen / icono: izquierda

Use el icono del tamaño de la fuente: sí

Icono de tamaño de fuente: 20 PX
Cuerpo de fuentes: Poppins
Color del texto del cuerpo: #ffffff
Tamaño del texto del cuerpo: 16 PX
Marja: 10 px abajo
La dirección de correo electrónico para mostrar la dirección de correo electrónico en la tarjeta, copiar el módulo de la propaganda (teléfono) y actualizar el contenido de su cuerpo con su dirección de correo electrónico. Luego actualice el icono a un icono de sobre.
El sitio para mostrar el sitio web en la tarjeta, copiar el módulo del teléfono (teléfono) y actualizar el contenido de su cuerpo con el sitio web. Luego actualice el icono con un icono más adecuado.
Las redes sociales siguen a los íconos para la última parte del contenido de la tarjeta, agregaremos íconos de socialización en la tarjeta. Para hacer esto, agregue un módulo para rastrear las redes sociales en el comando (sitio web).
En las redes sociales sigue la configuración, actualiza cada una de las redes sociales con antecedentes transparentes. (Puede agregar la URL del enlace más adelante, según sea necesario)

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

Agregue 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, necesitamos ofrecer todos esos módulos de la misma clase CSS. Para hacer esto, use la función de elección múltiple para seleccionar todos los módulos de contenido de la tarjeta (logotipo, nombre, teléfono, correo electrónico, sitio web e icono en las redes sociales), luego abra la configuración del elemento y agregue la siguiente clase: clase CSS: tarjeta contenido

Apuntaremos a esta clase nuestro código CSS personalizado para ocultar y mostrar el contenido antes y después de la animación del libro delantero.

La tarjeta delantera ahora, cuando nuestra tarjeta trasera se completa con todo el contenido de la tarjeta en su lugar, estamos listos para crear la tarjeta delantera que estará por encima de la tarjeta posterior y el contenido de la tarjeta trasera. Para hacer esto, diseñaremos la tarjeta delantera usando un módulo de imagen en la columna 2. Luego lo moveremos para que se sentaremos sobre la tarjeta posterior 1. Primero, agregue un módulo de imagen en la columna 2.

Sube la misma imagen del logotipo (60 px con 60 px) que se usa para hacer el logotipo de tu tarjeta posterior como imagen.

Luego abra la configuración para el módulo trasero (divisor) y copie el diseño de fondo.
Luego abra la configuración de la imagen para la tarjeta delantera que diseñamos y pegamos el diseño de fondo en la opción de fondo del módulo de imagen.
En la pestaña Diseño, actualice el espacio de la imagen de la siguiente manera:

Revestimiento (escritorio y tableta): 30 px en la parte superior, 50 px a la izquierda

Revestimiento (teléfono): 15 px en la parte superior, 10 px a la izquierda

Configuración avanzada En la pestaña Avanzada, le dé a la imagen la siguiente clase CSS: Clase CSS: Tarjeta frontal

Agregue los siguientes CSS personalizados al elemento principal: [/ CSS] Altura: 100%; Ancho: 100%; [/ Css] Opciones de posición de actualización:

Posición absoluta
IND ÍNDICE: 13
La altura y el ancho personalizados (combinados con la posición absoluta) hacen que el módulo que contenga la imagen (o logotipo) se extienda sobre toda la altura y el ancho de la columna principal. Entonces, incluso si se trata de un módulo de imagen, lo usamos para mostrar dos imágenes estratificadas (el logotipo y el fondo) como un hermoso libro delantero para diseñar nuestras tarjetas de visita.

No olvide cambiar la imagen de fondo para una nueva. En este caso, uso otro retrato de la misma persona.
Después de haber terminado, extraiga el módulo de imagen de la tarjeta delantera en la columna 1. Debe cubrir completamente la tarjeta posterior.
Código personalizado El último paso es agregar algunos CSS y JQUEY personalizados para completar la funcionalidad de realizar efectivamente la visualización de la tarjeta de visita. Para agregar el código, agregue un módulo de código en la búsqueda de redes sociales en la columna 1.
CSS Paste personalizado el siguiente código CSS entre etiquetas de estilo: .Card-Column {
Perspectivas: 1400px;
}

.front-tarjeta: Hover {

Cursor: puntero;

}

.front-tarjeta,
.
Transición: todos los 500 ms de facilidad;
Estilo de transformación: Preserve-3D;
}
.
Transformación: ROTATEX (-180DEG) ROTATA (0DEG) ROTATEZ (0DEG)!
}
.Divi-transform-activo .back-tarjeta {
Transforma: ROTATEX (0DEG) ROTATA (0DEG) ROTATEZ (0DEG)!
}
.Divi-Transform-Aactual .Front-Card {
transformación: rotatex (180deg) Rotate (0deg) Rotatez (0deg);
Transformar-urig: 50% 50%;
}
.card-cuenta {
Transición: los 300 ms facilitados 0 ms;
}
.Divi-transform-activo .card-cuenta {
Transición: todos los 300 ms facilitados 500 ms;
Opacidad: 1! IMPORTANTE;
}
.Divi-Transform-Aactual .Front-Card {
Opacidad: 0;
Visibilidad: oculto;
}
JQuery bajo CSS, pegue la siguiente jQuery entre etiquetas de script (función ($) {
$ (documento) .Ready (function () {
$ cardColumn = $ (“. Card-column”);
$ CardCentent = $ (“. Card-Content”);
$ CardContent.css (“Opacidad”, “0”);
$ CardColumn.on (“Haga clic”, funciones (s) {

$ (this) .addclass (“div-transform-active”);
E.StopPropration ();
});
$ (documento) .on (“clic”, función (s) {
if ($ (e.target) .is ($ cardColumn) === falso) {
$ CardColumn.RemoVeclass (“Div-Transform-Aactual”);
}
});
});
}) (JQuery);
Creación de tarjetas de visita adicionales para crear tarjetas de visita adicionales, todo lo que tiene que hacer es copiar la columna que contiene todos los módulos que usamos para construir. Después de copiar la columna, deberá eliminar el módulo de código adicional. Tener dos módulos de código duplicados no funcionará.
Una vez que la columna / tarjeta está duplicada, simplemente actualice las imágenes de fondo y el contenido de la tarjeta utilizando los módulos, según sea necesario para una nueva tarjeta de presentación.