How to Design a Checkout Process Navigation Menu in Divi

by | Dec 28, 2021 | Etcetera | 0 comments

Main consumers via a a success checkout procedure is a difficult purpose for each and every on-line retailer. So it is helping to optimize your web page’s checkout procedure to make it more uncomplicated for patrons. Since navigation performs a the most important position within the checkout procedure, we would possibly need to get started there. Making a customized checkout procedure navigation menu is an effective way to spice up UX and gross sales conversion. It is helping customers cross the place they would like briefly. And, it additionally can be utilized to focus on the place they’re (and the place they’re going) within the procedure.

On this educational, we’re going to display you find out how to design a checkout procedure navigation menu in Divi. It is possible for you to to make use of this tradition menu to spice up the UX at the pages maximum the most important to the checkout procedure (store, cart, checkout, and so on.). This type of menu has been utilized in our loose WooCommmerce Cart and Checkout Web page Template Units as smartly.

Let’s get began.

Sneak Peek

Here’s a fast take a look at the design we’ll construct on this educational.

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 additionally take a look at the live demo of this checkout procedure navigation menu design.

Obtain the Structure for FREE

To put your fingers at the format from this educational, you’ll first want to obtain it the usage of the button beneath. To achieve get admission to to the obtain it is important to subscribe to our Divi Day by day e mail record by way of the usage of the shape beneath. As a brand new subscriber, you’ll obtain much more Divi goodness and a loose Divi Structure pack each and every Monday! When you’re already at the record, merely input your e mail cope with beneath and click on obtain. You are going to no longer be “resubscribed” or obtain additional emails.

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:prior to { border-top-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:prior to, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:prior to { border-top-color: clear !essential; border-left-color: #ffffff !essential; }
@media most effective display and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:prior to { border-top-color: #ffffff !essential; border-left-color: clear !essential; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !essential; border-left-color: clear !essential; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { colour: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:prior to { background: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !essential } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .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 sturdy { 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 sturdy, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !essential;}

Download For Free

Obtain For Unfastened

Sign up for the Divi Publication and we can e mail you a duplicate of without equal Divi Touchdown Web page Structure Pack, plus heaps of different wonderful and loose Divi sources, guidelines and methods. Practice alongside and you’ll be a Divi grasp very quickly. If you’re already subscribed merely kind to your e mail cope with beneath and click on obtain to get admission to the format pack.

You’ve gotten effectively subscribed. Please take a look at your e mail cope with to substantiate your subscription and get get admission to to loose weekly Divi format packs!

To import the phase format in your Divi Library, navigate to the Divi Library.

Click on the Import button.

Within the portability popup, make a selection the import tab and make a selection the obtain document out of your pc.

Then click on the import button.

divi notification box

As soon as finished, the format(s) will likely be to be had within the Divi Builder.

See also  How to Use the Filter Products by Stock WooCommerce Block

This Checkout Procedure Navigation Menu design was once featured in considered one of our FREE cart & checkout page template sets for Divi.

Let’s get to the academic, we could?

What You Wish to Get Began

expanding corner tabs

To get began, it is important to do the next:

  1. When you haven’t but, install and activate the Divi Theme.
  2. Create a brand new web page in WordPress and use the Divi Builder to edit the web page at the entrance finish (visible builder).
  3. Make a choice the choice “Construct From Scratch”.

After that, you’ll have a clean canvas to start out designing in Divi.

Design a Checkout Procedure Navigation Menu for Your Cart or Checkout Web page in Divi

Developing the Segment and Row

To begin, let’s upload a background colour to the present common phase. Open the phase settings and upload the next:

  • Background Colour: #171f3a

checkout process navigation menu in Divi

Subsequent, upload a one-column row to the phase.

checkout process navigation menu in Divi

Developing the Checkout Procedure Navigation Hyperlinks

To create the checkout procedure navigation hyperlinks, we’re going to use 3 blurb modules that hyperlink to the Store web page, the Cart web page, and the Checkout web page.

Including the Store Navigation Hyperlink

To create the store navigation hyperlink, upload a brand new blurb module to the column.

checkout process navigation menu in Divi

Content material Settings

Within the blurb settings, replace the content material as follows:

  • Identify: Store
  • Use Icon: YES
  • Icon: see screenshot
  • Module Hyperlink URL: hyperlink for the store web page

checkout process navigation menu in Divi

Design Settings

Beneath the design tab, replace the next:

  • Icon Colour: #fff
  • Symbol/Icon Background Colour: #08c451
  • Symbol/Icon Width: 16px
  • Symbol/Icon Alignment: Left (desktop), Heart (pill and get in touch with)
  • Symbol/Icon Rounded Corners: 100%
  • Symbol/Icon Padding: 25px (height, backside, left, proper)

checkout process navigation menu in Divi

After the icon design is whole, replace the identify textual content as follows:

  • Identify Font Poppins
  • Identify Textual content Alignment: left (desktop), middle (pill and get in touch with)
  • Identify Textual content Colour: #fff
  • Identify Textual content Measurement: 14px
  • Identify Letter Spacing 0.1px
  • Identify Line Peak: 1.1em

checkout process navigation menu in Divi

Then replace the width and disable the default animation.

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

checkout process navigation menu in Divi

Replica the Blurb to Create Extra Navigation Hyperlinks

To hurry up the design procedure, reproduction the blurb two times so that you’ve a complete of 3 blurbs (or navigation hyperlinks).

checkout process navigation menu in Divi

Positioning the First and 3rd Navigation Hyperlinks

To first and 3rd blurbs within the navigation menu may have an absolute place. This may increasingly permit them to stick in position and no longer stack on cellular.

To put the primary blurb, open the blurb settings and replace the next:

  • Place: Absolute
  • Location: Most sensible Left
  • Z Index: 10

Notice: The including z index is essential for holding the blurb within the entrance of the divider line we’ll be including later.

checkout process navigation menu in Divi

To put the 3rd blurb, open the settings for the 3rd blurb and replace the next:

  • Place: Absolute
  • Location: Most sensible Proper
  • Z Index: 10

checkout process navigation menu in Divi

Customizing the Cart/Evaluation Navigation Hyperlink

The center blurb goes to be the cart navigation hyperlink.

Open the settings for the second one/center blurb and replace the content material as follows:

  • Identify: Evaluation
  • Use Icon: YES
  • Icon: see screenshot
  • Module Hyperlink URL: hyperlink to cart web page

checkout process navigation menu in Divi

Since we’re designing the navigation menu for the cart web page on this design, we’re going to make this blurb stand out (make it larger and impressive) in order that the person is aware of the place they’re within the checkout procedure.

Beneath the design settings, replace the next:

  • Symbol/Icon Measurement: 48px
  • Symbol/Icon Alignment: Heart

checkout process navigation menu in Divi

  • Identify Font Weight: Semi Daring
  • Identify Textual content Alignment: Heart
  • Identify Textual content Measurement: 16px

checkout process navigation menu in Divi

Subsequent, replace the scale and spacing as follows:

  • Width: 33%
  • Module Alignment: middle
  • Margin: -18px height, 0px backside

checkout process navigation menu in Divi

Additionally, be sure that the Z Index is up to date to the worth of 10.

  • Z Index: 10

checkout process navigation menu in Divi

Customizing the Checkout Navigation Hyperlink

To customise the checkout navigation hyperlink, open the settings for the 3rd blurb and replace the content material as follows:

  • Identify: Checkout
  • Use Icon: YES
  • Icon: see screenshot
  • Module Hyperlink URL: hyperlink to the checkout web page

checkout process navigation menu in Divi

Because the checkout web page is the next move within the checkout procedure, we’re going to give it a light colour scheme.

See also  Learn how to Upload Scroll-Animated Icons to Phase Backgrounds in Divi

Beneath the design tab, replace the next:

  • Icon Colour: rgba(255,255,255,0.24)
  • Symbol/Icon Background Colour: #343854
  • Symbol/Icon Alignment: Proper (desktop), Heart (pill and get in touch with)

checkout process navigation menu in Divi

  • Identify Textual content Alignment: Proper (desktop), Heart (pill and get in touch with)
  • Identify Textual content Colour: #343854

checkout process navigation menu in Divi

Developing the Divider Traces to Reveal Development

Now that the checkout procedure navigation hyperlinks are in position, we’re in a position so as to add the divider traces to exhibit development within the checkout procedure.

Beneath the 3rd blurb module, upload a brand new divider module.

checkout process navigation menu in Divi

Then use the layers view/modal to pull the divider line above the opposite blurbs.

checkout process navigation menu in Divi

Subsequent, open the divider settings and replace the next design settings:

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

checkout process navigation menu in Divi

Beneath the Complex tab, place the divider line as follows:

  • Place: Absolute
  • Location: Most sensible Left
  • Vertical Offset: 32px

checkout process navigation menu in Divi

As soon as the primary divider line is in position, we’re in a position so as to add the second one divider line. This line will spotlight the portion of the primary divider line that connects the primary two blurbs. This may increasingly lend a hand exhibit the development of the checkout procedure just like a development bar.

So as to add the second one divider, reproduction the present divider and replace the next design settings:

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

checkout process navigation menu in Divi

Ultimate End result for the Cart Web page Navigation Menu

All finished. Now, check out the end result on desktop and cellular.

checkout process navigation menu in Divi

checkout process navigation menu in Divi

Saving the Row to the Divi Library

Since we wish so that you could upload this checkout procedure navigation menu to our checkout web page or template at some point, it is very important put it aside to the Divi Library. For this situation, we’ll save the row to the library. To do this, click on the Save to Library icon when soaring over the row. Within the Upload to Library modal, upload the Structure Identify and click on Save to Library.

checkout process navigation menu in Divi

Converting the Navigation Design for a Checkout Web page

As soon as the Cart web page navigation menu has been stored to the library, we will tweak the design to create a navigation menu for the checkout web page. We need to stay the similar content material and hyperlinks the similar. However we need to trade the design to mirror the brand new development of the checkout procedure.

Updating the Divider Line Development

To replace the divider line in order that it completes the development to the checkout navigation hyperlink, open the settings for the second one divider line and replace the width to a price of 100%.

  • Width: 100%

checkout process navigation menu in Divi

Updating the Store Navigation Hyperlink

Because the checkout web page we’re going to upload this to may have a gentle background, we wish a darker identify textual content for each and every of our nav hyperlinks.

To try this, open the settings for the “Store” blurb at the left and replace the identify textual content colour:

  • Identify Textual content Colour: rgba(64,71,104,0.36)

checkout process navigation menu in Divi

Updating the Checkout Navigation Hyperlink

To replace the design of the checkout navigation hyperlink, replica the module types of the center blurb (the Cart/Evaluation hyperlink).

checkout process navigation menu in Divi

Then previous the module types to the “Checkout” blurb at the proper.

checkout process navigation menu in Divi

Open the settings of the “Checkout” blurb and replace the next:

  • Symbol/Icon Alignment: Proper
  • Identify Textual content Alignment: Proper

checkout process navigation menu in Divi

Even supposing the types of the center blurb now occupy this blurb, the blurb nonetheless has an absolute place.

Beneath the complex tab, trade the location again to default. (This may increasingly drop the module beneath the present modules till we give the center blurb an absolute place.)

See also  What Is File Integrity Monitoring? And Do You Need It?

checkout process navigation menu in Divi

Beneath the design tab, replace the module alignment:

  • Module Alignment: Proper

checkout process navigation menu in Divi

Developing the Cart Evaluation Navigation Hyperlink

As soon as the checkout navigation hyperlink is completed, we will replace the center blurb (Cart/Evaluation Navigation hyperlink). To hurry up the design procedure, replica the module types of the “Store” blurb at the left.

checkout process navigation menu in Divi

Then previous the module types to the center “Evaluation” blurb.

checkout process navigation menu in Divi

As soon as finished, the “Evaluation” blurb will likely be located to the left, without delay on height of the “Store” module. Use the layers modal to make a choice the “Evaluation” blurb settings and replace the location location as follows:

  • Location: Most sensible Heart

checkout process navigation menu in Divi

To complete updating the center blurb, replace the next:

  • Identify Textual content Alignment: Heart

checkout process navigation menu in Divi

Segment Background

To appropriately mirror what the navigation menu will appear to be on a checkout web page with a gentle background, replace the phase background colour as follows:

  • Background Colour: #fafafb

checkout process navigation menu in Divi

Saving the Row to the Divi Library

Identical to we did with the Cart web page navigation menu, we will save this Checkout web page navigation menu to the Divi Library for long run use.

Move forward and save the row containing the menu to the library the usage of the Save to Library icon within the row menu.

checkout process navigation menu in Divi

Ultimate End result for the Checkout Web page Navigation Menu

Here’s the overall results of the checkout web page navigation menu that appropriately displays the overall development within the checkout procedure.

checkout process navigation menu in Divi

checkout process navigation menu in Divi

Including the Checkout Procedure Navigation Menu to the Cart and Checkout Web page or Template

Now that each variations of the checkout procedure navigation menus are stored to the library, we will upload them to any web page or template we wish.

As an example, so as to add the checkout procedure navigation menu to a WooCommerce Cart template, cross to the Theme Builder and click on to edit the Cart template’s frame format.

checkout process navigation menu in Divi

Since we stored our navigation menu as a row within the library, we should take note so as to add a brand new row to our template to add the navigation menu. So, discover a spot for the row and click on so as to add a brand new row. Within the Insert Row modal, click on the Upload From Library tab and make a selection the stored row from the record.

checkout process navigation menu in Divi

You’ll repeat the similar procedure so as to add the navigation menu to the Checkout web page template as smartly.

checkout process navigation menu in Divi

Ultimate End result

Take a look at how those checkout procedure navigation hyperlinks glance on a completely designed template. Those designs also are featured in considered one of our FREE cart & checkout page template sets for Divi.

checkout process navigation menu in Divi

checkout process navigation menu in Divi

Ultimate Ideas

A checkout procedure navigation menu generally is a nice asset in your web page. And, with Divi, you’ll construct them totally from scratch with all of the customizations you want. Plus, you’ll save the format in your library so to upload the menu to any web page or template you wish to have with only some clicks. With a bit of luck, this may occasionally encourage you to create one in your subsequent mission and lend a hand convey extra consumers throughout the checkout procedure.

I sit up for listening to from you within the feedback.

Cheers!

.inline-code{padding: 0px 4px; colour: purple; font-family: Monaco,consolas,bitstream vera sans mono,courier new,Courier,monospace!essential} 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);show:block;margin: 0 auto;}

The submit How to Design a Checkout Process Navigation Menu in Divi gave the impression first on Elegant Themes Blog.

0 Comments

Submit a Comment