How to Design an eCommerce Website With Elementor, WooCommerce & Storefront

There's a new way to create an e-commerce website using Storefront, WooCommerce and Elementor This way you can create your own online store visually and with zero coding

This is the default Storefront homepage which looks awfully simple and dynamic In this video I will be showing you how to make a much more impressive website including a home page and a contact page So let's begin Create a new page, call it the home page, publish it and change the template to full width Now I click on edit with Elementor, which will bring me to the Elementor editor

I hide the title, begin with a new section This will be our header section Set the min height to 100 VH, which means it's gonna spread around the full height of our screen Now I added the content width so my content will fit into a box shape Drag in the first heading element This will be our main heading

Now I'm gonna adjust it and give it much more presence by using size weight and color Now I'm gonna give it a shadow with the darker shade of purple and I'm gonna set the blur level to zero, which will make the shadows solid and it gives it this nice 3d effect This will be our secondary heading now I will set an image to our background which will give our background much more character and I play around with the position and the size to choose an angle that will fit our header I used this code to hide the breadcrumbs under the menu which we don't need right now Now on to the next section this will be our product section So I drag in the heading and adjust it Now I will drag in our Woo-products widget

Here I can adjust the number of columns and the number of products on display I can reorder them by whichever way I choose I can select featured products or the ones that are on sale rearrange them by the rating or the popularity For now I will choose four columns I will duplicate this whole section and just to display only a specific category in the section below and overall This widget gives me much versatility and makes it very easy to achieve the exact goal I need

Now I can adjust the content width of the whole section, which will determine the size of my products This next section will be a 'call to action' to view all the products on the website I'm gonna duplicate the heading and set minimum height Gonna drag in a button and call it 'view all products' Choose a solid color as our background for now and by adjusting the style of every element I will make this section come to life I can also change the background to an image We'll choose the position and the size until I will come up with an interesting angle for the image and set it as fixed to get this nice parallax effect now set the background overlay Choose gradient and this will make our background more subtle and put the focus on the content

I can also choose to place the video instead of an image This will make our section much more interesting and immediately grab the user's attention Now I'm gonna save this section as template for later use in our e-commerce website Next up is the about us section so I'm gonna start off with two columns Drag in an icon box Adjust the content and I will drag in another heading to put in a bit more details about our business like the address Notice I keep using our orange and purple colors and this is to be consistent and keep up with the overall website design Now I'm gonna set some padding to our column and duplicate it two times This will give us this nice three of three icon boxes

I'm gonna change the content and the icons I'm gonna set the subtle border for the sides which will further emphasize the separation between the columns Now I will save this section as a template as well Now we've actually completed our first home page which includes our products Everything looks nice and beautiful we can move on But before we do I want to make sure this page looks good on mobile devices so I will switch to mobile view

Here I can adjust the settings of each element only for the mobile device I'm gonna start off with the header and tighten everything up by adjusting the height, the padding and the margin and the sizes of the heading For this section I will set a fall back image because in mobile devices the video doesn't play so we'll have an image instead Now our page is ready It looks cool and it is also mobile-friendly Next up I'll add a new page This will be our contact page

Again set the template to full width We're gonna hide the title and I'm gonna paste in our previously saved section This will be our starting point I'm gonna change the content, set an image as a background Again I play around with the positioning and the size to choose an interesting angle And I'm gonna use social icons instead of the button as you can see, saving templates and reusing them later saves us a lot of time We can make small iterations here and there while remaining consistent with our design and still make everything look unique and original

Not to mention that it's much faster than starting from scratch Again I'm gonna use the code to hide the breadcrumbs and once more we're gonna paste in a previously saved template Just change the icons in the content below This will create a subscribe section Now I'll drag in a Form widget and customize it quickly so it will fit our website perfectly Now our page is ready to go All that's left is adjusting it for the mobile device Once again I'm gonna use padding, margins and sizes to tighten everything up Now our page looks awesome and it is also mobile responsive

I hope you've enjoyed this tutorial Please subscribe for more awesome content This was Ilya from Elementor

Free Email Updates
We respect your privacy.

wordpress plugins for social media

affiliate marketing