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.
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.
@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;}
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.
As soon as finished, the format(s) will likely be to be had within the Divi Builder.
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
To get began, it is important to do the next:
- When you haven’t but, install and activate the Divi Theme.
- Create a brand new web page in WordPress and use the Divi Builder to edit the web page at the entrance finish (visible builder).
- Make a choice the choice “Construct From Scratch”.
After that, you’ll have a clean canvas to start out designing 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
Subsequent, upload a one-column row to the phase.
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.
To create the store navigation hyperlink, upload a brand new blurb module to the column.
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
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)
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
Then replace the width and disable the default animation.
- Width: auto
- Symbol/Icon Animation: No Animation
To hurry up the design procedure, reproduction the blurb two times so that you’ve a complete of 3 blurbs (or 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.
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
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
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
- Identify Font Weight: Semi Daring
- Identify Textual content Alignment: Heart
- Identify Textual content Measurement: 16px
Subsequent, replace the scale and spacing as follows:
- Width: 33%
- Module Alignment: middle
- Margin: -18px height, 0px backside
Additionally, be sure that the Z Index is up to date to the worth of 10.
- Z Index: 10
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
Because the checkout web page is the next move within the checkout procedure, we’re going to give it a light colour scheme.
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)
- Identify Textual content Alignment: Proper (desktop), Heart (pill and get in touch with)
- Identify Textual content Colour: #343854
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.
Then use the layers view/modal to pull the divider line above the opposite blurbs.
Subsequent, open the divider settings and replace the next design settings:
- Line Colour: #343854
- Divider Weight: 2px
- Width: 100%
Beneath the Complex tab, place the divider line as follows:
- Place: Absolute
- Location: Most sensible Left
- Vertical Offset: 32px
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%
All finished. Now, check out the end result on desktop and cellular.
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.
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%
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)
To replace the design of the checkout navigation hyperlink, replica the module types of the center blurb (the Cart/Evaluation hyperlink).
Then previous the module types to the “Checkout” blurb at the proper.
Open the settings of the “Checkout” blurb and replace the next:
- Symbol/Icon Alignment: Proper
- Identify Textual content Alignment: Proper
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.)
Beneath the design tab, replace the module alignment:
- Module Alignment: Proper
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.
Then previous the module types to the center “Evaluation” blurb.
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
To complete updating the center blurb, replace the next:
- Identify Textual content Alignment: Heart
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
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.
Here’s the overall results of the checkout web page navigation menu that appropriately displays the overall development within the checkout procedure.
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.
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.
You’ll repeat the similar procedure so as to add the navigation menu to the Checkout web page template as smartly.
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.
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.
Contents
- 1 Sneak Peek
- 2 Obtain the Structure for FREE
- 3 Obtain For Unfastened
- 4 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!
- 5 What You Wish to Get Began
- 6 Design a Checkout Procedure Navigation Menu for Your Cart or Checkout Web page in Divi
- 6.1 Developing the Segment and Row
- 6.2 Developing the Checkout Procedure Navigation Hyperlinks
- 6.3 Developing the Divider Traces to Reveal Development
- 6.4 Ultimate End result for the Cart Web page Navigation Menu
- 6.5 Saving the Row to the Divi Library
- 6.6 Converting the Navigation Design for a Checkout Web page
- 6.7 Saving the Row to the Divi Library
- 6.8 Ultimate End result for the Checkout Web page Navigation Menu
- 7 Including the Checkout Procedure Navigation Menu to the Cart and Checkout Web page or Template
- 8 Ultimate End result
- 9 Ultimate Ideas
- 10 8 Absolute best WordPress Popup Plugins in 2023
- 11 The best way to Upload a Other CTA In step with Publish Class The usage of Divi’s Theme Builder
- 12 Torque Social Hour: Kadence Launches A New AI Device
0 Comments