¿Le gustaría saber cómo hacer zoom en una tarjeta de perfil con el complemento del creador de páginas? Elementor ?
En este nuevo tutorial Elementor, le mostraremos cómo aplicar un efecto Zoom en una tarjeta de perfil, mientras revelamos el nombre del perfil y sus íconos de redes sociales.
Si no tienes idea de lo que queremos hablarte hoy, te invitamos a ver el siguiente video:
Entonces volvamos a por qué estamos aquí.
Para completar este tutorial, necesitará la versión Pro de Elementor, ya que usaremos un código CSS personalizado que solo es compatible con esta versión deElementor.
Creemos una nueva sección con una estructura de 3 columnas, luego en el panel, definamos el hauteur en Altura mínimay luego Altura mínima hagamos clic en VH y coloque el control deslizante en 100.
Agreguemos un widget Sección interna en la columna del medio. El widget de la Sección Interna está configurado por defecto con 2 columnas, eliminemos una de ellas. Configuremos el resto en el panel modificando su hauteur en Altura mínima y Altura mínima pongamos el cursor en 400.
En la pestaña Estilo, vamos a modificar el superposición de fondo. Haga clic en Clásico en el tipo de fondo, y seleccione una imagen de la biblioteca y en la configuración de la imagen, seleccione centrado centrado en posición Cubrir en Tamaño. opacidad el 1 y
En la sección fronteras clic % y entrar 4 para todos los radios de bordillo.
En número de casillas, coloque el control deslizante en 0 en Horizontal, Para 70 en Vertical, Para 63 en Flou, Para -60 en difusor. Debería ver un hermoso efecto de sombra debajo de su imagen.
En el sección interna desliza el Widget de título. Como título ingrese Steve Jobs, en la pestaña Estilo, seleccione el color blanco # FFFFFF. En la tipografía, selecciona el Tamaño 20.
Luego seleccione la columna del Widget de Sección Interna y en la pestaña Estilo, seleccione el tipo de borde haciendo clic en Sólido, todos los anchos en 1 y los colores en #FFFFFF.
En la pestaña Avanzado, cambie los márgenes a 15 y márgenes internos en 20.
Ahora inserte los íconos de redes sociales arrastrando el widget de íconos de redes sociales a la sección interna.
Editar enlaces de redes sociales en la pestaña Contenido haciendo clic en Cada red social. Si desea agregar otras redes sociales, haga clic en el botón Agregares un elemento
En el Campo de iconos, haga clic en Biblioteca de iconos y en la barra de búsqueda escriba las primeras letras de su red social, tan pronto como la encuentre, selecciónela y haga clic en el botón Insertar.
Luego ve a la pestaña Estilo, en la sección icono, cambie el color a personnalisé.
Lea también nuestra guía sobre; Cómo agregar paginación con Elementor
Sobre Color principal, establezca la transparencia al mínimo.
Sobre Color secundario, seleccione el color # FFFFFF. En Tamaño, ingrese 20, Margen Interno en 0.4.
Ahora haga clic en la pestaña Avanzado, y en la sección posicionamientohacer clic en personnalisé. en ancho personalizado, ingresar 0.
Descubrir también Cómo usar el selector de color con Elementor
Sobre Puesto de trabajo, seleccione absoluto, en el turno 15En Orientación Vertical Choisir Bas, y cambio en 20.
Seleccione de nuevo el Sección interna y en la pestaña Avanzado, en la sección CSS personalizado (Si no tiene esta sección, actualice rápidamente a la versión pro de Elementor para continuar)
Copie y pegue el siguiente código en esta sección:
/*CSS de superposition d'arrière-plan avec Zoom-In*/
selector{
overflow: hidden !important;
}
selector .elementor-background-overlay{
-webkit-transition: all 0.5s !important;
transition: all 0.5s !important;
-webkit-transform-origin: left;
transform-origin: left;
}
selector:hover .elementor-background-overlay{
-webkit-transform: scale(2);
transform: scale(2);
}A priori no deberías ver mucho, pero si pasas el cursor sobre la imagen deberías ver un zoom aplicado a la imagen.
Ahora copie y pegue el siguiente código después del código anterior para mostrar u ocultar ciertos elementos de la columna:
/*CSS pour Masquer/Afficher un élément de la colonne*/
selector .elementor-column{
opacity: 0;
-webkit-transition: all 0.75s !important;
transition: all 0.75s !important;
}
selector:hover .elementor-column{
opacity: 1;
}Ahora, tan pronto como pasas el cursor sobre la imagen, el zoom se aplica a la imagen y aparecen los nombres e íconos de las redes sociales.
Dupliquemos esta columna 2 veces y eliminemos las otras 2 columnas.
Cambia la imagen de fondo de las Secciones Internas, así como el nombre y enlaces de las redes sociales.
Ahí tienes, acabas de hacer esta tarea fácilmente. Simplemente obtenga una vista previa del trabajo de su tableta y teléfono inteligente, tratando de cambiar los márgenes para que coincidan con cada dispositivo.
¡Obtenga Elementor Pro ahora!
Conclusión
Listo ! Eso es todo por este artículo que le muestra cómo aplicar un efecto Zoom en una tarjeta de perfil. Si tiene alguna inquietud sobre cómo llegar, háganoslo saber dentro de comentarios.
Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
