Hello people my name is Ferdy. And in this
video, I will show you step by step how you can create a single product website where
you can sell only one product and optimise it for conversions. Let me show you what we
will cover in this tutorial. This is the website, we will make a beautiful Heather over here
made with Elementor Pro, but a logo over here about area contact area and the emphasise
on by our book. The goal of this website is to sell one product and this book that my
wife wrote with my sister in law, this my wife is my sister in law. So I have a call
to action over here really straight to the point and a soft call to action, we write
about things that women don't talk about. And then there's some more information button
which leads to the same page as the buy our Book button. I added those two pages because
maybe visitors want to learn a little bit more about those two beautiful people before
they want to buy something and I want to give visitors the opportunity to reach out to them.
We also create a header optimised for smartphones, again, with the emphasise on by our book,
and again with a menu and a link to their social media profile. Because through that
people can see who they are. So very you see real people with real followers. And these
are beautiful daughter, she's four days old right now I know I should not be working right
now. But I really want to finish this video. And here he can learn more about them. They
write about things people do not often write about. And they wrote a book about those same
subjects. That is what I'm selling on this website. So scroll down, I will show you how
to create this homepage. And again, a call to action over here a nice footer with information
you need when you sell things on the internet. And the credit sort of photographer, the about
page, not really complicated where Anna writes about Paula and Paula writes about Emma and then a contact page so people can reach
out to them. And then it's all about this over here we will use WooCommerce and cart
flows to sell this product. And when you click over here, the menu is gone. Because right
now I only have one goal to sell this product, not through a boring WooCommerce process but
but a straight to the point page where the checkout is where everything is at one page.
Let me show you here I can show you more about the book title, some more information, more
information when it will be published information about the book and the price extremes of shipping
costs. And people need to fill in these forms instead of filling out all those form fields
in WooCommerce, which we do not need. And we will use cart flows pro in order to make
this a beautiful forum. So people don't have to fill in a lot of information they don't
want to fill in, or that seems to be overwhelming. This tutorial has the goal to create a website
with one product is will convert. And we have a really big list with a lot of information,
people can get overwhelmed, and they leave your page. So it's straight to the point first
name, last name, address, zip code, city, country and email address. Here they can change
the quantity. And I will show you how you can change the shipping methods from send
it to the address or pick it up. So if people pick it up, they only pay for the book. Even
if they buy 10 books. No shipping cost because they pick it up or when they send it based
on our own configurations, they pay 995 if they buy only two books, they pay 750. And
if they only buy one book, they pay for a 15 We can all set it up and I will show you
step by step how you can do that. And then people can pay with credit cards if you want
to also with PayPal, they need to agree to the website terms and conditions. And I'll
show you how to place this privacy policy area over here because that's mandatory. And
then people can place the order. And also this page is optimised for all devices. Because
since a lot of people buy things on the internet through their phone, and they have a big Instagram
account that's getting bigger and bigger is really important that all your pages are optimised
for all devices. When people buy this they get instructions on when they can expect the
book or how they can pick it up at a local pickup place. They get a confirmation email
with information, the money goes to your Stripe account and that money on your Stripe account
goes automatically to your bank account and I will show you step by step how you can automate
this whole process. If I go too fast for you, you can slow down to speed of the tutorial
by clicking here and slowing down to speed or with the left arrow on your keyboard you
can go back five seconds in the video. In the description of this video I have timestamps
so if you want to go to a certain part in the video, you can click on the timestamp
equal directly to that part of the video. If you like what you're seeing so far, or
you're gonna like what you're going to see then please like this video feel free to subscribe
for more upcoming WordPress related tutorials having setup. Let's get started. There are
four steps we'll take in this tutorial. The first step is to get a domain name and web
hosting if you don't have it yet instal WordPress on it and I can give you 60% discount. After
that we will get Elementor Pro create a beautiful header footer and the pages of our website.
The third step is to get WooCommerce cart flows. And then we'll create a product page
and automate the whole process. So let's start with step one. Getting a domain name and web
hosting. If you have this already, that is great. Thank you skip this part If you don't
have it, let's go to web hosting 134 dot com, hit enter, and you will be redirected to name
hero in my opinion, the best web hosting provider. And that's not only my opinion is the opinion
of a lot of people, if you take a look at polls online and what people think about name
hero, why, because websites are super fast, it is easy to use, and you really pay in the
form of price, especially since I can give you a discount of 66%. So click on get started.
Now you see the packages over here. And when you are going to sell things on the internet,
don't use a star cloud or a plus cloud and go with the thorough cloud. Why? Over here
we use SSD storage, which is already quite fast. But if you want to sell things, you
need to use NVMe storage, which is so much faster than SSD storage. And they may was
one of the few web hosting providers in the world that already offers these new technologies,
it will cost you around $8 per month. And if you go for at least two years, you get
a free domain name. And I will show you step by step how everything works is pretty straightforward.
The great thing about the thorough plan is as you can have unlimited websites. So if
you have your first website and it's running, you can create a second website, you don't
need to pay more, you only pay for a new domain. And it's still included in this $8 per month
structure. You have enough storage to have so many websites. And if you would have 100
websites a day, you can upgrade to the business cloud. But right now, this one is perfectly
fine to start your business. So I scroll down, I click on order now. And here we can choose
a domain, if you already have a domain, you can fill it in over here, if you don't have
a domain, you can type one over here. So if you say facebook.com, you can have a lot of
different extensions, you can also search an extension. If I say facebook.com, and I
click on Search, it'll say Facebook comments on available. So of course you need to have
a domain name that is free. So I go for the writing sisters in law.com. It's available, you know, I'll
try writing sisters in law. It is available and it is free if I would go for at least
two or three years. So if I click on Continue, look at this, I can go for three years of
web hosting, and I paid at once but then I have three years for the discounted price.
Or I go for two years or for one year. So the longer the billing cycle, the more you
save. So if you go for three years, you pay around $8 per month. And when you go for one
year, you pay around $10 per month $120 For the first year. And I think that's a great
investment when you think of what you're going to sell. So let's do some math. Over here,
I have one product I will sell in this tutorial. And it's a real website with a real book.
And they are on pre order. So imagine I would pay $120. And I take a look at the orders.
Look at this in the latest two weeks. Or in the latest month I made 1000 euros selling
this book. Well it's not even published yet. It is finished, but it's not published. So
that's the power of web hosting through a website, you can sell stuff. And then I think
that this investment is really affordable in comparison with the profits you can have
from a website. So you can go for one year, two years or three years or we'll go for one
year and then all this stuff is fine. So I click on Continue. If you want to you can
get ID Protection, that means that people cannot see all the information you will fill
in when you create an account here at name hero. So I will turn it on. And then I click
on continue. So we say if total of $180 we need to pay one on 38 and dollar 72. And before
we do that, we need to fill in some details over here. So I scroll down I create a new
account my first name is Ferdy law's name, my email address my phone number I need to
fill in some billing details like my company name by address of USA South Holland How did
you find us probably through YouTube because you're watching this video and if you other
sports you can have been. So I say 78900 I need to create a password of course. Then
I scroll down I want to pay with credit card stripe. So I need to fill in the details over
here and they want to superhero specials iTune is on because sometimes there is a major discount
or if you want to go for a second year. So I will definitely turn it on and I have read
and I agree to the Terms of Service. Okay, so I click on checkout. So so far we invest
that $140 Awesome. The great thing with name hero is that our website is live immediately
so I can continue to the client area. Congratulations. Now you have your own domain name and web
hosting. Let's instal WordPress. How can we do that? Well, we can Click over here on my
clouds, click over here on your cloud package. And then I click on login to the cPanel. Okay,
so they're here to help us great. I'm also here to help you, I like to keep things clean,
I close the windows, I can close. And I want to search for worth press or press manager
by Softaculous. I click on it. And now I want to instal WordPress. So really simple, I click
over here on instal pretty straightforward. And then I can choose my domain name. And
over here, it's important to choose HTTPS, because then your website will be secure,
especially when you're going to sell things on the internet, you need to have a secure
website. And it's also good for the search results. So it says right now a trusted SSL
certificate was not found. But no worries, this is something that name Hiro will do within
one hour. So over here, you can choose your domain name, I only have one domain name.
And if you want to, you can instal your website at your domain and then forward slash new
or test or temp. But I want to do it in the main directory. So everybody that goes to
this domain, will see this WordPress website that we're going to instal. Over here we have
the site name and the site description, I will leave it as it is, I will talk about
it later, my admin username. So the username, I choose to log in into our WordPress website.
And then I'll integrate a password. And it says it's quite strong by admin email is info
at 30 corp.com. And then I scroll down, I don't need to choose all this stuff unless
you want to change the language of your website. Mine is English. So I keep it with that. I
scroll down, I skip all this stuff. And then I click on instal. I can see the password. And now it will be
installed. It says within three or four minutes, but it's probably within 20 seconds. There
it is already. So ladies and gentlemen, look at this. If we click on this link, we go to
the backend of a website. That means that our website is live already within five minutes.
That's amazing. So I click over here. And we are live. Look at this. Our website is
secure. I love this about name hero, it's so easy to configure everything. So I'm really
happy with the service, I hope you will be too I guess you will be and if I have not
mentioned yet, you can have a 30 day money back guarantee. So if you really don't like
the service, somehow you can get your money back. So there's no risk. So what I can do,
I can close this, and I can close this. Let's talk about WordPress, we installed WordPress,
this is the back end, maybe it looks a little bit overwhelming. You think what is going
on over here, this looks complicated. I will show you step by step how everything works.
So this is the back end here, we can configure our website. And if I click over here, I see
the front end of our website, this is what people will see when they go to writing sisters
in law. Let's come right now. It looks ugly, and we're gonna make it look so much better.
But this is just the starting point of WordPress, I don't get it, why they make something that
is so ugly. But the great thing is we have a lot of room to improve this website. So
the back end, if you want to go there, you can click over here. And if you're at the
back end, you click on the same place, you go to the front end, when you're logged in,
you're the only one that will see this bar at the top no matter where you are. So you
can go to the backends you can customise a theme, you can create a new post, or upload
an image or a Word document or PDF, you can create a new base or a new user, but I mainly
use is to go to the backends and to the front end and what I prefer. I click over here and
before I click I hold Command, so I open a new tab, I like to work with a back end over
here, and then the front end over here. So if I change something here, I can see the
result. So it's personal preference, but it's what you can do. So I like to work in a clean
environment. What do I mean with that, I want to clean up his website and remove the things
I don't need. Because over here for instance, I see a blog post. I don't want it I don't
need it. So I will remove a few things. First I dismiss this message. Then I go to all the
posts by clicking here. And I want to remove this boats post I want to bring into the trash.
Go to the trash and I entered a trash the same I want to do with pages. They have two
pages that come by default I want to select them all by clicking here. Do actions, move
to the trash and apply. I go to the trash and I empty the trash. So now if I refresh
this page, look at this, this will be gone because I removed it Command R or five on
the PC. Nothing here. So that's what I mean with the back end and the front end. What
else I can go to Appearance Themes I can remove all the themes I don't need. And I don't use
right now I use this theme. I click our theme details, delete. Okay, theme details, delete.
Okay. Now I want to go to Settings permalinks. Right now it says, day and name over here.
That means when I create a new blog post, they'll say this your domain, and the date
will be in the URL over here. Well, that's not what I want, I want to have it like this,
your domain and then the title of your blog posts are of the page that is better this
the best sort of search results. So definitely check the post name are selected and then
save the changes. Then I want to go over here right now it says, howdy Ferdy Corp, I want
to change it's by editing my profile. And then I can change the colour scheme over here.
So if you like coffee, please don't use this one. Or if you refer to the one, I like this
one, the default one, I think it's amazing how it looks he will get use it. And over
here I want to fill in my first name, which is Ferdy and my latest or last name, or Korpershoek.
And then over here, my display name publicity as Ferdy Korpershoek. Wow, I can change my email address, I will do that
info at Ferdy Korpershoek COMM And when I do that, this picture will appear. And I will
show you why I update the profile. There it is. I've done that now. So profiles updated.
And now we see an image over here, how come? Well, this email address info as for the corpse
comm is active on Gravatar. So if I open this in a new tab, I can open a gravatar account,
create my own, it costs five $50. Now it's free, you can sign in, leave your email address,
upload a picture, and then when you use it, same email address that you use to sign in
over here is we'll link it so they have a nice image over here. You can set a new password
if you want to. But I'm totally fine. I click on Update Profile. And I want to go to the
Settings, General. And then I can change the site title. Well, this site is about my wife
and my sister in law. And they call themselves sisters in law. It's the wife of my brother,
so sisters in law, sisters in law, and they're called Anna, and all corporate. They write
about the things in life that people do not often talk about, like the hard things they
go through in life, anxiety, other stuff, and they wrote a book about it. They're active
on Instagram. So if I go to Instagram comm I search for the Raven, the transition, that
sounds worth it. So different languages, Dutch, etc, their Instagram account. And by the way,
Instagram is a great way to promote things. So there's my wife is my sister in law. And
together they write about things in life and they created a book and they are selling it.
And then I said that, um, I will make a tutorial in English. So people can also learn how to
write a website with just one product. And that's what we're going to do. So I close
this. And I scroll down and I save the changes. And now if I go to the website, it still looks
ugly. So we're going to make it look better. First, I want to add a few pages, how can
we do that I can go to the customizer over here. Then I want to go to menus, and I want
to create a menu over here. So I click on it. There's a name for your menu just for
your own reference purpose. So I can call this main menu. I can call this whatever I
want Uncle Jim, from the hood, no, no. Jenny from block, but I prefer main. And then I
want to assign this menu to a location, the primary menu area, which is in this thing
over here. Then I click on next. I can add items. So I click on add items. And now I
can create new pages. So I select first, right time the homepage, click on add. So what kind
of pages do I want to have over here and about page and a contact page. If you want to you
can have a blog page, a portfolio page, whatever. But in this tutorial, our focus on selling
our single product so don't need to have blog posts, I can do that. I have tutorials on
how to do that. Right now. I want to focus on selling his product. That's the only goal
of this website to get people excited for this product and sell it to them. So if I
take a look over here, I may publish it See home about in contact. But I also have the
homepage, on my website, why if I go to apple.com, or almost any other website in the world,
if I go to Mac, and I want to go back to the homepage, where is it, you need to click on
the logo as well, we're also going to, so I don't need to have the home area, I want
to keep it as clean as possible. So I click on page over here, scroll down, and I click
on remove. Then I go back, I go back. Right now it says nothing here. Why? Normally, WordPress
shows the latest blog posts. That's why it says ready to publish your first post. Get
started over here. But I don't want to show my latest blog posts, I want to show the homepage.
How can I do that I need to go to the homepage Settings. Change the homepage display from
latest posts to a static page. And then we need to select the homepage. I click on publish.
And I close it. Now we have installed and configured our WordPress website. Let's create
our website using Elementor Pro. Now I want to go back to the back ends by clicking here.
I close all the stuff again. I go to Appearance Themes. Right now this
is the only theme and I want to add a new thing at New. And I searched for the Hello
theme from Elementor. Elementor is a page builder we will use really powerful page Miller
instal now and activate it. And if you go to 30 Corp comm forward slash l Pro, hit Enter.
You will be redirected to elementor.com. And this is an amazing page builder that we will
use in order to create an stunning website and sell our product. So first, over here,
I can use a free version of Elementor by clicking here instal Elementor. If you did not see
that, let me activate it first. You want to do that manually, you can go to plugins, add
new search for Elementor. And I can instal it over here and activate it. So if I take
a look at the plugins, I did not delete the ones I do not use. But I don't use this one.
And I don't use this one. So I select them both directions. Delete, apply. Yes, I'm sure.
So I want to keep it clean, because then our website keeps as fast as possible. Okay, so
now we have our new theme. The Hello theme, wow, really clean. We have the page builder
called Elementor. I want to get rid of this area. Now I want to get Elementor Pro. In
order to get that. Let's go over here we go. We can we can click on pricing. So there are
six different plans. And don't worry, we're not going to use this one for this website
to have a single website where you sell one product and you want to make profit with a
one you just want to sell that product. Definitely go with Elementor Pro essential. So Elementor
Pro for one website and with Elementor Pro, we can create our complete website the header,
the footer the pages, we can integrate with WooCommerce and with Gosh cart flows that
we're gonna use, and it costs $49 per year. So we are selling a book. For me that is three
books in order to make back this money. And it will help you to make your website better.
You can adjust anything if you can adjust anything pixel perfect. And I will show you
how. So in order to get it we click on Buy now. First, I'll leave my email address that
I used to log in here at Elementor. And my first name last name, I'm from the Netherlands,
my company name my fit number and I can pay with credit cards or PayPal. And when I fill
in all the details, I click on checkouts. I can generate my invoice. I can download
Elementor Pro over here. So I download it I get my confirmation over here. So now I
can go to Plugins Add New, Upload a plugin and I drag this one over here. I click on
instal now activate the plugin and then I need to link it with my accounts. So I can
click here on Connect and activate and it can be that the first time into login with
your details that you filled in over here. In my case, it went to info For the corpse
are good to come. So I click on Activate, I can close this, and now it is linked and
active. So now I can use Elementor Pro on this website. Great. So if we take a look
at the website, it doesn't look that appealing yet. And that's what we're gonna change. How
can we do that let me start with the header, we're gonna create a beautiful header for
a single product webshop. And to do that, I go to the back end, I go to templates, and to the theme Biller,
I tried a new theme biller and I choose a heather, we're gonna create a header for our
website, this will appear on every page and it will stick with us. No matter where we
are in the website, we can choose between a lot of different templates. And if you want
to do that, feel free to do that. But I want to show you how to create one from scratch.
Close it. So first, before we get started, I want to adjust a few things. I click over
here, on the settings, I want to give this a title. My goal is one the general Heather,
I polish it. And then I can decide where I want to display this. So I can add a condition.
And the first one is on the entire site. But I can also show it on specific pages. But
right now, the entire site is perfect. So I click on Save and Close. And now we can
create a header over here. And I will show you how great. Okay, the second thing I want
to do, click over here on there's three lines there, I want to go to the user preferences,
and I want to change the interface to dark. That's what I prefer, we can keep it light
I prefer to give it or to make it dark like that. And I want to add editing handles. You
can make this panel wider by changing it over here. But I think 300 Okay, depending on the
size of your screen, I'm okay with this. I click on update. So are you ready? Okay, let
me talk you through how Elementor is built up, I click over here. What we see over here
is this beautiful line. And that's a section so we can create a section. So I click on
the plus, if I choose this over here, I have one blue section over here. In that section,
in this blue area, I have columns, right now, I chose only one column. So over here, I see
this column. And in those columns, we can have elements, like a site logo, a heading,
a text editor, a button a video, a lot of different things. And that's the structure
of Elementor. So let me close this, what I can do, I can have this area, that means it
is one section with three columns 123. And in those columns, I can drag things. So maybe
I want to have an image over here. What I select this, this blue area, again, this is
the element, the image element. When I click on this element, I see three areas the content
here, I can change the content. So I can choose an image, then there's the styling of the
image. Everything has different options, every element. And then we have advanced for instance,
margin, and the padding and the motion effects so we can make it so we can make it go from
the left to the right like that. And to take a step further, if I go to the settings of
the section, I hope I don't overwhelm you. But I will show you step by step how it works,
we have the styling area. So I can say I want this background to be dark blue. But then
I can also have the settings for the column. So just the first column, I can go to the
styling. And I can say I want the background to be white. But now we don't see that other
background. So now I can go to the false area, change the margin. And now you start to see
the power of Elementor. So those work all together with each other. If I want to go
over here, I can go to the background, I can change it to something else. And then I can
play around with the bedding and the margin. And in that way, you can create a website
pixel perfect and this is only one element. So I can also drag all elements in the same
column or in new column. And again, if I click on it, you see content style, and at first
and based on the elements you use. Click over here on the image. Click on the text you see
different settings and this is See with Elementor Pro, there are a lot of different elements
of price list the flip box, if you want to learn about all of them, you can go to youtube.com.
And search for Ferdy Korpershoek, or elements explained or like this. And there they are,
I show all elements of the elements. Also Elementor Pro to both the free version
and the pro version, over here, two and a half hours. Now I'll go deeper into all the
stuff. But here, I'll just show you what you need in order to create a beautiful website.
So I close this, we're still working on the header. So I want to create a new area with
two columns. Why at the left, I want to have the logo of my website. And at the right,
I want to have my menu. So let's start with the logo I'm gonna do is really simple. I
click over here, and I search for an image and I drag is here to the left. That's it.
Then I select the image I choose to fill. And I want to select files from my computer
by clicking here, I have a special folder on my desktop writing sisters in law with
all the images I will use. So if I want to use an image, a logo, for instance, I can
search for the logo. That is this one writing sisters in law, then this logo in white, I
want to SPST that cannot be uploaded as a fav I can. So right now, I want to use this
logo. But what I want to do now I want to upload all the lows at once does it will save
a lot of time. So if you have all your images at one place, when a open them so there they
are. Here's my wife. So my wife has a picture of my wife, oh, that's a good joke, okay.
It's not even my own joke. And it's not even that funny. I searched for my logo, and the
PSD file cannot be uploaded, and it's totally fine with me. I insert the media. So there
it is, I think it is a little bit big. So what I want to do, I want to align it at the
left, then I want to go to the style of this image. And I want to change the width but
not in percentage, but in pixels. So let me say 300. How's that, I think that is amazing.
So I will leave it with 300, then I can play around with the separation area for the columns.
So I can make it smaller, but it's really small. So what I can do, I can click over
here, and I can decide that this area should be 30%. And then this area, of course will
be 70%. So I have more space for the logo for the menu for other stuff in the menu.
So that's the first one, I want to click over here, go to the content, I want to link this
content to the homepage. So I click on custom URL, and then just a Ford slash. So no matter
where you are in the website, when you click over here, you go to the homepage. Okay, if
I want to go back to all the elements, I click over here. And then I can search for the navigation
bar, I see it already. And if you want to search for something, just type it over here.
And everything that looks like it will appear. So the Neff menu, release it, and there I
see it. And it starts with a few basic colour, so I'm not really impressive. In order to
make this more impressive, we can adjust it. So I click over here. Okay, I select the main
menu, or only menu, the layout is horizontal, I can also have it vertical. But uh, that's
not what I want. I align it at the right. And if I point over it, it looks like this.
Agreeing on the line and the Huffer with the colour stuff, I don't want that I want it
to be a background. So when I hover over it, the whole area becomes boring, I only want
to change the colour. So the animation fades, which is perfectly fine. And this is for the
mobile drop down, we'll take a look at that later, I go to the Stell. Now we can change
the typography. Before we continue, let me update it. And we created this this template
and we said this template will be available on the whole website. So if I want to see
it, if I just want to see the result of the header, I click on this I and I click on preview.
And if I click on the link, then I go to the homepage. And as I said, you see it on the
homepage now writing sisters in law and there are quite a few things I want to change. But
step by step we will change them one by one. So first is this colour. This is not the colour
I want to use in my website. So how can I change it? I click over here, I can go to
the menu and I can go to the Stell and when I hover over it, I see this green colour.
So I can say I want to use this colour for instance. And this is is exactly what I want. But what
I prefer to do you see this icon over here, we can choose primary colour, so colours that
we chose one time. And when we choose one of those colours, it will automatically become
the primary colour. But when we use all those colours in the whole website, and we changed
the primary colour, all the colours in the website, well, we changed at the same time.
So we don't need to do everything one by one. What do I mean? Let me update it. If I click
over here and I go to the site settings, and then I go to the global colours, then this
colour is the primary colour, I selected this colour. So right now it looks like that. But
if I change the primary colour to this one look at this. So that means if I select this
primary colour of a lot of play on a lot of places in the website, and I change it over
here, it will be changed on all those places. And that will save you a lot of time. So there's
also the accent and I want to use the same colour, I want to change the secondary colour
to a little bit darker colour and the text colour actually the same, and it can be even
darker. See 333 See, yeah. So those are the two colours I will use, I will keep it a basic
website just focused on making sales because this book is amazing. Of course, I hope the
thing you sell is also amazing. Then we can go through the global funds. And that works
the same as with the colours. So I like to use railway as primary railway. And that's
what you'll see in the header. It'll change all the titles, I wanted to be railway and
all the colours I wanted to be Open Sans also here, Open Sans, and then the accent colour.
Open Sans update. Okay, then I close it. And I go back to the editing area of Elementor
over here. So it looks like that. Then the next thing I want to do, I want to take a
look over here. And then I want to go to the site settings. And I want to go to a layout.
So how wide is this website, if I will make it really narrow, you will see that the width
of the website will change. So I like to say 1140 I think that's perfect. And the widget
space 20 is also perfect. Update. Close. And then I want to go back to the dashboard. From
the dashboard, I want to go to the website. Let me close this for now. What I want to
see I want to see a nice icon over here. Because when I go to Verity Corp, for the corp, and
I go to apple.com What I see over here at the top is is I can so I can see easily where
I need to go. And here I see stupid worlds. But the world is not stupid. So I need to
change this because if the world is not stupid, but it seems to this I can that the world
is stupid that I want to change that. So that's what we're gonna do. Okay, weird talk, I go
to the Customizer by Apple, and I go to the site identity. And we can select a logo of
our website. This one and I skip the cropping. And I scroll down and I want to go to the
site I can I select it, and I need to find it. And here it is and this in the colour
of my website. Because I like to maintain Estelle, I skip the cropping a look at this
ladies and gentlemen. Here it is. Publish. Close it. So far, so good. If I click over
here, I see I go to the About page. If I click over here, I go to the contact page. I click
over here. I go to the homepage. And I want to edit this header again, how can I do that
I hover over Elementor and I want to edit the general header by clicking here. So I
click over here again. I go to the cell. And over here at typography. I click here it is
right away which is perfectly fine in my opinion. I click on transform and I want to make it
uppercase. Like that. And I'm happy with the colour because it's
chosen over here. dark colour I like it I don't like it when it is too light. So Select
this one perfect. When I hover over it, what do I want to happen? Well, by default, this
will happen. Now, by default, it's already chosen over here. But actually this one I
like so I will leave it as that is, maybe bring this a little bit to the right, give
a little bit more space, updates update. And when I'm on a certain page, I wanted to hide
the highlighted, so I can go to active, I can change the same change to the same colours.
So all the way you will see now if I open this over here, and I go to the About page,
it will say stated colour. So I see wherever I am in the website, on which page I am. And
that's what I like. So that's the active area. And if I would go to the contact page, and
that page is active. So my wife and sister are really active on Instagram. So I want
to add an area where they can go to Instagram that can be linked over here, how to do that,
I click over here, and I searched for an icon. I see social icons over here. So I drag it
here to the right, but I cannot do that only on top or below. So I drag it below, I remove
two of the icons. I click on Facebook, I click on the icon. And then I search for Insta grin.
I insert it. So there it is beautiful. I need to find the link again of Instagram. And then
writing sisters in law, if you want to support them, you can do that. Even though it is in
Dutch, so it's up to you if you want to support my wife and my sister in law. And right now
it shows the official colour. And I leave it with that for now. The shape is rounded
square, or a circle, I think rounded this fine. And the columns, I only need one column.
So let's okay, I can align it to the right. And then I go to the cell and I change the
official colours to the custom ones. And the primary primary colour is this one, the secondary
colour is this one or better Primary Colour does not exist. So I will make it transparent.
And the secondary colour is the secondary colour. Like that's the same colour as this
one. Okay, but what I don't like is that those are on top of each other, how can I bring
them next to each other? Well, I click over here, I go to advanced. Close this and I scroll
down to positioning. And I change the width from the fault to inline Look at this. Now.
It's not over the whole width, but it's just this error. So inline means that it is as
big as the space it needs. So not the whole width. The same thing I want to do over here
and now it becomes interesting because if I go to advanced, I scroll down positioning,
I bring it to inline. Now they can be stacked next to each other instead of on top of each
other. So I don't know if the word stack is in the right place at that moment. So, so
far, so good. Now I go to the settings over here and I go to the columns horizontally
alignment is in the centre so it's slowly in the centre of the width of this area. So
if I change the horizontal alignment to the end, oh now we're getting somewhere. If I
hover over here, comes like that, it looks like that. And here nothing happens. So I
want to adjust it a little bit further by clicking here. I go to the Stell the custom
colours are okay. But if I hover over it, I want to change it to this colour with this
colour. Like that. I want to go to the cell of the social media icon does I think it should
be a little bit smaller, let's say 24 Now we can increase
the bedding until I think it's perfect okay, so if I update it like click over here so
I go to the website it looks like this I don't like it. What I can do I can make
this a little bit bigger so online better if I make the website bigger month plus. I
can see to do better. So okay, well I can do and that's what I like about About Elementor,
that pixel perfect stuff, I can go to the Stell of the navigation. I can increase the
padding, this horizontal. There's also vertical. So if I would make it really big, it will
look like this. So now I can just decrease it until I think they aligned perfectly. I
think that's it. Noise. But the most important thing for it as a website is to sell his book.
So how can I grab some attention for people to buy this book? Well, we need a call to
action through a button. So I click over here, I search for button. And I want to drag it
between it. But so I can drag it over here. Or here, if you can drag it between it what
you can do, you can go to the navigator over here, and then see the left menu over here,
then you see the social icons, and then you can drag this in between. Okay, then this
select add this button, I go to Advanced and I go to positioning that will change it of
course to inline. Ah, now it's getting better and better. So first, I go to the content
to change the title. Because right now it says click here. Well, why will people click
here, they don't know what it is. So I want to be really clear. Buy our book. I can link
it, but I will link it later. Because right now I don't have the link to the page where
people can buy it yet. And I want to spell it in a way that looks similar. So to typography,
I wanted to be the same, which is a real way. What is the height over here or the size?
It's not there. So I need to do it manually. So I can be sure it is the same 16 So also
over here 16, transform uppercase. And I think 600 over here. So if I go through the boldness
or the weight of this title, ultimately make it the same. Okay, then, if I hover over here,
it's bigger than this one. So I need to go. Let me see to the fairing, uncheck it. And
I can adjust the padding pixel perfect. 16. Also 16. So let me see. Yes, it aligns perfectly.
So now I need to have some more space at the left and at the right. So 50% should be split
over here if it's present over here. So I think that's perfect. So what I mean is, the
space between those things should be perfectly divided by 50%. And I think that's the case
right now. So it looks as if it's one button that's in the menu integrated it's one menu
is that it's a little bit different. So and the right side, of course, also 15. So about
contact, and this one. So if I hover over here, I want to change a few things. How can
we do that over here, button still hover, I want to make the background white. And the
text colour, the primary colour like this. And I want to have a border of one pixel.
But that has nothing to do with the hover. So what I need to do if I go if I go to hover,
I see the border. Let me make it to but it means so that it does not fit anymore. So
what I need to do also, I need to go to the margin or the padding over here and decrease
it by two. So now still aligned. There get it I hope you get it. I click over here. Yes, and there is a small
rounding also over here. How can I get rid of it? I click over here. Border Radius, uncheck
it, make it zero. So it will become a square like that so it gets some extra attention
and when people click on it or hover over it, it's Looks like that. And since, you know,
I've also removed the square over here. So look over here. Border Radius, zero. Perfect.
Update. So we have our logo we have about contact by our ebook and social media. And
if I scroll down, you see it does not go with us. So how can I make this header sticky?
By clicking here and go to Advanced, closes, I go to the motion effects. Really simple
sticky on top. Update. Refresh. And now when I scroll, you see it sticks with us. I'm happy.
I click over here. This looks great. So how can we make this mobile friendly, we can click
over here, responsive mode. And then we see it looks like this on a mobile, but keep in
mind, people go to this website. And when I see this, in my opinion, it just looks awful.
So we want to make it as easy as possible for people to buy this book. How can we do
that? Well, let me go back to the normal view. I want to duplicate this area before I do
the longer thing, click over here. Go to sell background type and make them background.
White. That's it, send it sticky. And we scroll down we want to have a solid by backgrounds.
Now I want to duplicate it. And then I want to do a few tricks, no tricks, just things
you can do. Click on this section, go to Advanced, closes, go to the responsive area. And now
we can say as we hide this on a mobile, then over here to second one advanced go to responsive
we can hide is on a desktop and on a tablet. So this is the version for the desktop and
tablet. And this one for a mobile. So right now this one is greyed out but if I switch
it, this one is greyed out. And to make it a little bit easier to follow in the navigation.
We have two sections sections over here. I can say Heather desktop, Heather mobile. Okay.
So I'll adjust it a bit that what we can do, we can drag everything in one column. Because
right now we have two columns, I'd only need one. So I drag this over here. And Andre is
over here. Then I hover over here and I remove this column so there's only one column right
now then I can go back to the navigator if I want to. And I like to see the button first
by the book, then the navigation menu and then the social media I can so you don't see
it all in one line or in one row. I want that in order to do that I click on the navigation
menu. And then I scroll down and at the mobile drop down, I click on Full Width. I select
it. So now everything is in one row but not aligned perfectly. So I go to the settings
of the column I go to the horizontal alignment and I changed it to the centre. Okay, this
is what I like this is what I don't like and this is also what I liked. So I need to go
to this one. And then over here I can increase my margin betting I can uncheck this I can
make sure there's enough space between the button and the navigation menu as there is
over here so at the right I decrease it to zero and at the left I increase it more like
this update. So if I click over here and I preview this go to the home page looks like
this on a desktop and if I make the screen smaller I forgot one more one thing and that is over
here aligned in the centre so let me try it again. Okay, this is how it will look on the
mobile alright now we don't see because we have this bar over here. But there's enough
space over here and if you want to increase The space a little bit, which I can imagine if I cannot select this, yes, if I cannot
select it, I can always go to navigator select the header of the mobile, and then I go to
padding top increases area 16 update. And now if I
make the screen smaller again, you see, there's more space so we can adjust everything pixel
perfect. We can adjust those colours also. By the way, yeah, wait, wait. This Harmik
websites trial and error. Also bits page over here. Yeah, everywhere 7000. If I hover, then
it's in the centre, okay. Then I go through the Stell. And over here at the toggle toggle, I could
change the colours to something else. And to widen or this one can make it bigger. So
you know what, let's do that. And then I go to this place, make it zero. Okay, let's let's just do it. I go to the
toggle, and then make it bigger. Yes, like that, then I can go to Advanced
at the left seven at the right seven. But I don't like it. So what I can do, I can go
to history. And I change the background colour. So um,
I click over here, and I'm back. So that's how we can do to the with the history area.
But what I can do when I hover over this can become a different colour. Because right now,
it's a little bit boring. So when I hover over it, then what everything here, here,
here? Yes. So I saw something else, one of his in tablet view. Look at this. Here it
changed or the today's menu. If I measure this shift amount for on that Mac, I see it's
1024. So we can change the break Breaking Point area. As soon as we have a small menu.
It doesn't have to be okay, wait, wait. I click over here, I go to the tablet view.
And now I select this area, and then I go to content. And then the breaking point should
be for a mobile? Yes. So as long as you watch this on a tablet, you'll still still see the
normal menu. So I update it, take a look. I make a smaller, smaller, smaller, smaller,
great, great, great ad, this is what I want. I hope you start to see why I like Elementor
so much because yes, it's more work. But we have so much more flexibility to create a
website we have in mind. And we're only talking about the header yet. I take a look again,
what I see, look at this. When I make the screen smaller tablet, for instance. This
header doesn't stay on this logo doesn't stay in the centre vertically. So in order to achieve
that, I click out no not do not click over here, I click over here on the settings of
the column. And then the vertical alignment I say middle a look at this. You see a small
change. And now I can show you the result is what automatically Yeah, did you see that.
So now if I make it smaller, it becomes smaller like that so it doesn't go up. So it stays
vertically in the middle and is what I want. So I'm excited. I hope you are too. And what
I want to do now I want to take a look at the homepage. So I click over here. Right
now we will create the homepage. If you can't wait to create your product and all that stuff
we're going to do later in the store. This can skip this part. Right now I'll show you
how to create a beautiful homepage or one product website. I want to adjust this page
and in order to do that, we need to click on edit page some and then I click on edit
with Elementor so having fun I hope so feel free to like this video if you liked it and
subscribe for more upcoming WordPress Elementor Pro Web Design webshop related tutorials.
And if you have a suggestion for a new video, let me know I do my best to make a lot of
tutorials. So what I want to do, I click over here, I hide the title. And the basic layout,
I make it element or full with this for every page I make with Elementor. And when you do
that this will be saved automatically. And then I go to the elements. And since we use
Elementor Pro, we have a lot of extra elements, you don't have that with the free version,
that would make use of a slide. So I searched for slide. And I know it's only for one column.
So I can just drag it over here and do ultimately create a section around it. Awesome. So I
click on the first slide. And I can have an image in the background or an image in the
slide, I choose this one. And I can have a call to action, let me go to the first slide.
This is it and then slides up slide heading one with a text and a call to action, you
can do that if you want to buy our book, something like that. It's up to you, you can have a
background overlay, so becomes a little bit darker, you can have the Ken Burns effects,
so it moves a little bit. And you can change the overlay colour. So there are a lot of
possibilities, you can mix the colour with a certain blend code. So it looks different.
I think it is amazing. But I want to use it for something else. So I go to content, remove
all the content, I just want to show it for the images. That's it. Like that. Then I go
to the second one. And then I add the second image, this one. And then again, Ken Burns. Yeah, I don't want to get I want to get rid
of the overlay item to I want to get rid of title, the text and the call to action. If
you remove something, it keeps something else you see it'll stay there. So that's really
nice. You can say I only want show title. Welcome. This website, please never say that
on your website. It's really 9098 Welcome on this website with a bar that was floating
like this was the coolest HTML trick there was at the time. And I use it on every website,
please don't do that anymore. Welcome on this website now. And then we can do this one.
But I need to tell you when you want to show this on a mobile, it can be that it is not
visible. So when you use images like this, make sure that the person or the thing you
want to show us in the centre. I'll show you in a minute how it will look on a mobile.
So we can also change the direction so you can zoom out. I prefer one direction over
Justin Bieber. Although Justin Bieber is doing pretty great things, the latest years my opinion.
What's your opinion? No, let's stick with WordPress. So beautiful ladies. We can change
the height. But what I prefer since we do not have a call to action over here, I'll
to show something else over here. If this whole page is like this, and there's no call
to action, only here and then. I don't know. Personal preference. So let's say let's make
this 450 Let's see what will happen. Slider options. Do we want to have arrows and dots
over here you see can see das there? Red or black at this moment. So you don't see them
as well. But if we have a light backgrounds Wait a minute, wait a minute. They're hardly
visible. You can change I can also say only arrows so you see the arrows but you don't
see the dots autoplay So should it automatically start playing, pause and hover. That means
that when the website is live and you hover over the past no pause on interaction. No.
autoplay speed. So right now every five seconds a new image will appear I want to change it
to three and a half. Infinite loop so after the latest picture goes back. The transition
of the slides should be 1000. So one second and fade
with fade I would say 500 Let me see how that looks. My computer thinks it's a rocket and
he needs to take off because he starts making noise, but as a problem. Okay, five seconds
is great. 5000 milliseconds. Okay. Awesome. Then I want to go to the settings of the column.
I go to Advanced and Then over here, I uncheck this, I uncheck the fairing. And now, there
are no spaces anymore. So people go to this website, and this is what they will see. Okay,
let's have a look over here. Go to slide one content about Anna, and Paula. But keep in
mind this is different call to action to the about page, then the buyer book. And our goal
is to, to let people buy the books, I can also it can also be a distraction to people.
So I leave it empty. I update it, and I want to take a look. So I click over here. And
what I see is not fully full width. So in order to fix that, I go to the settings of
the section. Right now I see the content which is boxed. If I say full width, then it will
adjust to the width of the complete website like this. And that is what I prefer, check
the images if they are being shown correct? Because right now you Yeah, it's on the edge.
I think it's okay. And then we can take a look over here. How does it look on a smartphone. This looks fine. This also looks fine. And
this also looks fine. So I can use all the images. And as you see, this area sticks with
us. And that's what I do not want. So what I can do, it is a great moment to show you
what else we can do. I'm editing the homepage right now. But what I can do, I can hover
over here and I can change to editing the header noise. So then I go to the mobile version.
I clicking here. And now over here I can select the section go to Advanced and go to motion
effects. Sorry, yeah, and then say no. So on the mobile is will not stick with us. Great.
So I go back to the to the homepage, and I edit the home page by clicking on edit with
Elementor. And now if I take a look, it doesn't scroll with us which is better in my opinion.
Okay, the second part over here, new area, one column. And I want to start with a heading
I say are all stories honest. raw and honest stories is what we love to write about. I
don't know if this is correct English, I'm sorry if it's not. So I go to the HTML tag
it's eight students perfect I want to go to the okay and I want to change the colour so
I go to the Stell text colour changes to the secondary colour well to make it a little
bit smaller like That's okay, then I want to write a text so I drag the text editor
over here. And then I want to go to the section settings it is boxed and I want to change
the width let's say to 700 then I want to go to Advanced uncheck this area and at the
top out of grades some space on the top 40 copies and at the bottom 40 So I think that
looks great. Now I can type this text and then I will be back with you by text I translated
but it can be that it is not translated as well. I use Grammarly I hope they will do
a great job it seems to be the case by the way I was thorough
about this. So I hope they fixed it a little bit for me. But I have it that if you search
for YouTube or shirts for Rema Lee tutorial. The second one
I can click over here. Go to Advanced. Uncheck the padding and margin and the bottom. I can
bring this a little bit closer Okay, so it's a little bit smaller than the width of the
website and it has some space. Above and below it, I like to increase it even more 5050. Okay, the next area, I want to create an image,
I create a section. And then I can go to the cell backgrounds, and I grab an image, I grab this image imports, and I go to the
layouts to the height, minimum height. I go to let me see style again, in a position,
it's okay, size cover. And then I go to the overlay over here, then grab our colour, like
that, I can increase it or decrease it. And I can duplicate this area, I can drag it over
here. I can go to the settings again, layout box, make it 700. Again, just like the text
above, I click over here I go to the cell, I change the text to white. If I have the
ID, it's not readable. I can go to the background style account overlay and see oh wait, see
if I can make it look something like this with it. Or what you can do, click over here,
settings other column style backgrounds make it black, then decrease it a little bit until
you think hey, now it's readable then we can go to the Advanced area and then increase
the padding a bit by like to get you some space so let's say 25 to the 50% of the sizes
are 50 over here and then over here also 5050 there then I want to have a button over here
to the about page so if I dive about I can change the text more about us. And this time
you know I'm okay with them with Estelle I can go through the typography make it real
way uppercase and then when I hover over it or someone else make the text colour is and
then this car. Okay. homepage is becoming better and better. And now I want to have
a testimonial about about the book. So I click over here on the two columns. And in the left
one, I drag an image I click over here and I want to grab this image of the book insert
media now allow us Let me see I think this one is better yes. Then copy right mouse click
based that's how easy it is to maintain Estelle, of course at the column all to increase the
bedding quite a lot out of this mono over here from someone who read the book or something
like that I changed name for the sake of privacy. So I see there's a lot of space over here.
And what I also see on there I have a call to action over here. So what I can do I can
edit the header right mouse click Copy, edit the page and paste it that is how easy it
is. And this time I do not say buy our book but I say more in relation. Okay, what else
we'll do I will just keep on increasing the margin so if it just looks better like this, okay,
for me, that's the homepage. Of course you can do whatever you want to do. You also can
do clicker over here, go to the background and change the attachment to fixed and then
it looks like that that is nice. So how does it look on a smartphone
I think there can be a bit more bedding also here let me see what is why it's maybe 15.
And then if the the book in this area, of course should have
less padding. I love these may again, you can adjust everything for every device. So
this looks great on all devices. So we've made a header and we made homepage. The moment
is there, we're gonna create the products we want to sell on this website, we will use
a free plugin called WooCommerce. A great plugin to sell products on the internet. And
then the second plugin we will use a free version is called cart flows. This will help
you to display your product in a beautiful way. So it will convert better because that's
what we all want. We want to sell the products or services we offer on our website. So let's
get started with that. Now let's get to the fun stuff. Let's sell our book. How can we
do that? I go to the back end to Plugins Add New. I search for WooCommerce I click on instal
now it's a free programme that's going to help you to sell products on the internet
activated. Thank you fill in your details if you want to. So I click on Continue. No thanks. They want
to send my details stuff to them. Okay, I'm into education through books. physical products
continue. I don't have I have one product. I don't tell them all this information. I
turn this off. I use already the Hello theme, I will continue to do that. So now we've set
up WooCommerce. And we can create a product. Let me go through the dashboards. Because
now I can uncheck this again. So we keep it clean. So since we have WooCommerce, and products
over here, I can hover over new and create a new product. This is the one product the
single product you're gonna sell on your website. So the name of the book, my sister in law
and my wife our selling is called translated from Dutch. You don't talk about that. Something
like that. Maybe it's translated through totally the wrong way. It's it means things you normally
would not talk about that in one sentence, like do not talk about that, something like
that, you will give a long description. And he will give a short description. But we don't
need those because we're going to create a landing page around our products. So we will
use WooCommerce. And we will use cause flops. It's a simple products. Maybe it's a variable
product. So you want to have one product with more options. If you want to learn how to
work with that, go to YouTube and search for WooCommerce variable products. If you see
a different video than mine, don't but if you see one that's different this one for
instance, say 30 After that, because imagine you you should watch a different tutorial
than mine. It's it man. It will, it will be crazy. So yeah, that's simple products, the
price. Let's sell this for $19.95. And there is no sale if there is one you can schedule
it for a certain time. Then inventory Do you want to have things in stock? Well, first,
the SKU number. Every product has a number. It also have letters. In this case, it's an
ISBN number for a book. Every book has a number and this number. So when people search on
this on google it can be that are Book will pop up, I want to manage the stock, my wife
bought 200 books, and she will sell them. And do we allow back orders. That means that
when you're out of stock, people can still buy but allow others, I just allow it so people
can always buy it. It's never out of stock. But I want to give myself a threshold of 40.
So if there are only 40 books left 160 are sold on again, a notification, you can decided
only one can be sold per time, but I want to give people the opportunity to buy more
than one. And then we'll talk about shipping later. Actually, it's okay. If you want to
you can go to product categories and add books, it's actually not necessary since we only
sell one product. But what we do need is a product image. So I can set it. And I already
uploaded all the images of my website. So I choose a square one that we see, or this
one set as a product image. And we can ever want to add milkboy images. But again, we're
not going to use it because we will use cart flows for that. So I publish my product. And
I can feel my products by clicking here. And now you see the default WooCommerce sell.
So when people would click here, they would go over here, okay, then they can add it to
the cards. They can view the cards, they can proceed
through the checkout. And they can fill in the information. And they get it but I want
to make it smoother I want to transition of people by or I don't mean the transition,
I want the whole process of people buying this book to be really easy. So this way,
I will use cart flows. In order to get car flows, you can go to 30 correlates comm Ford
slash cart flows, hit enter. And God flows helps you to create a landing page or a funnel
within WordPress. Well, we're going to start with the free version. And we're going to
end with the free version. But after the end, I'll show you how to use a paid version. So
you can do a few more things make it look a little bit better. And if I again, if I
think about how much we can make some of these books, I think this is a great investment.
So if I go to the pricing, you can have it for $239 per year. And then you can have it
for 30 websites that is amazing. Or you buy it once for $1,000. And you can have it for
the rest of your life. For 30 websites. Well, this is crazy. If you take a look at Click
Funnels, it's like cash flows. But then without WordPress, on its own platform, you pay $97
per month for it. And there's only the lowest product with the least amount of options.
After one year, you already paid $1,200 And this is $999 for the rest of your life. So
again, we're going to work with three free verse verse first. So I go to the back end
to Plugins Add New. And then I search for cart flows, instal now, already 200,000 installations
of the free version. So it's a really popular plugin, and it has really nice features for
a free plugin. And that's why I want to start with those options, the free options, I skip
the setup. And I want to go to cart flows flows now to create a flow. So normally where
funnels. Right now we have flows. So I create a new flow, and that flow as one goal to sell
the book. So I start from scratch, or you can choose to start with a certain template
what I start from scratch, and I call this one you don't talk about that desire flow.
Okay, let me explain to you by default, there are three pages. The first page is a landing
page on the landing page, people can leave their name and email address, it's like an
opt in. And then we have when we have their email address, we can connect it with our
email address provider like ConvertKit or MailChimp or something else Active Campaign.
And then we can send them automated emails, we can set up all in a way that is automatic,
but I don't want to collect email addresses I want to make sales. So I will get rid of
this delete. So we have two steps in this landing space in this flow. The first one,
the checkout. So the goal is that when people click on Buy our book, by the way, we need
to change this background. And when people buy our book, they go to our landing page.
So there's this checkout. So on this page when they click away, they get immediately
checkout within, without filling, without going to three different pages update the
guard old stuff, we want it to be a smooth process. So that's the checkout page, what
I can do, I can edit this page. And then I go to products. The second step, I want to
add a product, and I search for the product you the only product we have. And then I add
that product. We can apply discounts. But I don't do that. We don't have coupons, that's
for the pro version, but I want to save the settings. Then I go to settings. General,
I change the step title to you don't talk about that checkout, copy, paste the slug,
save the settings. And by default, it will create a beautiful slug over here. So if I
go back to flows, didn't talk about that. And then this one over here at the settings,
general looks like that I want to get rid of the this area. He didn't talk about that.
So I save it again. Go back to flows. Also here, we don't talk
about that save it. Okay, so that looks better. So we go through the checkout page, we already
assigned the product. So now when we are going to edit this with Elementor, we get a blank
canvas. So the first thing I want to add, I scroll down all the way. And then I see
cart flows. And there's one option over here on this page, the checkout Forum, which is
from WooCommerce. So WooCommerce and cart flows are integrated, that makes it look like
this is orange, that's the default colour for cart flows. So I can go to the sale, I
can change the primary colour to this one. So it looks better instead of our website.
So people can leave their first name, last name, company name, country street address,
phone, email address additional information. And then they can fill in a coupon code if
there is one. And people can pay with a payment provider. And I will show you later how you
can use stripe for that. So I update it. I want to tell you that when you upgrade to
the pro version, you can change all this stuff over here. So you can decide that the first
name should be a field that is 100%. Wide instead of 50%. You can get rid of the last
name of the company, you can make it really short and beautiful form, you can get rid
of this, you can get rid of this because if there's no coupon code, there are people that
are gonna search on the internet for coupon codes, and then they get selected and do not
buy the thing you promote. Right now we can not get rid of it. We cannot ever change the
style over here of the headings. So this one for instance. So if I will make this purple
that sometimes for me a way to see what I'm changing over here. But I bring it back or
I use the secondary colour. And we have the input fields. Still floating labels, that's
for the pro version. But we can change the typography, we can change that label colours.
All that stuff, we can change the buttons, colours, payment section, the field validation
and error when there go something wrong, which colour should it have, and totally fine with
everything. So I update it. But I want to tell more about the book because this is a
landing page. So I need to tell some information about the book. So I decided to do like this,
click on the plus. Click on the plus again, I choose two columns. The first one, there'll
be an image click over here. And I choose this one, just one insert. And then over here
at the right I want to have a text we can say you don't talk about that. I can duplicate
it. Over here I can say pre order that book. Now. Go to the cell make it a little bit smaller.
And then as far as I can uncheck this and bring the top to a minus minus. Then I go
back to all the elements and I drag that text area over here. And if I go to the navigator, I can make sure
text editor is below the heading. Yes, and then I can type the text. Right now I will
leave it with this. So there's a text about our book with a nice image title, preorder
the book now. And now I want to click on the plus another
area with three columns. And this time I click over here, I go to the cell, I want to make
the backgrounds primary colour, then I want to use a text editor in the I want to say
published in October Ross 21. Man, Emily helped me published in October 2021. But it doesn't
look appealing. So what I can do, I can go to Advanced two background and I want to make
this background white like this, that looks a little bit odd. So I go to the content,
I'm happy with that I go to the style, I bring it to the centre, Text Colour is fine. Can
make it a little bit bigger. ating Okay, now I want to go to Advanced uncheck this, uncheck
this and turn it all back on. And then at betting, I want to increase it. Let's say
with 20. Get an hour to copy this. And again, I remove this, remove this over here. I say
something else. Paperback, paperback, shift, enter dsbn, Shift Enter. And I fill in the
ISBN number, the number of the book. That's the right area, I want to say 19 point 95x
shipping, costs, Shift Enter. Okay, and then over here, go to Advanced and decrease it
until it fits. Okay, well, then I want to do something else. Because right now, there's
a border over here. And I don't want that. So I update it. And it has everything to do
with a template of course flow. So I go to the settings over here, page layout cart flows
box, I want to use the default one. And I want to get rid of the title. And now over
here, I like to say at the Width box 800. Over here, I also would like to say the width
800. And then over here, I would like to say fluid update. And if I click over here, I
can see how it will look. So this goes over the whole width of the website. And this one is on the wide of course over
here, I can go to the column protocol middle over here and increases area. So I've been
playing around with this 34 everywhere it's a text editor and then the background white
but at the second one, seven, the third one. This let's say zero everywhere are nothing also here
nothing. Copy. They sell they sell because I think there's a better way. Just go to this
area, that column then it's still background, make it white, and then margin. Then okay,
by mouseclick copy, they sell and they sell. So over here, make sure this is in the middle
and this is at the centre and then again copy he said and basically so even while I'm making
tutorials I keep on learning how to do things better. Okay, and this looks like this update.
Then I want to go to this area, so I go to flows click over here and view this area I want
to see the link. So this is the link I want people to go to,
in order to check out. So I copy this. And what I can do, I can now go to the homepage. Over here at the general header I want to
click here and send it to you. To check out, copy this update, I want to go to the mobile
version. And also there of course, and just the link update. Close it. Okay, I go again to the checkout,
because I want to see how it looks on a mobile devices these days, a lot of people shop on
their mobile. First, I want to change a few more things over here. Actually, I want to
use a canvas. So let me see if I can use a template for page builders. Yes, that's better,
because then I don't see the header and the footer. Because I want this to be a landing
page, I don't want people people to go to a different page. So I go to this, the upper
section advanced, uncheck this, and at the top, I want to increase it a bit, create a
little bit more space, let's say 40 or 60 and also below 60 then this area is fine.
Then this area, advanced 6060. And sorry, not here about at over here. 6060. What I
see over here, since we use this template for page builders, we need to adjust all the
settings over here because right now, those fonts are not as I want them to be no problem,
I click over here, I go to the cell and I need to go through everything. And so, he
says into a real a look at billing details over here. You see this will change then to
the input fields, typography is Open Sans. Now that is back to normal then over here.
Payment section let me see, let me go to all the places, okay, the typography, by default
should be Open Sans. And then yes, this is also normal. So in this way, it can be fixed.
Update. So if I would go to the website, and I click over here, I go to the landing page,
I can buy the book or I can pre order. So I want to know how it looks on the mobile.
So does what I will do now I click over here. And then I think there should be less space
over here. So I think this is fine. This is fine. Over here maybe 60 at the top 60 at
the bottom a little bit more space over here. Looks weird. So let's say 40 or give you this
this number a little bit more. Same amount over here. So then, and then. Again, I love
that pixel perfect work. Oh here, uncheck this. It's perfect like this. I personally
prefer to remove a few things, but then we need to have the Pro version. I will talk
about it later. I'll show you what's possible with the free version. Okay, okay, there are
quite a few things we need to do. But at the other hand, we're getting closer and close
to the end result. So what I want to do, I want to create a few pages to say we need
to agree with the terms of service. So if I go to new page, I say Terms of Service.
I publish it okay, I can go back. I can hover over new page and go to write the C policy.
Publish publish. Okay, then I go to the website. Let me close this This and I go to the customizer,
it says we use WooCommerce. We have extra settings for WooCommerce over here. So we
can go to the checkout, for instance, and change a few things. Company Name hidden.
If you only sell to people that do not have a business, the second line in the address,
I don't like it, highlight the required fields with an asterix, okay, and then the privacy
policy page terms and conditions, Terms of Service, you can have a text over here, you
can change that. And you can also change this text and that those text areas over here will
be shown over here. So I'm really important publish. Close it. So I think this looks so much better
than the default WooCommerce area some information and then we can leave our details. And then
we can need to agree to the Terms of Service terms or conditions. And if you click over
here, you will see them in a new tab, so we need to fill those in. And if I make it smaller,
doing as if I'm on the mobile it looks great, and people can buy things. Okay, are guys
still having fun, I hope so. We're getting further and further into the tutorial and
the result is more and more like the end result we want to have. So what we will do now we
will implement a pay meant provider called stripe stripe is accessible from all over
the world people can pay with stripe. And if you have a Stripe account, you can let
people also pay with local payment providers because stripe does all the hard work for
us. They have all the connections with everything in the world, and they can help you to get
payments from your website. When you get the payments from your website, they will be transferred
to your own bank account. Ultimately, it's not available in all countries in the world
to apply for it. So in certain countries in the world you can apply for stripe accounts.
Let me show you a list with all the countries that are currently supported by stripe. But
when you have a Stripe account, you can accept payments from all over the world. So if your
country is not on the list, there are workarounds but this video is not talking about debt.
I'm from Netherlands, I will show you how I got my Stripe account activated and I will
also show you how you can use it with WooCommerce so the first thing we need to do we need to
go to stripe as the rip a lot COMM And it says the new standards in online payments
well it is you can start now. So I click there. And I can create a Stripe account over here
my email is info at Ferdy korpershoek.nl My full name is Ferdy Korpershoek I create a
password I confirm my password and then I click on create account and there I am. So
now I need to configure a few things. Welcome 30 Follow these steps to get started find
the right integration for a business browse our ducks okay, no I will skip that. I need
to verify my email. So I go to my Gmail accounts. There is stripe Verify Email to start I click
on Verify Email address it fill in my password continue another robots
Okay, I want to activate my Stripe account. So I click over here. Before starting to process payments, tell
us a few details about you and the products or service you're selling. Start now. I'm
from the Netherlands. My business website is HTTPS Ferdy Korpershoek That comm business
description I sell digital products see our digital goods describe what you want to sell.
I I sell a course where I teach people how to make money online through affiliate marketing.
What kind of business well this is Dutch. It is a go operation. The name of my company
is Ferdy and Anna media. So you need to fill in the details of your business over here.
I scroll down. my legal name is Ferdy Korpershoek Do you own more than 25% of the business?
Yes. What percentage do I own 50 Job Title I am CEO My birthday is optional. So I leave that,
again, address my company name again 30 and Anna media support phone number, and then
my bank details ultimate use of the two step thing, go through text messages, I confirm
my phone number, I fill in the code I receive on my phone don't pick up copy this code somewhere on
my phone. Okay done that submit application right now is being reviewed. Thanks for submitting,
we're verifying your details, which should take just a few moments. This way, you can see how much you can or
you have earned. So I got an email, thank you for submitting, they will review everything.
And they said to me, unfortunately, we're unable to verify or verify some of your personal
information. So I needed to fill in some more things, proof of my identity. So I send an
image of my passport and proof of my home address. Well what I needed to do, I used
a bank statement with my complete name on it. So I need to get it you need to get a
foul that shows your complete name. It can be from a bank, utility bill bank statement,
a letter from a government institution, as long as it has your complete name. So I found
the document. I uploaded it, and then I got access. So right now my Stripe account is
active. I'm really happy and have here. I want to integrate this with our website. How
can I do that scroll up and down four times. Yes, then go to the backend. Then we go to
Plugins Add New. And we search for WooCommerce stripe. We search for something with the word
gateway WooCommerce stripe payment gateway. I don't know why like this because I really
like WooCommerce. So I activate it. And then I want to go to WooCommerce settings. I go
to payments. And of course, I want to select stripe credit cards. And you see there are
more stripe things over here. Ideal for the Netherlands really nice. I turn this one off,
because I don't want to have to direct bank transfer option. I want to go for stripe.
So I turn it on. I scroll down and I save the changes. And now I need to connect stripe.
It says we need to set up your Stripe account key. So that's what we will do. We go to stripe
manage. Okay, so let's start with the beginning. I want to enable this payment gateway. We
enable it, the title is Credit Karma. And I like to use stripe because that's gives
people some trust because stripe is known worldwide as a payment provider. And then
the description pay with your credit card via stripe. Okay, I set up or link an existing
Stripe account, I can do that. Or I go to stripe. And I go to View test data. So I turn
this on, because I want to test it first before we try a lot of things. Then I go to developers
knowing that the test mode is on. So I go to developers and then to API keys. Okay,
here's my publishable key if you don't have it yet, I can create over here. But um, I
already have one. So I need to grab the publishable key, I click and then I copy it. And the publishable
key needs to be paste over here. But this one is life on to enable the test mode first.
And I paste the publishable key from the test, which is over here you see over here and the
key is a test and the test key or review it is my password. Copy it. Then I want to base
it. And I scroll down a bit and I need to go to the web hooks. So at stripe we need
to go to the web hooks below. I have a lot of them already. I click on Add endpoint.
Again, this is all with the test account. So I go over here. I copy this link, which
you see a web hook and points. That one we need to base it in that way we create a connection.
It's a description I can say amen. amens F riding sisters. Well, let's go. In the recession
2020 and the event is charge are gonna charge people when they buy something at the endpoint,
that endpoints has a code, signing secrets, I clicked a review, copy. By paste it over
here. We can use inline credit cards for I'll show you later how it looks. The statement
descriptor, I can say, writing sisters in law, that's what people will see on their
bank statement, we get to the money immediately, and all the settings are fine, I save the
changes. So again, this is in test mode. So if I go to the website, I buy the book. And this works, that means it will also work
using a real accounts. So let's go for the pick up 1995 or not, as buy 100 of them, just
to make it look better, only $9.50 and 95 to send it. So total of $2,000 $4.95. So I
need to use this test stuff, I paste it, I paste it, and I base it, I can save it for
future payments, I need to agree with everything. And I click on place the order. And if this
works, it also works with the live version, but then we need to change a few keys. This
means that my order has been received. So now if I go to my mail accounts, over here,
I said thank you for your order $2,000. It has been paid already. So it works. And then
the great thing is if you go over here to home, this looks really nice in euros, but
again, in our test data results. So I turn this off, then you see the real results. And
I go to developers API keys. And now I want to create a real key. So the API keys, I create
a secret key. And the key name is writing sisters in law. Just to keep it organised.
If you have a lot of websites, then I need to copy this code. Go to the back end to WooCommerce
Settings, go to payments, manage stripe, okay, I will turn on after test mode. Keep in mind
as we copy the life secret key and not to publish Pokey, so I base it over here. Then
we go to life key. And we base it. So we're in a live most life, life. Then I scroll down.
And again, I go to web hooks, but this time a live web hook, I copy it, I go to web hooks
at an endpoint pasted over here. Writing sisters and law payments, the reasons version, and
I want people to be charged at the endpoint. Let's roll down the signing secret key, copy
it, paste it. And what you saw before was the normal credit cards form with two rows,
the same amount of the inline credit card form which is a little bit more compact. I
click on save the changes. And right now, our website is live. So right now, it is in
one line as you see credit cards and date and the CVC code. And our pay I will show
you later it will work. So now people can buy the book pre order it's on our website.
So what is next we go to the backends we want to finish the thank you page. So are created
because it's there's nothing yet. So I go to cart flows flows. And remember, we're still
using the free version. I think we're doing a pretty great job with it. And then later
I'll show you what is possible with the paid version. But I think the free version is okay
to start with to the thank you page edit with Elementor. Okay, and there's nothing so I
can scroll down all the way. And over here at cost flows. I can drag this over here.
Nice we see an example of our most recent purchase. That is how it looks. You can change
the text over here your order has been received. We can show things we can hide things. Before
we continue, I want to click over here. Change the page layout to templates for page builders.
Okay, then I click on the plus an area with one column, I go to the cell background type,
make it the primary one. And I go over here, I want to add an icon to start with. So I
drag it over here, I want to change it to a check mark. It's called like that, just
to check this one. And I want to change the colour Estelle to white so we can see it.
Okay, make it a little bit smaller. Then I want to add a heading over here. And I say thank you for your order. Again, make the
text white, bring it to the centre, change the text to all three away already, maybe
a little bit like that. Once I have a text area, and I change the text to white, bring
it to the centre, make it a bit bigger Okay, before I continue, I go to the section,
I want to make it 900 or 800, something like that. Then I go to advance and I increase
the betting so it gets a little bit more space on all sides. Okay, and then I start typing
Okay, on to make this a link. Ah, to be yes. And then the link, enter, click on it again,
open it in a new tab. Update. Okay, and then I make this colour or the text bold, and white.
And if you want to, on the light, yes, save it. And as I said, it's always thrown era see
what works. I think 500 is great. So when people buy it,
they go directly to this page, thank you for order as soon as the book is available, you'll
get it or when you've chosen to pick it up. So people don't pay money for a shipping,
then they can pick it up over here. So there's a little bit of speed of here. So I'll do
the same over here. Betting 40. Okay, for me, that's all there is. When people order
something on your website, they get a confirmation email. By default, it looks a little bit boring
unless the colours of WooCommerce. And they all look the same. So if you buy different
products from different store that also use WooCommerce that is not edited. It all looks
the same. So how can we make it look better make it look better in the style of our website,
maybe add some text? That is what I will show you right now. So right now I want to go to
my website. Take a look over here at Gmail. And it says your sisters in Law Order has
been received. So I click over here. Thank you for your order, just to let you know isn't
isn't this? Well few things. Of course, I don't like the colours I don't like the look
and feel. So I want to change that. I also want to change the text over here. How can
I do that? Well, let me show you. So the first thing I want to change is the from email because
this just looks weird. I want to have a writing systems is low over here. You can also change
the subject and if I click on it, I see this colour I want to change that. So in order
to do that, I go to the back and I go to WooCommerce settings, emails and I see a lot of emails
over here and we can change those for instance than the order email. But first, let me scroll
down. The front thing is sisters in law on the front address. I want to change this to
info at Sisters in law that's come or is not writing sisters in law otherwise someone else
get that email. Let me see. Yeah, wow that's a beautiful website. There was an joke. So
he had an image really important that we'll take a look at later. So first, the base colour.
So if I go to the website, I edit it with Elementor, I go to the site settings and then
to the global colours and I grab this colour Command C, Command V, there it is, and you
can change the background colour, the body background colour and the body text. I'm okay
with all this. So I scroll down, I save the changes, then I want to go to the media and
a new TCEP command, click I want to search for the logo. There it is the black one, I
copy this URL. Okay, what I can do, I can save the logo. So I base it, I save it to
my desktop, I call this logo email. Then I add a new one and drag it over here. There
it is. Then I go to my email and over here shifts mons for drag the space. Okay, let's
say 400 pixels, I want the logo to appear over here. And it needs to be 400 pixels in
width. So I open this logo email, I edit the image to bring it back to 400. I click on
scale, now scaled out smaller, I cannot save it. That means that if is already saved. So
I close this, I go to the library, then I go to the most recent image which which is
our logo. This is the big one. And over here is the smaller one. Then I copy this URL 400
pixels width. Then over here, I scroll down and I based
the header image. Okay, then we see this line over here to footer text. So over here we
see this footer text. And if it's up to me, I don't need it. But I your website, if you
want to write something over there, you can do that. I say the changes. So far, we edit
the logo, we change this colour. And we removed this tech. So let's take it to the next level,
step by step. Over here it says Thanks for using Writing sisters in law. And I want to
change this over here. How can I do that? Well, for that we need to go to specific email,
which is the processing order that goes to the customer as you see over here. So I can
click on Manage. Now I can change the information on this particular email. So the subject right
now your order has been received as much as you see over here, your sisters in Law Order
has been received. So I can see over here, thank you for your order at writing sisters
in law that's come, the email heading is probably what you see over here. So we can also base
it. And then additional content. Thanks for using Writing sisters in law. That's what
you see. Thanks for using and in the side URL. So what I can say over here is we hope
you will enjoy the book, or the product you promote. Kind regards, Anna, and Paula, corporate
book, email type HTML. Otherwise, this can all not be recreated. This will be a really
flat email with no styling and stuff. I don't want that. So I save the changes. And now
we're going to take it to the next level. So right now we have adjusted a lot of things
over here. Now I want to change this text. How can we do that we are still here at the
emails and then the processing order email. And if I want to adjust things, I can do that
by clicking here. I can copy this file, which is a PHP file. So we're talking about codes,
we can copy the file to the thing. Copy it. Now it's copied. Now we can go to Appearance,
Theme Editor. Now we need to search for the folder WooCommerce at all right? It's a little
bit technical. I understand that if I mess things up over here, my website can get into
trouble. So I scroll down over here, I will show you step by step what you need to do.
We see a folder over here WooCommerce and now we see this email and the processing order.
We can click over here. Now we can adjust this text in these go to probably line 30
over here, it says just to let you know we received your order. If I go over here, just
to let you know, we received your order. So what I want to do this whole code between
the B, and the end of the B, the paragraph, on to select it, remove it, and now I can
find my own text. So I can say thank you for your order. You can expect X act book in October
2021. If you decided to pick it up, you can do that. At that. Logan strat 36 3145. Slice
the Netherlands. So that makes totally sense total sense because I sell to get to Canada
and the United States. And you can pick it up in the Netherlands. So I think this book
is so valuable that people are willing to go to Netherlands to pick it up, or they get
a letter be sent to their address. So you can have any, you can have a lot of text over
here if you want to. And then I think that is okay. I'll do save it, update the foul.
And I want to do another payment, but I don't want to pay with real money. So what I will
do, I will go to WooCommerce, settings, payments, direct bank transfer, turn it on, save the
changes. Then I go to the websites, I closes like closes I go to buy our book. All the information is there. I want to pick
it up. I want to pay with a direct bank transfer I agree to everything. So let me see the email
address should be 30 corp@gmail.com. I click on Place Order. Awesome. Thank you for order.
So right now look at this. Let me see if I can open this in a new tab. Now we see it
over here from infrared writing sisters law, so still need to change that. Thank you for
your order at writing sisters in law.com. That's what we decided to change the logo.
Thank you for order at writing sister in law. Okay, so this is also wrong. I will change
that. Sorry, it's been a while since I did it, but this is working, the colours are working.
We hope you will enjoy the book. So this working so Okay, so far. So good. Two things I need
to adjust. So I go back to the back end. And I go to WooCommerce, settings, emails that
I can go to processing order manage email heading, I can remove this. Otherwise, it
looks like this. But you see the difference. Thank you for your order. info at 30 Corp.
in further writing sisters in law, and then we're here this needs to be changed as what
I just did. And we change the text. And all the time, it looks fine, we also change that
text over here, save the changes. This is the way it is displayed in Gmail. So I cannot
change that. But I've changed this. So I'm happy with this. So now when people buy something,
they get this over here they get to see this thank you for your order without this one,
then a personal or personal use it's personalised personalised message, or a configured message.
And then the billing address, we hope you enjoyed the book. So that's looks better,
there will be a tutorial where I'll even show you more on how to adjust this. So it will
not be recognisable as a WooCommerce product order. But this is for now what we can do.
Let's talk about shipping. I want to give people the opportunity to pick up the product
from our local store or to let it be sent to their home address. So when they pick it
up, it is free or no cost at all. And when they want to. I want to send it to their address
or they want me to send it to their address based on the amount of products they order
or based on the total amount you have to pay. I want to decide how much shipping costs there
will be. That is what I will show you next in this tutorial. Feel free to like the video
and subscribe for more upcoming videos. Yes, okay, let's continue. You're already subscribed.
Or like what are you waiting for? Not kidding. I'm not kidding, guys. No, you're afraid to
do whatever you want to do. Let's continue. Right now when we buy the book. There is no
shipping, it costs 9095 By the way, if you want to change this to dollars, we can do
that in the back end. Go to WooCommerce Settings scroll down we can change it over here to
United States Dollars 1000 separators is a comma this mode is a point. And we don't want
to have two numbers after the decimals. Perfect. So now when we want to buy the book we don't
pay in euros we buy we pay in dollars as you see over here, okay shipping, I go to the
backend, and we go to Plugins Add New. And I searched for flexible shipping from WP desk.
While nothing is found, because I made a typo, flexible shipping, WP dash, I click on instal
now more than 100,000 installations updated two weeks ago ago compatible with our current
version of WordPress, I activate it. Okay, I close this. Now go to shipping shipping
zones. And before we do that, we need to go to general, we're going to say where we want
to sell to selling location sells all countries or to specific countries. So I can say United
States and to Canada. So, now we can only sell to
those two countries, then we go to shipping, and we need to choose a zone. So would you
ever need to choose a shipping method. So, I want to add a shipping zone, zone zone blue
Save it, I call this one pick up or sent the regions well select regions within these these
zona zarnas. Canada and United States. So, the shipping methods are to first let me save
it. The first one is pick up. So I choose flexible shipping at the shipping method and
I can edit this I keep giving it a different name pick up so they should pick up up in
the country I or the address I give it so they can pick it up in the store the notes
to pay for shipping. It is taxable. So when people add 20% of discount, and the shipping
is $5 20% of taxes will be added to that $5 So that's why I turned on free shipping, it
is free. So actually, it's all fine, everything is breathe $0 Then the second option so I
click on pick up scent. And I create the second way and that is flexible shipping and then I call this sense you can call this
whatever you want to call this method description we sent it we deliver it to your front door,
I don't know something like that. No description, again Tex is all fine, but something important
over here we need to add conditions. So I can add a rule based on the price or the weight
well, if we do the weight, we need to go to the products and add the weight of the products
I want to go with the price. So, what I say the price is from from minimum of zero to
$20 it is for dollar 50 I can ever rule the price from 20 to 50 is $7.50 If people want
to buy for at least 50 to a maximum of this repay nine point 95 So I save the changes
but also can do 99 point 99 from zero to 9499 you pay 450 2249 point 9950 etc. So based
on these calculations and based on what people choose, they will get it for free so they
can pick it up to book or they get it shipped to their house and then based on how many
books they buy calculations of the shipping is made so I buy the book now that I can choose
an option right now, but I cannot do that because first I need to know where I live
in Canada And then it'll say it's for dollar 50. Why? Because I only buy one, if I would
buy two, I will pay 750. But where is the option to pick it up? Well as my bed, I showed
you something that was wrong, I need to go to WooCommerce. To settings, then we go to
shipping, I go to pick up our sent, I have two times flexible shipping, but I need to
add a shipping method, which is called local pickup. That's it. And then I need to remove
this pickup. Save it. And now if I refresh this page, I can choose so if I buy two, it'll
cost me 750. Unless I decide, look at this 4740 Unless I decide to pick it up. 3990.
Okay, we use the free version of cash flow. So let me show you what we can do with cart
flows Pro. Imagine using cart flows Pro, you can increase the conversion percentage in
your website with 5%. What does it mean? That means from 100 people that visit your website,
five extra people will buy the product while my products $20. So that will mean if $100
Extra when a new scarf goes pro per 100 visitors. That is $1 per visitor I get. And I know it's
all theory. But I believe that the way you use cart flows you implemented in your website,
if you will increase the conversion rate because the form people need to fill in is easier
to read is easier to fill in. You don't have to fill in all the unnecessary stuff. So let
me show you next coming minutes. What you can do with cart flows, bro. So how can I
make sure people can change as well, that has everything to do with the free version
of CART flows. If I go to cart flows, flows, I know you do, too. You don't talk about that
to the checkout page, and I go to products, I scroll down, I want to use more options
so people can choose it. Let me show you an example. In the Dutch website, I use cart
flows for this, it looks like this, I can change the tax over here. From the impact
name. All this information, it looks cleaner in
my opinion, then here below. You see the products and I can change it then right now I can decide
to send letter be sent to my home, it's 450. But if I order two, it becomes 725 then I
can pay over here, I think this looks better. And if I want to have all those options, I
can go with cart flows Pro, in my opinion. Again, let me show you what they have made
in one month. 1100 euros, which is around $1,300 in one month. So when it comes to web
hosting Elementor Pro and cart flows Pro I think personally, it's a great deal because
it will help optimise the conversion of your shop. So you will sell more. So if we go to
30 Corp COMM For Scarth knows, this is an affiliate link, when you buy this through
my link, I get a commission. So thank you for that you don't pay more, go to pricing.
As I said before, you can buy for $239. And you can always upgrade later. So if you want
to go for the lifetime version later, you can do that. Or you go at once for a lifetime
version, you can use 30 websites. And if you want to know everything about cars flows,
you can go to YouTube and search for Garth los tutorial. And if you don't find me, you
find me two and a half hours of tutorials where I show you so much there is to know
about it the reason tutorial, and they keep on improving the plugin but it's an amazing
plugin. So if you want to learn everything about it, you can do that. You can click on
get started filling our details. And if you use this coupon code VIP 20 off, well, that's
really nice, you get a discount. And then after a year you pay 299 Again, or you go
for the lifetime version. Well this is also made with cart flows. It just looks really
nice. So when you have done that, you go over here, you can go to downloads. And you can
download cart flows pro over here, I click on downloads. There it goes, I go to my API
key. I copy it closes. I go to plugins add new Upload Plugin. I drag it over here instal
now activate the plugin. And I need to activate the card flow licence or click here to activate
I base it. I activate it. It's successfully activated. So now I can use all the pro stuff.
So first, let me go to cart flows, flows. And I want to go to the only flow we have,
and then the checkout page. So I click over here. And now if we go to products over here,
look at this, all those options I checked, this is the product, we're gonna have a subtext,
we can highlight it restricts us to purchase all products, or letter choose while we only
have one product in this list, so that's okay. But we want to enable the quantity. So I say
the settings, if I go to the website, I buy the book. Now, when we scroll down, it looks
like this, we can change the amount and when we buy to look at this at the shipping in
is more, but we see double now. So what we need to do, we need to configure it in a way
that looks better. So that is what we will do. Now, I will make sure this will look so
much better. Okay, we do that. Over here, I save the settings again, just because I
like to do that even though it's already well saved. Otherwise, because I see the results.
I go to the design, I want to edit it with Elementor. Close this, close this. And I close
this. Now I scroll down, I click over here and now I have more options. So I can select
one colour. So it looks like this. And that will make sense. That's when we change things
over here. Of course, here is the end result. Awesome. I can make this a little bit smaller.
So how wide is this? 800? How wide? Is this? Also 800? I think it's okay. So, in my opinion, this looks okay. What I want to do now I want
to change this stuff over here. Because it's so overwhelming that even on this page, people
can decide to leave the page because they're like, whoa, so much information. So we want
to make it as short as possible, only unnecessary information. So it is easier for people to
fill in. And they buy the thing you promote instead of filling, let them fill in all that
information. And that's one of the reason why I think it's a great choice to upgrade
to the pro version. So look at this, how can we make this look better? Well, let me go
to the back end. And I go to cart flows flows. You don't talk about like it or talk like
about that. Okay, what am I talking about? Don't talk about that. Then I go to the first
step the checkout. And then I go to the form fields. So do I enable a coupon field? No,
because I don't have one additional fields? No. And they will ship to different address?
No. And we can have the custom field editor. So do I want to show the first name and the
last thing? Well, if I think Luke Yes, I think this looks
great. First Name. Last Name. Country region. Yes. street address. Yes.
Town, the state doesn't matter to me. The zip code does matter. Do I want to have their
phone if I don't need it? No. And their email address? Yes. So they can get an email with
the confirmation. Let's say the settings I wanted this safe. I refresh the page first
name last name country street town zip then email address I want to make this look better.
So the street address I wanted to be so so okay, let me do it a different way right first
name last name and then street address the street address I wanted to be 33% I think
that's address will be just fine. It is required in the town and just like to say city 33%
zip code 33% Sip code is a 33 years it is and then the country if you want to you can
make it 50 And then this one also 50 and then it fits perfectly. So I refresh the page.
Now it looks like this. But I think we can do like this. Okay, first name, last name,
street address 100%. And the town or should you do the zip code first? Well, that's how
easy it is just change it, make this 50 make this 50 and the country, me 100%. And the
email address can also be 100%, save the settings or refresh the page, perfect. First name,
last name, address, zip code, city pounds free email address and then your products
you can have more and your order. So 450. And then if I upgraded than 750 if I would
make it a third one 995. And if I buy 10, it still will be 995 because that is how we
arrange it, configure it. So the great thing is when people pay now they pay this amount
of money, it will go to our Stripe account. And I know I need to send them five books
to this address. And I want to change a few more things first. Over here, I want to make
this smaller, I think it's a little bit too far away from each other. So let's make it
600 update. Then when it's updated, I close this, then I want to go to the back end to
cause flows flows. You don't talk about that. The Checkout then I go to the form fields.
Okay, first names Okay, last name, address, and then zip code, I make it 33 City 33. in
the country, they all have to do something with the location. So I want to have them
in one row. And then you want the rest 100 So it will be a little bit more compact. Compact.
I think that's good. So ladies, gentlemen, our websites really nice. More information
the about page, then by our book, scroll down first name, last name, address, zip code,
City Country email address on to local pickup or send it if I sent two by two, this will
be increased. Now we can pay. When we buy this we go to the thank you page with some
information on where to pick it up if we decide to do a local pickup, and then we have a beautiful
email we get our inbox we ask the seller that the store owner we get an email and the buyer
will leave their email address over here we'll get a confirmation email. We adjust that.
So I think everything is really beautiful when you take a look at the terms and conditions
privacy policy. And then if I go to the homepage of course we need to configure the about page
and the contact page. Let me go to Elementor real quick and then over here I know one nothing nothing
no backgrounds. Especially not one that has nothing to do with Estelle of our website.
So I go to the dashboard. Okay, I go back to WordPress and I want to create a new template
called the footer. So I go to templates theme builder. I choose that new one. I go through
the footers I create a new one don't use blocks I start from scratch. So I go to the settings.
I call this one general footer publish it at a condition show on the entire website.
Okay, then I want to go for a simple text area editor. Oh, here it is. Because it's
the footer is here. I need to scroll down. Drag it over here. First, go through the text
area. Sorry, sorry, sir. Wait, the of the section Stell background, make it dark. Then
I go over here to the text. I make it white and then I start typing copyrights. 2021 and
then the writing sisters in law. A few important links like privacy policy, Terms of Service
photography Lisa Rachele photography because I decided over I, when this these pictures
were made of my wife and my sister in law, we decided that we should give Gravett. So
that's what I want to do over here. How can I make this a link I select it meant your
Ctrl K or I click over here and then I search for privacy and then it will appear like that.
Okay. Same with terms of service when key terms Okay, and the third one let me see if
this is the website Yes, she also made pictures on my wedding. A few people I know really
nice. Okay. It's a small world. It's a small country, the Netherlands. Okay, what I see
is that those colours are pink, I don't want that. How can I fix that? Well, let me show
you in a minute. First I want to go to Estelle bring it to the centre text colour is white
typography I want to make it a little bit smaller and I want to go to the backgrounds
make it lighter because this is really dark. Okay, update now see their scores of the links
I don't like it. Also when I hover over it, how can I fix that I go to 30 Corp. Let's
come then I go to tutorials WooCommerce and there's a code I have made specially for you.
We can copy that change the link colours copy it then we select this area go to Advanced
scroll down to the custom CSS and base it then we can change those colours over here
is the colour you see and when you hover over it it becomes white and that's what I said
over here. When I hover over this white I update it and I go to the column settings
on to bring it to the middle to the centre if I don't like it I don't like it I can go
to Advanced here increase things a little bit until I think this looks great updates click over here on the section okay ultimate applique this area okay then I go
to this one content I remove it so I can hover over remove it also change the colour a bit bit lighter I
don't feel the colours yet. I don't know I think it can be better. But let's take a look
at it later. I want to use an icon list like that and show a bit more information or bring
us to inline that style still I bring it through the centre. I go through the I Can the colour
is okay. The hover is also okay. But the text I want it to be white. So I go to List. Sorry,
content, please item one. Something with business. Yes. And then there's the not the number of
my company in the Netherlands this, this and the second one letter or mail or envelope
and loop. People can write it info at 30 or writing sisters in law. Let's come so they
can people can reach out and then the third one and address a lot of times we have a webshop
you need to have an address. So over here I can have a point or mark map marker. And I say this address
Yes, of course also here I want to have a little bit more space. I think I did over here. Okay, let's fix the
background colours. Somehow it seems like it's not perfectly grey, there's a kind of
a dent okay, then this one can be a bit darker personal preference. Okay, so as I said before,
I will show this everywhere. It's a general footer. So you see it everywhere? How does
it look? Well, this one I thought that's another one I like. So what I can do, and then over
here I apply the same principle. I use a BR. Break, go. And yeah, that fix it. So I don't
need this la Nutter fight and this one, maybe I do, I duplicate it over here. This one is
for everything except for eight mobile. And this one is for nothing. Except for a mobile.
And then over here, I can change everything. So I can say Shift Enter, shift, enter, Shift Enter. Shift Enter. Also
here like that, maybe a little bit more space. Update. And what I would do if I were you. Always check everything on all devices. Also,
the whole buying process will be really bad if people cannot buy it somehow, and you send
an email to a lot of people. So now we have our footer. Oh, no. Okay. Sorry. Keep on learning,
we do have to duplicate it. At the footer. I duplicate it. Over here, I remove the brake.
And it is visible everywhere. Except on a mobile. This one I keep it as this and I will
hide it on a desktop. I love tablets. But on the smartphone looks like that. Better.
So now it looks like that. And like said like that. But what we see over here, those colours
are great, but this colour is gone. And this word is Dutch. So I need to change. How can
we do that? Let's go back to the page, the homepage. Okay, I scroll down, click over
here, go to cell, change the text colour to white, there it is go to content, more information.
And then this can go to buy our book or just the same link over here, right mouse click,
copy link address and paste it. And then you can also remove this. So only four slides
you don't talk about that checkout. So when they click over here, they go directly to
that page. So I refresh the page. Those links are perfect. This one is perfect. If I click
on it, I go to the checkout. And that's what we want to do because want to check everything
out. Fill in the details I live in the United States is my email. I want to buy one on a
pick it up. I want to pay with credit cards, people can save it. So for the next purchase.
I agreed to the terms and conditions and I placed my order. Then I go to the thank you
page. It's a real thank page. It's reorder with real money. It says thank you for your
order. As soon as the book is available, probably October 21. We will send you it send it to
you at once. If you have chosen to pick it up. You can find it over here. Thank you for
your order, the amounts or the details, the billing address. And if I go to my new accounts,
I see this email I made the payment. So that's great. And over here I see my email because
I also bought it through his email address. Now if I go back, I go to WooCommerce orders,
I see the orders. And if I take a look, it's in process, I can take a look over here, it
should go to this address so I can get all the information over here, payment, etc. If you want to, you can go back
to the orders. Select one, though action change to complete
it. And then if you go to WooCommerce, settings, emails, and then to completed order, you can
manage it, do the same thing as we did before copy to the theme. And then adjust this template.
So we can you can say your order is completed. It is so for instance, if you have brought
it to FedEx or to DHL, or UPS, thank you send email, we just sent your email to UPS it will
be delivered within 24 hours. That's what you can change as FSI as I showed you the
four. Okay, we have most of the stuff finished on our website. Now I want to talk about the
about page, the contact page. Let's finish up with that. And then we have our complete
website. What is next of course, the about page. So I edit the page, the about page,
then I edit it but Elementor I go over here to the settings hide the title changes to
element or full width and it will save automatically okay, I click over here I want to have two
columns at the left I want to have a heading and I say Anna about four Bala So Anna talks
a story about Paula then I can go to the dummy text generator and I want to have five paragraphs
like that so I copy this I go through the text editor and I base it so this next about
Paula Britain by Anna that I want to have an image of my sister in law the photo is
also made by Eliza Michelle because I need to give credit of course I choose this image
and what I would like to do click over here go to advanced motion effects fade it in from
the right faders in air from the left okay then I do the same thing or maybe I want to
go over here go to Advanced increase the padding to 40 duplicated switches the other way around
click over here find an image of my wife insert then Paula about Anna when the book will be
published in English our English our let you know. So that is how you can do that. If you
don't want to have any edges over here, you can uncheck this and uncheck this box over
here Okay, so this one should come from the left
and this one should come from the right she is giving birth within seven days from now
to our daughter which is amazing Of course. So I'm making my latest tutorials I will schedule
them and then while this is uploaded, I am doing diapers and stuff being awake at night
but I'm totally up for it. The Contact Page edit the beach edit with Elementor Okay, over
here same thing, full width and titles gone by default. I want to start with a heading.
Then over here. I want to make this 800 Bring the heading to the centre and say feel free
to reach out. Advanced margin six Maybe that's a lot 4040 4040 If you have any
question feel free to reach out to us Okay, now this can be aligned at left. This can
be nothing only adds up. And then we can have a form form. There it is, if you want to create
an in depth form, you can go to YouTube Elementor form tutorial. Also mine two months ago, 45 minutes, so you
can do quite a few nice things with it, I want to do a small thing, I want to get rid
of labels. And that's it. Update. Now, ladies and gentlemen, we have our website over here.
With the homepage, we're on about page. But a contact page will link to Instagram. You
can follow them if you want to support them, then we have buy our book besides this beautiful
footer over here. And I can buy this over here by filling in these details. Change the
quantity. If you change the quantity will also change the shipping unless you decide
to pick it up locally. Or like this, it will be added over here I showed you how to add
stripe, I showed you how to adjust the confirmation email they get when they place the order and
in that way and create a single product website within WordPress with WooCommerce Elementor
Pro and cart flows. Okay, actually, we're finished. But I want to do one more thing
in order to optimise the conversion on our website, I go to websites, this is the back
end. This is the back end. And I click again and I go to the homepage. We have a beautiful
call to action over here. But I think we can also have one over here because right now
we don't see it and we want to optimise conversion and that can be done. I having another call
to action over here. So I edit the page with Elementor. I click over here, I go to item
one, I go to content. And I can say we write about things and one, not after. So about
we go we can't wait there's a long text, the shorter this the better. I know I can make
this better. So variety in one sentence what you want to sell. So this is the second area
the second slides, okay? Nice. Then the button text by our book. Let me update it, open it in a new tab. Right
mouse click copy link address. Paste over here. The rid of this if you want to apply
link on the whole slide. That's why I prefer that looks like that. And it's not visible.
So what I can also do paste over here. And then we can go to the backgrounds and do some
background overlay around about things as well and often talk about buy our book or
more information. So what we can do a hearts Call to Action buy our book and more information.
So more information and then they go to our landing page. Still can have a custom cell, they set the
left top line the text or what you can do create a tech shadow. And that's where you
maybe don't need a background. We write about things that a woman often talk
about more information. It's up to you. Okay, I will use that and then I go to the styling.
I can decrease this. I'm okay with it. But I want to change the text. First let's go
to content to the slider options and no autoplay so I can fix on this area. I go to the title
railways Okay. Are hundreds uppercase? No. So it gives you a lot of freedom to do whatever
you want to do. And over here, the button, of course, can be changed. To the border colour, I like that there's
only white and then when people hover over it, you know, I like white better when they hover
over it, I can change the background colour. This one we were always about things it's
willing don't often talk about more information, we can also make the button bigger Of course, let's take a look on a mobile
no or just 100%. We write about things that woman
don't often talk about. Buy our book more information, update, of course, feel free
to give it your own twist. until you're satisfied we write about things that women don't often
talk about. Right now. There's no automation anymore in the slide. So what happens when
you end this slide? It seems to go on forever. So if that's what you want to do, you can
do that. I can edit it with Elementor. Click over here. Go to the slider options, make.
Make an autoplay make it pause and hover. Pause an interaction. It's up to you update.
Now, that is it. So we have a nice call to action. And when we click on it, we can show
the more information we were talking about that I think I keep thinking about things
we should have images of, and I'm Paula over here. But assuming you don't use them in your
website, you can do whatever you want to do on this page. So that is it. Ladies and gentlemen,
thank you for watching this video. I hope you learned a tonne of stuff. You're able
now to sell your products on your website and have a high conversion rate because that's
all we want. We want to have a high conversion rate a lot of people that visit your website.
We want the most amount of people that buy the product to promote on your website and
I think with this website you have right now you're able to pull that off so now maybe
you can start running ads to your website and then pay $2 in advertisements maybe earn
three or four or $5 in revenue that will be great. Thank you for watching this video.
Feel free to like this video subscribe for more upcoming videos. Feel free to leave a
comment with feedback or with your gratitudes if it is there, and then I wish you the best
with selling products or websites. Bye bye
