¿Alguna vez ha querido presentar crear una tarjeta de producto con Elementor  ?

Esto es lo que te mostraremos en este tutorial. Para tener una idea bastante precisa de lo que estaremos hablando hoy, te invitamos a ver el siguiente video:

crea una tarjeta de producto con Elementor

Este tutorial trata de presentar productos que son zapatos resaltando sus tallas, colores y el botón de compra de cada uno. Al pasar el cursor sobre cada una de las tarjetas, aparecerá esta información. Aquí hay un breve resumen de lo que haremos.

Para seguir este tutorial, lo invitamos a buscar imágenes de zapatos y tener una versión Pro de Elementor. Si aún no lo tiene, haga clic en este enlace para obtenerlo.

Pero volvamos a lo que estamos aquí.

Vamos a crear una página y modificarla con Elementor.

En este, elijamos una estructura con 3 columnas. Vamos a arreglarlo altura en altura mínima , la altura mínima en VH y coloque el cursor en 100.

En la pestaña Estilo, elija el color de fondo #130640

En la columna del medio, inserte un Widget de imagen seleccionando una imagen de zapato de su biblioteca.

crea una tarjeta de producto con Elementor

Vaya a la pestaña Estilo y en la propiedad de la imagen establezca el ancho en 80

Luego arrastre un Widget de título e ingrese el título tenis Nike - Este es un ejemplo, podría ser una marca completamente diferente -  

Lea también: Cómo optimizar el diseño de su sitio web con Elementor

Establezca la etiqueta HTML en H3 y centre la alineación

Vaya a la pestaña Estilo y cambie el color del texto a color blanco

Cambia también la tipografía

Luego arrastre un Widget de sección interior bajo el Widget de título que insertó arriba.

De forma predeterminada, este widget le ofrecerá 2 columnas, elimine una de ellas. En esto Widget de sección interior, Inserte un Widget de título.

Darlo como título Tamaño : y establezca la etiqueta HTML en Lapso.

crea una tarjeta de producto con Elementor

En la pestaña Estilo, cambie el color del título, el tamaño a 15 y el grosor a 300

crea una tarjeta de producto con Elementor

En la pestaña Avanzado, establezca solo el margen derecho en 5 y en la propiedad posicionamiento seleccionar En línea (automático).

Agregue en la misma sección interna un widget de botón con el texto 8 y el espaciado de los iconos en 0.

Lea también: Cómo desplazarse por una imagen larga de una cartera con Elementor

En la pestaña Estilo, cambie el color del texto y el color de fondo del botón respectivamente a Blanco y Negro y en el Margen interno ingrese 6-10-6-10 respectivamente para los márgenes Interno superior-derecho-inferior-izquierdo.

En la pestaña Avanzado, establezca solo el margen izquierdo en 5, y en la propiedad Posicionamiento, seleccione En línea (Automático).

Duplique este botón 3 veces y cambie el texto de los últimos 3 botones a 9,10,11 - también puede hacerlo usando las letras S, M, L, XL, XXL-

Haga clic en editar sección y establezca Alineación horizontal en Centro

Luego duplique esta sección Interna -Sección Interna- y modifique Tamaño por Color elimine 3 botones y en el que quede borre el texto del botón.

En la pestaña Contenido Del botón, seleccione el icono del círculo de la biblioteca de iconos, haga clic en Insertar para agregarlo al botón.

En la pestaña Estilo, asigne tamaño 24 a la tipografía y vincule los Márgenes internos e ingrese 0. En el color de fondo configure la transparencia en min y luego puede cambiar el color del texto a azul, por ejemplo.

Luego, duplique este botón 3 veces y cambie los colores de los otros dos a amarillo y rojo. Luego haga clic en la sección interna para editarla y en la pestaña Avanzado configure los márgenes superior e inferior en -5 y 10.

Ahora vamos a agregar un widget de botón debajo del segundo widget de sección interna, ingrese como texto Comprar ahora y alineación al centro. En la pestaña Estilo, configure el botón en Blanco y el texto del botón en Negro, luego configure todos los radios de los bordes en 20.

Seleccione la columna principal en la que trabajamos y configure la alineación Vertical en Medio, en la pestaña Estilo, elija el tipo de fondo como Degradado y como Tipo seleccione Radial luego, en el color principal, establezca la transparencia y la ubicación en 94. Para el segundo color, establezca la ubicación en 77 y el radio de los bordes sobre 10.

En la pestaña Avanzado, establezca los márgenes en 0-35-0-35 y los márgenes internos en 50-20-50-20.

A continuación, puede ocultar el panel para ver cómo se ve su trabajo. Verás que tu tarjeta es muy bonita, pero vamos a darle vida animando ciertas secciones. Y para eso vamos a animar el Tamaño, el Color y el botón de compra.

Ver tambien Cómo cambiar el encabezado en el desplazamiento de la página en Elementor

Primero, seccionemos la primera sección Interna que muestra el tamaño del producto y en la pestaña Avanzado, definamos Fade In Up como efecto de movimiento - Animación de entrada y retraso de la animación en 300.

Hagamos lo mismo con la sección interna que muestra los colores pero con un retraso de animación de 800. Para el botón de compra, su retraso será de 1000

Ahora vamos a asignar la clase. esconderse primero Sección interior y botón de compra. Seleccione la primera sección interna, en la pestaña Avanzado y en la propiedad Avanzada ingrese ocultar primero en el campo Clases CSS. Haz lo mismo con la otra sección interior y con el botón de compra.

Por lo tanto, agregaremos código CSS que animará toda la columna. Copie el siguiente código:

selector {

    altura: 400px;

    pantalla: flexión;

}

/ * CSS para Mostrar / Ocultar * /

selector .hide-first {

    display: none;

}

selector: hover .hide-first {

    bloqueo de pantalla;

}

/ * Transformación de imagen * /

selector img {

    transición: facilidad .5s;

}

selector: hover img {

    transformar: traducir (-20px, -40px) rotar (-25deg) escala (1.4);

}

/ * Descripción general de dispositivos móviles * /

@media (ancho máximo: 767px) {

 selector: hover img {

    transformar: traducir (-20px, 0px) rotar (-10deg) escala (1);

}

selector {

    margen: 50px 10px;

}

}

Seleccione la columna para modificarla y vaya a la pestaña Avanzado y en el campo CSS personalizado, pegue este código.

NB: Debes saber que esta opción solo está disponible si tienes la versión Pro deElementor.

Si está hecho, su mapa se animará al pasar el mouse por encima, mientras que, de forma predeterminada, ocultará los tamaños, colores y el botón de compra.

Con respecto a la explicación del código, la parte del comentario brinda una descripción general. Pero modificando los valores entenderás para qué sirve cada instrucción.

Ver también: Cómo agregar dos botones uno al lado del otro en la misma columna con Elementor

Si todo funciona normalmente, duplique esta columna dos veces y elimine las otras columnas vacías.

Todo lo que tienes que hacer es reemplazar las imágenes y títulos de los otros bloques y finalmente obtener una vista previa de tu trabajo.

Acaba de crear una hermosa tarjeta de producto.

¡Obtenga Elementor Pro ahora!

Conclusión

Listo ! Eso es todo por este tutorial que le muestra cómo hacer una tarjeta de producto con Elementor. Si tiene alguna inquietud sobre cómo llegar, háganoslo saber en el 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.

...