A Helpful Divi Tutorial For Divi WordPress
A 6 Step Guilde To Our Best Divi Theme eCommerce Design Layout That’s Also SEO Friendly
Divi Experts Since 2014
Divi eCommerce layouts are pretty good and there’s a load to choose from, just simply search online for DIVI eCOMMERCE LAYOUT and you’ll see a pretty good handful of results thrown your way. But if you’re like us and want a more tailor made layout built in DIVI for WordPress for FREE – then read on. Want something like the below?
Canohealth is a well-being website which sells CBD and hemp products. These can range from oils, capsules and hand cream to help or elleviate either e.g. pain relief or stress.
canohealth.co.uk is a fully eCommerce website, built using the WordPress Divi platform. This guide focusses on the desktop design more so than the mobile layout, not to say that we don’t touch on it below because we do. We build our sites to a desktop ready stage first – then we focus on getting it mobile, tablet and laptop friendly thereafter.
STEPS 1 TO 6
STEP 1 – HOMEWORK
Research Your Competitors & Know Your Customers
STEP 2 – THE MENU BAR
The Menu Bar Navigation – Keep It Simple And Easy To Use
STEP 3 – HERO SECTION
Make A Bold Statement With A Popping Image And Punchy Message To Go With It
STEP 4 – THE STRUCTURE
Set Your Website Up The Correct Way And Easy For Your Customers
STEP 5 – THE FOOTER
Clear And Simple Footer With Helpful Links And Your Social Media
STEP 6 – SEO FRIENDLY
SEO Friendly eCommerce Store Websites Using Divi – Boost Traffic!
STEP 1 – HOMEWORK
Know your customers and know your competitors. Are you selling your own branded products or will you be selling all sorts of brands under the umbrella of your own? These are the type of questions to think about as the answers can have an impact on design. Also, there’s nothing wrong with looking at your competitors or some of the “big boys” to see how they’re doing it, after all, you want to make sure you’re on the right track, dont’ you?
An example of an ecommerce site, selling their own brand
Check out this very slick site here skullcandy.com
Free Images And Not So Free Images
The images are awesome too, so unless you’re handy with a camera, know a photographer or have a friend that is handy with a camera, then you’ll have to use FREE image sites like pexels.com or pay for your images at i.e. shutterstock.com
Either way, your homepage will definitely need images of the products you’re selling.
An example of an ecommerce site, selling multiple brands
Check out this very slick site here chemistdirect.co.uk
- There’s a very simple banner, with a useful searchbar at the top. You’ve also got the cart there to show the total of your basket not matter what page you’re on, you’ll always know how much you’re about to spend before you checkout.
- Under the main banner you’ve got the categories
- Then you’ve got the imagery, which shows the brands they sell
- Lastly you’ve got the four benefits below:
- FREE UK Delivery
- Trustpilot reviews
- UK Customer services telephone number
Notice how all of the above listed 1-4 focus in the centre eyeline of the user.
STEP 1 SUMMARY
Know Your Customers
Are you selling your brand, or others as well? For canohealth.co.uk we’re reaching out to customers after well being product using CBD and/or hemp
Know Your Competitors
Find out what design styles your competitors use and apply some of their subliminal but logical design structure, try to keep the user focussed on the central part of your homepage for any specific offers, products or branding. Even a search bar centred at the top, will potentially make users type in what they’re looking for straight away.
STEP 2 – THE MENU BAR
Using the Divi Theme Builder, the specific header area for canohealth.co.uk is a custom built header. Here’s a really nice FREE Divi theme builder header layout, just download and follow instructions it’s really easy to install. If you’re stuck for installing, feel free to get in touch with us here.
Back to our custom design, it’s easy enough to do, so open up the theme builder and choose this style row:
So we’ve got three columns here, three elements if you like; each element contains a module:
Column 1: IMAGE module – Logo image.
Column 2: MENU module – showing the main menu of the website.
Column 3; MENU module again – but this time displaying a secondary menu
The main menu also contains the Woocommerce Menu Cart module. This module displays the nice cart section with price in the menu area.
STEP 2 SUMMARY
Custom Build Headers
The Divi theme builder is a flexible tool that allows you to custom build the header and menu area, to look like something outside of the old school previous Divi menu styles.
Using Rows And Modules In The Header
If you already know how to use Divi, then you can easily build a custom header, the one used in this example has symmetry, so make sure to centre align your elements within the modules that you use.
STEP 3 – the hero section
1. A hero image, usually taking up the full screen size:
2. A punchy, quick and snappy hero message, usually highlighting e.g. a new product, a deal, a discount, etc. some sort of hook to reel in the reader:
3. Finally, a CTA, or Call To Action, which in this case is the SHOW NOW button above.
STEP 3 SUMMARY
Make sure to take a look at the current trends in some of the best woocommerce page design layouts. If there’s a trend for showing full screen landing hero images, then make sure to choose the right look and feel for your Divi eCommerce website.
Remember The 3 Elements
The 3 trending elements are, a hero image, hero message and a CTA button. All elements must be relatable and relevant to your product or service that you are selling, remember, your website visitor needs to turn into a paying customer!
STEP 4 – THE STRUCTURE
How your page scrolls from top to bottom, should be appealing to the eye, but just as important, must also have a logical flow to it. At the very top, discussed in previous step 3, start with a hero landing area to start.
The next section should be either your products e.g. best sellers, latest products, etc. or, categories. Notice how TU Clothing have laid out their very next section under the hero section:
The title of this section is “New in” which makes sense as they’re a seasonal online retailer, which means if your products sell higher in e.g. spring or summer, then remember to keep your site updated and fresh. The customer will always appreciate a site that is up to date and making navigation easy to understand.
Categories and The Shop Page
They say (and they say a lot) a product should never be more than 3 clicks away. List your shop in the main menu and have your categories as sub menu items:
If a customer finds themselves taking too many clicks to get to what they’re looking for, they may get frustrated and just leave your website. Avoid this by making this super user friendly, have your top sure fire winner products on the homepage and click or tap straight through to their specific page.
Upselling and Neat Tricks
Once on a product page, it’s the norm these days to see other sections within the product page, such as other product categories and especially these “Related Products” kind of sections:
This is a nice section that the eye catches, just in case a customer wants to view a different but relatable product, or better yet, add an additional similar product to their cart. You can also do clever things that you may see on some sites like “Add £27 more products to qualify for FREE SHIPPING!” or similar carrot dangling offers.
Discount codes, coupon codes and first order discounts are also appetising to new and existing customers, once you have that audience and traffic you have to keep them hooked. It’s a tough battle ground to keep customers flowing through to your website, but we’ll discuss that in the final step, SEO friendly.
STEP 4 SUMMARY
The page must flow with some logic, hero section at the top followed by top selling or best products, clicking straight through to those products. Also categories and shop sections should be visible. Towards the bottom you can place further info about your products, lastly the footer.
Make It Simple
All products should be less than 3 clicks to get through to them, making it easy and least effort for your customers to find. Slap on sections like related products and discount codes for carrot dangling treats for your customers.
STEP 5 – THE FOOTER
Take a look at the footer design below:
It’s a simple and clear footer, broken down into 5 columns. Each column has a self explanatory header and each column has related footer links within that column. If you’re a designer, always good to stick your site link in there, but not necessarily make it a hyper link. As a designer, if you place hyperlinks of your website on other sites with lower domain authority, be careful, as this may not help your site the way you might think. It’s better to link to your site from somewhere that has a higher domain authority than yours. Find out here for some more useful tips on domain authority.
STEP 5 SUMMARY
Simple and Clear Footer
Linking Your Site (As A Designer)
Remember, linking to your site from external sites, may not always be best practice, make sure to read up on domain authority and pick and choose who and where you link from.
STEP 6 – SEO FRIENDLY
SEO for ecommerce, in the long run can boost traffic to your website. For short term boosts of traffic if you’ve just set up, Facebook and Instagram paid advertising can work for you, but this can be time consuming to research and set up. However, with SEO, not to say there’s less effort, but if you get started early and maintain a consistent flow of the below, you should start to see some results:
There are several tools and resources to find the right keywords to help rank your website, but first think, what are you selling and how are customers going to search for you? If you sell health products, would you want to rank for “health products” or specifically “CBD oil drops”? Probably the latter as that customer is at a stage where they know what they’re looking for, as oppose to a customer he’s typing “health products”, is probably still at the research stage. Two key tools that can help you:
Head over to Amazon and type in one of your products and immediately a list of alternative suggestions will appear in the search dropdown results. These are alternative keywords that customers are punching in along with your product. Use this info to your advantage to add to your keyword research and product descriptions.
Another tip, is to also type in your keywords into Google and see who your competitors are, ranking for that specific keyword. Take a look at their sites, read their descriptions and take note of how they’ve cleverly dropped their keywords into the description / title / meta titles and also how many times they appear.
Blog Posts – Great For SEO
Blogs are great for knocking up articles to drive and help push the right kind of traffic to your site. Blog posts that focus on “Best of…” or “5 top tips…” of a subject can peak interests and drive clicks through to your website. Make sure to have both internal and external links in your post to help boost the content and make sure you’ve got internal links to your products of course!
Site Structure and On Page SEO
Site structure is important for eCommerce stores, probably even more so than other sites as the way you categorise your shop and display the links in the menu can impact on your site. Ease of use, logical flow, it all adds to whether people stay or go from your website; we touched on this subject already in Step 4, but it’s important to mention again.
On page SEO, you’ll definitely need to install an SEO plugin, our favourite is SEO YOAST, which is a FREE plugin to use, there is a premium version too. There are many tutorials on Youtube, practically everywhere online, books, cereal boxes, etc. about how to use SEO. One thing for sure it’s really REALLY easy and super friendly to use. We recommend spending some time watching this and it will give you an insight into how easy it is to use. We’ve been watching WPcrafter videos for ages and they know what they’re talking about.
STEP 6 SUMMARY
Homework Homework Homework
Do your research and after you’ve done that, do some more. Keyword research, competitor research, content description writing are some of the basics you’ll need to get SEO going for your eCommerce website store.
Don't Pay For What's FREE
Of course, if you want expert SEO services and don’t have the time to watch video tutorials or read 8,000 SEO guides, then hire an SEO expert, but if you’re a small eCommerce set up or one man band, there’s a wealth of information out there for FREE, it’s just knowing how to find it.