Cómo agregar imágenes adhesivas de productos a su plantilla de página de productos Divi

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 a la vista esas imágenes de productos es agregar una imagen de producto pegajosa que permanezca a la vista mientras un comprador potencial busca 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 producto Divi. Para hacer esto, podemos optimizar el módulo de imagen del producto WooCommerce de Divi para que se muestre y se quede en la parte superior de la página justo cuando la imagen del producto original se desplaza fuera de la vista.

¡Empecemos!

Vistazo

Aquí hay un vistazo rápido al diseño que crearemos en este tutorial.

Descarga el diseño GRATIS

Para poner sus manos sobre 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 nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

https://youtu.be/vwfPFqyVaNM

Suscríbete a nuestro canal de Youtube

Cómo cargar la plantilla

Ir a Divi Theme Builder

Para cargar la plantilla, navegue hasta Divi Theme Builder en el backend de su sitio web de WordPress.

Cargar plantilla de sitio web

Luego, en la esquina superior derecha, verá 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 Divi Theme Builder'.

Guardar cambios en Divi Theme Builder

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 esto 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 la página del producto Theme Builder Pack 5

Para comenzar, vamos a impulsar el diseño agregando una de nuestras plantillas de página de producto prefabricadas. Para importar la plantilla del Theme Builder, deberá hacer lo siguiente:

1. Navega hasta Divi Theme Builder
2. Haga clic en el icono de portabilidad en la parte superior derecha de la página.
3. Seleccione la pestaña Importar en la ventana emergente Portabilidad.
4. 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 necesitará importar.
5. Haga clic en el botón Importar
6. 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 de 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 por encima de las otras secciones / elementos de 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 filas y ajuste la alineación y el relleno de las filas:

• Alineación de filas: derecha
• Relleno: 0px arriba, 0px abajo

Agregar imagen de producto

Ahora estamos listos para agregar la imagen del producto que eventualmente se quedará en la parte superior de la página en el desplazamiento. 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: DESACTIVADO
• 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 el acolchado:

• Relleno: 10 píxeles en la parte superior, 10 píxeles en la derecha

En la pestaña avanzada, actualice lo siguiente:

• Índice Z: 1
• Posición adhesiva: adherirse a la parte superior

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 pegajosa. Puede implementar la opción de estilo pegajoso colocando el cursor sobre la configuración y haciendo clic en el icono de miniatura.

• Opacidad: 0% (escritorio), 100% (pegajoso)

Eliminar el espaciado de la sección, la fila y la 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 espaciado, 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 seguirá mostrándose / desbordarse aunque tenga una columna sin altura real.

Abra la configuración de la columna y agregue el siguiente CSS personalizado al elemento principal:

height: 15px;

¡Eso es todo! Hemos terminado.

Resultado final

Vea 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 utilizando la misma técnica. De todos modos, con suerte, esto te ayudará con tu próximo proyecto.

Espero tener noticias tuyas en los comentarios.

¡Salud!