Tips on how to Design a Checkout Procedure Navigation Menu in Divi

by | Dec 28, 2021 | Etcetera | 0 comments

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.

checkout process navigation menu in Divi

checkout process navigation menu in Divi

checkout process navigation menu in Divi

checkout process navigation menu in Divi

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.

.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 Free

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.

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.

divi notification box

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.

See also  WordPress Repairs Mode: The whole thing You Wish to Know

Let’s get to the learning, lets?

What You Need to Get Started

expanding corner tabs

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

checkout process navigation menu in Divi

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

checkout process navigation menu in Divi

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.

checkout process navigation menu in Divi

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

checkout process navigation menu in Divi

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)

checkout process navigation menu in Divi

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

checkout process navigation menu in Divi

Then substitute the width and disable the default animation.

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

checkout process navigation menu in Divi

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).

checkout process navigation menu in Divi

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.

checkout process navigation menu in Divi

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

checkout process navigation menu in Divi

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

checkout process navigation menu in Divi

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

checkout process navigation menu in Divi

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

checkout process navigation menu in Divi

Next, substitute the scale and spacing as follows:

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

checkout process navigation menu in Divi

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

  • Z Index: 10

checkout process navigation menu in Divi

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

checkout process navigation menu in Divi

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

See also  10+ Highest Loose Bill Turbines to Create Invoices Immediately

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)

checkout process navigation menu in Divi

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

checkout process navigation menu in Divi

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.

checkout process navigation menu in Divi

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

checkout process navigation menu in Divi

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

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

checkout process navigation menu in Divi

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

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

checkout process navigation menu in Divi

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%

checkout process navigation menu in Divi

Final End result for the Cart Internet web page Navigation Menu

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

checkout process navigation menu in Divi

checkout process navigation menu in Divi

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.

checkout process navigation menu in Divi

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%

checkout process navigation menu in Divi

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)

checkout process navigation menu in Divi

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).

checkout process navigation menu in Divi

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

checkout process navigation menu in Divi

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

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

checkout process navigation menu in Divi

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.)

See also  Upload Customized Consumer Roles to WordPress (By the use of Plugin & Code)

checkout process navigation menu in Divi

Underneath the design tab, substitute the module alignment:

  • Module Alignment: Right kind

checkout process navigation menu in Divi

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.

checkout process navigation menu in Divi

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

checkout process navigation menu in Divi

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

checkout process navigation menu in Divi

To finish updating the middle blurb, substitute the following:

  • Title Text Alignment: Heart

checkout process navigation menu in Divi

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

checkout process navigation menu in Divi

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.

checkout process navigation menu in Divi

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.

checkout process navigation menu in Divi

checkout process navigation menu in Divi

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.

checkout process navigation menu in Divi

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.

checkout process navigation menu in Divi

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.

checkout process navigation menu in Divi

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.

checkout process navigation menu in Divi

checkout process navigation menu in 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 ]

0 Comments

Submit a Comment