How To Make A WordPress Website 2019 | For Beginners


Hi guys, my name is Ferdy and in this video
I will show you step by step how you can create an amazing website using free tools. Like
Wordpress. Like the page builder called Elementor. Like the Astra theme. Free images and more.
Let me show you what we are going to cover in this tutorial. We will create an amazing
website using an intuitive header with a logo and a menu. Below that people will see who
we are, what we offer and how they can take action. And I will show you step by step how
to create this page from scratch using Elementor: The best free page builder for WordPress.
We will also import remade templates and adjust them to our wishes. So we can save a ton of
time. We can use templates from Elementor and from my free template library. And of
course we will optimize our website for all devices and fro Search Engines. Besides that
we will create blog posts, portfolio items, sidebar widgets, footer widgets and make use
of free plugins. And if you take a look at the comments people seem to love those tutorials.
So when you watch this video and you apply the things I show you, you will become a pro
web designer and you can even do this for a living if you want to. In the description
of the video you can see timestamps. So if you want to go to a certain part of the tutorial
you can click on the timestamps. If I go too fast for you in the tutorial you can click
on the icon here and lower the speed of the tutorial. If you like what you see so far
then please like this video and feel free to subscribe for more upcoming videos about
Wordpress, starting your own business and hit the bell icon so you get a notification
when I upload a new video. Having said that: Let’s get started! The first thing we are going to do is get
a domain name or web hosting, and I can provide you through my link with a 60% discount of
your web hosting. After that, we will install WordPress. After that we’re going to install
the free Astra theme and the free page builder called Elementor and when we’ve done that,
we will create an amazing website. So without further ado let’s get started! If you have web hosting already, that’s great
then you can skip the next part. If not, you can follow along. So what are domain names
and web hosting and why do we need it? If I go to ‘facebook.com’, you see a nice address
over here ‘facebook.com’ – that is the domain – and what you see over here is the web hosting.
So how does it work? Web hosting is a really fast computer that is turned on 24/7. That
computer stores all of your images, all the text and the whole structure of your website
– all the plugins, WordPress, everything. So if Facebook would have web hosting without
a domain name, it would look like this: you see the website, but you need to fill in this
address in order to go to Facebook and we should not want to remember all the numbers
of all the websites we want to visit. So what is a domain name? Actually it’s a simple address
that will link to the web hosting. So if I would go to Ferdycorp.com, it will link to
the information of my web hosting. So that’s why you need a domain name and web hosting.
So if you want to get web hosting, you can go to webhosting128.com and then you can click
here to go to SiteGround, this is in my opinion the best web hosting platform there is. It
is not only my opinion, there’s a big web hosting related group on Facebook, and every
year there’s a poll where people can vote for the best web hosting companies; SiteGround
is number one every year. If we scroll down we see three packages: the Startup package,
the GrowBig package and the GoGeek package. If you start with only one website, then the
Startup package is for you. You can have one website, 10GB of web space, which is more
than enough and around 10 thousands visits per month. If you want to have more websites,
then you can get the GrowBig package. You pay a bit more per month and you can have
unlimited websites, 20 gigabyte of web space and, 25 thousand visits per month. So if you
would go for GrowBig, you can get five different domains and you still pay only this amount
per month, and besides that you need to pay for the individual domains, but it can save
you a lot of money if you have a lot of websites. If things are going really well, you get more
visitors and then you can always upgrade to GoGeek and I hope this happens for you because
that means that you have a lot of visitors and a lot of business. I will start with only
one website, you can always upgrade later. So I click on StartUp>get plan. Now we can
register a new domain name. If you already have a domain name, you can click over here
and fill in the domain name. And if you don’t have a domain name, you can click on register
a new domain name. So I can fill that in over here, and over here I can choose the extension.
This is Dutch but I want to have dot com but you see there are a lot of options. I choose
dot com and if I would say, I want to have facebook.com and I click on proceed, it says
error you have chosen an invalid domain name. Why is that? Because facebook.com is already
in use. So you need to have a domain name that is still available. And I was thinking,
for the sake of the tutorial, normally I say Elementor Astra, but maybe I can do “Elementoire”
– a little bit French. Let me see if that’s still available. Proceed and elementoire.com
is available for registration with your hosting account. So choose a domain name that is still
available. I need to fill in some information: account information, my email address: [email protected]
Then I need to create a password, and of course you need to remember it. Where are you from?
I’m from the Netherlands. My first name, my last name, my company is Ferdy and Anna Media
and since I’m from outside of the USA, I have the VAT registration number. If you don’t
see that, you can skip it. If you have this, you can fill it in if you have a company and
then the VAT amount will be subtracted from the total amount so you pay less. So I place
mine here then my city is Maassluis, this is my street address in the Netherlands and
here is my zip code. There can be no space over here and my phone number. Then I scroll
down and I can pay with my credit card or with IDEAL. So depending on the country where
you’re from, there are local payment options or Global payment options and I like to use
credit card. So I fill in my details over here and then I scroll down to the purchase
information. Here is our plan, we chose a StartUp plan, you can change there but I still
want to choose StartUp. The data center is in Amsterdam because I’m from the Netherlands
but my audience is the USA. So I can choose USA and it actually does not matter that much
but I rather have something in the USA if I want my visitors to come from the USA. So
if you’re from Europe, then you could say Amsterdam, if you’re from Asia you could say
Singapore, but it does not matter that much. The period, 12 months, 24 or 36 – the longer
the period the more discount you get. But I think 12 months is fine. I scroll down,
and I don’t want to have a SiteGround Scanner, but what I do want to have is the domain privacy
and why is that? If you don’t check this, the whole world can see the email address
you have used to sign up for this account and then a lot of companies will spam you
with hey do you want a logo? Do you want me to make your website? So I don’t want that,
so I just check this and it will save me a lot of spam emails. So I scroll down and the
total amount is 73.05 euros. If you’re from somewhere else, you could see dollars but
there’s not much difference in the price. Then I need to confirm that I’ve read and
agree to the SiteGround Terms of Service and Privacy Policy and you can choose to get news
and special offers by email. I want to say that if you buy this through my affiliate
link, then you don’t pay more but I get a commission. So thank you for that. I click
on Pay Now and it says your order was successfully submitted. And the great thing SiteGround
is that your website is live immediately. With other web hosting companies, I’ve not
seen that and I had to wait for two hours or sometimes for 48 hours but right now with
SiteGround, we are live. Now we have our domain name and web hosting. Let’s install WordPress. So I click on proceed to the customer area
and then we see this over here. We can set up our website. So I click on Start a new
website. We want it to be made with WordPress and then we need to fill in some information
over here about some wordpress login details. What is your admin email? I also would like
to say [email protected] Your username, you need to remind it because you need it
to login into your WordPress website. I’d like to say FerdyKorp and my password… I
scroll down and I click on confirm. I don’t want to add the SiteGround scanner, I click
on confirm and I confirm one more time everything and I click on complete setup. And then it
says it is processing your setup. So right now our WordPress website is being installed,
and this can take a few seconds. Now it says, “Your hosting account is ready to use.” So
I click on proceed to the customer area. Now we need to go to my accounts over here and
then over here, we see our website, and at the right there is a green button and I can
click on, “Go to the admin panel,” and there it is. Now we can login at elementoire.com,
so I bought this a few minutes ago and right now we are live and that is really amazing.
We have installed WordPress, now let’s configure our website. So my login name is FerdyKorp
and I’ve chosen my own password and I click on remember me for the next time and I click
on login, I can save my password and there’s a wordpress starter and I don’t need that,
so I scroll down and I click on exit. So this is the back end of your website. What does
it mean? This area in your website, the back end, is only visible for you because you are
the owner of the website. But if I click over here, on my blog then we go to the website.
Everybody at this moment that goes to elementoire.com will see this and let me tell you, in my opinion
this is really ugly. I don’t know why WordPress does it, but this looks nothing like a beautiful
website. So we are going to do that, but first I want to go to the backend and show you a
few things. We can go there by clicking here, or clicking on the dashboard. By the way,
this bar over here is only visible when you are logged in. So when you get visitors, they
will not see this upper bar over here. So over here, we have the dashboard and here
at the left we have a lot of information. We can go to the blog posts; we can add images;
we can create pages; we can change the look and feel of our website using different themes;
we can add plugins, add users and there are so much more, and through this tutorial I
will tell you more and more about this. Well, what I want to do first: I like to keep things
clean. Right now, I think it’s a little bit of a mess. What is this? I don’t want that.
I will clean up the place a bit. So first I will remove this area by clicking here – don’t
show this again. Then I want to go to plugins and I want to remove everything. So I select
this area over here, and if I do that, I select all the plugins or you can select them individually
like this and I want to deactivate them. So I click on Bulk Actions>Deactivate, and
I will deactivate all the selected plugins. I click on apply and then I check this again,
bulk actions>delete and I click on apply. Now I delete those two plugins, then I go
to the dashboard and I dismiss this message, I dismiss this area, I collapse this and this
and then this one and this one, and now this looks clean in my opinion. What I see over
here is “Howdy Ferdy Korp”; this is my login name, I want to change it to my real name.
So I click on Edit My Profile, and here you can change a few things. You can change the
look and feel of the backend but only you will see, but I like the default one. I can
scroll down, here is my username. I cannot change that but I can add my first name which
is Ferdy and my last name which is Korpershoek and my nickname, that’s still this one, but
I don’t want to be displayed as Ferdy Korp, like this blog has been written by Ferdy Korp,
but I want to display my full name to the audience. So I say Ferdy Korpershoek and now
we see over here Howdy Ferdy Korpershoek. I can change my email if I want to and I can
scroll down and I can say something about myself, I can change my profile picture by
creating a Gravatar accounts. I have tutorial about that, you can find it over here but
it’s really easy to do at this moment. It’s ok with me, I can generate a new password
and I can update my profile over here. What I want to do now? Over here you see my
blog. There is the title of our website. I want to change it. So I go to Settings>General
and then the site title is My Blog and I want to change it. I want to create a website about
Photography, Videography and Web Design. That is what I want to offer to the visitors of
my website as a service. So I can create a site title with my name, my company name is
Ferdy Korp Media and after that I could say: Photography, Film and Web Design; but, Google
takes a look at everything that’s at the very left. So if people don’t know me and they
search for a photographer, they will not search for me but they will search for a photography.
So what I like to do, I like to put some keywords here at the left and after that, the name
of my business. Like this… So place here at the left where you want to be found on
– photography film and web design – and after that, you can have your own name. Also here
at FerdyKorp.com, the first thing is: learn how to create a website. If people search
for that, then the chances are bigger that they find me. But they will not find me if
they don’t know me, and they search for learn how to create a website and I have Ferdy Korp
over here. So then there’s a tagline and it says in a few words explain what this site
is about. We offer a three-in-one solution to help you to be found on the Internet. Maybe
it’s a little bit long but you can do whatever you want to do over here, say something about
your business. Our website is safe already and using SiteGround,
that’s a free option. So, you can have a secure layer over here and that is amazing. So I
scroll down, and in Europe you don’t say March the 5th, 2019 but you say the 5th of March
2019. So if I want to change that, I can do it like this. The fifth of the third month
like this, or I can do a custom one and I copy this and I do the J first, then the F
and then it says 5 March, 2019 and I’m removed comma J F Y and then it says 5 March 2019.
If I’m English, I should stick with this but if you’re from somewhere else and you use
a different type, you can change it here. The time I like to use, 24 hours in a day
so I like to use this one, and the week starts on Monday. I save the changes, then I go to
permalinks and if we have a blog post that says, “Hi! How are you?” At this moment it
would say Elementoire.com/2019/03/05, hi! how are you? I want to remove this area. I don’t need it.
Google doesn’t like it. This is also really bad. So what I like to do is, post name. So
it will say Elementoir.com/hi-how-are-you. So that keeps everything clean and Google
really likes it. Save the changes. Okay! So if we take a look at our website, it still
looks really weird. So we are going to change that. How can we do that? I go to the Dashboard
and what I want to do? I want to add a few pages. So I go to pages and I click on: Add
New. You can also do it by hovering over here, New and then Page. It’s both the same. I remove
this and I will create a title. Well, what kind of page do I want to have on my website,
of course the home page. What I need to do, I need to publish it by clicking on this blue
button and then I need to click on publish again. So I click over here, and now we’ve
created our first page. We can view it over here, but we can also
create a second page. So hover over new page, now what else do I want to show on my website?
I want to say something about myself or about my company. So I can say about or about me,
or About Us. I’d rather say About. I click on Publish. I will edit nothing. I only will
publish it. What else, the home page and the About page and I want to talk about my services.
So I hover over new page and I say services, publish and publish and I have three services
I want to offer. So I want to create a page for each service. I hover over new page, the
first one is photography, publish; the second one is film or a Videography. I call it film,
publish and publish. The third one is Web Design. So you can think of what kind of pages you
want to have in your website. I like to think about having a home page, saying something
about myself or about my company, showing the services I offer – maybe it’s one service
or more services, in my case: photography, film and web design. Then I want to show a
portfolio, showcase what I’ve done already so that the visitors can see hey! what he’s
doing is really great. You can have a blog page and share information about the service
you offer or about related information and then I would like to have a contact page,
so that people can get in contact with me. So first web design>publish>publish. Then I want to create a portfolio page. Portfolio
>Publish>Publish. New page, blog page, publish and publish. New page and then the
contact page. I publish it and I publish it again. So if I go to the home page, I don’t
see those pages, so how can I get them in the website? Then I need to go to the back
end. I can hover over here and I can go to menus or I go to the Dashboard>Appearance
>Menus. Now I can create a menu, and use the pages we have just created. So the menu
name, it can be anything you like, because nobody will see it. It can be Uncle Jim and
as long as you know that Uncle Jim is the main menu, it’s okay. I rather call this main_menu
and then I create the menu. So this our menu over here. What we can do now? We can add
menu items here at the left. We can add pages, posts, custom links and categories. So over here are the pages we have created.
I can view them all and I want to select all the pages. I add them to the menu and there
they are. And you see everywhere it’s called page except over here; here it is called home.
But we also have our home page over here, so I don’t need this one. So I click over
here, I remove it and I save the menu. So if I take a look at the website, holding command
on the Mac or CTRL C and clicking over here, still nothing. We need to assign this menu
to a certain place in the website and every theme has a different place and this theme’s
display location is here below. I like to have the primary area. Save the menu. Refresh
the page and now it is over here. I don’t like the order. We can change that.
How can we do? I can just click here and hold my mouse clicked and I drag it here above.
Home | About | Services |. The services are Photography, Film and Web design. Then we
have the portfolio blog and contacts. If I go to apple.com, they spent millions in optimizing
their website. So over here, you see a logo and the menu and if you click on iPhone, you
want to go back to the home page there’s no home text. You need to click on the logo.
So I want to do the same. I don’t need the home page area in the menu. So I remove it.
So it is about services, photography, film, web design etc. But what I would like to do
is I want to create a submenu. So below services, I want a photography, film,
and web design. Right now, you see them all next to each other. How can we do that? Simply
click over here and drag it to the right until you see this step over here. Now if I release
it, it is a sub-item of services. The same I can do for film. Drag it to the right and
I can even take it a step further. I can also create a sub item of a sub item. So if I go
to the right even more, now, web design is a sub item of film. So if I save the menu
and I refresh the page, you see services, photography, film and then here another tab
and that means that this is a sub item of film. So if I drag it to the left again, not
too much, save it. We have a sub menu over here. So I like that. If I click over here
on the logo, or on the text you see nothing found, ready to publish your first post. Why
is that? Because by default, WordPress has said that the homepage should show the latest
blog post. We don’t have any blog post and that’s why you see “nothing found.” How can
we change this? Go to the back end, to settings>reading, and here it says your home page
displays your latest posts. I rather show a static page. So I select this over here,
and the home page is home and the post page is blog. I scroll down, I save the changes
and now if I click over here, we see home and we can edit it and you see all the stuff
over here. So at this moment, it looks really ugly; how can we change that? As you see over here, we have the title; the
subtitle; we have our menu; title of the home page and some widgets. Well this information
can stay the same, but we can change the look and feel, and that’s the power of WordPress.
We can use a different theme. So if I go to the backend and I go to Appearance>Themes.
You see that right now the theme is 2019. But we have also a different themes we can
choose. So here we’re 2017 and if I activate it, it means that all the information on the
website will stay the same but the look and feel will change. So right now, this one is
active. So if I refresh the page, we see the title, we see the subtitle, we see the menu,
we see the homepage title but it looks totally different. So this is our submenu. So again,
I can also say I want to activate 2016, refresh and now the same information but a different
look and feel. Well I don’t really like those themes, but there is a theme I really like.
So we are going to get it. It’s the Astra theme; it’s free. And if you want to get it,
you can go to FerdyKorp.com, then you hover over tutorials and go to Astra Elementor.
I click on it, I scroll down a bit and then over here at the links, I search for get the
free Astra theme and I click on it. Okay, we click on download now, and I scroll down
and what you see is a few Pro versions, but we are going for the free version. If you
can’t find it over here, you can scroll down and over here – “can’t decide which plan is
right for you; download the free Astra Theme.” What you can do, you can leave your name Ferdy,
my email address [email protected], and then you can subscribe and download or
you can say, “No thanks, I just want to download Astra.” But if you do this, you get updates
about sales and all that stuff because there’s a pro version. I have a lot tutorials about
it if you go to YouTube and search for “Ferdy complete Astra tutorial for the free theme,”
but I have Astra theme tutorials. It’s a full playlist with all the pro functionalities.
But with the free version, there’s also a lot possible. So I close this and if you don’t
want to do all that, then can go to the Backend>themes. So if you’re here at the dashboard:
appearance>themes (I close this)>add new, and then you can also search for Astra. I
click on install and I activate it. Now if i refresh the page, it starts to look a little
bit better. Since we’re downloading stuff, let’s go and get Elementor. We can go to FerdyKorp.com
and then again go to: tutorials>Astra Elementor. Scroll down and click on “Get Elementor.”
And also here we can have a free download, my email address:
[email protected] But also here I can say, no thanks, I just want to
download it, or here you can go to the backend>dashboard to plugins>add new and search
for elementor and there it is. More than 2 million installs. It’s crazy what’s going
on with this page builder. It’s only two years old and it’s taking over the WordPress world.
It’s amazing. Install now and activate it. So now we’ve installed the Astra theme and
Elementor; let’s create an amazing website. So I see this message over here and you can
watch this video, but I want to close this and I want to collapse this and I take a look
over here, I can remove that, I can close this and this is how our website looks and
this is how our back-end looks. What I want to do now? I want to go to the website and
I want to configure the Astra Theme. I can do that through the customize options. So
I click over here and now we can configure this. It looks a little bit weird and we can
make it look better. If you want to use the same images, I use in the tutorial then you
can go to FerdyKorp.com, then you hover over tutorials and you go to Astra Elementor. I
click on it. I scroll down a bit and over here download the images I use in the tutorial.
So I open them and I drag them to the desktop. Now I close this and I’m here at the customized
options and the first thing I want to do, I want to get rid of this big text and replace
it with my logo. So I go to: layout>header>site identity, and here I can upload a logo.
So I select my logo and here I can select files. Then I go to my computer>images tutorial
>number 6 and here is my logo, FerdyKorp logo. I open it and I can optimize it. I can
change the title, create a space over here, remove logo, copy the title and paste it here
at the alt text and then I can select it. I can crop the image but I don’t want that,
so I click on skip cropping and there it is. So now we have the logo here and the text
over here, I will get rid of this in a minute. But I can also upload a different logo for
the retina device. So I check that, select an image, upload files, select files and I
can go for this logo and it is twice as big. You see this higher quality. I open it and
it will look much better on a Retina screen. Again, remove this, copy and paste. Like that.
Now it looks really great. You also can have a different logo for a mobile device, but
I don’t want that. So, I scroll down and before I change the
logo width, I want to get rid of this site title text. So I uncheck this and this looks
much better. I think it’s a little bit too big, so how can I fix that? I can change the
logo width over here. Let’s see. Maybe 160 that looks great in my opinion and then I
can scroll down, and I can have a site icon. At this moment you see this as an icon. If
I go to Apple.com – you see an apple over here. I want to have the initials of my logo
over here. So I go over here to the site icon and I click on select image>upload files
>select files and here it is: the favicon. It needs to be a square image – 300 by 300
– and it should be at least 16 by 16 pixels. If you open it and your image is not square,
you can crop it. I don’t have to optimize this, so I click on select and if your image
is not square you can make it square over here. I skip the cropping and now we see it
over here which looks amazing. Okay, I publish it and I’m happy. What I want to do? This
is in capitals, I want this also to be in capitals. If you go back you see that you
can have more options with Astra Pro and then you can make this capitals, but you can also
do it a different way. I go to the dashboard, to appearance>menus and then over here I
can click on this arrow down and I can change the navigation label. So here I could say:
about me. If I save it, and I go to the website, it says about me but when I click on it, here
you see about and here you see about. So what it says, if I go back to menus and I open
it, you can change the navigation label and that will only be changed in the menu. So
you can put whatever you want over here.I like it to be in capitals, so I say about
in capitals, and I will do that with everything. And I will fast forward. Okay! Like this;
I save it. And if I take a look at the website, now everything is in capitals and I like it
very much. I go back to the customize options and I close
it and I click on customize again, so it will be with the new menu with all the capitals
and we can go to layout again: Header>primary Header. And here we can change the layout
of the Header. So here you see the header layout. Right now, we have the logo at the
left and the menu at the right. We can change it, have the logo in the center like this
or at the right. Well, this is okay with me, but this one is for me, a no go. Why? Because
almost every website in the world has a logo at the left and the menu at the right. So
why should you change it? If you do that there’s a chance visitors get confused. So I would
say logo at the left, menu at the right. Sometimes, people say to me I want a website
that is unique and then I like to say, “No, you don’t want that; you want a website that’s
intuitive.” You don’t want to lose customers because they get confused because of your
website. So logo at the left, menu at the right. We can also disable this menu over
here if we want to. We can also have a last item in the menu. So search icon or a button.
So if you have a non-profit, you could say: Donate, and give it some more attention by
using those colors. Then if we go back, and back, and back here at buttons, we can change
those colors as far as I know. So if I change this to red, it becomes red. So there I can
style the button. I go back, I go back, and I go to Layout>Header>Primary Header.
So over here last item in menu, you can have that over here and then you can choose the
link over here and change the text over here. We can also have a different button style,
and we can have those too. So we can click over here and then we can customize it. I
don’t use it. I say none. If I don’t have a big website, I don’t use the search icon
because there are only a few pages over here. Then we have the header button border, you
see it over here slightly and if I would make it thicker five pixels, and I will make it
blue. I want to get the color of my logo. I use the colorpick eyedropper from Google
Chrome. So I grab this color, copy it escape and then I can paste it; and it’s look like
that. That is quite nice. So I say two pixels. It is not possible to change the background
of the menu in the free version of Astra, but it is possible to have a transparent background.
I will take a look at it later in the tutorial. Then we have the header width. If I make the
screen smaller, CMD -, or CTRL – on the PC, you see my logo starts here at the left and
the menu ends here at the right. If I would change the content width to full width, it
will be totally at the left over here and totally at the right. So no matter how big
or how small your screen is, the logo will stay totally at the left and the menu at the
right. I don’t like that. So I bring it back to content width. Then we are talking about
the submenu over here. I scroll down a bit and if I hover over here, it looks like this.
Well, we can change the submenu container border. So if I would say 6, it looks like
this. It’s a little bit thicker, or 4 and you can change color, so you can also say
green and then if it’s green I will not use this, but if you want to, you can. And here
at the right, in the bottom and at the left you can also change things, so it will look
like this. We can also have an item border between those items by checking this and also
we can give that a color. So if I would make it red, it looks like this. I like it to be
greyish, so I go to black and then fill it with gray and I bring this back to 2, 0, 0,
and 0 and that looks like that (maybe a little bit lighter) like that. Or maybe, I like the
button to be also the blue color. Whatever you want, it’s all up to you. You can change. The animation right now – it fades – you can
also make it slide down, or slide up. I like fade. Then we have the mobile header. If I
want to see how it looks on the mobile, I can click over here on this icon and now we
go to the mobile version, you see my logo over here really well and if I click here,
I have the menu with a submenu. I think this area is really small to click on with your
thumb. So I want to make this area bigger. How can I do that? I scroll down a bit and
then we see menu label on small device. So I say in capitals: MENU. What you see over
here is that the area to click on the menu is bigger. So if you have a thick thumb, it
is better. Then I go over here again, so I publish it and I go to elementoire.com. So
over here at the menu breakpoint – what does it mean? When should this menu change from
this menu to a mobile menu or a hamburger menu. If I make this smaller – let me see
– this is the normal menu. And now over here, it becomes this menu. So this over here right
now is the breakpoint. So right now you see the menu, but if I will make this 500 for
instance, publish>refresh, then it’s like this. And if I make it smaller, that means
that this is 500 pixels. Well, I want it to be bigger. So maybe I can
say 800 publish>refresh. If we make it bigger, this is the breaking point. Well I think Astra
knows what they are doing, so I reset it and I think it’s okay. Then we have to drop down
targets for the mobile so I go back over here, drop down target, I skip that it’s actually
both the same as far as I know. The toggle button style, at this moment it look like
this, you can also say outline and there’s a border like this, but what I like is a fill
and then I like to have the color of the logo like that. It’s the same now. So I prefer
that one, you can choose a different one. We can also have a border radius. I bring
it back; right now you see at the left – a logo, and at the right – menu. You can also
stack it upon each other like this. So whatever you like; I like it this way. The great thing
is the logo adjust automatically. So if I’ll make this longer, this will adjust automatically.
I really like that. You know what, I think this is a little bit too overwhelming. So
I can say minimal… like that. Okay! that’s perfect! I click on publish,
and I go back and I go back. And we have more layout options, for instance: the blog page,
sidebars, footer. But since we will take a look at the blog page later, I will skip that
for now. If I take a look at the sidebar, by default we have here at the right sidebar
and I don’t want that. So I say no sidebar and we’ll take a look at that later. I go
back. I do want to take a look at the footer area and we have footer widgets. In the free
version of Astra you can have four footer widgets; you can have a facebook live box;
you can have a menu overview; you get the most recent blog posts; most recent comments;
you can show your Instagram feed. There’s a lot you can do. We’ll take a look at that
later. For now, I will disable this and I go back to the footer bar. So here we see
this text and section one is this area over here. Section one custom text, we can change
that. I want to remove the copyright… and the site title and I can say FerdyKorp Media
and then I could say disclaimer or privacy policy. You can make this link. How can you
do that? I copy the text. I go to new page, and I create a page called disclaimer. Publish,
Publish; and I start typing disclaimer. Then I select it, and I want to make this a link
and it is /disclaimer>Enter. I click on this icon and I can say open it in a new tab.
Now I hover over here and I click on it and I click on the three points and I say edit
as HTML. Then I remove this area and this area and I copy this, and this is a link.
So if I go back over here, and I paste it that means that this over here is a link.
You see it at the pointer, it looks different. You can click on it. We also can have a second
section footer menu custom text or a widget, so if I would say custom text, we have two
texts over here and we can change it from stacked upon each other to left and right.
Well, I don’t need a second area so I just leave it at one and I say none. So it looks
like that. Footer bar width, you can also have it full width but it’s not necessary
because everything is centered at this moment. Footer top bar, again you can make it thicker,
give it a different color; if you want to see it just do a color like that and there
you see it. I bring it back to two and it’s okay with me. I go back and I go back and
I want to take a look at a few colors. So I go to colors and backgrounds. Well first,
the base colors. Again, I need to copy the color of my logo, copy or you go images>tutorial
>miscellaneous color codes. I use those colors. So blue is this one. I want the link color
to be the same. The text color, I want it to be 444444, it’s not too black but it is
really dark. And the link hover color, I want it to be the color of my logo again. We can
change the background color, but I suggest you do not do that. It looks a little bit
weird. I think it looks better when everything is white in the background. And here again,
why should you do something totally different. There’s a big chance it will be a distraction.
You can also have an image in the background but I will not do that if I were you. I go
back and I go to the footer bar and there’s some background color over here and I want
to have something dark blue. I paste my color, my logo and then I make it more blue. Yes
I like that. What we can do now? The text color – we can
make it white. It’s already quite white and then the link color we can make it something
different. So now it’s green. So let me see, what can you do? You can also make it a little
bit darker but that looks a little bit weird. So I think this color should stand out so
maybe green is an option like that. Why not? When we hover over it, you can change the
color to red for instance and then it becomes red. So I prefer to make it different – blue,
green a little bit lighter. Like that. Or the other way around, and then this one darker
like that. You can also have a background image in the
footer. Okay! well, we can take a look at a lot of more things: typography, buttons
– you can edit the button if you have one over here. The menu, well! we’ve discussed
this already. Here you see photography, film, web design and over here you can switch that
and then this film, photography and web design. So you can play around with that if you want
to change that over here. You can also add more items, posts, categories,
texts and formats but I leave it as it is. Okay! I go back and I go back. We’ll take
a look at the widget later. The home page settings – we’ve discussed this already – a
static page, the home page is home the post page is blog. And we also can take a look
at custom additional CSS. I click on publish. I go to the home page and visit site and this
is how it looks. So I want to take a look at one more thing, one important thing. I
go back and I go to layout, container. This is really important. If I make screen smaller,
I can change that container width. So if I would drag it to the right and I release it,
you see it becomes wider and if I drag it to the left, it becomes smaller. I say CMD
or CTRL – (minus) to bring it to the 100% width and I like it to be 1140. I think that’s
great. Then width of the default container and right now it says content box. And how
will that look, that means that there is an area around this box. I can also say boxed. I’ll take a look at
it later, because it has everything to do with the size of our widgets, so right now
I will leave it but you see it is in a box. I can also say full width contained, that
means that the whole background is white even if I make it smaller. But the text, the title
and all the information of the website will be contained from here until here. But if
I would say full width – stretched, that means that it starts here at the left and here at
the right. So if I make the screen even smaller, it will stay totally at the left and the text
will be spread all over the website. Well, I don’t like that. So I say full width but
contained. You can change it for every page. So at the container blog posts, I can say
I wanted to be boxed and the blog archives also boxed or content boxed. I will take a
look at this later. I click on publish and then I refresh the page and now it looks like
this. So that looks nice. For a free theme, I think this looks really beautiful and what
I can do now, I can edit the page. I close this and I can edit it with Elementor. So
if I click over here, Elementor will be loaded. If this is not the case with you, you can
go back over here, exit to the dashboard and I’ll go to Elementor>Settings and then at
Advanced, you can switch the editor loader method to enable and that should fix it. I
save the changes, I go to the website in the new tab holding command or control on a PC.
So here we are at the home page and I can edit it with Elementor again. What I wanted
to show you in the beginning. iIf I click on the plus over here and I click over here,
you see three icons over here and if I hover over here, nothing happens. If we want to
have more options, I need to do a right mouse click and then I can duplicate it, add a new
column and also here right mouse click and I can do more things. But I want to work efficiently.
So I go back to the elementor settings. So here, Elementor settings advanced and here
at editing handles, I want to change it from hide to show and it says show editing handles
when hovering over the element edit button, so I save the changes so when I hover over
here I see nothing but when I refresh the website, CMD+R on the Mac, f5 on a PC. New
area like this; now when I hover over here, I see those options. Now also here, I can
duplicate it. So I close it, but that’s how you can work more efficiently. So finally guys we arrived at Elementor. What
is Elementor? Elementor is free page builder that enables you to create a beautiful website
and to optimize for all devices. So let me show you how it works. We have nothing,
so if I update the website and I click on this ‘I’, I can preview the change over here.
So what you see we have exactly nothing over here. I will close this. So how can we create
something. We can do two things, over here we can click on the plus, if I do that, I
can select the structure and if I would choose this one, you see this blue outline that means
that this is a section. So Elementor has three parts. We work with sections. In those sections,
we have columns and in those columns, we have elements. So let me show you, at this moment
we have chosen a section with one column and the section area is blue and the column area
is gray. So there is a column in the section with what I also can say, I want to have two
columns so I duplicate it in one section or three columns. I can also change the sizes
and in those columns, I can add elements. So if I click on this icon over here, I go
to all the elements. There are three elements there are general elements. There are WordPress
elements and if you get the pro version, you have Pro elements. If you get Astra ultimate
adults, you also have more elements. We have also more free elements – we’ll take a look
at it later. What I can do now, I can drag elements in those columns as you see. I go
back and I can drag something else in it: a button. I can drag it here above or here
below. So it is just drag and drop. One more – Google Maps. Over here, I drag
it and there it is. If I would update it, it will renew the page automatically and now
you see this. So that’s in a nutshell what you can do. And all sections, all columns,
and all elements are configurable. So if I close this, and I open a new one and I want
to have three colors, I click over here. I have one section with three columns. At this
moment, since I selected the blue area, I can edit the section. First, we have layout,
so I can stretch the section. I can change the height so I can make it minimum height
or fit to the screen. I like the minimum height. I can go to the style tab and here I can change
the colors, the background. So I can change the background to a certain color, or I can
use an image or I can have a gradient. So from dark blue to this, or we can have a video
in the background. So there are a lot of options and then we have advanced. Here we can take
a look at margin and padding, and the great thing is everywhere where you see this icon,
you can change the settings for every device; for a tablet or for a smartphone. So we can make our website pixel-perfect on
any device and that’s the big power of Elementor and one other great thing is that this is
all free. You can upgrade to Elementor Pro which gives you even more options but in this
video, we will focus on all the free features of WordPress Elementor and the Astra theme.
So right now I’ve done something over here with the section settings, now I can go to
the column settings. So if I click over here, I have the column settings and again I have
layout, I can change the percentage. So I can make it smaller or bigger, I can let things
aligned. I can go to the style and also here I can say I want to have a background that
is white. Well we don’t see it yet, why is that? Because we don’t have an element in
it. If I want to go to the elements, I click over here and now if I would drag a heading
over here, you see the background is white. So now since we have dropped a heading over
here, we see the heading settings and here you have content, style and advanced. At the content, I can change the content so
I can change the text. I can say “Hi! there.” I can add a link to the text. I can change
the size. I can change the HTML text, I can bring it to the center. Then at style, I can
change the color, the typography; I can change the style how it will look. And then at advanced,
again, we can use the margin, the padding. So if I want to change the padding of the
column, I hover over here. I click on the grey column. I go to advanced and I say margin
50. Margin is everything outside of this area and padding is everything within the area. I’ll take a look at this later, but that’s
how the structure works. We will create a page from scratch but what I also want to
show you, if you click over here you can make use of pre-made pages, pre-made blocks and
it will save you a lot of time. So if I see something I like, I can insert it. Now we
have this in a few clicks and if I want to change something, I click over here, I want
to go to the section settings, style, we see color one, I want to change it to dark blue,
the color two. I want to change to be a little bit purpleish. So that’s how easy you can
change things. Then I can click over here, then I select this text. I can say Ferdy Korp
media, so again here at content we can change the text. Here at style, we can change the
style. So maybe I want to have a shadow. I click over here. I want to increase the shadow
a bit, so you can see it better. Blur it a bit more, this is weird. And if you see something
like this, it’s loading again. You can change it, so that’s how easy everything is. You
can change the color of the shadow and here I think I want to have a different style.
I click over here, I go to the style of the button and it’s all easy. The button, the
typography – maybe I want to make the size bigger. Maybe I want it to be upper case.
So I go to Transform>Upper case. I close this. I want to change the text color. Maybe
I want to make it white because I want to have a light background. So I choose white
over here and then I go to the background color and I can make it black. When I hover
over it, it looks like and I can change that also if I want to. So that’s another option.
If you want to make a website really fast without learning how to do everything from
scratch then you can go to Youtube and you can search for Ferdy Elementor One hour 2019
– that should bring my video. Yeah. I uploaded it two days ago and there I will show you
how you can do it within one hour. But in this video, we will start from scratch. So I close this, close this and close this,
close this etc. And now we can start from scratch. Well, there are so many things I
want to tell you at the same time because there are so many great features about Elementor.
But I will show you everything step by step. So, before we start, if I would go to buttons
and I drag it over here, and I go to style and at the text color – I can choose a color
over here. But here you see also a few colors and I want to add some colors that I want
to use a lot, so I can save some time. How can I do that? Then I click over here then
I go to default colors. What is my primary color? Well you can find it in my images tutorial
folder at miscellaneous and then here you see color codes and I want to use the blue
color as my main color. It’s the same color I use in my logo. I click over here and I
paste it. For the text I want to use 444444. So it’s not black, it’s a little bit lighter
and the accent – I also want it to be blue. The secondary color, I also want it to be
blue. So it looked like that, then I click on apply. I go back over here and then default
funds we’ll take a look at it later when we have some funds over here. I click on the
color picker and this is what I was talking about. We have black, we have white, then
I want to have my main primary color and then I want to have this green color which I can
find again over here – color codes. Green and then the in-between color and then I would
like to have 44444 again. And then those two, I keep them white because I will not use them. Apply – so now I click over here. I go to
text color and I can choose the colors, black, white and blue color and green color. My in-between
color, so that’s how it works. I close this and now we are going to start creating our
website. Well, if you create a home page, keep in mind that the first impression of
your website can make it or break it. So the first impression of a visitor on your website
should be amazing, because maybe there’s a person that wants to pay you thousands of
dollars for a service you offer. But if they see your website and they are like, “what
is this and what is this about?” you can lose them. So what I like to do; when visitors
visit my websites, I want them to know who we are; what we can do for them and how they
can get in contact with us. So how would I like to do that. I click over here and I want
to start with an area. It’s called a hero and I start with a section. I want to stretch
the section, so the background will be totally from the left of the website until right and
then I want to height to be minimum height of 400. Let’s start with that. Then I go to
style and I want to have a gradient overlay. So the first color is my blue color and then
the second color can be my lighter color. Or, I make it a bit darker. That’s what I
prefer slightly like this. I can change location. I can change the type from linear to radial.
Maybe I like this and if you would say linear, you can also change the angle. So maybe 135,
like that from left above to the right button. What I would also like is a background overlay.
So I want to use an image in the website. Well, you can do two things; you can go to
istockphoto.com; you can buy images for maybe 30 dollars. So if I would search for City,
I like city images. So maybe you’re operating from New York. You can find this image and
you can use it in your website. Maybe you’re like – why should you do that? That’s so expensive.
Keep in mind that this can make or break the first impression of your website. So I have
this image, I like to use it in my tutorials because I think it has a professional look,
or this one. And if you want to have something else, Sahara, you can find high quality images.
If you don’t want to pay, you can go to pixabay.com or unsplash.com or pexels.com – a lot of these
websites have the same images. You even have video if you want to add it and you can see
that the quality here is also really nice. I like PixaBay the most. So I can search here
for city or computer, and then you can find some amazing things. So maybe this one. I
click on it. I can donate some money but I can also have a free download and I want to
go for the resolution 1920×1386>download, I am not a robot and download. There it is.
What I like to do – I like to open it in finder and I like to rename it to FerdyKorp Media
Web Design – something like that or web design, photography film. Now I go to the website;
I close this and I close this and I close this. I go to Elementor. What I can do, I
can go to the background overlay and there I can get an image. So I upload files>select
the file>I go to downloads and here it is. I open it and I want to edit the image, because
I want to make it smaller. Right now, it’s 1 megabyte; it is really big. I click on edit
image. First, I would like to make the image smaller if that’s needed. Over here I want
to have 9020, well that’s the case already. If you don’t have it, if it’s bigger you can
say 1920 then scale. Well that’s scaled already, so I want to have an aspect ratio of 16:9,
and now I will make a selection within the image. And you see it has the aspect ratio
of 16:9, so I make it totally from the left to the right, then I select an area I like
to see, and then I hit this icon and I save it. Let me update it. Let me see; I go to
the library; I click over here – now it’s 500 kilobytes, which is far less. So let me
see, I close this; I select it again, insert media and now I can do a few things over here.
The size I can make it cover, I can change the position manually. So I can say custom
and I can drag it exactly how I want it to be then I should also say over here custom.
So I can change the size, I can do a lot of things but to keep it simple I have a tutorial
about this. You can find it over here, how to make this pixel perfect. Right now, I want
to say focus on the center of the center and make it the size cover; like that. I want
to see less of the image and more of the gradient. So the opacity I change it to something like
this. So you see through it, but not that good. You can do so much more: you can make
it blurry; you can change the brightness; saturation. I can bring it back and then we
have the blend Modes. So if I would say multiply, for instance, I make this one and then I can
blend those images together. Screen, overlay, darken, lighter and then you can change the
transparency and you can change the CSS filters. So you can do so much things over here. I’ll
bring it back, I don’t need that. I don’t need this one. I say normal and I’ll bring
back the opacity. Yeah; like that. Okay – that’s it and if I want to change something
in the section I can click over here, I go to layout and there I can change everything.
I want to make this a little bit higher, so I can say 500. I go over here to all the elements
and I want to start with a heading. So I drag it over here and I almost do not see it. So
I go to style because there we can change the style of this element, text color white.
Then I go back to content and I can change the text over here. So I say Ferdy Korp or
Ferdy Korp Media. I want to bring it to the center. I do not want to use a link and the
HTML tag can be h2, because you can use only one h1 tag in your website and I want to save
that for something else which is more important to me than Ferdy Korp Media. I go to style
again and here at typography, I would like it to be in uppercase, like that. Then at the size I can make it a lot bigger,
and I will take a look at the font later. I think this is okay. Then I go back to all
the elements and I want to go for a divider. I drag it here below and then again when I
release it, I can configure it over here. What is the style. It is solid or double,
or dotted. It’s really small so you don’t see it. So if I would change the weight, you
would see better. Double or dashed. I like it to be solid and let’s make this three.
The color can be white. I want it to be aligned in the center, so when I make it smaller in
percentage, it will align to the center and not to the left or to the right. So, I bring
it to the center. I rather work with pixels because if I make my screen bigger, the size
will change and I want it to be pixel perfect. So I bring it to pixels and now I can say
how big I want it to be. I think this is perfect. Now I want to duplicate this area. How can
I do that? Right mouse click>duplicate. Or I hover over here and I click on this icon
and I duplicate it. If I want to see the whole screen, I can update it and take a look over
here. I close this or I can just click here and I see the result. Well, right now, I don’t
see this area that good and I don’t want to drag this below this divider. So let me see,
I drag it like this and then it becomes blue and I release it and that would look like
that. Here, I want to talk about my services, that is Photography | Film | Web design. Well,
this is way too big. So I go to style>typography, and I can make this smaller. And if I want
increase or decrease it by the increments of one, I can click here and press arrow down
or arrow up. So let me see. I think this is perfect and this looks weird; I don’t like
it. So what I can do, I can click over here at the divider. I go to advanced and add margin,
I uncheck this and at the top, I want to say: – (minus). So I bring this closer to me – 25,
and at the bottom I also want to say – 25 but I cannot do that. So I leave it at 0.
I can also do that over here. I go to advanced, uncheck this and at the top I want to say
– 25. So it’s all closer to each other. Update and now it looks like this. So, people see us FerdyKorp, the menu and
FerdyKorp Media: Photography | Film | Web Design – all with free tools. I really like
it. So people see who we are. They see what we offer and now I’ll want to have a call
to action. So what I can do: I can go to the elements, I can go to the button and I drag
it here below, and I can say, “Get in contact.” You can say “Contacts” but you also can make
it an action – get in contact, instead of contacts. And if you want to link people to
the contact page over here, you can say /contacts and then Elementor and WordPress will say
ok, you go to elementoire.com/contact. So you don’t have to fill in the whole website,
just forward slash and then this area. I want to bring this to the center and you can make
it bigger, so that’s okay. Then we go to the style, here we can change the typography and
when we hover over it, you see nothing. So I can go to hover>change the background
color to green, so when people hover over it, it becomes green. We can have an hover
animation, so right now it only becomes green; you can also say I want it to grow like that,
or to shrink. So you see how many possibilities there are. It’s amazing, we can have a border,
a solid border of one pixel and it can be white. But it also can be a different color.
I like it to be white, so I’ll leave it at that, and you can have a border radius. So
if I click over here and I have this turned on, that means that when I increase it, it
will be increased on all four sizes. So what you see when you take a look over here when
I increase it, it gets more rounded edges. You can also say percentage and then you can
say 25 and then it also has rounded edges. We can also give it a box shadow. There it’s
a little bit vertical, make it blur a bit more, you can also say 0,0, then you see a
nice shadow around it. And if I think it’s a little bit too close
to this text, I can go to the advanced area of the button, uncheck this and at the top
I can increase it. So that’s how it works – really nice. I go back to style, because
I don’t like it. I want to remove the solid to none and I want to change the border type
to none or the radius to zero and I want to get rid of the shadow. I want to keep it flat
like that. What I can do now: if I want to duplicate this, I can say right mouse click
>duplicate. But then I see the button below – this button – I don’t want that. So first
I change this to portfolio and the link will be to portfolio>update. Let’s take a look,
but I want this to be next to each other. How can we do that? Well over here, we click
so we go to the button, I go to advanced and then add custom positioning. I can change
the width from default to inline and then over here I click here and I can also go to
advanced, to custom positioning and the width will be inline. So now there are next to each
other, but it looks a little bit weird. How can I bring this to the center: well, then
I need to go to the settings of the column, and then add horizontal align. I can bring
it to the center. And there are a few different options: I can also say align with space between
everything, or space around, or space evenly. If you say space evenly that means that this
area has the same width as this area and this area. So if i will duplicate this, you see
the space is still evenly. Well I don’t like that, so I go to the column settings and I
say, again, space-between, let me see – no. Space-around>no. I go for the center, but
then everything is near to each other. I can remove this hovering over here like this and
now I can click on portfolio and I go to advanced and then add margin, I can increase left,
let’s say 10 and the same I do at get in contact>advanced and then here at the right, I say
10. What else do I want to do? I want this to be the same size. How can I do that: I
click over here. I go to the style and padding. I uncheck it and at the left, let me see.
I increase it and now I want to check it, so how can I check this? I can click over
here, go to advanced, custom positioning; I say default again, okay. So now I can take
a look at it better. I go to style>left=46; at the right also and also over here,
I change this to default. I get rid of the 10. Also here, I get rid of this 10, I can
say CMD+++; so I see it a bit better and now over here, I go to style, I can make it 50
and 50 and then it’s perfectly aligned. So let’s do the same with top. Fifteen, maybe
fifteen. I say CMD 0; sometimes it looks so complicated I try to show you as good as I
can, how it works. I go back to custom positioning and I bring
them both back to inline and also here advanced>custom positioning>inline. And then advanced
>left>10 and at the right=10; update. So it looks like that. I want to change the
color of “Get in Contact” to style and the normal background color should be green. And
the hover background should be blue. Update. So now it looks like this. I hover over here
and it becomes green, I hover over here it becomes blue. Great! But how will this look on a mobile phone,
or on a tablet? I can click over here on the responsive mode, and I click on tablets that
looks perfect, and mobile. Nah! I don’t like this. So how can I change this for a mobile?
Well, since we are in the mobile style, all the settings are now also in the mobile style.
So what I can do, I can click over here and I can go to the Typography and it’s already
in the style for a smart phone. So I can change this and I can do that pixel perfect to this.
Then I click over here, I go to Style>Typography and I make it smaller. Like that. Over here,
I click here and I go to advanced and now I want to have no margin whatsoever. And at
portfolio, I want the same. No margin, only between those. I’ll check this, and at the left, I say 5
and here at the right, I uncheck this and I say 5 – Update. And if you want to, you
can click on the section settings and change the minimum height for the mobile to something
like this if you want to. And then it can show something else over here already. But
I actually like it to be like this. This is the first thing people will see and to be
honest, I think this is all a little bit too close to the sides. So I go over here – Typography
– make it smaller; this one. Let me see>content, change it like that and also photography –
make it a bit smaller like that. Update. So let me see. Desktop, perfect. Tablets, perfect.
Mobile, perfect. I love this about Elementor. We still haven’t paid one dime outside of
web hosting. It’s amazing what you can do with this free tool. What I want to do, I want to make this text
smaller. So I go to typography and I say, weight, make it 400 or 300 and then we can
make it a bit bigger to align it. No that’s okay. And again, let me see how it will look;
okay. And how it will look and maybe it can be… yes, perfect! And then we can click
here and the menu will pop up. Update. So what else can we do? We can make use of
animations. It can make your website slower but I want to show you how it is done. I click
over here I go to advanced, I close this and I go to motion effects. Entrance animation.
I can say make it fade in or come from the left, zoom from the left; that’s too much
for me. Let me see. Slide in>left. I like that. Then this one – I want it to zoom in.
So I go to advanced>motion effects and I say zoom in; like that. And then the third
one, Photography | Film | Web Design, advanced>motion effects. I want it to slide in from
the right. And then this one can come from the left. Motion effects>slide in from the
left and this one can slide in from the right. You can also search for it – slide in right.
Update. Look at that. That is a lot at the same time. So how can we change that. I click
over here and the animation duration can be slow. Also for this one, slow. Update. Okay.
What I’d like to do now, I want to bring some delay in it because now you see everything
at the same moment. This one can come after a half second – 500 milliseconds. Then after
750 milliseconds, second one will come and after one second, this one. Then after 1.25
seconds, this one and after 1.5 seconds, this one. Update. Yes. But I don’t like those over
here, let me see maybe I can do zoom in from the left, no. Fade in from the left, yes.
That’s better. And fade in from the right and it can also be slow. Everything can be
slow. Update. I think this looks amazing. We can also say, you know what? On a smartphone,
I do not want to have all that stuff. So on a smartphone, I can say – None. So when I
go to a tablet>default, when I go to full screen, zoom in but nothing at a smartphone.
Well, I want it to be just the same, so put it on default. Yes, perfect. So what we can
do now. We’ve shown who we are, what we do and people can get in contact with us, or
go to the portfolio page. So I want to do two more things. Over here I want to go to content and I want
to make this an h1 tag because I want to be found by photography, film and web design.
It’s more important for me than FerdyKorp Media. Then the second thing I want to do
if I update it, and I take a look and I scroll down, you see that the background is static.
I want to change that. I go to the section>style and let me see, background overlay
>attachment>fixed; so even if I scroll, background will be fixed. I like that effect.
So let me show you one more time; like that. I think that looks better. So what is next? We’re going to the next section.
So I click on the plus over here and this time, I want to have three columns because
I want to show more about my three services I offer. So I go over here, to all the elements
and let me see. I want to go for an icon box. So I drag it over here and I want to adjust
it. First, the content, the icon. I want to talk about photography, so I search for a
camera. And I can choose one, I like this one – really simple. Then the title and the
description – what do I want my title to be? Photography. So I want to tell more about
the services I offer, so they can read it over here and see some examples, so then I
have this text over here. So I’ve created a text but I don’t like this. I update it
and if I take a look, it’s just not appealing to me. So I will configure this, then I go
to the link /photography and I can change the icon position. I like it to be at the
top. The HTML tag can be h2 and then I go to the style, the primary color – this one,
and then I can change the spacing. I bring it up a bit. I can change the size but before
I do that, I go back and at the view, I want to change it to Stacked or Framed. Well I
want it to be stacked and the shape can be a circle or a square, I like it to be a circle,
I go to spacing again. The size, I can make it bigger, not too big, like that. The spacing
I to bring it a bit back – like that. Padding, I can change that if I want to, I can make
it rotate, change border radius. Then, when I hover over it, I want to make it green or
a little bit lighter blue like that and we can make it grow. Okay. Then I go to content
alignment at the center, that’s okay. Vertical alignment at the top, we can play with the
spacing. This is okay and then we have typography and the description. Typography, that’s a
title, so I want to change that to uppercase, make it a bit smaller – let me see, is the
color correct. Okay. What I see over here is that the text is bold. So I don’t like
that. How can I fix that? Over here – default fonts, body text I want to be open sans, and
the weight is 400 – that’s okay. If you want it to be bigger, you can make it 900. If you
want make it thinner – 100, but I think 400-500 is okay. Then we have the accent text and
I want it to be exactly the same – open sans 500. Then we go to the headline, I would like
to say Raleway – that’s for all the titles. Also the secondary Raleway and then 600. So
that’s what I like. So what is next? I close this, apply and then
I want to show a few images. How can I do that? I go over here and I want to go for
an image carousel. Your image carousel – I drag it here below. And now I can add a few
images. What I suggest you do is that you use all the same aspect ratios and resolutions
for the images you want to show in a carousel. So I go to the desktop>Images>Tutorials
>Home>Photography – select them all>open. What you see is that I renamed all the images
to concert- photography-Rotterdam-Maassluis, because I want to be found on that. Because
if someone searched for concert photography Massluis and I go to images, you see my picture
here first. So it’s really important to rename your files because if people don’t do that,
and they search for IMG0001, this is what you will see. Why is that? Because people
did not rename their images. So you should do that, because then you will be found better
in Google. So I can select one, remove the dashes to optimize it for Google, then I copy
the title and I go to the alt text or twice tap, tap, tap. I paste it and I do that with
all the images, and in that way they will be optimized and I can beat my competition. So I’ve selected four images, I click on create
new gallery. I can change the order. I can reverse the order. I click on insert gallery.
Now you’ll see them like this. So now we need to configure it. The image size – I like to
use medium large. Don’t make them too big, because it’s not necessary. And how many slides
do I want to show? Well actually only one at a time. Like that. I don’t want to stretch
the images. I don’t want to see navigation or something else. I want to link it to the
media file with the lightbox and I don’t want to have any captions. Then I go to additional
options, pause and hover – no, autoplay – yes, and every five seconds the photos will change.
So I can say every three seconds; infinite loop – after the latest picture, should the
first one appear again? Yes; and I like it to fade instead of slide in. So right now, you will see how it fades and
I think the fade is too quick. So I say one and a half seconds, like that. I like it.
Okay – that’s great. Then I want to do one more thing over here, I go back and I want
to add a button. So I drag it over here and I can say – More info/photography. I’ll bring
it to the center and the type is default, I can have something else over here but I
don’t want that. I can do that here at the style, more info, the size is medium and I
can have an icon and I want to have the same as this one so I say camera, like that and
I can have the icon before or after and I can change the size between those two. Then
I go to style, when I hover over it, I want it to become the green color. So at hover,
I say background color green like that and I also want to do that here. So I click over
here, I can hover green like that. And of course I want it to grow when I hover over
it. I go to hover I wanted to grow. So that looks nice. What I can do now? I can
build this all again and change the subject to film, change the text. I can also duplicate
it by hovering over here and clicking on this icon, and again then I hover over here and
I click on the X and on the X, that’s how fast you can change it. So now I want to change
a few things over here. So I click here and I want to change the title. I say film, I
want to paste the text and at film I also want to change this to film, let me see – camera,
video camera – also here camera, and video camera and this should link to film and also
here. It should link to /film. Then the third one is a web design. I want to change the
text like that and then the icon something like this. Also here, and then the link of
course to web design. I copy this. I click over here again, I search for the link area
and I paste it. Update. Let’s take a look. Okay. If this text will be shorter than this
one. Let me try something new. So I click over here, this, I will make it go away. This
is okay and over here, I want to copy a sentence like this. If I update it, then this looks
all really weird. If I want to make this align, how can I do that? Well there’s a trick for
it. I open a new area over here with three columns and I drag this one over here, this
one over here and this one over here. Update. So, here below it’s all the same size, but
here it isn’t. We can do it through a few ways, but I can just drag this over here above,
just like this one above and like this one above. Update. So now they have the same height.
So that’s a trick that you can do in order to get everything the same height. So I want
to fix my text. So here I want to change the images. I clear them – yes. Add the images
– upload files>select files and then I go to images>tutorials>portfolio>web design,
CMD+A, open and I create a new gallery. Insert. Like that. So update, and I want to continue
with the animation but this time not in an element but in the column. So I click over here, the first column – Advanced
>Motion effects and I say fade in up – like that. And I wanted to be slow and I want the
duration to be 2 seconds – yes. So the same I do over here, fade in up, slow after 2250
ms and then the third one – the column>Advanced>Motion Effects, fade in up, slow 2500; Update.
So now you’ll see it go like this. I like that. But what I want to do now, I want to
grab this section, go to advanced>uncheck the margin and I want to make it a negative
number. So it will go up like that. Let me see how far can I go. Quite a bit I think.
I think this is OK – like that. But now we don’t see the text that well. So I can click
over here on the icon box>Advanced>Backgrounds and I make it white. So now it looks white
but I think there’s not that much padding or margin over here. So how can I fix that?
I go to advanced and I say 10 everywhere from the outside and 10 everywhere from the inside
and make this 5. Now I can do the same over here or I say right
mouse click>copy>right mouse click paste style and paste style. That’s how easy it
is. Update. Let’s take a look. I like it. I like it a lot. It looked great but what
I don’t like is that this area is a little bit low. It’s close to this area and less
close to this area. So how can I fix that? I go to the column>Advanced>Uncheck this
and bring this to a negative number, until I think it is all close enough. Let me bring
this up to -100 and then over here. I bring it up even further. So also over here, let
me see until it is in the middle. Yes, I think this is great. Update. So this is how it looks
– perfect. And a bit lower because I don’t want to see this sentence. So over here, 130
and then over here also 130. Okay. That looks okay. What I want to do; you see there’s a
nice flat line over here. I want to change that. How can I do that? I click here. I go
to the upper section. You can go to style, so the style of the upper section, you can
close the background options and go to shape divider. And here at the top we can select
the type, the zigzag for instance, change the color to white and then increase the number
and the height and then you can have an effect like that. I don’t like the zigzag but I do like the
tilt. But not for on the top. So I can say none, but at the button I can say tilt opacity
for instance. So over here and then I can increase the width and the height. So you
can have a nice effect like that. You can flip it, you can bring it to the front but
then it goes through this area, I don’t like that. So in that way you can give a nice style
to your website. So let me see. Right now you see better. I like it. I like it a lot.
Beautiful! I want to flip it back and make it a bit higher – 120 and 100. Update. Beautiful!
So here we see the images, different images and here I don’t want to see an image, I want
to see a video. How can I do that? I hover over here and I click on the X and then I
click over here to the overview and I can also search for a video, and there it is. I drag it over here above the button, and
then I can select a video. So I go to Images>Tutorial>Portfolio>Film>Montana>Montana
Vimeo link, and I want to go for the one with sounds. Copy it and here i select Vimeo and
I paste it and then I can change the starting time. I can do auto play. I like to do that.
I want to mute it – no sounds; and I want to loop it and I don’t want to see all that
stuff. So now it starts playing automatically. So when I update it, I take a look – the video
plays. So those two images change at the same time if they are loaded correctly and if I
click on more info, I go to the photography page. Also when I click on the film over here,
so that’s how it works. People see Who I am, what I do and they can get in contact with
me or take a look at my portfolio. They can see a photography, film, or web design – I
talk about it and I show people what I do, and if I click on it, it opens like this and
I can navigate through the pictures. As I said before, if you have something like this,
please use the same aspect ratio on the same resolution otherwise this image will be like
this and the next one can be higher and it will have a really weird effect. What I see
is that there’s not much space over here, so I can do that here at the settings of the
section – advanced and here at the button, I can increase the amount of space. So let’s
say 20 – Update. How will this look on a mobile? That’s not unimportant. I click on tablet
first. On tablet it looks like this. I think this is OK and on a mobile it looks like this. Well I don’t want that. So first, over here
on a mobile 2 at the left and here 2 at the other side or 3, so total of 5. Okay! Then
over here at the settings of the column. Here at entrance animation, it says default. So
there’s also an entrance I don’t want it. No entrance on the mobile. Also here no entrance
and here none. Okay! let me do some next-level stuff and I hope I can make it clear. What
I also can do, what I see over here – photography, film, web design and then you see the images
and the buttons. How can I merge them together? Well over here, I click and I go to advanced,
I go to responsive and I say there’s a whole section with those three areas. I want to
hide them on a mobile. Yes, just like this one responsive, hide them on a mobile – update,
so let’s see. Here they are. But when I make the screen smaller, they are gone. So for a mobile I want to show something else
or in a different order – actually just like this. So how can we do that? I go back to
responsive>desktop. I will duplicate this area, drag it here below and I will duplicate
this area, this section and also drag it here below. And now I want to merge everything.
So I bring this one here and the button here – just like this. So we duplicate everything
actually. And why do I do that? Because over here, there are multiple sections. This is
a section, this area over here and then this one below and why is that? Because then all
the text will align really nice, even if I have more text over here those images and
videos will still align. But on a mobile, they’re all below each other. So over here,
I click and then I say advanced>responsive>hide on a tablet and on a desktop. Update.
So if you don’t get it, again let me show you. This area is one section, below there’s
another section that has the images and all the buttons. And then here below we have everything
in one section. The difference is that this is shown on a big screen and other tablets
and hidden on a mobile and this one is hidden on a desktop and on a tablet, but shown on
a mobile. So now if I make the screen smaller, you still see it like this. But now I do not
want to have the entrance animation. So I can go to the column>advanced>motion effects
>nothing. Also here – nothing, and there’s a big chance that you don’t need to do this
because everything is aligned. So, if I update it, it looks great and on a smartphone, it
also looks great. Only thing is there’s no divider over here. So if I want to add that,
I can do that over here. I scroll down all the way, divider and make this blue, three
pixels and then below I want to have a margin of ten. Duplicate it. Bring it over here and
duplicate it. Update. It will be refreshed
and then there’s the divider that makes it a little bit better. So what’s next? Let me show you more. So I
go for a new area. I want to talk about my team and that is me and my wife. I want to
have one area over here and I want to stretch the section and change the height to minimum
height. I go to the style, I want to add in background. So background Type – Classic,
I want to add an image my upload files>select files and then I go to images tutorial>home
and then we are 1920 x 1080. I open it. I can optimize it; insert media and there it
is. This is me with my wife. You don’t see her right now so let’s fix that. Position
– where can we focus – center, center, or maybe top center but I want to change the
size to cover. You know what, center, center and then I go to the layout and I make it
a bit higher – 500. So then you see us, what I like also for this picture is attachment.
Fixed like that. Okay. How does it look on a tablet – fine and on a smartphone. On the
smartphone I could say custom and then like that in the center. Perfect. So for every
device you can make it pixel perfect. I go back to desktop and there we are. So,
we have one column. I want to make it two columns. I click over here and in this area
I want to play something. So I want to have a header. Okay, no link – h2 is fine, it’s
all fine. I go to style, text color is okay, typography is also okay. But I want to change
the content of course. I forgot it almost. Who we are? What we do? Okay! Then I go to
the elements. I want to have a divider over here and I change the width in pixels. Do
something like this, or you know what… until here. I bring it all a bit closer – minus
20; minus 20 – that’s not working, so minus 1, 0 minus 1, and then you can change it like
that. Okay. I go to the settings of the column, Style
>Background type: I can make it white. I go back, and I search for a text editor. I
drag it here below and I start typing – something like that. Then I want to style it a bit more.
So I click here. But I cannot reach this area. I can do it if I cannot reach something, I
do the right mouse click and I click on the navigator and here I see the sections and
I can select things and then I go there. So here I could click twice and I could say services
mobile, and here I can say services desktop. And I can close it; I can also click over
here, then I go to the navigator. I can also attach it to the right and that’s great if
you have a big screen and why do we need this? Well at this moment, I make it removed from
the side, I scroll down and it sticks with us. I cannot select this. So I go to the latest
section, I can say who we are? I can open it and you see two columns – left, right.
At the right one, we have a few elements. So I can click over here and I’ve selected
the divider. So that’s how you can use the navigator and
one other thing over here. We made use of margin that is minus, so if I would drag this
on top over here, I can almost not reach it. Well now I can, because Elementor did an amazing
update. But if I could not reach this, I could say you know what? I want to have the Navigator
and I want to change those back and then everything will be normal. So that’s how we can use the
Navigator. Let me go back to the divider. I want to change the color to blue – make
it a big thicker too. Okay. I want to have a button over here, so I can use this one:
right mouse click>duplicate or over here I hover>duplicate. I drag it here below
and I bring it to the left, I don’t want to have an icon, but I want to say: Get in Contact
and then a /contact. Okay. What I would like? I would like to have a
small area over here where you can see the background. So I click over here, I go to
advanced and then I uncheck this and at the right, I would say plus an there you see it.
Okay. And at the padding, I would like say – all sides are 15. Okay, but how will it
look on a tablet. There it can be a little bit less. So I could say 40, and on a smart
phone, I would like to say 10 everywhere, and 30 everywhere like that. I go back to
the Desktop view, and I want to make this a little bit transparent. So I go to the:
Column Settings>Style and then at the background we’ve chosen a white background, but I want
to make it a bit transparent. So I can drag this down and now you can see through it.
Update. That all looks like this. You can see through it and if you make it smaller,
it looks beautiful. Maybe this one is a little bit harder to see. So what we could do to
show you again, I could duplicate it and then over here, I go to: Advanced>Responsive
and I say “hide on the mobile.” Over here, I could say Responsive: Hide on a tablet and
on Desktop, and then here I could say Style, the white color make it less transparent.
Then I update it and I take a look. I make it smaller. I can see through it and when
I go to the mobile version, it looks like this. Perfect. I go to the editor again. I
scroll down and I want to create a new area. I click over here and I want to add an area
with testimonials. So I want to have one column and I want to drag a header in it like that.
I want to say testimonials. Bring it to the center, give it a bit of space. So I say margin
top 20 and button, okay like that. What I want to do now. I want to work with an inner
section, because right now we have one column. So if I want to have a header here at the
left and a header at the right, it is not possible. You can work within lines but a
better solution would be to use an inner section. Over here at Basic, I drag it here and now
we have an inner section. So it is a section in a section. And now I search for “Testimonial,”
I drag it over here and there it is and here we can create a text. So I say… so we have
a text over here. Now I can choose an image here below, choose an image: upload files
>select files, and then I go to Home>Testimonials and I will add them all. So CMD+A or CTRL+A
on the PC, open and I choose this one: Daniel. Insert, okay. Image size: Full, I say 300
and the name is DanielLugo, and he is a designer and his website link is https://daniellugo.com.
I can open it in a new tab if I want to and the image position – right now it is aside
at the left. I can also place it on top. I like to be aside. We can change the alignment like this. I like
it to be in the center. Then we can go to the style tab and we can change the text color
if we want to. This looks okay. I update it, but I want to take it to the next level. So
I scroll all the way up, right mouse click>copy>scroll down. So over here, right
mouse click>paste>style. So now it looks like this. I go to the section settings>style
and I want to remove the background overlay. I only want to have the gradient. So I click
over here. This is not necessary anymore. I go to style, and I make the text color white.
Also over here, at the column I go to style>background type and I make it white – like
that. I can do more things. I can go to a Border>Border radius; I can increase it.
So you see those rounded edges over there. I like it to be 15. I close this. I go to
the testimonial element and I go to Style and then to the Typography. Let me see – 20
is okay. The image, I want it to be a bit bigger, 70 or you know what 100. Then the
name – also a bit bigger: 20. And designer can be 15. What I can do now – I can duplicate this column
like that, and this one I remove. What I see they’re totally next to each other. There’s
no space between them. So I click over here: Advanced>Add margin – I say make it 10;
Right mouse click>copy>Right mouse click>paste the style so I like that. Now I want
to change this of course. So I click over here, I want to change the image to this one:
Elisa. So I scroll down and I say Elisa Dupont – and she is a photographer. It’s what she
says. Okay. What I can do now – I can duplicate this whole
area like that. And then over here, I change the image to the third one and I change the
name: Heather Andrews. She’s a traveller and here we have a wedding couple and I call them
Gwen and David, and they are a wedding couple. Of course, they don’t need have a website,
neither does Heather but it’s an option. Then I go to the section and add Style. I scroll
down and I want to remove the shape divider. So I go to bottom and I say none. I go to
advanced. I want to increase the padding top and bottom. So right: nothing, left: nothing. So we have testimonials – four testimonials.
Maybe you think there’s not much space over here. How can you fix that; you click over
here and you make this 20 and then right mouse click>copy>paste style, paste style and
paste the style. Update. I click over here. Let’s take a look. This is what we have. Beautiful!
I want to have a bit more space over there. So again, I go over here and I make it 30
and 30. You can do one other thing: if I click over here, I go to style, you’d see normal
and hover. If I click on hover, there are a few new options. I can change this to something
else – maybe a bit greyish, like that. Maybe a bit lighter; I can change the transition
to one second. The same I can do for the border. On normal it’s this and on hover, I can say,
I want to be 5. So then get this and also here you can change it to 1 second. I don’t
like it, but it shows you that you have more options. You can increase the border when
you hover, so that is what you can do and of course you can copy it and paste it again.
But I think, I rather have it like this. Copy>Paste style. So you don’t see anything when
you hover over it. Okay, so that’s how that works. New area and in a few minutes we are
going to work way faster with pre-made templates, but I just wanted to show you what is possible
with the amazing free page builder called Elementor. So over here all the new area like this. I
copy this>duplicate and I drag it like that. What I also can do, if I don’t like it I say
CMD/CTRL+Z, I can go to the navigator – navigator – and then I have who we are. Second column,
I have the heading over here. Let me see. I have two now. I can drag it like this really
easily. and I open this one, section, and then I drag
it over here. I bring it to the center and I say, “Companies we work for” and I want
to make use of the carousel again. We’ve done it before. So let me show you. I search for
carousel and there it is. I drag it here. I add a few images: upload files>select
files>home>who we work for. I open them all and I made them all the same aspect ratio
and the same resolution. That’s the best thing you can do. But it looks a little bit of weird.
How can I fix that. Image size: I would like to say medium large, like that. Slides to
show – I can say 4 and then slides to scroll – one per time; like that. Then we can say
image stretch: no. No navigation and no link, no caption and then there are additional options
– pause on hover: no. Autoplay: yes, and every 3 seconds there should be a new image over
here – 1, 2, 3 – infinite loop: yes. After the latest one, the first one appears again.
The animation speed can be a little bit slower. One second and they come from the left. We
can change the spacing. We can have a border but I think this is fine. Well this is close
to each other, so over here, I say 30 and 30. Update and let’s take a look. “Companies
We Work For” – perfect! So a few more things I want to show about
Elementor. So I go to the editor and in the beginning, we added a few buttons. So I can
duplicate this and what I can say is “Buy Now.” I want to remove the animation. So I
go to motion effects and I say: none. I want to go to the padding: none; none. What I want
to do – if I go at advanced to custom positioning, right now it says in line but there are more
options. I can also say custom and now at position I could say absolute. What this does
is the next thing. I can drag it wherever I want to – pixel perfect and if I update
it, and I take a look, I have a button over here. If I scroll down, it stays there. So
you have more freedom to place it wherever you want to place it. Update. Like that! So you can use it if you want to and I will
not use it like this. So I can change the text and I use it not as a button, so I use
this as a link and then the text is amazing. Drag it a bit over here. I go to style or
to, let me see, the padding 30 and 30 – like this. Update. So it works like that. But we
can also do something else. So I hover over here and I duplicate it. So now if another
one, and here I go to advanced … to custom positioning … custom and then not absolute
but fixed. So now, it is fixed and if I cannot find it, I can also play with the offset over
here from the left to the right and top to the bottom and I can place this left in the
corner like that. And here I can say “get in touch” /contact. I can make it a bit bigger,
large and I can drag it around like this; place it wherever I want. And now if I update
it and I refresh the page, you see it over here. But if I scroll down, this one disappears,
but this one stays over here and this is amazing, if you want to have a sales page and you want
to have a button – Buy Now. So people are reading, then they are convinced they want
to buy what you have to offer and then they don’t need to scroll anymore, they just can
click over here. So that’s amazing. But at advanced add custom positioning, Elementor
is warning us – “please note custom positioning is not considered best practice for responsive
web design, and should not be used too frequently.” So let me see, what will happen when we go
to a tablet. Well, I should drag it more down. So in order to do that, I go to vertical offset,
where is it? There it is. So then it works there on a tablet. And on a smartphone mobile,
let me see, I also want to have it over here. So I need to find it again – vertical offset,
let me see where it stays. There. So now, when I scroll to the page, you can see it.
What you also can do, if you go to Style>Background Color – you can make it green but also transparent.
So it’s a little bit light and when you hover over it, you can change it to a normal color. You also can say advanced>responsive and
hide on mobile, but I think it’s working like this. So our absolute position FerdyKorp is
amazing and get in touch. Scroll down and we hover over here, you can click on it and
you go to the contact page and we still haven’t paid one penny for this page builder and for
the theme. So I’m really impressed with what you get for the free version. So I hope you learn a ton of stuff about Elementor
and if you want to know more about all the elements, you can go to youtube.com and you
can search for “all elementor elements explained” and there you find all elements explained
of the free version and I also have all Pro elements explained. And if you go to Elementor.com
and we go to pricing, you can get elementor pro for one site for $50, three sites $100
and unlimited sites $200 and here you see all the advantages: more elements, more templates,
the pop-up builder and their support for one year and updates for one year. So you could
also buy it once and use it for the rest of your life. The only thing is that you don’t
get updates anymore after a year and the second year you get 50% discount. So that is amazing.
You have a 30 day money back guarantee and as I said before, I have a lot of tutorials
also about pro. So if you search for “Elementor pro tutorial” you have a pro tutorial where
I show you how to work with all the pro elements. But as I said before, with the free version
you can also create amazing pages like these. So what I want to do now, I want to talk about
templates. You know there’s a really great community around Elementor and people want
to offer value for the community so they create templates. I’ve done the same. So if I would
go to the about page, we can build this page totally from scratch by clicking on edit page
>edit with Elementor and then start building. What I also can do, I can go to FerdyKorp.com,
I go to templates and here you can get a lot of templates for free. You can fill in your
first name: Ferdy and your email address [email protected] and I can click on give me the package. I’m
from Europe, so I need to consent with everything. I click on subscribe and now I need to go
to my email account and I need to get the template back. So here I am at my email account,
double click and then here it says get the Elementor template back. So here’s an instruction
video, but you can also follow this tutorial. I can download the pack over here, and then
I can choose what I want to import, or I can import all templates at once within Elementor
and then I can choose over there. I rather use this way, so I click over here, download
the template pack and I like to unpack it and drag it to the desktop. So here at my
Desktop, I click on it and I can take a look at the images, the JPEGs and then below there’s
a JSON file that you need to import. This template, I can go through all the images
and if there’s something I like, I can import it. So over here About Us page, I like that.
So what do I need to do then, I go over here, I click on the folder icon and I click on
this icon to upload a new JSON file. I select it. I go to the desktop>complete elementor
template pack and I go for the About Us page. I open it and this can take a few seconds
and then I click on insert. And I want to overwrite all these settings I have on this
page. So I click on yes, and now I have it over here. So let me show you something: if
I click on the eye and I go to the home page and I click on edit with Elementor, I can
hover over here, right mouse click>copy and then on the other page, right mouse click
>paste style. You can copy and paste styles from other pages. So I go over here to style
and let me see, I want to go to the shape divider. I don’t want to use that but I want
to have the gradient. So I go to the background overlay and I click over here and I bring
this image back. I should optimize it; copy>paste, this was our honeymoon in Cape Town
and by the way beautiful place to be. Let me see. Yeah. And then I go to the layouts and I make it
400, like that. Well it’s quite easy what you can do over here. You can change the text,
you can change the style, make it bigger, change the weight. Let me see if you can make
a break like this:
– so you can decide where you want to start a new line. Then I
go to Style>Typography and I increase the line height. So that’s what you can do. Maybe
I want make it uppercase and make it bold – yeah. And then I want to go back to the
section>style>background overlay and I want to decrease it a bit. So over here, opacity
like that. We love to have fun travel and enjoy life – that’s why we do what we do.
And if I want to have the same style as a different page, I go over here to this title;
copy, paste the style. The only thing it said is also pasting the style that it was at the
left, so I need to go to content and bring it back. And now it is the same style as our
homepage. So that’s how it works. You import a premade template and then you’re going to
change the content and change the style. And in that way you can save a lot of time. Over
here this can be a text about you. You can change the name, create your own text, add
an image and that’s how easy it is. So let me see I will grab this one and then
over here, this is me. If it’s not fitting and I want it to fit then I can go to Style
>Change the Width or what I can do, I can remove this, I can go to the column settings
style and I choose the backgrounds and now I have a bit more options. So that’s what
you can do. What you see over here is get in contact with us. But then you see this code over here, we need
to plug in in order for this form to work. I click on update and over here, I go to the
website>to plugins, add new and I search for contact form 7. More than 5 million active
installs, I click on Install Now>Activate it and now if I refresh this, this is working.
If you want to know more about contact form 7, click over here and I have a tutorial about
that and we can change the background information by clicking here – Style. You see we use a
YouTube video for our backgrounds. Here it can change the links to your Facebook page,
Twitter. Here also you can add an item and here you can choose whatever you want to have.
There’s a lot and then can paste the link below that. So that’s how easy it is. It will
save you a lot of time. So I’ve shown you how to create something from scratch. I’ve
shown you where you can even learn more about Elementor using the videos on YouTube I’ve
created and I have shown you how to import a premade template and adjust it to your wishes,
and how to add a contact form 7 element. So if we take a look, this is how it looks.
About Ferdy, About Anna – get in contact with us. So we can do the same over and over again.
If I go to services, I can do the same. I can go and scroll over here or I can go to
FerdyKorp.com, click on templates and then here /all. Then you go to all the elements.
So if I want to go to complete pages, I click over here and then I see all complete pages.
I’m trying to add pages every now and then. So I can click over here, on the image and
then I see how it looks on a normal screen, on a tablet and on a smartphone. If I like
it, I can click over here and download this template. Then I need to unzip it and then
I go to my website>edit this page>edit with Elementor. I click over here and then
over here select a file. I go to the Download folder and there it is – Services page, V1.json.
Open it, some time this takes 20 seconds, so we need to be patient. There it is. Insert:
yes, and the great thing about this is I used anchor links. Let me tell you a bit about
it, if I click over here it goes to anchor photography. So if I take a look at the result,
I see three services. If I click on photography, I scroll down a bit. If I click on videography,
I scroll down even more. How does it work? Here we make use of an anchor link and then
over here, we make use of a menu anchor. So if I place this over here and I call this
photography, that means that when you click over here and place this before photography
and you call that the link within the same page, then you go over there. So over here
it’s called videography. So here’s the link – #videography etc. etc., and get in contact
when people click on getting contact, they scroll down to this place. And if I think
hey, this text is dark, I click over here. I go to style and I say text color should
be white. That’s how easy it is. Update. So if you have a website you want to make, please
let me know if there’s a certain website you want to have and you would like to have templates
about, so I can make them. Because I want the library Elementor.ferdykorpershoek.com
to be ten times as big as it is right now. So a lot of people can learn how to create
a website really fast but they also learn the basics as I’ve just shown you with the
home page. So what I will do, I go to the contact page; I close this, close this, close
this and this and this one. Okay. Edit page>edit with Elementor>click over here and
now I can also search for contacts over here. And there are a few Pro versions, so you need
to have Elemental Pro for it. But this one is for free. So I click on insert, so you
can also get elementor templates from within Elementor and now I change the color to this
one and I can change the background image but I like it, but what I want to do, I go
to style>background overlay>gradient. I get this color and then this color. I want
to change it to 90 degrees and change the opacity a bit. Then here I can say make it
white and over here at Advanced>margin, make it a bit smaller. At the content, I change
the color to white, remove the transparency… like that. Then over here, I can change the color to
this one or two this one. Also of the title. So I go to content and I think that should
be also blue and then I can say, right mouse click>copy>paste style and paste style
and that’s it. Also here with this color, of course you can change the address; copy
>paste style and pastes style. Well I can change this to Los Angeles and then I can
say Beverly hills and then I can zoom in. I can change the height prevent scrolling,
over here I change the background color to blue. I go over here and then add style and
make the primary color white, and then the secondary color blue – like that. If I want
to change the height, I click over here on the section, advanced and here I say 30 and
30. Update and that’s how we can change it. Wow! so what we are going to do now. We’re
going to take a look at the blog page. So I click over here, but we need to create our
first blog post in order to see the blog page over here showing blog posts. So I hover over
new and I click on post and as you see over here, we can create blog post with Elementor
but I also want to show you a bit about Guttenberg – the new editor in WordPress. The first thing I want to do I want to create
a title and the title is, “As a Man Thinks in His Heart, So is He,” and when you write
a title like this, this is really important for the Google search results. So I would
use some keywords – well there’s a known saying from the Bible so I think this is okay as
a text. So when I would copy this and search for it, you see in the title people have this
also as man thinks in his heart, “As a man thinketh,” then I click on publish, and publish.
Now we can view the post and this how it looks. The title, we can leave a comment, there’s
no category and it’s written by Ferdy Korpershoek and people can leave a comment and as you
see over here, Elementoire.com then this URL, which looks really beautiful in my opinion. I click on edit post, and now I will tell
more about Gutenberg. Well we start with this right area before we start to create the blog
post. We have published it already. I can also say over here, I want to publish it tomorrow
and then when I click on update, it will be scheduled. That means that it will be uploaded
in 24 hours – March the 16th. So in that way you can make 10 blog posts in one day and
you can schedule them for every Friday for instance, and then you have blog posts for
the next 10 weeks. I like to keep it at the 15th, and now I can publish it again instead
of schedule. Close this, it is visible for public. You
can also say make it private or password-protected. We can move it to the trash. Here we see the
permalink, I think this is perfect. Then we have categories. At this moment it says Uncategorized.
I want to change it to self-improvement like that. Now I uncheck this one. So now the category,
if I update it and I view this, is self-improvement. If I have a lot of blog posts about self-improvement
and I click on self-improvement, I will see all the blog posts that have the category
self-improvement. So in that way you can keep it organized. You also can have a subcategory. So within
self-improvement, I could say Bible – because this is a Bible proverb, and then the parent
can be self-improvement and now it looks like that. But I don’t want to use that, so I close
this and then we have tags or you can just find a few keywords. So I can say proverbs
and that can be good for the search results – Hard thinking. Then, we should have a featured
image and that image will be shown on your website at the blog post: Upload files>select
files. I go to images tutorial>blog and here is the text and here is the image I want
to use. In this image and a lot of other images I use are from pixabay.com. You can use them
for free and you don’t have to give credit for it. Open, of course I optimize it like
that, copy it and paste it. If I search for this at the images there’s a chance you will
find this image in a few months. So always optimize your images. Select it. Okay. Then
we have an excerpt, that can be a small paragraph that says something about the blog post: “In
this blog post, I will talk about the relation between your thinking and your life.” Something
like that. Discussion – do we want people to comment or allow pingbacks or Trackbacks.
Post attributes – kind of template I’ll leave it as this and then with the Astra settings.
So if I would update it and I take a look over here, right now we see this image. We
see the title, leave a comment and you see this header over here. If I would like to
say, you know what, over here I want to have a right sidebar and I want to disable the
title and the featured image and I refresh the page, then you see that is all gone. So
per page, you can change things over here which is really nice. I bring everything back
so that’s it. A few more things, here we can create our
blog post and what I can do, I can click over here and then I have more space to work on
my blog posts. So I start writing. So over here I have my first paragraph. Now if I hit
enter, I can start typing a new paragraph. You see when I hover over here, it is one
area and also here. So this is a paragraph as you see over here and this one is also
a paragraph. If I want to continue typing over here on the new line, I can say SHIFT
+ ENTER and then I can continue typing in the same paragraph. So that’s the difference:
SHIFT + ENTER is a new line and enter is a new paragraph. So, I start typing here again.
So right now, here at the right I have an arrow up. I can change those paragraphs. If
I click over here you see they’re changed. I want to bring this back here below like
that. So this is a block called paragraph and this is also a block called paragraph.
But there are so many more blocks you can have. If I hover over here on the edge, I
can see a plus (+) icon and there I can add a block. So if I click over here, there’s
so much more than paragraph that you can add. You can have custom HTML, an image, a list,
a gallery, a heading, a quote and much more. Than we have the common blocks, formatting,
layout elements, widgets and embeds. So you can do so much more than just typing. So I
want to add an image. So I click here on image and you can also search over here. Image and
I click and I can upload one or get it from the media library or from a URL. I click on
upload and I go for “As a man thinks in his heart,”; I open it and now it looks like this. So a paragraph-image-paragraph and you can
change it if you want to like that. But what I would like to have is that this text is
wrapping around this image. So if I click on it, I can make it smaller and it maintains
the aspect ratio. What I want to do now, I want to wrap this text around this image.
How can I do that? I select the image and I click here. Align it to the left or to the
right and it’s not wrapped around it but you see the images right and the text is left.
So if I would make this text bigger, paste and paste, it goes around it. So I click on
update. I refresh the page. Now it looks like this. You cannot click on it. So I go back.
I will remove the extra text and if I want to have a new paragraph, I just click here
and say enter and I can start typing again. Now I want to style this. I click over here
and I change it from a paragraph to a heading. Then I can choose

,

, or

; why
not

? Because the title is already

, it can have only one

in one page. So
I like this. Here are hover over here, and then click on the plus (+). I want to add
an image>upload>smiling people and I want to align this one at the left and I want to
make it smaller like that. It can also have a caption over here – “Don’t worry, be happy.”
Okay. Update. Okay. Update. Let’s see how it looks. Refresh.
I think this looks nice. Okay, what I want to do now, over here I press ENTER and I start
with a new title: Five Steps to Get a Better Self-image. Enter again, and I click on the
plus (+) and I want to have a list. So I click here and I have a list with a bullet point.
Okay. Over here, I want to change it to a title, a heading. Update. Let’s see how it
looks. Perfect! So we made a blog post like this and I want to end with a video. So I
go to YouTube and I want to talk about mindset there, this video, I want to use it. Copy
the link address. Today I watched my own video again, I think it’s a great video where I
talk about my journey how I develop myself as a person. I click on insert from URL, I
paste the URL remove this and I say ENTER, and there it is. I want to bring it here and
in this video I’ll talk about how you can change your mindset and how that will change
your life, because as a man thinks in his heart so is he. I saw myself as a bad entrepreneur and as
a people pleaser and I became one, and now I changed. So you can watch this video if
you want to and of course continue with this tutorial. So that’s amazing. You can also
do this with Elementor as I said before. Let’s click over here. We discussed all those options
over here. And over here there are a few more options you can use. We can use the top toolbar,
that means if you click over here, you see all the information over here so you don’t
have to hover over here. So if I would turn this off, you see it here. I like it to be
over here. So over here I can click and then I align it to the right or to the left or
I make it bold, you also can use spotlight mode. So when you work here or here, the rest
becomes less visible and we can work with full screen mode. So if I click over here, then it is totally
like this and to be honest I don’t like the old light modes. So let’s do a few more things.
You can highlight words. So let me see. I remove this. Maybe, I want to focus on earth.
So I can click over here and I make it bold and italic. Yourself, I can select it and
I can place a link and I can say go to https://yourself.com and then it becomes a link. Maybe you want
to underline something – this whole sentence or make it italic – so I get a few words I
like to make bold. I can also use CMD+B or CTRL+B on the PC and that’s how you can roll.
So let me see; refresh; this is our blog post. What I would like to have on a blog post is
a sidebar at the right. So I click on customize, I close this, I scroll down a bit and I go
to layout. Then I go to sidebar and at the blog posts, I want to have a right sidebar
like that. I think this looks amazing. Beautiful! So I publish it. I close it and this is our
first blog post with an image, the title, we can leave a comment the category self-improvement
by Ferdy Korpershoek and it looks beautiful. And here people can leave a comment. Okay
that was our first blog post. I will create a few more. But if I go to the blog page,
you see an overview of all the blog posts, but we only have one: “As a man thinks in
his heart so is he.” And here you see this excerpt text. So if I would go to the first
alinea, I would copy it and I edit the post. I click over here to document, and to excerpt
and I place it here and I update it and I refresh the blog page. It looks like this. So that’s how you can create a blog post using
Guttenberg. I will create a few more and I will be back with you. So here I am, with
a few blog posts. I’ve made them all with Guttenberg. So if I click over here, you see
it looks really nice. So I want to do a few things that I could not show you before. If
I click on customize, we can go to layout>container and the default container is full
width contained. But for the blog posts we always had boxed and what you see is that
it is boxed. So this blog post is in a box. And besides that, you see this grey area and
this is also boxed. I think this look really really nice. You can also change that if you
want to. You can say content boxed, so only the content here is boxed and this is not
boxed. Or you say, you know what? I want it to be default, that means that it will have
the same settings as over here. So one white background and then it looks like this. I
like it to be boxed and also for the blog archives, I like it to be boxed. So the blog posts are the individual blog
posts and the blog archives is the blog page with an overview of all the blog posts. So
I like it this way. I click on publish and I close it. Now I want to take a look at these
widgets over here. Let me see, you see them on the blog page and you see them at all the
individual blog posts. So how can we configure this. You see search, recent posts, recent
comments, archives and categories and meta. Well, if I don’t want it work if I want to
configure this, I can hover over here and I go to widgets or here at the dashboard you
can go to appearance and widgets. So here you see the main sidebar and if we
take a look at our website, at the blog page, you see the search widget over here. Then
the recent posts, recent comments – you see them all over here. So if I want to configure
this, I don’t want to have a search bar. So I click on this arrow down and I click on
delete and now if I refresh the page, it is gone. We see recent posts. I don’t want to
have recent comments because my website is new and I have no comments yet. I don’t want
to have an archive. I do want to have categories and I do not want to have meta. So I refresh
it and that looks like this. I can also change the order, just by dragging it and now it
has changed. That’s how easy it is and as I said before if I click on a category, personal
for instance, you see all the blog posts that have the category personal, and those are
two. So that’s really nice if you have a big website. It creates some structure. I bring
it back and maybe you want to add a new widget, well you can find them over here. You can
add a gallery, you can add some simple text. You can add a tag cloud, a video, RSS; but
you also can add something else that’s not here using plugins. So I go to plugins>add
new and I search over here for Facebook like box. And I go for the “Easy Facebook Like
Box,” more than 100,000 active installations. I click on install now and I activate it.
I click over here and then I go to appearance>widgets and now over here you see the Easy
Facebook Like Box. So I can drag it over here or I click over here, and I can select where
I want to add this. I want to add it to the main sidebar so I click on add widget and
there it goes. I can say, “Follow us on Facebook,” and then I go to my Facebook. Let me see,
this one. I copy the link and I paste it and everything else is fine. I click on save and
if I refresh the page, you see it over here. If you have not, please like this page and
feel free to subscribe to this YouTube channel, it would help me a lot. And if you want to,
you can like this video. Thank you for that. That’s a great way to support me. So I go
to the blog page and I close this and I want to configure this a little bit more. So I
click on customize, then I go to layout, blog and this is the blog archive. With an overview
of all the blog posts, so I click over here and what do I want to show over here? Do I
want to show my excerpt, or the complete text? If I would say full content, you see the whole
blog posts. So if you want to, you can do that. I don’t want that. I want it to be an
excerpt. Do I want to show this image? I can turn this
off or on. So all those settings over here, I can turn them on or off and if they are
a little bit like this, they are not visible. So I do want to have to date : March the 15th,
2019 and I want it to be over here and at the top. So you will see it over here. I don’t
want to show comments, I do want to show the category and I don’t want to show the author.
First author, then the category and then the publish date, like that. Block content width,
I can make it smaller if I want to. So it’s a bit smaller but I leave it at default. Then
I click on publish, I click on a blog post, for instance Elementor page builder and there
you see the whole single blog post. So over here I go back and I go to the single post
and here we can do the same. If I uncheck this, it is gone and I want to show the title
and blog meta. So here I want to show no comments, again the publish date, author, and categories.
And here it says ‘Uncategorized’, so I should give it a category. And here you can also say, make it smaller.
Publish. Close it, and now it looks like this. Our blog page looks like this and our blog
posts looks like this. That is nice, but we can also do a totally different. If I would
go to the dashboard and I go to settings>reading. It says over here that our post page is the
blog page. If I click on select that means that there will be no more blog posts on my
blog page. So over here, I see nothing. I can create my own blog page using Elementor
which gives me much more freedom. So I click on edit the page, edit with Elementor and
this gives me so much more freedom. So I click on the plus (+) one area and I go to the style,
gradient, color is blue; the second color is lighter blue. I change the angle to 90
degrees and minimum height can be 250. Then I go for a heading, I drag it over here and
I say blog. I change the color to white and I bring it to the center. And I make this

. Okay, I update it and I can come back now to all the elements, but there is no recent
post element and I want to show the recent posts over here. So how can we fix that. Well
I can go back, clicking here exit to the dashboard and I want to add a plug-in. I click over
here and I go to plugins, add new and that’s great thing about the WordPress and about
Elementor there’s a big community of people that are working on all these amazing plugins
and extensions. So I search for add-ons elementor. And I search actually for essential add-ons
for elementor by WP developer; more than 100,000 installs and you also can take a look at other
things. So a lot of people are creating free tools that will help you get even more out
of Elementor. So I click on Install Now, and I activate it – no thanks. I click over here
and I go to the blog page and I click on edit with Elementor. Now if I scroll down, general, and now you
see essential add-ons and there are some amazing add-ons over here. Well, why do people do
that? Why is elementor for free? Why Astra for free? Why is this for free; these essential
add-ons? Well let me show you. WP Astra – it gives you something for free. It’s called
“freemium,” in the hope that you will upgrade to their Pro versions. So if I click on pro,
you get even more options. So they give a lot of great stuff for free, so you see how
the product is and then say do you want more? Then you can get the pro version. The same
goes for Elementor.com – it is free but if you want to take it to the next level, you
can get the pro version. The same over here, exit to the dashboard. Go back and here at
essential add-ons, you can upgrade to the pro version. So that’s how it works; premium
elements, whoa! those are a lot. I should make a tutorial about this. This is amazing.
Well, there will be a tutorial about this, but we will make use of free tools in this
video. So, one more time, I go back to the blog page and I click on edit with Elementor.
I close this, I close this and I want to take a look at the essential add-ons. And I want
to go for a post grid. So I drag it over here and look at that. I will configure this. The
source our posts, I can also say pages or a minimal selection – I like it to be post.
And I can say I only want to show posts of the author. Well, there’s only one – that’s
me. So I don’t choose this. I can select only a certain category. So if I would say personal,
I will only see two blog posts. But I want to show them all. I can select them based
on text or exclude certain blog posts and I want to show three per page; like that.
Or you know what, I want to show them all. So I say ten. I don’t want to have an offset. I want to
order them by date – descending, and then we go to the layout settings. The amount of
columns; I want to have three columns like this. Do I want to show “Load more” button:
no, do I want to show the images: yes. I want the image size to be bigger. So the quality
is better and I like to upload everything in the aspect ratio of 16:9. So otherwise,
this image would end over here and the other one over here and then you get a weird look.
I want to show the title. I want to show an excerpt and the excerpt words are a thousand.
Let me see what will happen. Yeah, then you see the complete excerpt. So one is longer
than the other – no problem, and do I want to show metadata: yes. Where do I want show
it? At the header, or at the footer. Well I think at the footer is great. So that’s how it looks. What you also can
do – I duplicate it. I drag this here below and I can say blog version 2, and then here
below I drag this one. Now it’s with a timeline. So I can configure this, show 10 posts, layout
settings, use some colors and the quality of the images is quite bad. So, I go to content
>layout settings>make it bigger or full. So that’s how you can show it. And I click
on update. I will take a look. So this is what I like and this is a second option. So let me go back to this one – style, color
typography, I want make the header blue. I can align everything in the center and I can
make it bigger, I make it capitals – whatever I want to do, I can do that. Then I go to
the excerpt, this over here. I think that is fine and I think this can be a bit bigger.
So I go to the meta style and it will be bigger and bold and smaller. Like that. Update. If
I want to see my image over here, I can hover over here, click on edit my profile, scroll
down and change my email address to my email address that is linked to my Gravatar account.
You can also add one over here, if you want to see a tutorial about that click over here
and you will find it. And I click on update profile, then I need to confirm it and I’ve
done that if I refresh the page, you see my image. So now if we go to blog – the blog page, you
see this. That looks so much better in my opinion and as I said before, I want to show
you one more time. Right now you see 2019 will be an amazing year. I can change the
date I have published it. So I click on edit post, right now it says I published it March
the 15th and I want to change that to the first 01 of January at 12 o’clock. Update.
What you’ll see, right now it’s first. But now, it’s the latest one because this is based
on the date. So here it says January the 1st 2019 and here March the 15th. So that’s it
about the blog page. What I want to do now before I go to portfolio, I want to take a
look at the footer area. We will take a look at footer widgets. So I go to the home page.
I click on customize and I scroll down all the way and then I go to layout>footer>footer
widgets and I only can have four footer widgets. I can not have three or five. This is it;
but that’s okay. I go back. I go back. And I go to widgets>Footer Widget Area 1. I
can say something about myself. So I have a text. I want to go for some dummy text,
dummy text editor and I copy this. So I just will see how it will look, like that – a little
bit less and I can also have a Second Area Widget. So I search for image and I want to
show my logo. Add an image Ferdy and then I can change the order. Then I go
for the Second Widget Area and I go for the Facebook Like Box. My facebook page is Ferdy
Korpershoek and over here you don’t see it, as you see, but when I publish it and I close
it, it will be here. Then the third one I would like to have a
recent post area: recent posts. But I don’t like the way this looks. So I delete it, I
click on publish, I close this and I close this. Now you’ll see it is here. I go to the
dashboard>to plugins>Add new>Recent posts widget image, and recent post widget
with thumbnails. So I click on install now. A lot of installs and a lot of likes, activate
it. So now we go to appearance>widgets. I go for Footer Widget Area 3, and let me
see where it is. Recent post with, yes thumbnails. I go for Footer Widget Area 3, add a widget.
So let me see. Most recent posts. I want to show five, open in the window: no. No. I want
to keep it really simple. I’ll show all categories, show a thumbnail. I save it to see what will
happen. Let’s take a look. And because this is longer, I can also say I want to show three
recent posts instead of five. And then the latest one, what do I want to show? I want
to show a site map. So over here, I want to have a site map or a menu: Navigation menu
– widget four, and then I can say site map. Select the menu>main menu, save it, refresh
and then at Facebook I would like to say, “Follow us,” and at widget area one I want
to say, “About us.” So everywhere it is a title. Of course, I
need to save that, also over here. Perfect! I want to customize it. Close this and I want
to go to the colors of the footer area: Colors>Footer Widgets. Let me see – I want to make
it this color actually. So I grab it using the color pick eyedropper, copy, escape and
the backgrounds is like this. Then I go to the footer bar>background color
and I make it a bit darker, like that. Perfect! I publish it. I close it. And it looks like
this. Okay! For those who want it, we will add a portfolio. I click over here. So in
order to activate a portfolio, I go to the back end, to plugins>add new, and I search
for “Portfolio for Elementor.” It is by WP Pug over here. Install Now; then I activate
it. And now we see here at the left portfolio for Elementor. So I can create a new item
and actually it’s just a normal screen of WordPress. Well I want to change it. I want
to enable Elementor to do it. So I go to Elementor>settings and then here post types and general
I select portfolio for Elementor. Save the changes. So now, here at portfolio for elementor,
I can add new item and I can use Elementor. So I can say Wedding Daniel and Lea. I add
new category, it’s called photography and also here, I can have subcategories, but I
don’t need them and I want to have a featured image. So I said it, upload files>select
files and I’ll select all the files of this portfolio item. So I go to folder 3>portfolio
photography Daniel and Lea, and I will select everything, CMD+A or CTRL+A on the PC. I open
it and I select this as my featured image. Okay. Then I publish it first and then I click
on Edit with Elementor. And it says, “The preview could not be loaded.” Well that can
be the case; in that case you should go to settings>permalinks>post name>save the
changes and another time. Now I go to portfolio for Elementor. I click here and I click over
here – Edit with Elementor and now it should work. I click over here so I preview the changes,
but actually I want to go to the blog page>Edit with Elementor and what I want to do,
right mouse click>save as a template and I call this Header. I save it over here. I
close it then I go over here. I click on this folder. I go to my templates and I insert
the header: yes. And I call this Wedding Daniel and Lea. Then over here I want to add a gallery. So
I search for gallery>image gallery and I add all the images. Select this one and then
hold shift and select this one, create the gallery. I can change the order – reverse
the order, Insert gallery. Change the image size to medium large, columns: three. You
know what, large and I want to use the lightbox and I can also say I want to have a random
order. Okay. I go to style, I can change the spacing – 15 is okay. You can increase it
decrease it; 15 is okay. We can have a caption but I think everything
is okay. I can click over here. I update it before I do anything else and I can go to
the global settings and then here I see lightbox. Image lightbox: I want to turn it on. Enable
in the editor: no, because then if I click on the image, I open it. I don’t want that. So again over here global settings Lightbox,
enable, not in the editor but I can change the background color, the user interface color
and the hover color. So if I take a look over here, now it works and I can navigate through
all the images. So I really like that. I click over here again, content, I don’t want to
have a random order about default, but over here I want to change order. I want to bring
this one here below because that’s the longest image we have. Like that. Update. And we can
take it a step further. Now I want to duplicate this area and drag it here below and I say
related portfolio items. Then I go over here, I scroll down to essential add-ons, and I
go for the post grid. I drag it here below in a new section and I change the source from
post to portfolio for Elementor. We only have one but I can configure it. So portfolio category
photography, now I want to show three posts and the layout settings, I want to have three
columns, show the image and everything else. I don’t want to show no title, no excerpts,
no meta; you know what – may be the title. Then I go to color>typography – I make this
blue I make centered and a bit smaller like that. Perfect! Update. Now I want to save
this page. How can I do that? Save options and I save this page as a template. I call
this portfolio photography. Save it and then I close this. Exit to the dashboard and I
add a new item Montana Lisianthus and this is the category Film. I want to have a featured
image, this one. Then I publish it and I edit it with Elementor. What I will do now to save
some time, I click over here – my templates>portfolio photography, I insert it: yes,
and then over here I select Film. So in that way you see related portfolio items for every
category. I need to change this to Montana Lisianthus and I want to remove this and I
want to add a video. So I search for video, then I need to grab the link>portfolio>film
>Montana and I grab the link from Vimeo, copy it, the source is Vimeo and I paste this.
I don’t want to show all this stuff, just like this. Perfect! Update. Now I will add a few more portfolio items
and then I will be back with you when I have nine portfolio items. So over here, we have
nine portfolio items and if I go to the website, to portfolio I see nothing. So I edit the
page, I edit it with Elementor and over here I search for portfolio – there it is. I drag
it over here and there they are. So if I update it and I take a look, this how it looks. And
when I click on it, it looks like this. So over here – related portfolio items are video
related. So if I click over here, I see another video and if I go back to portfolio and I
click over here, I can see the images I can click on it and scroll through them. And over
here I see related photography portfolio items and also here. So that looks really beautiful
in my opinion, but we can take it a step further. I click on portfolio and I go to Elementor.
So right now, number of projects to show: 12 is okay. Do I want to show category filter:
yes, and there it is. Use the item margin; if I would say – no, there’s no margin, maybe
you like that. The amount of columns: three, grid style boxes or masonry – that means when
you have a different size for instance over here, it will be longer. But what I don’t
like is that there is a gap over here. So I say boxes, and I’ll leave the project details.
Advanced – no. Perfect! So update; refresh. What we can do now – we can categorize everything.
So if I only want to see the film related portfolio items, I click over here. If I only
want to see photography, I click over here and if I only want to see web design – I click
over here. So that’s how it works. When I hover over it, I see the title and the category.
So if I go to the home page, I want to edit it with Elementor. i want to scroll down and
over here I want to click here and I want to go to my templates and import the header,
yes. Okay; over here I want to say recent blog posts. I go over here, close this, close
this. I want to add the EA post grid, drag it here below and I want to have posts as
a source: three posts. And at the layout settings three columns, like this. And what I can do,
I click on the preview changes then I go to blog>Edit with Elementor>right mouse click
>copy>right mouse click>paste style and now we’ve changed the style. So from here to a different page, isn’t that
amazing? I want to make the title smaller, so let me see. Style, color and typography
and I’ll make it smaller like that. And excerpt, I want to get rid of that. So I don’t use
it. Layout settings – where’s the excerpt? No excerpt. I can place everything in the
center if I want to. Here’s the title, over here. Like that. I go to the section settings
and here at padding, I say Ferdy and at the right zero and at the left zero, then I duplicate
this area, I make this blue or this blue over here. I want to make the background white.
I can also say it over here – white. I remove this. I call this recent portfolio items.
I search for portfolio. I drag it over here, show three projects, no filter. Use margin
and it is okay – update. Now I go to the home page and it looks like this. This is the website
we have made recent blog posts, recent portfolio items, nice footer. The about page where we
used a template and we adjusted it, we got the plug-in contact form. Same goes for services:
we imported a template, we have the portfolio page, we can filter things. And we have the
blog page with two different ways of how to display it – actually three, because you also
can use the Astra settings and the contact page. So what is next? If you have questions, you
can leave a comment on YouTube, or you can go to Facebook.com a search for Elementor
community. You can join all those groups and ask questions over there. If you want to know
more about SEO, you can search for Ferdy SEO or take a look at the description. I have
two tutorials about it and they are from 2017, but they are still great and I will make a
new one meanwhile. You can learn more about MailChimp, or you can learn more about how
to start a business from scratch and that’s called “byobas ferdy” and there I’ll talk
about how to develop a business mindset, how to find your niche. Create an instruction
video like I do. So there’s a lot more that you can see. I want to thank you for watching
this video. You have made an amazing website and now you can make websites for a living
if you want to. Good luck with everything you do. Feel free to like this video, feel
free to subscribe for more upcoming videos and then you’ll see me next time. Bye.

92 Comments

Add a Comment

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