Cómo diseñar barras adhesivas para páginas de productos con los módulos Woo de Divi

Vistazo

Aquí hay un vistazo rápido a lo que diseñaremos en este tutorial de caso de uso.

Descargue el diseño de barras adhesivas 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.

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json a Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

1. Si aún no lo ha hecho, instale y active el tema Divi instalado (o el complemento Divi Builder si no usa el tema Divi).
2. Instale y active el complemento WooCommerce. Si es la primera vez que configura WooCommerce, deberá ejecutar el asistente de configuración básica para preparar su tienda. Una vez hecho esto, está listo para agregar sus nuevos productos.
3. Crea algunos productos si aún no tienes ninguno. Para obtener más información sobre cómo agregar un nuevo producto, consulte este tutorial .

Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.

Parte 1: diseñar la barra adhesiva en una página de producto

Vamos a usar un producto simple simulado para este ejemplo, por lo que debe crear un nuevo producto o editar un producto existente. La información del producto no es importante para este tutorial, solo asegúrese de tener los conceptos básicos como el título del producto, el precio, la descripción, la imagen, etc.

Una vez que tenga listo un producto simple, haga clic para editar el producto en el backend e implemente Divi Builder en la página del producto. En Configuración de página Divi, seleccione «Ancho completo» para el Diseño de página y luego haga clic en «Crear en el front-end».

La página del producto debe verse similar a esto.

Debajo de la primera fila que contiene las migas de pan y el aviso del carrito, agregue una nueva fila con un diseño de una columna.

Configuración de fila

Antes de agregar cualquier módulo, actualice la configuración de la fila de la siguiente manera:

• Color de fondo: #333333
• Usar ancho de canalón personalizado: SÍ
• Ancho del canalón: 1
• Ancho: 100%
• Relleno: 0px arriba, 0px abajo

Hacer la fila pegajosa

Para hacer que la fila sea fija, agregue el siguiente CSS personalizado al elemento principal para escritorio:

Luego agregue el siguiente CSS al mismo elemento principal para la pantalla de la tableta:

Si no está familiarizado con la propiedad css «posición: pegajosa», básicamente es una especie de combinación entre la posición fija y la posición relativa donde el elemento (en este caso, la fila) se desplazará junto con su contenedor hasta que alcance una posición designada en la parte superior o inferior de la página (o el desplazamiento especificado). En este ejemplo, estamos configurando el desplazamiento en 50 px desde la parte superior de la ventana del navegador (dejando espacio para la altura de un encabezado fijo predeterminado en el escritorio). Luego, en la tableta, el desplazamiento se cambia a «superior: 0px» para corregir la fila/barra adhesiva en la parte superior del navegador en el dispositivo móvil.

NOTA: Ignore los errores que ve al agregar el CSS al cuadro. El código funcionará bien.

Después del CSS, actualice el índice Z de la siguiente manera:

• Índice Z: 10

Ahora la fila se volverá pegajosa a medida que el usuario se desplaza hacia abajo en la página del producto.

CSS personalizado de columna

Antes de comenzar a llenar la fila con contenido, debemos asegurarnos de que el módulo dentro de nuestra fila de una columna se alinee horizontalmente en lugar de verticalmente. Podemos usar un simple truco de CSS para hacer esto con la propiedad flex. Abra la configuración de la columna y agregue el siguiente CSS personalizado al elemento principal:

Eso se encarga de nuestro diseño de fila pegajosa. Ahora, necesitamos llenar la fila con algo de contenido.

Agregar título Woo

Agregue un nuevo módulo de título de Woo a la columna de la fila adhesiva.

Luego actualice la configuración de la siguiente manera:

• Color del texto del título: #ffffff
• Tamaño del texto del título: 28 px (escritorio), 20 px (tableta), 16 px (teléfono)
• Ancho: 30%
• Acolchado: 2vw arriba, 2vw abajo, 2vw izquierda, 2vw derecha

Agregar precio Woo

A continuación, agregue un módulo de precio de woo haciendo clic en el ícono gris más que aparece al pasar el mouse sobre el módulo de título de woo que acaba de crear.

Luego actualice la configuración de Woo Price de la siguiente manera:

• Precio Tamaño del texto: 28 px (escritorio), 20 px (tableta), 16 px (teléfono)
• Ancho: 30%
• Acolchado: 2vw arriba, 2vw abajo, 2vw izquierda, 2vw derecha
• Ancho del borde derecho: 1px
• Color del borde derecho: #777777
• Ancho del borde izquierdo: 1px
• Color del borde izquierdo: #777777

Agregar Woo Módulo Agregar al carrito

Para la última parte del contenido, agregue un módulo Woo Add to Cart justo después del módulo Woo Price.

Luego actualice la configuración de la siguiente manera:

Simplifique el elemento Agregar al carrito ocultando la cantidad de existencias y el campo de cantidad en el dispositivo móvil.

• Mostrar campo de cantidad: APAGADO (tableta)
• Mostrar existencias: APAGADO

• Alineación de texto: Derecha
• Usar estilos personalizados para el botón: SÍ
• Tamaño del texto del botón: 18 px (tableta), 14 px (teléfono)
• Color del texto del botón: #ffffff
• Color de fondo del botón: #7ac5af
• Ancho del borde del botón: 0px

• Ancho: 40%
• Acolchado: 2vw izquierda, 2vw derecha

Resultado

Ahora veamos cómo se ve en la página en vivo.

Y aquí está en el móvil.

Parte 2: Creación de una barra adhesiva de aviso de carrito

Crear una barra adhesiva de aviso de carrito en realidad implica solo unos pocos pasos simples, pero el resultado puede ser extremadamente efectivo. Como ya sabrá, el aviso del carrito solo aparece después de que un usuario hace clic en el botón «Agregar al carrito». Pero es el siguiente paso crucial en el proceso de compra el que lleva a los usuarios a la página de pago. Entonces, cuando el aviso del carrito aparece como una barra adhesiva en la parte inferior de la ventana, el usuario lo nota más.

Para crear la barra adhesiva de notificación del carrito, primero cree una nueva fila de una columna en la parte inferior de la página del producto. Luego actualice la configuración de la fila de la siguiente manera:

• Ancho: 100%
• Relleno: 0px arriba, 0px abajo

Luego, haga que la fila sea fija agregando el siguiente CSS personalizado al elemento principal:

NOTA: Como hicimos anteriormente, puede ignorar los errores que aparecen al agregar la propiedad position: sticky.

Esto hará que la fila se adhiera a la parte inferior de la ventana cuando se desplace hacia arriba.

Luego actualice el índice z para mantenerlo a la vanguardia de la siguiente manera:

• Índice Z: 10

Agregar el módulo de notificación del carrito

Una vez que haya creado la fila, agregue el Módulo de notificación de Woo Cart a la fila y actualice la configuración de la siguiente manera:

• Texto Tamaño del texto (teléfono): 15px
• Margen: 0em inferior

¡Eso es todo! Depende de usted si desea o no borrar el elemento de aviso de carrito predeterminado en la parte superior de la página, pero podría ser una buena idea dejarlo para obtener mejores conversiones.

Resultado final

Aquí está el resultado final con las dos barras adhesivas en su lugar.

Escritorio

Móvil

Pensamientos finales

Esperamos que esta publicación nos ayude a comprender cómo crear barras adhesivas para nuestras páginas de productos en Divi. Cubrimos cómo crear una barra adhesiva que incluye el título del producto, el precio y el botón Agregar al carrito. Y también mostramos cómo crear una barra adhesiva de aviso de carrito. Ambos deberían ayudar al proceso de compra y aumentar las conversiones. ¡Y ni siquiera necesitamos un complemento!

Siéntase libre de explorar nuevas formas de usar las barras adhesivas de la página del producto en su propio sitio.

Esperamos saber de usted en los comentarios.

¡Salud!