Diseñar tarjetas de presentación que se voltean 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, al igual que una tarjeta de presentación real.
¡Entremos y comencemos!
Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.
Descarga el diseño GRATIS
Para poner sus manos en 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
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:
- Si aún no lo has hecho, instala y activa el tema Divi .
- Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
- Elija la opción «Construir desde cero».
Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.
Diseño de una tarjeta de presentación que se voltea al hacer clic en Divi
Configuración de filas y columnas
Para comenzar, cree una fila de una columna en la sección normal.
Abra la configuración de la fila y actualice lo siguiente:
- Igualar 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 px arriba, 30 px abajo, 50 px a la izquierda, 50 px a la derecha
- Relleno (teléfono): 15 px arriba, 15 px abajo, 15 px a la izquierda, 15 px a la derecha
En la pestaña avanzada, agregue la siguiente clase CSS a la columna:
- Clase CSS: tarjeta-columna
Esta clase servirá como objetivo en nuestro código para desencadenar 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 tarjeta 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 sea visible. Solo estamos usando 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
- Gradiente de fondo Color izquierdo: rgba(50,43,63,0.72)
- Degradado de fondo Color derecho: #322b3f
- Tipo de gradiente: Radial
- Posición final: 34%
- Coloque el degradado sobre la imagen de fondo: SÍ
Imagen de fondo
- Imagen de fondo: [subir 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%
- Altura mínima: 300px
- Altura: 100%
Sombra de la caja
- Sombra de caja: ver captura de pantalla
- Posición vertical de la sombra del cuadro: 0px
- Fuerza de desenfoque de sombra de cuadro: 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: Absoluta
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 comenzar, agregaremos un logotipo en la esquina superior izquierda.
Agregue un módulo de imagen debajo del módulo divisor/tarjeta trasera.
Luego cargue una imagen de logotipo de 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 la tarjeta
Posición
- Posición: Absoluta
- Desplazamiento vertical: 30 px (computadora de escritorio y tableta), 15 px (teléfono)
- Desplazamiento horizontal: 50 px (computadora de 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 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 del texto: Poppins
- Texto Color del texto: #ffffff
- Texto Tamaño del texto: 28 px (computadora de escritorio y tableta), 22 px (teléfono)
- Espaciado entre letras: 1px
- Alineación de texto: Derecha
El puesto de trabajo (o rol)
Para agregar la posición (o rol) de la persona en la tarjeta, duplique el módulo de texto anterior con el nombre.
Luego actualice el contenido del cuerpo 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: 16 px (computadora de escritorio y tableta), 14 px (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 fuente de texto: ligero
- Estilo de fuente de texto: predeterminado
- Texto Tamaño del texto: 22 px (computadora de escritorio y tableta), 18 px (teléfono)
- Alineación de texto: Izquierda
El numero de telefono
Para crear el número de teléfono para la tarjeta de presentación, agregue un módulo de publicidad debajo del módulo de texto (empresa).
Actualice el contenido del cuerpo de la publicidad (teléfono) con el número de teléfono que desea que aparezca en la tarjeta.
Haga clic para usar un ícono 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)
- Colocación de imagen/icono: Izquierda
- Usar tamaño de fuente de icono: SÍ
- Tamaño de fuente del icono: 20 px
- Fuente del cuerpo: Poppins
- Color del cuerpo del texto: #ffffff
- Tamaño del cuerpo del texto: 16px
- Margen: 10px inferior
La direccion de correo electronico
Para incluir la dirección de correo electrónico en la tarjeta, duplique el módulo de publicidad (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 presentar el sitio web en la tarjeta, duplique el módulo de publicidad (teléfono) y actualice el contenido del cuerpo con el sitio web.
Luego actualice el ícono con un ícono más apropiado.
Para nuestra última parte del contenido de la 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 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 dele al módulo una alineación correcta.
Agregue la misma clase de 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 otorgar 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 la tarjeta
Vamos a apuntar a esta clase nuestro código CSS personalizado para ocultar y mostrar el contenido antes y después de la animación de volteo de la tarjeta frontal.
La carta frontal
Ahora que nuestra tarjeta trasera está terminada con todo el contenido de la tarjeta en su lugar, estamos listos para crear la tarjeta frontal que se ubicará encima de la tarjeta trasera y el contenido de la tarjeta trasera. Para hacer esto, vamos a diseñar la tarjeta frontal usando un módulo de imagen en la columna 2. Luego, la moveremos para colocarla encima de la tarjeta trasera en la columna 1.
Primero, agregue un módulo de imagen a la columna 2.
Cargue la misma imagen del logotipo (60 px por 60 px) utilizada para el logotipo de la tarjeta trasera para usarla como imagen.
Luego abra la configuración para el 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 px arriba, 50 px a la izquierda
- Relleno (teléfono): 15px arriba, 10px a 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]
La actualización de 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 la altura y el ancho completos 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 olvides 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 trasera.
El código personalizado
El último paso es agregar algo de CSS y JQuery personalizados para completar la funcionalidad de hacer que la tarjeta de presentación gire la animació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 :
|
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
39
|
.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
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
|
(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 presentación 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 crearla. 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 trasera 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 voltear la tarjeta, todo lo que necesita hacer es hacer clic fuera de la columna que contiene la tarjeta. No quería que la tarjeta se volteara nuevamente al hacer clic en la tarjeta (como un interruptor) 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 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 vea si es una buena opción para su próximo proyecto.
Espero escuchar de usted en los comentarios.
¡Salud!