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

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

100 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *