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
