Cuando se trata de comprar productos en línea, las imágenes de productos excelentes son esenciales para cerrar la venta. Es por eso que la mayoría de las páginas de productos tienen esas imágenes de productos en la parte superior de la página, por lo que es lo primero que ven los compradores. Sin embargo, a medida que el usuario se desplaza hacia abajo en la página para ver más información sobre el producto (descripciones, reseñas, etc.), la imagen principal del producto ya no está a la vista. Una forma de mantener esas imágenes de productos a la vista es agregar una imagen de producto fija que permanezca a la vista mientras un comprador potencial navega por la información de su producto.
En este tutorial, le mostraremos cómo agregar imágenes adhesivas de productos a su plantilla de página de productos Divi . Para hacer esto, podemos optimizar el módulo de imagen del producto WooCommerce de Divi para que se muestre y se pegue en la parte superior de la página justo cuando la imagen del producto original se desplaza fuera de la vista.
¡Empecemos!
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!
https://youtu.be/vwfPFqyVaNM
Suscríbete a nuestro canal de Youtube
Cómo cargar la plantilla
Ir al Creador de temas Divi
Para cargar la plantilla, navegue hasta Divi Theme Builder en el backend de su sitio web de WordPress.
Subir plantilla de sitio web
Luego, en la esquina superior derecha, verás un ícono con dos flechas. Haga clic en el icono.
Vaya a la pestaña de importación, cargue el archivo JSON que pudo descargar en esta publicación y haga clic en ‘ Importar plantillas de Divi Theme Builder ‘.
Guardar los cambios del generador de temas Divi
Una vez que haya cargado el archivo, notará una nueva plantilla con una nueva área del cuerpo que se ha asignado a Todas las publicaciones. Guarde los cambios de Divi Theme Builder tan pronto como desee que se active la plantilla.
Vayamos al tutorial para que podamos aprender a construir esta cosa desde cero, ¿de acuerdo?
Cómo agregar imágenes adhesivas de productos a su plantilla de página de productos Divi
Carga de la plantilla de página de producto de Theme Builder Pack 5
Para comenzar, vamos a comenzar con el diseño agregando una de nuestras plantillas de página de productos prefabricadas. Para importar la plantilla de Theme Builder, deberá hacer lo siguiente:
- Navega hasta Divi Theme Builder
- Haga clic en el icono de portabilidad en la parte superior derecha de la página.
- Seleccione la pestaña Importar en la ventana emergente Portabilidad.
- Descargue e importe el archivo de plantilla de producto Divi Divi Theme Builder 5 . Una vez que descargue el paquete aquí , descomprima el archivo y encontrará el archivo «divi-theme-builder-pack-5-product-page-template.json» que deberá importar.
- Haga clic en el botón Importar
- Una vez que se haya importado la plantilla, haga clic en el icono de edición en el área del cuerpo personalizado de la plantilla para editar el diseño de la plantilla.
Agregar una nueva fila
Queremos que la imagen del producto se muestre una vez que el usuario haya pasado la sección superior que ya incluye la imagen del producto (no es necesario mostrarla allí). Por lo tanto, lo agregaremos a una nueva sección debajo de la sección superior del diseño.
Continúe y agregue una nueva sección regular debajo de la sección superior.
Abra la configuración de la nueva sección y actualice el relleno:
- Relleno: 0px arriba, 0px abajo
Vaya a la pestaña avanzada y actualice el índice z:
- Índice Z: 13
Esto es para que la imagen (el elemento secundario de esta sección) permanezca sobre las otras secciones/elementos en la página al desplazarse.
Agregar la fila
A continuación, agregue una fila de una columna en la sección.
Abra la configuración de la fila y ajuste la alineación y el relleno de la fila:
- Alineación de filas: Derecha
- Relleno: 0px arriba, 0px abajo
Agregar imagen del producto
Ahora estamos listos para agregar la imagen del producto que eventualmente se adherirá a la parte superior de la página al desplazarse. Para agregar la imagen del producto, copie el módulo de imagen del producto existente en la sección superior y péguelo en nuestra nueva fila.
Configuración de imágenes de Woo
Abra la configuración del nuevo módulo de imágenes de Woo y ajuste el contenido de la siguiente manera:
- Mostrar imágenes de la galería: APAGADO
- Mostrar insignia de venta: APAGADO
(NOTA: puede conservar las imágenes de la galería si lo desea. Solo tenga cuidado de no ocupar demasiado espacio, ya que este módulo de imagen se desplazará sobre otros elementos de la página).
En la pestaña de diseño, actualice la opción Forzar ancho completo a «SÍ».
Luego actualice lo siguiente:
- Ancho máximo: 300 px (escritorio), 200 px (teléfono)
- Alineación del módulo: Derecha
El ajuste del acolchado:
- Relleno: 10px arriba, 10px a la derecha
En la pestaña avanzada, actualice lo siguiente:
- Índice Z: 1
- Posición pegajosa: Stick to Top
Esto hará que la imagen se adhiera a la parte superior de la página una vez que el usuario se desplace más allá de esa imagen.
Una vez que la posición adhesiva esté en su lugar, regrese a la pestaña de diseño y use la opción adhesiva para actualizar el filtro de opacidad para que oculte la imagen hasta que se vuelva adhesiva. Puede implementar la opción de estilo fijo pasando el cursor sobre la configuración y haciendo clic en el icono de la miniatura.
- Opacidad: 0% (escritorio), 100% (adhesivo)
Eliminar el espaciado de la sección, fila y columna
En este momento, tenemos algunos espacios no deseados que la imagen del nuevo producto está usando dentro del flujo de nuestro diseño. Para eliminar ese espacio, todo lo que tenemos que hacer es darle a la columna un valor de altura personalizado que sea «0» o algo realmente bajo. La imagen del producto aún se mostrará o se desbordará aunque tenga una columna sin altura real.
Abra la configuración de la columna y agregue el siguiente CSS personalizado al elemento principal:
01
|
height : 15px ; |
¡Eso es todo! Todos hemos terminado.
Resultado final
Compruebe el resultado final mirando una publicación en vivo en su sitio.
Pensamientos finales
Agregar una imagen de producto adhesiva a la plantilla de la página de su producto en Divi es una manera rápida y fácil de mantener sus productos a la vista mientras los visitantes exploran su producto. Y también puede optar por pegar el botón Agregar al carrito junto a él usando la misma técnica. De todos modos, espero que esto te ayude con tu próximo proyecto.
Espero escuchar de usted en los comentarios.
¡Salud!