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

Las barras de aterrizaje continúan siendo un elemento popular en el diseño web. Son maravillosos para mejorar las conversiones, manteniendo los CTA en primer plano, sin ser tan intrusivos como las ventanas emergentes. En este caso de uso, diseñaremos una barra adhesiva para productos de WooCommerce utilizando los módulos Woo de Div. La barra adhesiva puede incluir cualquier modo de división. Para este tutorial, crearemos una barra adhesiva que incluya el botón “Agregar en la canasta”, para que permanezca visible a medida que el usuario ejecuta la página. Además, también crearemos una barra de notificación pegajosa para la canasta, para que los usuarios siempre puedan ver el botón “Ver carrito” después de hacer clic en el “Agregar al ST”.
Estas barras pegajosas ayudarán a aumentar las conversiones, considerando esos CTA cruciales. ¡Vamos a empezar! Eye es un vistazo rápido a lo que diseñaremos en este tutorial de casos.



Descargue el diseño de barras de diseño gratuito para poner su mano en los dibujos en este tutorial, primero deberá descargarlo con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la apariencia en su página, simplemente extraiga el archivo zip y extraiga el archivo JSON al Builder Div.
Pasemos al tutorial, ¿no? ¿Qué tienes que comenzar a comenzar? Deberás hacer lo siguiente:
Si aún no lo ha hecho, instale y active el tema de la Divica Instalado (o el creador de Divi Plugin si no usa el tema Div).
Instale y active el complemento WooCommerce. Si esta es la primera vez que configura WooCommerce, deberá ejecutar el experto en configuración básica para preparar su tienda. Después de haber terminado, está listo para agregar los nuevos productos.
Cree algunos productos si aún no lo tiene. Para obtener más información sobre cómo agregar un nuevo producto, consulte este tutorial.
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div.
Parte 1: Diseño de la barra adhesiva en una página de producto Utilizaremos un producto simulado simple 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 debe asegurarse de tener los elementos básicos, como el título del producto, el precio, la descripción, la imagen, etc. Después de tener un producto simple listo, haga clic para editar el producto en la parte posterior e implementar Divi Builder en la página del producto. En la página Configuración de la página Div, seleccione “Ancho completo” para la apariencia de la página y luego haga clic en “Construir en el front-end”. El producto del producto debe parecer similar a él.
Bajo la primera fila que contiene las migas de pan y la notificación sobre la canasta, agregue una nueva línea con una columna.

Configuración de fila Antes de agregar módulos, actualice la configuración de la fila de la siguiente manera:

Color de fondo: # 333333

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Ancho: 100%
Forro: 0 px arriba, 0 px abajo
Haciendo un giro pegajoso para que el giro sea pegajoso, agregue los siguientes CSS personalizados al elemento de escritorio principal: Posición: -Webkit -sticky!
Posición: ¡pegajoso! Importante;

Arriba: 50px;
Luego agregue el siguiente CSS al mismo elemento principal para mostrar la tableta:
Arriba: 0px;
Si no está familiarizado con la propiedad de CSS “Posición: Sticky”, es prácticamente un tipo de mezcla entre la posición fija y la posición relativa en la que el elemento (en este caso) se ejecutará con su contenedor hasta que llegue una posición designada la parte superior o inferior de la página (o desplazamiento especificado). En este ejemplo, establecemos que el espacio sea 50 PX desde la parte superior de la ventana del navegador (dejando espacio para un encabezado fijo predeterminado). Luego, en la tableta, el desplazamiento se cambia en “Top: 0px” para arreglar la barra de palo / pegajosa en la parte superior del navegador en el móvil. El código funcionará bien.
Después de CSS, actualice el índice Z de la siguiente manera:
IND ÍNDICE: 10
Ahora la fila se volverá pegajosa a medida que el usuario ejecute la página del producto. Columna CSS personalizada Antes de comenzar a llenar el giro con el contenido, debemos asegurarnos de que el módulo con una columna se alinea horizontalmente en lugar de vertical. Podemos usar un truco CSS simple para hacer esto con la propiedad Flex. Abra la configuración de la columna y agregue el siguiente CSS personalizado al elemento principal:

Pantalla: Flex;
Alinine-Ritams: Centro;

Se trata de nuestro diseño de líneas pegajosas. Ahora tenemos que llenar la fila con contenido. Agregue el título de Woo Agregue un nuevo módulo de título WOO a la fila Sticky.
Luego actualice la configuración de la siguiente manera:
Color de texto del título: #ffffff

Título Tamaño de texto: 28 PX (escritorio), 20 PX (tableta), 16 PX (teléfono)

Ancho: 30%
Junta: 2VW arriba, 2VW abajo, 2VW a la izquierda, 2VW a la derecha
Agregue el precio de Woo y luego, agregue un módulo de precio de WOO haciendo clic en el icono más gris que aparece cuando repasa el módulo de título de Woo que acaba de crear. Luego actualice la configuración del precio de WOO de la siguiente manera:
Tamaño de texto de precio: 28 PX (escritorio), 20 px (tableta), 16 px (teléfono)
Ancho: 30%

Junta: 2VW arriba, 2VW abajo, 2VW a la izquierda, 2VW a la derecha

El ancho del borde recto: 1 PX
Color de borde derecho: # 777777
Ancho del borde izquierdo: 1 PX
Color del borde izquierdo: # 777777
Agregue el módulo Woo Agregar al carrito para obtener la última pieza de contenido, agregue un módulo de CART AGREGAR al CART inmediatamente después del módulo de precio WOO.
Luego, actualice la configuración de la siguiente manera: simplifique el elemento Agregar en la canasta ocultando el campo del stock y la cantidad en el móvil.
Campo de cantidad de visualización: parar (tableta)
Stock de espectáculos: apagado

Alineación del texto: Derecho

Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 18 PX (tableta), 14 PX (teléfono)
El color del texto del botón: #ffffff

El color del fondo de fondo: # 7AC5AF
El ancho del nudo del botón: 0 PX
Ancho: 40%
Junta: 2VW a la izquierda, 2 VW a la derecha
Resultado ahora, verifiquemos cómo se ve en la página en vivo.
Y aquí está el móvil.

Parte 2: Crear una barra adhesiva para notificaciones sobre la creación de una barra adhesiva para el aviso de la canasta implica solo unos pocos pasos simples, pero el resultado puede ser extremadamente efectivo. Como probablemente ya sepa, la notificación sobre la canasta 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 lo que lleva a los usuarios a la página de pago. Entonces, cuando la notificación sobre la canasta aparece como una barra pegajosa en la parte inferior de la ventana, es más visible para el usuario. Para crear la barra de notificación adhesiva, primero cree una nueva fila con 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%
Forro: 0 px arriba, 0 px abajo

Luego, haga el giro pegajoso agregando los siguientes CSS personalizados al elemento principal: Posición: -webkit -sticky! Importante;

Posición: ¡pegajoso! Importante;

Abajo: 0px;
Nota: Como hice anteriormente, puede ignorar los errores que aparecen cuando agrega la posición: propiedad adhesiva.
Esto hará que el giro se adhiera a la parte inferior de la ventana cuando se desplace hacia arriba. Luego actualice el índice Z para mantenerlo en primer plano de la siguiente manera:

IND ÍNDICE: 10
Agregue el módulo de notificación COș Después de haber creado la fila, agregue el módulo de notificación del carrito de WOO en una fila y actualice la configuración de la siguiente manera:
Tamaño de texto de texto (teléfono): 15 PX
Marja: 0em abajo

¡Eso es todo!Depende de usted si desea eliminar o no el elemento de notificación predeterminado en la parte superior de la página, pero podría ser una buena idea dejarlo para mejores conversiones.El resultado final aquí es el resultado final con las dos barras pegajosas en su lugar.
Móvil

Los pensamientos finales esperan que esta publicación nos ayude a comprender cómo crear barras pegajosas para nuestras páginas de productos en la división.Presenté la forma de crear una barra adhesiva que incluye el título del producto, el precio y el botón Agregar.Y también mostramos cómo crear una barra pegajosa para el aviso de la canasta.Ambos deberían ayudar al proceso de compra y estimular las conversiones.¡Y no necesitamos un complemento!Siéntase libre de explorar nuevas formas de usar barras adhesivas en la página del producto en su propio sitio.Esperamos tener noticias suyas en los comentarios.¡Suerte!