Cómo diseñar un menú de navegación para el proceso de pago en Div

La gestión del cliente a través de un proceso de pago exitoso es un objetivo provocativo para cada tienda en línea. Por lo tanto, le ayuda a optimizar el proceso de completar el pago de su sitio para que sea más fácil para los clientes. Debido a que la navegación juega un papel crucial en el proceso de completar el pedido, es posible que deseemos comenzar desde allí. Crear un menú de navegación personalizado para el proceso de compra es una excelente manera de estimular UX y convertir. Ayuda a los usuarios a ir rápidamente donde quieran. Y también se puede usar para resaltar dónde están (y dónde van) en el proceso.
En este tutorial, le mostraremos cómo diseñar un menú de navegación para el proceso de pago en el Div. Podrá utilizar este menú personalizado para estimular el UX en las páginas más importantes para el proceso de completar el pedido (tienda, canasta, casa, etc.). Este tipo de menú se ha utilizado en nuestros conjuntos gratuitos de plantillas de carro de WooCommmerce y plantillas de página de pago. Vamos a empezar. Mirar los Sneaks es un vistazo rápido al diseño que construiremos en este tutorial.




También puede consultar la demostración en vivo de este diseño de menú del proceso de compra.
Descargue el aspecto gratuito para poner su mano en el aspecto de este tutorial, primero tendrá que descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico diaria utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá aún más división de amabilidad y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar. No será “read” y no recibirá correos electrónicos adicionales. Determine los archivos
Descargue gratis únase al boletín de Divin y le enviaremos una copia del paquete de diseño de la página de buceo, además de muchos otros recursos, consejos y consejos de forma gratuita. Sigue a ti mismo y te convertirás en una división maestra en el menor tiempo. Si ya está suscrito, ingrese su correo electrónico a continuación y haga clic en Descargar para acceder al paquete de diseño.

Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a Div Free Weekly Layout Div!
Para importar la aparición de la sección en la Biblioteca de la Divica, navegue en la Biblioteca de la Divica. Haga clic en el botón Importar. En la ventana de portabilidad emergente, seleccione la pestaña Importar y elija el archivo de descarga en su computadora. Luego haga clic en el botón Importar.
Una vez terminado, la apariencia (ellos) estarán disponibles en el Builder Div. Este diseño del proceso de compra se presentó en uno de nuestros conjuntos de plantillas gratuitos para el carrito de compras y las páginas de compra.

Pasemos al tutorial, ¿sí? ¿Qué necesita para comenzar a comenzar? Deberá hacer lo siguiente:
Si aún no lo ha hecho, instale y active el tema de Div.

Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (generador visual).
Elija la opción “Construir desde cero”.
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div. Cómo diseñar un menú de navegación para el proceso de completar su pedido para su carrito de compras o para su página de pago en la división y fila para comenzar, para agregar un color de fondo a la sección existente habitual. Abra la configuración de la sección y agregue lo siguiente:
Color de fondo: #171F3A
Luego agregue una fila con una sola columna a la sección.
Creación de enlaces de navegación Para el proceso de pago para crear enlaces de navegación en el proceso de finalización del pedido, utilizaremos tres módulos de información que se refieren a la página de la tienda, la página COș y la página de pago. Agregar el enlace de navegación a la tienda para crear el enlace de navegación en la tienda, agregue un nuevo módulo de información a la columna.

Configuración de contenido En la configuración de la propaganda, actualice el contenido de la siguiente manera:

Título: Tienda

Usa el icono: si
Icono: ver captura de pantalla
Módulo de enlace de URL: enlace para la página de la tienda
Configuración de diseño En la pestaña Diseño, actualice lo siguiente:
Icono de color: #fff

Imagen/icono Color de fondo: #08C451
Ancho de imagen/icono: 16px
Alineación de imágenes/iconos: izquierda (escritorio), centro (tableta y teléfono)
Imagen/icono de esquinas redondeadas: 100%
Llenado de imagen/icono: 25 PX (arriba, abajo, izquierda, derecha)
Después de completar el diseño del icono, actualice el texto del título de la siguiente manera:
Poppins

Alineación de texto del título: izquierda (escritorio), centro (tableta y teléfono)
Color de texto del título: #fff
Título Tamaño del texto: 14px
Espacio entre cartas de título 0.1 PX
Altura de la línea de título: 1.1 em
Luego actualice el ancho y deshabilite la animación predeterminada.
Ancho: automático

Animación de imagen/icono: sin animación
Duplicar la propaganda para crear más enlaces de navegación para acelerar el proceso de diseño, duplicar el documento dos veces, de modo que tenga un total de tres información (o enlaces de navegación).
Posicionar el primer y tercer enlace de navegación para el primer y tercer indicación del menú de navegación tendrá una posición absoluta. Esto les permitirá permanecer en su lugar y no apilarse en el móvil. Para colocar la primera información, abra la configuración de visualización y actualice lo siguiente:

Posición: Absoluto

Ubicación: superior izquierda
ÍNDICE Z: 10
Nota: Agregar índice Z es importante para mantener la información frente a la línea de separación que agregaremos más adelante.
Para colocar la tercera información, abra la configuración de la tercera información y actualice lo siguiente:
Posición: Absoluto

Ubicación: a la derecha a la derecha
ÍNDICE Z: 10
Personalizar el enlace de navegación/enlace de revisión en el medio será el enlace de navegación del carrito. Abra la configuración para el segundo/medio y actualice el contenido de la siguiente manera:
Título: Revisión

Usa el icono: si
Icono: ver captura de pantalla
Módulos de enlace de URL: enlace a la página del carrito
Debido a que diseñamos el menú de navegación para la página de la canasta en este diseño, haremos que este material se destaque (lo hagamos más grande y audaz), para que el usuario sepa dónde está en el proceso de pago. En la configuración de diseño, actualice lo siguiente: Imagen/Tamaño del icono: 48px
Alineación de imágenes/iconos: Centro

El peso de la fuente del título: semi-aldine
Alineación del texto del título: Centro
Título Tamaño del texto: 16px

Luego actualice el tamaño y el espacio de la siguiente manera:
Ancho: 33%
Alineación del módulo: centro

Marja: -18px arriba, 0px hacia abajo
También asegúrese de que el índice Z se actualice al valor 10.
ÍNDICE Z: 10
Personalizar el enlace de navegación de pago para personalizar el enlace de navegación para completar el pedido, abra la configuración de la tercera información y actualice el contenido de la siguiente manera:

Título: pago
Usa el icono: si

Icono: ver captura de pantalla
Módulo de enlace de URL: enlace a la página de finalización de compra
Debido a que el pedido se completa es el siguiente paso en el proceso de pago, le daremos un esquema de color descolorido. En la pestaña Diseño, actualice lo siguiente:
Icono de color: RGBA (255,255,255.0.24)
Imagen/icono Color de fondo: #343854


Alineación de imágenes/iconos: derecho (escritorio), centro (tableta y teléfono)
Alineación de texto del título: Derecho (escritorio), centro (tableta y teléfono)
Color de texto del título: #343854
Creando líneas de separación para demostrar la progresión ahora, que los enlaces de navegación del proceso de pago están en su lugar, estamos listos para agregar líneas de separación para demostrar el progreso en el proceso de completar la compra. Bajo el tercer módulo de presentación, agregue un nuevo módulo de separación. Luego use el modal de visualización/capa para tirar de la línea de separación sobre las otras borrachas.

Luego abra la configuración del divisor y actualice la siguiente configuración de diseño:
Color de línea: #343854

Peso divisor: 2px

Ancho: 100%

En la pestaña avanzada, coloque la línea de separación de la siguiente manera:
Posición: Absoluto
Ubicación: superior izquierda
Compensación vertical: 32px

Una vez que la primera línea de separación está en el lugar, estamos listos para agregar la segunda línea de separación. Esta línea resaltará la porción de la primera línea de separación que conecta las dos primeras desenfoque. Esto ayudará a demostrar el progreso del proceso de completar el pedido al igual que una barra de progreso. Para agregar el segundo separador, duplique el separador existente y actualice la siguiente configuración de diseño:
Color de línea: #08C451
Ancho: 50%
El resultado final para el menú de navegación en la página del carrito está listo. Ahora eche un vistazo al resultado en el escritorio y el móvil.

Guardar la fila en la biblioteca de la Divic porque queremos poder agregar en el futuro este menú del proceso de completar el pedido en nuestra página de pago o en nuestra plantilla, es importante guardarlo en la biblioteca de la Divic. Para este ejemplo, guardaremos el giro en la biblioteca. Para hacer esto, haga clic en el icono Guardar en la biblioteca cuando pase con el mouse sobre una fila. En el módulo Agregar a la biblioteca, agregue el nombre de la apariencia y haga clic en Guardar en la biblioteca. Modificación del diseño de navegación para una página de pago Una vez que el menú de navegación en la página COș se haya guardado en la biblioteca, podemos cambiar el diseño para crear Un menú de navegación. Para la página de compra. Queremos mantener el mismo contenido y los enlaces también. Pero queremos cambiar el diseño para reflejar la nueva progresión del proceso de pago. Actualice la progresión de la línea de divisor para actualizar la línea de separación para completar la progresión al enlace de navegación para completar la compra, abra la configuración para la segunda línea de separación y actualice el ancho con un valor del 100%.
Ancho: 100%
Actualice el enlace de navegación de la tienda porque la página de compra a la que agregaremos tendrá un fondo abierto, queremos un texto de título más oscuro para cada uno de nuestros enlaces de navegación. Para hacer esto, abra la configuración para el menú “Almacenar” a la izquierda y actualice el color del texto del título:

Color de texto del título: RGBA (64,71,104,0.36)


Actualice el enlace de navegación de pago para actualizar el diseño del enlace de navegación para completar la compra, copie los estilos del modo de propaganda central (el enlace de canasta/revisión). Luego pase los estilos de módulos en el menú “Correcto”.

Abra la configuración del menú “Correcto” y actualice lo siguiente:
Alineación de imágenes/iconos: derecho

Alineación del texto del título: Derecho
Incluso si los estilos para el material publicitario medio ahora ocupan este material publicitario, todavía tiene una posición absoluta. En la pestaña avanzada, cambie la posición nuevamente a la predeterminada. (Esto escapará del módulo bajo los módulos existentes hasta que le dé una posición absoluta a la indicación media).

En la pestaña Diseño, actualice la alineación del módulo:

Alineación del módulo: correcto

Creación del enlace de navegación para la revisión del CART Una vez que se completa el enlace de navegación, podemos actualizar el mensaje en el medio (enlace de navegación CART/revisión). Para acelerar el proceso de diseño, copie los estilos de los módulos del menú “almacenar” a la izquierda.
Luego pase los estilos de los módulos al panel central “Revisión”.
Una vez terminado, el mensaje “Revisión” se colocará a la izquierda, directamente sobre el módulo “Almacenar”. Use el modal de la capa para seleccionar la configuración de “revisar” y actualizar la posición de la siguiente manera:

Ubicación: Centro superior

Para completar la actualización del texto central, actualice lo siguiente:
Alineación del texto del título: Centro

La sección de fondo para reflejar con precisión cómo se verá el menú de navegación en un fondo ligero, actualice la sección de la sección de la siguiente manera:

Color de fondo: #FAFAFB

Guardando la fila en la biblioteca de la división tal como lo hicimos con el menú de navegación en la página COș, podemos guardar este menú de navegación en la página de pago para el uso posterior. Continúe y guarde la fila que contiene el menú en la biblioteca usando el icono Guardar en la biblioteca. Para completar el pedido.
Agregar el menú para el proceso de pago a la canasta y la página o plantilla de pago Ahora que ambas versiones de los menús de finalización de pago se guardan en la biblioteca, podemos agregarlos a cualquier página o plantilla que deseemos. Por ejemplo, para agregar el menú de compra a una plantilla de carrito de WooCommerce, vaya a temas y haga clic para editar el cuerpo de la plantilla del carrito.

Debido a que guardamos nuestro menú de navegación como línea en la biblioteca, debemos recordar agregar una nueva fila a nuestra plantilla para cargar el menú de navegación. Así que busque un lugar para una fila y haga clic para agregar una nueva línea. En el inserto de fila, haga clic en la pestaña Agregar en la biblioteca y seleccione la fila guardada de la lista.
Puede repetir el mismo proceso para agregar el menú de navegación a la plantilla de página de pago.

Resultado final Consulte cómo son estos enlaces de navegación para el proceso de completar el pedido en una plantilla totalmente diseñada. Estos modelos también se presentan en uno de nuestros conjuntos gratuitos de plantillas para la página de canasta y pago.