Major shoppers through a a luck checkout process is a hard function for every online store. So it’s serving to to optimize your internet web site’s checkout process to make it easier for purchasers. Since navigation plays a crucial serve as inside the checkout process, we would possibly want to get began there. Creating a custom designed checkout process navigation menu is an effective way to boost UX and product sales conversion. It’s serving to consumers transfer where they would love in brief. And, it moreover can be used to spotlight where they’re (and where they’re going) inside the process.

In this tutorial, we’re going to show you tips on how to design a checkout process navigation menu in Divi. It’s conceivable so that you can to use this practice menu to boost the UX on the pages most crucial to the checkout process (retailer, cart, checkout, and so forth.). This type of menu has been used in our free WooCommmerce Cart and Checkout Internet web page Template Devices as well.

Let’s get started.

Sneak Peek

Right here’s a quick check out the design we’ll assemble in this tutorial.

You’ll be capable of moreover check out the live demo of this checkout process navigation menu design.

Download the Structure for FREE

To position your hands on the construction from this tutorial, you’re going to first need to download it using the button beneath. To reach get admission to to the download you will need to subscribe to our Divi Day-to-day email file by the use of using the form beneath. As a brand spanking new subscriber, you’re going to procure a lot more Divi goodness and a free Divi Structure pack every Monday! If you happen to occur to’re already on the file, simply enter your email deal with beneath and click on on download. You’ll no longer be “resubscribed” or download further emails.

Download the Files

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !necessary; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:previous than { border-top-color: #ffffff !necessary; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:previous than, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:previous than { border-top-color: transparent !necessary; border-left-color: #ffffff !necessary; }
@media most straightforward show and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:previous than { border-top-color: #ffffff !necessary; border-left-color: transparent !necessary; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !necessary; border-left-color: transparent !necessary; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:previous than { background: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !necessary } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 powerful { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p powerful, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !necessary;}

Download For Unfastened

Join the Divi Newsletter and we can email you a reproduction of the ultimate Divi Landing Internet web page Structure Pack, plus a lot of other glorious and free Divi belongings, guidelines and techniques. Practice along and also you’re going to be a Divi take hold of in no time. If you happen to’re already subscribed simply type to your email deal with beneath and click on on download to get admission to the construction pack.

DOWNLOAD

See also  Why B2B Firms are Coming into the Editorial Area [& What You Can Learn From Them]

You will have successfully subscribed. Please take a look at your email deal with to make sure your subscription and get get admission to to free weekly Divi construction packs!

To import the segment construction to your Divi Library, navigate to the Divi Library.

Click on at the Import button.

Throughout the portability popup, select the import tab and make a selection the download file from your pc.

Then click on at the import button.

Once finished, the construction(s) will likely be available inside the Divi Builder.

This Checkout Process Navigation Menu design used to be as soon as featured in one in every of our FREE cart & checkout page template sets for Divi.

Let’s get to the learning, lets?

What You Need to Get Started

To get started, you will need to do the following:

1. If you happen to occur to haven’t however, install and activate the Divi Theme.
2. Create a brand spanking new internet web page in WordPress and use the Divi Builder to edit the internet web page on the front end (visual builder).
3. Make a choice the selection “Assemble From Scratch”.

After that, you’re going to have a blank canvas to start out out designing in Divi.

Tips about the right way to Design a Checkout Process Navigation Menu for Your Cart or Checkout Internet web page in Divi

Rising the Section and Row

To start out, let’s add a background color to the current commonplace segment. Open the segment settings and add the following:

• Background Color: #171f3a

Next, add a one-column row to the segment.

Rising the Checkout Process Navigation Links

To create the checkout process navigation links, we’re going to make use of 3 blurb modules that link to the Retailer internet web page, the Cart internet web page, and the Checkout internet web page.

Together with the Retailer Navigation Link

To create the shop navigation link, add a brand spanking new blurb module to the column.

Content material subject material Settings

Throughout the blurb settings, substitute the content material subject material as follows:

• Title: Retailer
• Use Icon: YES
• Icon: see screenshot
• Module Link URL: link for the shop internet web page

Design Settings

Underneath the design tab, substitute the following:

• Icon Color: #fff
• Image/Icon Background Color: #08c451
• Image/Icon Width: 16px
• Image/Icon Alignment: Left (desktop), Heart (tablet and speak to)
• Image/Icon Rounded Corners: 100%
• Image/Icon Padding: 25px (top, bottom, left, correct)

After the icon design is complete, substitute the determine text as follows:

• Title Font Poppins
• Title Text Alignment: left (desktop), middle (tablet and speak to)
• Title Text Color: #fff
• Title Text Size: 14px
• Title Letter Spacing 0.1px
• Title Line Top: 1.1em

Then substitute the width and disable the default animation.

• Width: auto
• Image/Icon Animation: No Animation

Copy the Blurb to Create Additional Navigation Links

To speed up the design process, copy the blurb two instances in order that you’ve were given an entire of three blurbs (or navigation links).

Positioning the First and third Navigation Links

To first and third blurbs inside the navigation menu can have an absolute position. This may occasionally most probably allow them to stay in place and no longer stack on mobile.

To put the main blurb, open the blurb settings and substitute the following:

• Position: Absolute
• Location: Top Left
• Z Index: 10

Understand: The together with z index is necessary for keeping up the blurb inside the front of the divider line we’ll be together with later.

To put the third blurb, open the settings for the third blurb and substitute the following:

• Position: Absolute
• Location: Top Right kind
• Z Index: 10

Customizing the Cart/Analysis Navigation Link

The middle blurb is going to be the cart navigation link.

Open the settings for the second/middle blurb and substitute the content material subject material as follows:

• Title: Analysis
• Use Icon: YES
• Icon: see screenshot
• Module Link URL: link to cart internet web page

Since we’re designing the navigation menu for the cart internet web page in this design, we’re going to make this blurb stand out (make it greater and bold) so that the patron is acutely aware of where they’re inside the checkout process.

Underneath the design settings, substitute the following:

• Image/Icon Size: 48px
• Image/Icon Alignment: Heart

• Title Font Weight: Semi Bold
• Title Text Alignment: Heart
• Title Text Size: 16px

Next, substitute the scale and spacing as follows:

• Width: 33%
• Module Alignment: middle
• Margin: -18px top, 0px bottom

Moreover, make sure that the Z Index is up-to-the-minute to the cost of 10.

• Z Index: 10

Customizing the Checkout Navigation Link

To customize the checkout navigation link, open the settings for the third blurb and substitute the content material subject material as follows:

• Title: Checkout
• Use Icon: YES
• Icon: see screenshot
• Module Link URL: link to the checkout internet web page

Given that checkout internet web page is the next move inside the checkout process, we’re going to provide it a mild color scheme.

Underneath the design tab, substitute the following:

• Icon Color: rgba(255,255,255,0.24)
• Image/Icon Background Color: #343854
• Image/Icon Alignment: Right kind (desktop), Heart (tablet and speak to)

• Title Text Alignment: Right kind (desktop), Heart (tablet and speak to)
• Title Text Color: #343854

Rising the Divider Lines to Showcase Building

Now that the checkout process navigation links are in place, we’re able so that you could upload the divider lines to turn construction inside the checkout process.

Underneath the third blurb module, add a brand spanking new divider module.

Then use the layers view/modal to tug the divider line above the other blurbs.

Next, open the divider settings and substitute the following design settings:

• Line Color: #343854
• Divider Weight: 2px
• Width: 100%

Underneath the Advanced tab, position the divider line as follows:

• Position: Absolute
• Location: Top Left
• Vertical Offset: 32px

Once the main divider line is in place, we’re able so that you could upload the second divider line. This line will highlight the portion of the main divider line that connects the main two blurbs. This may occasionally most probably have the same opinion display the improvement of the checkout process very similar to a construction bar.

So that you could upload the second divider, copy the prevailing divider and substitute the following design settings:

• Line Color: #08c451
• Width: 50%

Final End result for the Cart Internet web page Navigation Menu

All finished. Now, take a look at the result on desktop and mobile.

Saving the Row to the Divi Library

Since we want to be able to add this checkout process navigation menu to our checkout internet web page or template in the future, you will need to save it to the Divi Library. For this case, we’ll save the row to the library. To check out this, click on at the Save to Library icon when hovering over the row. Throughout the Add to Library modal, add the Structure Establish and click on on Save to Library.

Changing the Navigation Design for a Checkout Internet web page

As quickly because the Cart internet web page navigation menu has been saved to the library, we can tweak the design to create a navigation menu for the checkout internet web page. We want to keep the an identical content material subject material and links the an identical. On the other hand we want to industry the design to reflect the new construction of the checkout process.

Updating the Divider Line Building

To exchange the divider line so that it completes the improvement to the checkout navigation link, open the settings for the second divider line and substitute the width to a cost of 100%.

• Width: 100%

Updating the Retailer Navigation Link

Given that checkout internet web page we’re going to add this to can have a light background, we want a darker determine text for each and every of our nav links.

To check out this, open the settings for the “Retailer” blurb on the left and substitute the determine text color:

• Title Text Color: rgba(64,71,104,0.36)

Updating the Checkout Navigation Link

To exchange the design of the checkout navigation link, copy the module varieties of the middle blurb (the Cart/Analysis link).

Then earlier the module types to the “Checkout” blurb at the right kind.

Open the settings of the “Checkout” blurb and substitute the following:

• Image/Icon Alignment: Right kind
• Title Text Alignment: Right kind

Even though the varieties of the middle blurb now occupy this blurb, the blurb nevertheless has an absolute position.

Underneath the sophisticated tab, industry the position once more to default. (This may occasionally most probably drop the module beneath the prevailing modules until we give the middle blurb an absolute position.)

Underneath the design tab, substitute the module alignment:

• Module Alignment: Right kind

Rising the Cart Analysis Navigation Link

As quickly because the checkout navigation link is finished, we can substitute the middle blurb (Cart/Analysis Navigation link). To speed up the design process, copy the module varieties of the “Retailer” blurb on the left.

Then earlier the module types to the middle “Analysis” blurb.

Once finished, the “Analysis” blurb will likely be positioned to the left, in an instant on top of the “Retailer” module. Use the layers modal to select the “Analysis” blurb settings and substitute the position location as follows:

• Location: Top Heart

To finish updating the middle blurb, substitute the following:

• Title Text Alignment: Heart

Section Background

To as it should be reflect what the navigation menu will appear to be on a checkout internet web page with a light background, substitute the segment background color as follows:

• Background Color: #fafafb

Saving the Row to the Divi Library

Similar to we did with the Cart internet web page navigation menu, we can save this Checkout internet web page navigation menu to the Divi Library for longer term use.

Move ahead and save the row containing the menu to the library using the Save to Library icon inside the row menu.

Final End result for the Checkout Internet web page Navigation Menu

Right here’s the overall result of the checkout internet web page navigation menu that as it should be shows the overall construction inside the checkout process.

Together with the Checkout Process Navigation Menu to the Cart and Checkout Internet web page or Template

Now that each and every permutations of the checkout process navigation menus are saved to the library, we can add them to any internet web page or template we want.

As an example, so that you could upload the checkout process navigation menu to a WooCommerce Cart template, transfer to the Theme Builder and click on directly to edit the Cart template’s body construction.

Since we saved our navigation menu as a row inside the library, we will have to take note so that you could upload a brand spanking new row to our template so as to add the navigation menu. So, find a spot for the row and click on on so that you could upload a brand spanking new row. Throughout the Insert Row modal, click on at the Add From Library tab and select the saved row from the file.

You’ll be capable of repeat the an identical process so that you could upload the navigation menu to the Checkout internet web page template as well.

Final End result

Check out how the ones checkout process navigation links look on a fully designed template. The ones designs are also featured in one in every of our FREE cart & checkout page template sets for Divi.

Final Concepts

A checkout process navigation menu generally is a great asset to your internet web site. And, with Divi, you’ll be capable of assemble them totally from scratch with all of the customizations you wish to have. Plus, you’ll be capable of save the construction to your library so that you can add the menu to any internet web page or template you need with only some clicks. Expectantly, this will likely most probably inspire you to create one on your next challenge and have the same opinion put across further shoppers all through the checkout process.

I look ahead to taking note of from you inside the comments.

Cheers!

.inline-code{padding: 0px 4px; color: purple; font-family: Monaco,consolas,bitstream vera sans mono,courier new,Courier,monospace!necessary} video.with-border {border-radius: 8px;box-shadow: 0 8px 60px 0 rgba(103,151,255,.11), 0 12px 90px 0 rgba(103,151,255,.11);display:block;margin: 0 auto;}

The post How to Design a Checkout Process Navigation Menu in Divi appeared first on Elegant Themes Blog.

WordPress Web Design

[ continue ]

read more