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


Sticky Bars sigue siendo un elemento popular en el diseño web. Son excelentes para impulsar las conversiones al mantener las CTA a la vanguardia sin ser tan intrusivas como las ventanas emergentes.

En este caso de uso, vamos a diseñar una barra adhesiva para los productos de WooCommerce utilizando los Módulos Woo de Divi. La barra adhesiva puede incluir cualquier módulo Divi. Para este tutorial, vamos a crear una barra adhesiva que incluya el botón "Agregar al carrito" para que permanezca visible mientras el usuario se desplaza hacia abajo en la página. Además, también crearemos una barra de aviso de carrito fijo para que los usuarios siempre vean el botón "ver carrito" una vez que se hace clic en el botón "Agregar al carrito".

Estos elementos de barra adhesiva ayudarán a aumentar las conversiones al mantener a la vista esos CTA cruciales.

¡Empecemos!

Vistazo

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

Descargue el diseño de Sticky Bars 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 nuestra lista de correo electrónico Divi Daily mediante el siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" 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 al 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 Divi Theme instalado (o el complemento Divi Builder si no usa el tema Divi).
  2. Instala y activa 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á un lienzo en blanco para comenzar a diseñar en Divi.

Parte 1: Diseño de la barra adhesiva en una página de producto

Vamos a utilizar 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 Título del producto, Precio, Descripción, Imagen, etc.

Una vez que tenga un producto simple listo, haga clic para editar el producto en el backend e implementar 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 debería ser similar a esta.

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 personalizado: SÍ
  • Ancho de canal: 1
  • Ancho: 100%
  • Relleno: 0px arriba, 0px abajo

Hacer la fila pegajosa

Para que la fila sea pegajosa, agregue el siguiente CSS personalizado al Elemento principal para escritorio:

position: -webkit-sticky !important;
position: sticky !important;
top: 50px;

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

top: 0px;

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 píxeles 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 "top: 0px" para arreglar la fila / barra adhesiva en la parte superior del navegador en el móvil.

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

Después de usar el CSS, actualice el Índice Z de la siguiente manera:

  • Índice Z: 10

Ahora la fila se volverá pegajosa a medida que el usuario se desplace 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 alineará horizontalmente en lugar de verticalmente. Podemos usar un simple truco CSS para hacer esto con la propiedad flex. Abra la configuración de la columna y agregue el siguiente CSS personalizado al elemento principal:

display:flex;
align-items:center;

Eso se encarga de nuestro diseño de fila adhesiva. Ahora, necesitamos llenar la fila con algún contenido.

Añadir 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%
  • Relleno: 2vw arriba, 2vw abajo, 2vw izquierda, 2vw derecha

Añadir precio Woo

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

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

  • Tamaño del texto del precio: 28 px (escritorio), 20 px (tableta), 16 px (teléfono)
  • Ancho: 30%
  • Relleno: 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

Añadir Woo Añadir al carrito Módulo

Para la última pieza de contenido, agregue un módulo Agregar al carrito de Woo justo después del módulo Precio de Woo.

Luego actualice la configuración de la siguiente manera:

Simplifique el elemento Agregar al carrito ocultando el monto del stock y el campo de cantidad en el dispositivo móvil.

  • Mostrar campo de cantidad: DESACTIVADO (tableta)
  • Mostrar Stock: DESACTIVADO

  • 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%
  • Relleno: 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: Crear 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 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, es más notable para el usuario.

Para crear la barra adhesiva de aviso 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 pegajosa agregando el siguiente CSS personalizado al elemento principal:

position: -webkit-sticky !important;
position: sticky !important;
bottom: 0px;

NOTA: Como hicimos anteriormente, puede ignorar los errores que aparecen al agregar la posición: propiedad fija.

Esto hará que la fila se pegue en la parte inferior de la ventana al desplazarse hacia arriba.

Luego actualice el índice z para mantenerlo en primer plano de la siguiente manera:

  • Índice Z: 10

Agregue el módulo de aviso de carrito

Una vez que haya creado la fila, agregue el Módulo de aviso 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! Depende de usted si desea o no borrar el elemento de aviso de carrito predeterminado en la parte superior de la página, pero puede ser una buena idea dejarlo para mejores conversiones.

Resultado final

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

Escritorio

Móvil

Pensamientos finales

Esperemos 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 incluya el título del producto, el precio y el botón para 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 e impulsar 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 tener noticias suyas en los comentarios.

¡Salud!