Sticky Bars sigue siendo un elemento popular en el diseño web. Son excelentes para aumentar 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 de 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 impulsar 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.

 

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:

01
02
03
position: -webkit-sticky !important;
position: sticky !important;
top: 50px;

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

01
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 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:

01
02
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: OFF (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%
  • Acolchado: 0px arriba, 0px abajo

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

01
02
03
position: -webkit-sticky !important;
position: sticky !important;
bottom: 0px;

NOTA: Como lo 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:

  • Tamaño del texto 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 obtener mejores conversiones.

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

Consigue la plantilla Divi

Más de 800 diseños de sitios web prefabricados vienen empaquetados dentro de Divi de forma gratuita.

You have Successfully Subscribed!