Review del Tutorial: Diseño de tarjetas de presentación interactivas con efecto flip
En este tutorial aprenderemos cómo diseñar tarjetas de presentación interactivas con efecto flip en Divi. Las tarjetas de presentación son una forma conocida e intuitiva de proporcionar información concisa sobre una persona que trabaja en una empresa. Ahora puedes llevar ese mismo diseño al mundo digital, permitiendo que la información en cada tarjeta sea aún más dinámica e interactiva, permitiendo a los usuarios copiar información y hacer clic en enlaces dentro de la tarjeta. ¡Empecemos!
Contenido
- Sneak Peek
- Descarga el diseño GRATIS
- Qué necesitas para comenzar
- Diseñando una tarjeta de presentación que volteará al hacer clic en Divi
- Configuraciones de la fila y la columna
- Duplica la columna
- Construye la tarjeta trasera
- Crea el logo de la tarjeta trasera
- El nombre
- El puesto de trabajo (o rol)
- La empresa
- El número de teléfono
- La dirección de correo electrónico
- El sitio web
- Los íconos de seguimiento en redes sociales
- Agrega la misma clase CSS a todos los módulos de contenido de la tarjeta
- La tarjeta delantera
- El código personalizado
- Creación de tarjetas de presentación adicionales
- Resultado final
- Pensamientos finales
Aquí te mostramos un adelanto del diseño que crearemos en este tutorial. ¡Te sorprenderás con el resultado final!
Para que puedas seguir este tutorial sin problemas, te ofrecemos la descarga gratuita del diseño para las tarjetas de presentación interactivas. Solo tendrás que hacer clic en el enlace y podrás tener acceso a estos increíbles diseños.
Antes de comenzar, asegúrate de tener instalado y activado el tema Divi. Además, necesitarás crear una nueva página en WordPress y utilizar el Divi Builder para editarla en el front-end. ¡Así podrás diseñar las tarjetas de presentación de manera visual!
En esta sección del tutorial te mostraremos paso a paso cómo diseñar una tarjeta de presentación con efecto flip en Divi.
Comenzaremos creando una fila con una sola columna donde colocaremos nuestra tarjeta de presentación. Ajustaremos las configuraciones de la fila y la columna para asegurarnos de que nuestro diseño se vea perfecto en diferentes dispositivos.
Una vez que tengamos una columna configurada, duplicaremos esa columna para tener un diseño de dos columnas. Esto nos permitirá tener una tarjeta de presentación en el lado delantero y otra en el lado trasero.
En este paso, crearemos la tarjeta trasera de nuestra tarjeta de presentación. Añadiremos un divisor que servirá como fondo de la tarjeta. Configuraremos los colores, la imagen de fondo y el sombreado de la tarjeta trasera para lograr un diseño atractivo.
A continuación, añadiremos el logo a nuestra tarjeta de presentación. Utilizaremos un módulo de imagen para insertar el logo en la posición deseada. Podremos ajustar el tamaño, la posición y los estilos del logo para que se adapte perfectamente al diseño de la tarjeta.
En esta sección, añadiremos el nombre de la persona que aparecerá en la tarjeta de presentación. Utilizaremos un módulo de texto para insertar el nombre y ajustaremos el estilo del texto para que se vea elegante y legible.
Para que los demás sepan el puesto de trabajo o el rol de la persona en la tarjeta de presentación, insertaremos esta información debajo del nombre. Utilizaremos otro módulo de texto para añadir el puesto o el rol y ajustaremos el estilo para que sea coherente con el diseño general.
Es importante mencionar la empresa a la que pertenece la persona en la tarjeta de presentación. Añadiremos esta información utilizando el módulo de texto y ajustaremos el estilo y la alineación para que se vea bien en el diseño.
Para ofrecer una forma de contacto directa, incluiremos el número de teléfono en la tarjeta de presentación. Utilizaremos un módulo de “blurb” con un ícono de teléfono y ajustaremos el estilo del texto para que sea legible.
Además del número de teléfono, también añadiremos la dirección de correo electrónico de la persona en la tarjeta de presentación. Utilizaremos otro módulo de “blurb” con un ícono de sobre y ajustaremos el estilo del texto para que sea coherente con el diseño.
Si la persona tiene un sitio web personal o profesional, incluiremos esa información en la tarjeta de presentación. Utilizando el módulo de “blurb”, añadiremos el enlace al sitio web y ajustaremos el estilo del texto para que sea coherente con el resto del diseño.
Por último, añadiremos íconos de seguimiento en redes sociales para que los demás puedan conectar con la persona en diferentes plataformas. Utilizando el módulo de “social media follow”, añadiremos los íconos y ajustaremos el estilo para que se vea atractivo.
Para poder añadir el efecto flip a nuestra tarjeta de presentación, necesitaremos asignar la misma clase CSS a todos los módulos de contenido de la tarjeta. Así podremos aplicar estilos y animaciones a estos elementos de manera colectiva.
Una vez que hayamos finalizado la construcción de la tarjeta trasera, pasaremos a la creación de la tarjeta delantera. Utilizando un módulo de imagen, diseñaremos la tarjeta delantera para que se superponga a la tarjeta trasera y cree el efecto flip.
En esta sección del tutorial, añadiremos un código personalizado CSS y JQuery para lograr el efecto flip en la tarjeta de presentación al hacer clic sobre ella. Este código nos permitirá controlar las animaciones y la interacción con el usuario.
Si deseas crear más tarjetas de presentación con el mismo efecto flip, podrás hacerlo fácilmente duplicando la columna y personalizando los contenidos y las imágenes para cada tarjeta adicional.
Una vez que hayas terminado de seguir todos los pasos del tutorial, podrás disfrutar del resultado final: una tarjeta de presentación interactiva y moderna con efecto flip. Los usuarios podrán interactuar haciendo clic en la tarjeta para obtener más información y podrán copiar la información o hacer clic en los enlaces dentro de la tarjeta.
Esperamos que este tutorial te haya inspirado a crear tarjetas de presentación interactivas para tu equipo o para mostrar información en tu sitio web. La técnica del efecto flip se puede aplicar a diferentes tipos de contenido, así que no dudes en experimentar y adaptarla a tus necesidades. Si tienes alguna pregunta o comentario, no dudes en compartirlo con nosotros. ¡Buena suerte en tu proyecto!
¡Convierte a tus tarjetas de presentación en algo divertido y atractivo con este tutorial de Divi!
BusinessCard: Descargar Gratis en OrangoGPL
Pues sí, descargar BusinessCard Gratis en OrangoGPL es posible y completamente conforme a la legalidad vigente.
En verdad, incluso es legítimo descargar BusinessCard nulleado, porque la licencia bajo la que se distribuye es la General Public License, y esta licencia habilita su libre distribución.
De modo que puedes estar en calma: Si querías comprar BusinessCard barato o, directamente, descargar BusinessCard Theme nulled y, de esta forma, obtenerlo cien por cien gratis, es posible hacerlo fácil y legalmente.
BusinessCard GPL: La única salida para emprendedores iniciando su camino
Cómo lo llames es irrelevante: Comprar BusinessCard en reventa, descargar BusinessCard Theme GPL, descargar BusinessCard sin licencia o descargar BusinessCard Theme cracked.
Es algo enteramente dentro de la ley y algo más que necesario para cualquier emprendedor iniciando su camino.
Valoraciones
No hay valoraciones aún.