Hi guys, my name is Ferdy and in this video
I will show you step-by-step how you can create an outstanding website using free tools. I'm
talking about the WordPress, local web hosting, the free page builder Elementor, the free
theme Astra. I'm talking about free images and free plugins, and besides that I will
show you how you can create your own logo.
This tutorial is for people that want to learn, how to create a website step by step and this
tutorial is for people that want to create a website really quickly without spending
too much time and without spending money and the reason is because I will show you how
to import complete pages using the Elementor page builder. We have a library with all kinds of sections
that we have made and you can import them with a few clicks. There you can adjust the
import of pages and that will save you a lot of time. However I want to be upfront with
you there's one thing that costs money. When you want to get your website live on the internet,
so it will be public for the whole world then you need a domain name and web hosting. A domain name and web hosting cause money.
If you really don't want to spend money, I will show you how to create your website on
your own computer and in the end of the tutorial I will show you how to migrate your website
from your local computer to web hosting. So you can follow along without spending $1.
The only thing with a website on a local computer is that it is not public for the whole world
to see it or that you need a domain a web hosting.
This is the website, we are going to make.
We're going to make our own logo using canva and we use the Astra theme. We have a nice
menu and beautiful animation over here with our services and a call to action. I will
show you how you can make this page using Elementor but I will also show you how you
can import it with a few clicks, if you just want to make a website and not want to learn
how to make a website. We have the about page, a nice hover over here. I'll show you how
to get beautiful images for free, like these how to put a video in the background, how
to create a contact form, social media icons. I will show you how to make the footer widgets,
some text, the Facebook like box, Instagram widget and a recent post widget. We have a services page and also this one
you can import with a few clicks and then you are done. I'll show you how to create
a portfolio page with portfolio items based on category, and if you click on it you can
see a video or a photo or a website. We have the blog page. I like it really much with
the Astra theme, you see everything is in boxes, recent post box, like us box, a follow
us box and here you see all the blog posts beautifully displayed.
You can decide if you want to show the title, what kind of Meta information you want to
show, if you want to show the featured image, a text. If you click on the blog post you
can decide what you want to show over here, if you click over here you open it in the
light box. I will show you how to create a blog post, highlight the words, use headings,
use paragraphs, import images, import videos style your website with colors.
I'll show you how to leave a comment, how to reply on a comment. You see everything
looks really clean and all this stuff is made with free tools, free images, free logo, free
theme, free page builder then we have the contact page, so that people can get in contact
with you and a great thing about the tools we use is that it is responsive for every
device, so if I make this smaller here appears a menu, with a sub-menu, make it even smaller
and then look like that. So you can adjust everything for every device, and that elementor.ferdykorpershoek,
you can download parts for your website or complete pages, so for instance complete pages,
click over here scroll down, download it and you can import it into your website. So, for who is this tutorial, for people who
don't want to spend thousands of dollars on a web developer, but just want to do it ourselves
for people who do not have much time because I will show you how you can do this within
a few hours. It is for people that have never made a website before and if you start learning
how to create a website, why not start with a tutorial that will show you how to create
an amazing website and it is for people who want to have the flexibility to change things
on the website immediately when they want it and not have to wait for a web developer
to do it for them.
When this video is valuable to you in any way please like this video and you can subscribe
and then click on the notification icon and you will be notified when I upload a new video.
If you have any question or feedback or comments, please leave a comment in the comment section
and I do my best to answer all the comments, so without further ado let's create an amazing
website.
So what's the plan, first we need to get domain name and web hosting or we need to create
a local website on our computer, then we need to install WordPress. After that we install
the Astra theme and the Elementor page builder and then we are going to create our amazing
website.
So we want to create a WordPress website. We can do it on our own computer using server
press and in that way you don't spend money, but if you want to get a website live on the
internet with a domain name and web hosting then you can go to webhosting125.com. This
cost money, if you don't want to spend any money then go to minute twelve to twenty eight
second, there I will show you how to get web hosting on your own computer, but then only
you can see your website, you cannot share it with the world. So it's up to you, if you want to get a website
live with a domain name and web hosting then go to webhosting125.com and click on, click
here to go to SiteGround and here we are SiteGround is amazing. I host all my website here at
SiteGround and it is in my opinion the best web hosting provider there is and that is
not only my opinion, if you take a look in popular Facebook groups about web hosting
SiteGround's comes up number one every year. They have a great live chat and you can call
them. I had a few issues so far and all those times in the live chat they solve it within
five minutes, so that's amazing and if we scroll down you see three packages where you
can choose from. The first one is Startup that is if you want to start with only one
website then you have 10 gigabyte of web space, it is suitable for 10,000 visits per month
and you have a really fast website. If you want to create more than one website or you
have more than 10,000 visits per month then you can go to GrowBig and then you can have
multiple websites, what does it mean you pay $5.95 per month but you can have unlimited
domain names. So domain name costs around $12, so it could pay $5.95 per month and have
10 websites up and running and you have more gigabytes and you can have more visitors.
If your website is exploding with visitor than you can to go GoGeek and actually I hope
you will get to this point because that means that you have a lot of visitors.
I can give you a discount of 60% and I would
start with the Startup plan because you can always upgrade later, so I click on get started.
We can register a new domain and if you have a domain already you can click over here and
fill in that domain name. If you would say Facebook.com and proceed, it would say error
you have chosen an invalid domain name, that is because Facebook already exists, but if
you would say Astra Elementor proceed, then it works, congratulations domain Astra Elementor
is available for registration with your hosting account. So we need to fill in some information my
email astra@ferdykorpershoek.com, I can choose my own password and fill in my client information,
my first name, my last name, my company, my city and address
and then your VAT registration number, this is important because using this you don't
buy taxes so it will be subtracted from your total amount you have to pay. I scroll down
at my payment information. I want to pay using my credit cards so I fill in my details, my
billing address is the same as given in the contact information, my plan is Startup, my
period is 12 months. I scroll down, I don't need domain privacy,
I don't need a SiteGround scanner and the total amount is $59.35. I confirm that I've
read and agreed to the SiteGround Terms of Service and when you click over here, you
get a web hosting and I get some credit for that so thank you that helped me to create
those tutorials, so I click on Pay Now and the great thing about SiteGround is that your
website is live immediately. At all other hosting companies where I tried that, it did
not work yet to wait for 20 minutes or an hour or sometimes two days, but right now
our website is live, so I click on proceed to customer area and there it says, SiteGround
sales receipt. Welcome to the SiteGround account setup wizard. I don't need any help because
I will show you how it's done. I proceed and there I am, now I need to go to my accounts
and as I said before you can upgrade later, so if you click over here you can upgrade.
Now you can go to the C-Panel, remember my selection proceed.
So we completed step 1, we have a domain name
and web hosting. Now we need to install WordPress, so I scroll down and it says Auto installers
over here but also here WordPress tools, you find the WordPress installer, click over here,
you need to verify your account, if you don't do that within a few days your account can
be eliminated until you click on this link, so I click on this link and I approve it immediately,
I say verify information and that's it. Now nothing can go wrong, I scroll down and I
click on "Install Now", my protocol is HTTP and this is the website I want to install
WordPress on, you can also say install this website on Astraelementor.com/new but I don't
want it, I want to install it on the root of AstraElementor.com. My site name Astra Elementor, site description
you deserve to be seen, that's the site description it is not shown on your website but you can
use it if you want to, your admin accounts username, I like this one, my password is
fine, my admin email. The language of my site I want it to be in English, you can choose
a different language if you want to and then I scroll down and I click on install and it's
saying that it can take between 3 and 4 minutes but it's not true, it will take around 10
seconds and then your WordPress website is installed. There it goes and the great thing
is if you click over here now, your website is live already, it is amazing, that is the
only web hosting company where I've seen this. A few minutes ago we bought a domain name
and web hosting, a few minutes later we are for website live, everybody in the world that
goes to AstraElementor.com right now sees this website.
Now we have installed the WordPress, only
I really don't like this website, how it looks. So we are going to change that, I can go back
over here, this is the front end this was people will see, but we also have a back end
and there we can configure and edit our website. So you can click on this link and then you
have WP admin behind it and now we are in WordPress. I close this, so this is the front
end and this is the back end. If you want to create a website on your own computer so
you don't have to pay for web hosting and a domain name then go to serverpress.com and
this helps you to create a website on your own computer if you are using a PC or a Mac. I click on download and you see desktop server
premium, desktop server limited and we will go for the limited one, it is free, so I click
on "Add to Cart", price is $0, I can fill in some details over here, my first name,
my last name, my email address, I agree to the terms and I say free download and there
it is. I can download it for the Mac or for the PC, I'll go for the Mac since I'm on a
Mac. I click on it, like a thank you email so I go to the file, I just download it. If
you use this then you don't have to spend $1 for this tutorial which is amazing. However
if you want to make your website live then you need to get web hosting and the domain
name and I instructed you before how you can get that and in the end of the video I will
show you how you can back up your website from your local server to your live server. Install, desktop server, open, continue, my
password of my computer accept this, new desktop server installation continue, this takes a
minute or two to install, done you can start desktop server from your application sent
folder, click finish to close the Installer, finish. So now I go to applications close
this, I scroll down because it's at the XAMPP and here this desktop server, yes we start desktop
server with privileges, next my password is from my computer again, yes start Apache and
MySQL services next, done, click on next create a new development website next, I can give
it a name over here so I say AstraElementor.dev and again only you can see this, no one else
in the world can see this, create it's all virtual, next and I can click over here and
if this is not working for you at chrome don't let your heart be troubled, then go to Safari
or Firefox. I use Safari and I want this to be in English,
continue, the site title Astra Elementor, username this one, my password, info it's
ferdykorpershoek.com scroll down, I click on install WordPress. I login ferdykorp with
my own chosen password, login and there I am on my own computer creating a website with
WordPress and you can follow along in the tutorial and then don't have to spend one
dollar on the entire tutorial and in the end you will have an amazing website and I will
show you how you can copy your website through a domain name and web hosting. In order to
do that you need to have web posting. I've shown you before in the video. For now I will
close this and I will continue using my domain astraelementor.com from now on but all the
steps are the same as here, development website.
When you are logged in you will see this bar over here, so now if I refresh you see this
bar only you will see this because you are logged in. I want to clean this up, so what
will I do? I will dismiss this message, I close this and I go to the posts and I bring
this post that comes with SiteGound to the trash. I want to start with a clean empty
web site, then I go to the trash and I click on empty the trash, then I go to the dashboard
again and now that is OK. I collapse this and this and this and this, it says there's
new update available, so if you want to update your WordPress website click on please update
now or go to updates or go over here and then you can click on update now, that's it. I
go back to the dashboard now I go to plugins. I want to remove all the plugins because we
don't need plugins yet. Jetpack over here I click on deactivate and now we have three
plugins, they are all deactivated. I click over here then I select all the plugins
and then I can do a bulk action, I say delete, apply OK yes. Now I want to go to the settings,
to permalinks and when you create a new blog post is what we called yourdomain.com and
then with the date and then with the sample post. I don't like that, Google does not like
it either so I want to change it, I want to make it clean, so I click on post name. Now
we have a page about us it will say yourdomainname.com/aboutus and that's much better. So select post name
and click on save Changes. What else can we do?
If we have a blog post, it will say this blog
post is written by Ferdykorp that is what you will see over here. I want to change that,
you can click on edit my profile or can go to users, all users edit and maybe you think
why do we have an image over here? that is because I have a Gravatar accounts if you
go there, you can sign in, upload a picture and then base on your an email address in
my case info@ferdykorpershoek, it will know that I am linked to Gravatar, so it will grab
my image of Gravatar that will look a little bit better. If I screw up, I can change the
look a few of my back ends. I can select a different option, I like the default one then
I can scroll down at my username I cannot change that, I can type in my first name,
my last name and then my nickname is this one and then display name publicity, right
now it says ferdykorp and I can change it to Ferdy Korpershoek and will look like that.
Now if I post a blog post it will be written
by Ferdy Korpershoek, I like that. You can generate a new password, so I do this, it
is not weak I don't know why they say it is weak. I update my profile and now I can log
in with my own made password. So if we take a look at our website, there's a lot we can
do. If you have a website you want to have certain pages, the home page, the about page,
portfolio page. So we are going to create a few pages. You can do it over here, new
page or you go to pages, add new or you go to all pages add new and of course we begin
with the home page, I call this home and I publish this and you can think what do I want
to show on my website, maybe have a really simple website with only home and about and
contact or home services. I want this tutorial to be complete so maybe you have a very small
website there you can watch this tutorial but maybe have a really big website with a
portfolio and blog post and then this website is also for you and that is why I decided
to make a website about my company, where I do photography, film making and web design.
So add new, I want to add a new page and that
is called 'About', I publish it I will not add anything only create a page, add a new
one and it's called services, publish and I have three services that I want to publish,
so I click on add new, the first one is Photography publish, add new the second one is Film, publish
and the third one is Web Design, publish. I want to showcase what I can do making photos,
videos on websites. So I want to have a portfolio page. I click on add new and I call this portfolio,
publish, then I want to have a blog page so I can post some blog posts about film related
stuff but also personal stuff, add new blog and publish and when people want to get in
contact with me I want to have a contact page contact publish. Now if I click on all pages
you'll see all the pages we have made, but if we go to the website and refresh the website
you see nothing. I want to have a menu, so I want to assign all those pages to a menu.
How can we do that? We go to appearance, menus, I can have a menu name only I can see that
I call it main underscore menu and I create the menu. Here I see my most recent pages. I can also say view all and I click on select
all and I add them to the menu. Now if I would save this and I refresh the website, you still
see nothing because we need to assign this menu to a certain place in the website and
that depends on the theme. So this theme has a few locations the top menu and the social
links menu. If I select the top menu and I save it and I refresh the page you see the
menu over here. So that's really nice but I want to configure this. I see two home pages
I don't like that, so I go to menus in the back end and all those menu items are pages
except for this one. This is a custom link. I don't know what it is doing here, so I click
over here and I remove it then I want to bring some order in it. So I click on home, I hold
my mouse, well I clicked and I drag it here to the top then comes about, then comes services
like that below my services are photography, film and web design then there is my portfolio,
my blog and contact. I save the menu, refresh and there you are, home about in the right
order, but what you also can do in a really easy way, is have sub items in your menu.
So here we have services and I have three
services and I want to have those services as a sub item of services. How can I do that?
I click over here. I hop my mouse and I drag it to the right and now it is a sub item also
this one to the right and you see a small tab like that if you release it, this is a
sub item like that but I can also have a sub item for film, so if I would bring this more
to the right and I save the menu and I refresh the page I see services with arrow down and
if I hover over it I see photography, film and if I go over film you have web design
and the great thing is that a word press and the theme are doing all the hard stuff for
us. All we do is create a few pages and drag them like we want them. So I want it to be like this, three sub items
save it, refresh and if I go to web design you see extraelementor.com/webdesign, so that
looks really amazing. If I go to apple.com and I go to iPhone then click on buy the iPhone
now just kidding, you see if I want to go to the home page there is no home item. I
need to click on the logo and the people of Apple did all the hard work for us they thought
for us what is the best way to show your website. So we are going to do the same, we don't need
a home page we need to click on our logo in order to go to the home page even though we
don't have a logo yet but that will come. I save the menu and now it looks like that
about, services, portfolio, blog and contact.
Let's take a look at themes. If you go to themes, you see we have three themes 2017,
2015 and 2016 and the theme decides how to look a few of your website will be, so with
in WordPress we have a lot of information, we have pages, we have post with images, with
a menu. We have plugins but the theme decides how the page will look. So we can have the
same information displayed in a different way. So if I want to activate a different
theme, I hover over the theme, click on activate and now if I refresh the page you have the
same menu, only if this shown in a different way with the menu at the left here and the
homepage over here, and if I would select 2016 and I activate it, you have a different
look of view. So I want to provide you with the best free
tools so in order to get that we are going to get the Astra theme. Right now I will not
use those themes so I remove this one, I click on theme details. I want to keep everything
clean in my website. I don't want to have unnecessary stuff, delete. Now I go to ferdykorp.com
then we go to tutorials, Astra Elementor 2018 and here are some important links. We already
have web hosting and here it says get the free Astra theme. I click over here, perfect
theme for any web site stylish lightning fast easily to customize and see what is possible,
it is free theme and we're going to use it in combination with Elementor also for free
and it looks all really nice. So, let's get it download now, there are a
few options, the free theme you can upgrade to pro and you can have the agency bundle
we are going for the free theme. I click on free download, I fill in my first name and
my email address, I say subscribe and download and then I will be updated with the latest
updates. I like that and if it doesn't download then click again and click on the link here
below and it should start downloading. That's great, I close this now I go to the website
and I go to appearance themes and I click on add new.
Here you see a lot of free themes, I click on upload theme, choose the file and here
at downloads I see the theme. It's a really small theme so that's great I open it and
I click on install now. Now our theme is installed, if I refresh, it still will look the same
because we need to activate it. We need to say to WordPress, this theme is our active
theme from now on. So I click over here and now if I refresh it, it looks like that. It
looks better already than the other themes but it needs some work and we're going to
work on that, we're going to make such a beautiful website using the free theme and the free
page builder. So that's great I can remove this one now so I click on theme details,
delete and since we are downloading stuff I go back to my page over here FerdyKorp.com
go to tutorials Astra Elementor and then I go for get Elementor. A free page builder
so it is over here, I click on free download and again my email address astra@ferdykorpershoek
subscribe and download, and also here I will get the latest updates.
An Elementor also has a pro version but we are going to make a beautiful website using
the free version. I go to my website to the back end. I go to plugins, I click on add
new upload plugin, choose a file and here it says Elementor. I click on open, install
now. I want to activate the plugin, great. We have now installed the Astra theme and
the Elementor page Builder. Now let's create an amazing website.
Then we need to download one more thing, if
you want to create the same website I make then you can go to Astra Elementor again at
ferdyKorp.com and click on download the images I use in the tutorial. So I click on that,
I open it and I bring it to the desktop so I can work and use the same images, great,
I close this, I close this so one more thing I want to do before we start customizing the
theme, go to the back end, go to settings, reading and here you see your homepage displays
your latest post and that is the reason why it says ready to publish your first post.
I want to change it to a static page and here we can select the home page and that is the page
Home and our Post's Page is the blog page, save the changes. If we take a look at media,
everything we upload will be stored in our website and here we can organize our uploads
into month and year based folders or you can have it all in one big folder. It depends
on what you want, I want this everything in one folder so, I refresh the page then it
says it is the home page but what you also can do is install a complete website. If you
go to the back end to plugins and click on add new you can search for Astra sites and
there this Astra starter sites, you can install it and then you can take a look at a few demos,
activate and then if you go to appearance Astra sites, you can install a lot of sites
than you see there are few premium ones you cannot have those, but this one you can click
on detail and this is how it will look and I have this website with a few clicks you
can install the plugins that are necessary, contact forum beaver builder WooCommerce,
you can go to the next one, this is a premium one I think, yes over here, so I have a tutorial
about that if you want to watch it then click over here. I will not use it because we are
going to create our own website. I close this, I close this and I close this I go to the
home page and let's configure it. I click on customize and then we go to site identity
and what will happen here we will configure a lot of stuff or customize a lot of things
and here at the right you will see the result immediately.
The first thing I want to do I want to have a logo. How can we get one? Let's go to canva.com
we are going to create a logo for free. So first we need to sign up so I want to sign
up for personal use, sign up with email my full name is Ferdy Korpershoek, my email address
is Astra@ferdykorpershoek.com again I create a password, I am not a robot so I sign up.
Let's start creating beautiful designs. I see myself as a freelancer, I skip this step
and I want to create a logo. What type of logo? I'm not sure so I play with canva and
here we see logo layouts. They will show us in 23 seconds how it is done, you search for
logo about lions or images you drag them over here, you can resize them, you can add some
text and then you can download it and use it for
your own benefit. That's how it works in 23 seconds.
Now it's our turn, so I scroll down and I
can use this and start to create my own logo. So I scroll down a bit until I see what I
like and I like this one, so I click on it and there it is I can zoom in a little bit
and I want to create my own logo. So I click over here and I change the text to ELEMASTRA
Elementor and Astra then I can change the colors if you want to take a look at colors
then you can search for colors and brands, go to images and you can take a look over
here and you see colors and a lot of logos and examples or you take a look over here,
blue Facebook, lntel, Skype there are a lot of those pictures. I want to search for logo examples and actually
what I see immediately are those colors. I use chrome, Chrome as an extension which is
called color picker chrome, click on it and then you can install it. I have it already
it's over here, so what I can do I click over here and then I can grab a color so, I grab
the lowest color possible some are like this, I copy it command C or control C on a PC then
I go to the logo, I click over here. Here are three colors, the first one I want to
paste this one so I can choose one or I can click on the plus and I can search for color
or I can paste the color code like that, enter and that is the first color that I go to the
second one. I go to logo examples, click over here and
grab it in the middle, copy it click on the plus and I paste it enter and the third one
over here at the top, copy it, paste it, enter like that, then I make it a little bit bigger
to align it like that, I want to click over here. I want to change the color to something
dark. I click on the plus, I go a bit darker like that and you see the result immediately,
something like that and what I could do over here, I could say photography or photo, film,
web design but I think it's too much. I can make it smaller, but I just remove it.
So I click over here and I click on the basket then I want to make this a little bit bigger
because I want to align it exactly so, I zoom in
and drag it up a bit, go to the left, go to the right, zoom out and with the arrows I
go down or shift arrows and it goes faster, something like that. So this is my logo, I
like it. So I click on download as a PNG and I want to select transparent background so
it would have a different background color depending on where you place the image but
because we're using a free version it's not possible but we don't need it so it's okay.
I click on download and there are this the Downloads. What I want
to do now? I go to file and make a copy. I remove everything
then I go to elements, grids and I search for something like this. I click on spacing the first color can be
this one, the second one can be the middle one and the latest one can be the orange one.
Now I go to elements, I search for camera enter and I like this one, I drag it over
here or I click on it and make it white, make it a little bit smaller and I drag it in the
middle. I click on download and then download it as a PNG as a fav icon. I download it,
it is saving my design. I rename it, this will be my fav icon that you will see over
here. So what can we do now? I go to the back end and I go to media. I
want to add the new file so I click on add new, select files, I go to downloads and here
they are I upload them both holding command or control. I open them, it looks great. I
click over here and I want to edit the image, so what I will do? I want to make a shape
over here and it should be really close to the edge of the logo maybe command plus, so
you can see it better you know what that can be a little bit of space around it, so fine
like that command-0, then I click over here and I say save and now we have cropped our
logo. I close it, I go to the dashboard. I go back
to customize and I close it, I refresh the page and I click on customize again then I
click on site identity and now I can select the logo we have just made. I go to the media
library. I click over here, I copy the title, I paste it at the Alt -X, I click on select,
skip cropping and voila, here it is and it's a little bit big. So here we have the logo
with I can make it smaller like that until you like it. You can also have a retina logo,
select image and just select the same image then you see Astra Elementor below I don't
want that, so here's the site title and I deselect this place site title, look at that
and then we have the tagline and leave it, deselect it and right now over here you see
this icon and here you see the C of canva. Here see the G of Google. I want to play something
there, so I can select the image I can select this one, select, skip cropping and then you
see that and let's take a look we have the site icon you see it over here and then we
can click on publish and then it will be saved. So, right now we have our logo and our menu
using a free theme and free page builder. I like it, then we can go to layout here we
have the site layout and we can make the website with smaller or bigger but right now you don't
see that because we need to make the website a little bit smaller in our view, so I say
command minus, minus, minus and then I can explain it better. If I drag it to the right
you see the width of our site will be bigger if I change to the left, it will be smaller.
I would like to have it 1200, some web sites have 1400 some have thousands, I like 1200,
command 0, so it will be the original view again that's it. Let's go back to container
and I will make it smaller again command minus, minus, minus because over here I want to display
a few things.
The default layout, right now our home page is a box and that is because the default layout
says content should be boxed. I can also say boxed and then everything is boxed also to
widgets over here. So everything is in a box that can be really nice when you have a website
that is focused on blogging, then every article has its own blocks every widget has its own
block. I don't want it also no content box I say full width contained and now the block
is gone, but it is contained. What does it mean? It does not go outside of the boundary of
the container we just measured, so over here at site layout. It will stick to the width
of the website. Here at the Left and here at the right but if I would say full width
stretch then it means is what we totally at the left and totally at the right here based
on your screen, so if I have a big screen and it still will be totally at the left in
here totally at the right. I say command zero and command - a few times. So I choose for
full width but contained, so like that no boxes I like it. The same things we can do
for pages, blog posts and blog post archive. So for blog posts it can be really nice to
have everything in content boxes. So I'll take a look at it later and this I'll
leave it at default. I click on publish, command 0. I go back and I go to the primary header.
Here we can choose our type of header. Right now the logo is at the left and the menu at
the right. You can do two also the other way around but I would not do that because a lot
of big websites in the world have their logo left. You want to give the visitor an easy
way to navigate to your website and if everything is different than all the other websites then
it can be very distracting. Some people say I want to have a unique website then I say
no you should have a normal website that is intuitive. You can have the logo in the middle,
I like that option like that and then here below is the menu. I like it at the left, you can disable the
menu if you want to and then it's gone. You can have a custom menu item for instance a
search icon, here at the right or a text, a button contact us or maybe I want to talk
about Astra Pro and here you can have a button about that or a widget. We'll take a look
at widgets later. I say none for now and then we have a border over here, a small border
you can change it to 10 pixels then you'll see, better. You can change the color, if
I go to logo over here, I can grab this color then I can click on the plus, select this
logo, grab the color code, go back and change it over here in the code, I paste it like
that and you can change back to one pixel, if you want that I say clear I don't want
it. I like the border of one pixel, header width, again I make it smaller command minus,
minus, minus and the same principle. Do I want it to be contained or full width? So
totally at the left and totally at the right. I like it contained so I say content with,
menu label on a small device. If I click over here I see how the website
will look on a smartphone or on a tablet and I can have a menu label so I could say menu
and a great thing, I really loved about this theme is when you type something the logo
adjust automatically. I like that, I say menu over here because people can have big thumbs
and when they are on their smartphone they have more area to click on the menu and when
you click on it, it will look like that. You have two sub menu when they click here. It
appears like that really nice and if I click over here again it is gone. What else do we
have? We have the mobile header alignment. Right now it is inline left a logo right menu
but it can also stack it on top of each other and then the logo is bigger, you have the
menu I like that, so I'll leave it as this stacked. I click on publish, I go back and
blog I will save for later. Sidebar, I click on this screen again, the big screen, here
we have a sidebar and in the sidebar you can place widgets. I will talk later about widgets. By default I don't want to have a sidebar.
So by default I say no sidebar for all the pages I do not want to have a sidebar. So
I say just default because then it will apply or this says over here. Then we have blog
posts there I want to have a sidebar at the right or at the left. I want it to be at the
right and at the blog post archive I also want to have it at the right. The sidebar
width you can change it, it's often 27 or 30 percent. I leave it as this we can take
a look at it later but I like it. I publish it, I go back and we have the footer over
here. We have footer widgets and as I told you before we are going to talk about widgets.
If I select this then you've seen area over here with four widget areas and we can add
widgets, for instance if I go to my website ferdykorpershoek.com I scroll down I have
a text widget. I have a recent tutorial widget or a recent blog post widget, a Facebook like
me widget and you can also have different ones like latest portfolio items and all kinds
of stuff a video, a text, follow us on Instagram. Right now I disable it but later in the tutorial
we'll use it. I go back and then we have the footer bar. We can disable it, then you don't
see it anymore. I want to use it, you can use it in a way that it will be in the center,
all the information or that it will be at the left and at the right and I like this
option because here at the left we can have some text about our website and here at the
right we can have social icons later when we add a widget. So we have a custom text
over here. I remove the text, you see it updating immediately. Here that's nice automatic the
site title I like it. I want to place a pipe between it and then I don't need this so I
remove that, but I can say disclaimer and if I want this to be a link to the disclaimer
page I can copy this, copy it I go to the dashboard hover over new post or page then
I go here to this visual area, I paste disclaimer, I click on this icon over here and I say (no
capitals) /disclaimer enter, apply. Now this is a link you can click on it and
if I go to the text tab, then you see the code behind this link. I copy that code, select
it, copy it and I paste it and now when somebody clicks over here, he goes to AstraElementor.com/disclaimer.
You can add another one pipe, paste and then here you can say privacy policy and change
it also over here. If you don't have that page yet we don't have a thing you can say
hashtag in the link between the quotes and that means that it is a link but it will link
to nothing. If you click on it nothing will happen.
Then we have section two, we can have a custom
text or a footer menu. So for instance we can assign a menu. If I click on publish and
I go to appearance menus, leave this, then I can say assign a menu to the footer menu,
save it then take a look at the website and now we have also our menu over here. Really
nice, I don't need that for now I say nothing later on we will add a widget over here and
also here we can say footer bar with content width or full width and with full width it
will go totally to the left and this area totally to the right. Since we have not done that over here and
in the content I leave that content width. Then we have a bar over here and we can change
the color for instance to this one again, copy it. I paste the color and you see it
over here you can see five pixels, maybe I like that three pixels. I like it so I leave
it like that then I go back, I go back and I go back and then we can go to colors and
backgrounds. What are the base colors of our websites?
That are those three colors and I want to use this one as my main color. So that is
the middle color over here, I have the code so I will use this code a lot. So why not?
Make it the theme color and the link color, like that then we have the text color. I want
it to be the same color as my logo. So I click over here, it is this color so I grab that
color, '2D' copy it and I paste it over here and the link hover color. This is a link when
I hover over it I want it to be a little bit lighter, so I go to this object again, this
color click on the plus then select this color the lightest one, copy the code and I want
to paste it here. The background color if I change that it will
be everywhere on the content, I don't want that, so I'll leave it or make it white, publish.
I go back and then we have the footer bar, this bar over here then with the text color,
it is white. The link color, those two are linked so if I change the link color you'll
see a change over here. I do that or I leave it just white or maybe a little bit grey,
I don't know I'll leave the white, link hover color that can be this one when somebody hovers
over it, then it will appear like that and then the background color I think it can be
the same color as this one which is #2D2D2D, really dark, then we go back go back then
we have typography. I click on it and base typography.
The base typography that is used in the whole website. So I can choose a font family and
I like open sans. What you will see? Everything changes all the fonts, so if I would say this,
everything looks like that here in the menu here and here in the footer. So you can search
for it, try a few or you can go to Google fonts, click on it and you can search for
a one you like so for instance serif, uncheck all the other ones or this one. Yeah, immediately
I see this one open sans, I like it the most. So take a look and then you can decide what
you want to do? I use open sans, the font weight. If I would say extra bold everything
will be bold. I don't like it, I even like light more than normal but for now I will
use normal. We can have text transform we can do everything in uppercase and I don't
want that, just default.
Font size is OK line height will take a look at the later we have no lines yet and then
we have the heading. At heading I want to have a real way, and you see changing the
heading over here and I can say ultra-bold or just normal like that. I go back, the content,
we'll take a look at later since we don't have content yet, blog archive single post
things, we'll take a look at later. We have buttons, we have the menu.
This is our menu, you can change it over here. What you see now? I just change something,
that's the power of WordPress and the power of Astra. Widgets we'll look at that later.
The home page settings and they have custom CSS, so if I publish it and I go to the home
page, it looks like this. Our logo, our menu, our text and our links I think it looks beautiful.
I want to change one more thing, I want to make these capitals so I go to the menu over
here at Astra menus and here it says, about that is the title of the page but you can
change the navigation label. So you could say about me. If you save it and you go to
the website you'll see about me. So I change this to about in capitals, services in capitals.
So I make everything in capitals and then I save it and I refresh it like that, I like
it. Now we can edit the home page and make a beautiful page with Elementor. I click on
edit page. I scroll down and I want to remove the title if I take a look at the page in
the new tab you see here home, I don't want that so I say disable the title, update, refresh
and now it is gone. I go to the back end and I click on edit with Elementor and here is
the Elementor page builder, in my opinion by far the best free page builder that is.
I see that everybody is using it these days because it's the best. How does it work? Here
at the left we have all kinds of elements that will help you to put certain information
on your website. For instance you can have a heading, you can place an image, you have
a text editor you can place a button a video, an image box, image gallery and all this is
for free then we have WordPress widgets depending on the theme we use, it comes with a few widgets
and you can place those widgets also on your website.
Well this is the page builder in combination
with those elements over here. So I will show you step-by-step how this works. We can add
a section and the Elementor page builder is divided in three parts. First we have sections,
in those sections we can have columns, one column, two columns, five columns, two columns,
in a different way and if you click on one, you see four columns. So this blue area means
that it is a section so if I click over here, I see the section settings, if I click over
here on the grey area then I can adjust and edit the column and if I click on the plus,
I can drag elements over here. For instance a heading and when I click on the heading,
I have the settings of the heading, well all those settings for elements columns and sections
have three parts. At the section it is layout then we have the style and then we have advanced
and if you go to the columns, it is the same layout style and advance and we will walk
through all the necessary options to get to the website we want. If you go to the elements
we have content, style and advanced. If I want to remove this, I click over here.
Now I will talk about something with an Elementor,
that's amazing that will save you a lot of time. If you go to elementor.ferdykorpershoek.com
you can import sections through Elementor. So you can make a choice now you can choose
how to learn with Elementor and I will show you step by step or you can just make a website,
maybe you just want to get a job done, well then this website is for you. Let me show
you what we can do.
I go to complete pages. I can choose one. Let me see maybe I like this one. This is
the one we are going to make. I can click on it and this is what we are going to make
in the tutorial but maybe you're like, I want to just import this into my website, well
you can do that. Over here, it says download the home page version 2 right click, Save
Link as and here it extra Elementor I save it. Now I go to my home page. I click on add
template and here you can import templates. You can take a look, maybe you want to import
it or you can import it with one simple click over here, or you can go to my templates,
click on this icon. I can upload one, it's a .JSON file. I go to the desktop extra Elementor
home page version 2, look how small it is. I open it and now it's in my library and I
can click on insert. Let's take a look what is happening right
now and maybe think, "oh no everything is going wrong", no this is exactly what needs
to happen. Also this over here, I'll show you why, that is because we optimize it
for a mobile. So if I update it and I refresh the page, we made this and it's optimized
for smartphones and tablets and this is what you'll get with a few clicks for free. I made
this for you and you can download it so you can make a website really fast if you want
to. If I make this smaller, you get the menu, make it even smaller even more smaller and
it works perfectly, that is the power of Elementor, with a few clicks you get this. Isn't that
amazing?
So let's take it a step further. We go to the page "About" and you go to "Home", Astra
Elementor. I scroll up, I go to templates complete pages, I scroll down and it says
"About Us" Phlox and I want to import this. I scroll down right mouse click save as, save
it, About, edit page, edit with Elementor and when this website tutorial is finished,
I have all these pages for you to download. Add a template my templates upload, select
the file, "About Us" page version 1, open, here it is. I insert it and there it is and
you can adjust the information so you can change this, Hi there, welcome, so there's
so much that you can do. We need to plug in for this one so if you install contact form
7, you get a beautiful form over here. Also this is optimized for a smart phone. So if
I would go over here, I make it smaller and the video is gone. So that's how easy you
can make a website these days. So if want to make a website really quickly
then go over here to elementor.ferdykorpershoek.com and take a look at templates and all the elements
and here you see is a complete page here you see it's only a section. So maybe you only
want to install this section and then you can do it also. Let me show you, we are working
with the free elementary version so I click on all free and I want to have a section then
I click over here, right mouse click, Save Link As, save it, about, edit with Elementor,
scroll down add a template, upload, select header version 2, open header version 2, insert
and there it is. I can drag it up, holding this icon over here, use the arrows on the
keyboard, drag it over here and that's how it works, update. Now I go to the home page
again. I can remove everything. I start here at the bottom and now let's start from scratch.
I will show you step by step how we are going to make this.
I want to start with the header. So I click
on new section and I want to have one area and you see it over here if I hover over here,
I can do a few things. I can go to the settings of the section the settings of the column
or I can add a new element and I can drag it over here, but I want to start with the
settings of the section so I click on this icon, the left one like that. Now I'm in the
settings of this section. So we can do a few things here but the first thing I want to
do I want to add an image. So I go to style, backgrounds so this area will have a backgrounds
and we can have a few backgrounds. A classic one, a color for instance this one
or we can have an image I want to get an image so I go to pixabay. I think that is the best
free images provider, you also have unsplash.com and take a look at what you can get. It is
amazing and then we have pexels.com. So pixabay.com, unsplash.com, pexels.com. I want to search
for mountains, I copy it and also here, at unsplash mountains and at pexels, Mountains.
I start with pexels and I can scroll a little bit and take a look if I see something what
I like, that looks beautiful and the more you scroll, the more images will be loaded. Wow look at that, all for free also here at
unsplash it looks like that those images have a little bit more style added to them. Wow,
I like this one, so far, any of them here at pexels, also the same one, I like this
one. So what can you do? I click on it here at pexels. I click on free download and there
it goes, it's already downloading, but what I see over here is that the download is 10
megabyte. It's a very big image but its 10 megabytes
so I don't want that. How can we fix that? I go back to Astra Elementor. I go to the
back end, to media. First I want to rename the image, it's important for Google so I
call this photography, the Netherlands for instance because I want to be found on photography
the Netherlands, never leave an image named like this IMG 0001 because nobody is searching
for that but people are searching for photography, the Netherlands. If I search for a Ferdy Korpershoek
Maassluis that's where I come from. I go to images, I see all those images why? If I take
a look, at the image it is called Ferdy Korpershoek Maassluis. I close these now and I click on add new,
select files. I go to downloads, photography, the Netherlands 10 megabytes and is 6000 pixels
by 4000 pixels that is really big, Full HD is 1920 pixels by 1080 pixels so this is a
lot more. I open it you see it takes a while because it's 10 megabyte and if we put this
on our website, our website will become really slow and Google does not like that. So we
want to change that, how can we do that? I click over here and over here I click on edit
image. What I want to do? I want to scale this down to 1920. I click on scale so right
now the original dimensions is 1920 by 1280, but I want it to be in 1920 by 1080. I want
to drag a selection like that and then I change it to 1080 and now I have a perfect image
of 1920 by 1080.
You can drag around depending on what you want more on the image. Do you want to have
more air or grass? I like the grass, so I click over here and I click on save and now
we have an image of 1920 by 1080 pixels only 342 kilobytes that is 30 times smaller than
10 megabyte. I optimized it. How can I do that? The title's photography the Netherlands.
I remove the dashes. I copy the title and I paste it in the Alt Text you need to do
it with all the images in your website. It is saved, so I close it. I close this one
also, I click on update first. I close it and now I go to the website and I say edit
with Elementor. I go over here again. I click on style, I
remove the color and I click on image and grab this image and I say insert media but
if I update it and I take a look over here, you see nothing, you see one pixel over here.
How can we fix that? I go to layout and here we have the height, then I say minimum height
and I can say 500 pixels, update. Let's take a look and now we have that but
I don't see grass. I want to see the whole image. How can I do that? I go back to the
style. I scroll down and I can define that position, that's also handy for smartphones.
So if the screen is smaller for instance, a tablet or a mobile where should it be focused
on. So if I change the position to center, center you see this will be seen on a mobile.
I like that, I bring it back to a normal desktop screen. I go to size and I say cover, so it
will show the most amount of pixels that it can show, update, refresh and now when I make
it smaller, you see it just automatically and the center of the mountain will be in
focus, I really like that and also like this and menu, sub-menu so that is great.
You see those colors over here, so I go back
to canva.com and I want to use those colors throughout my whole website so I click on
this one and then I go to background, I close it and
I go to the background overlay. We can have an overlay color over this. I want it to be
a gradient, it can be a color or gradient so I click on gradient and then we can grab
our first color and that color I want to get it over here. So I click over here, here I
see the color. I click on the plus then I click on the first color. I copy the code,
I click over here, I paste it and there it is then I go to the latest color this one
and I grab that color and I paste it, you see its nice overlay. How can we change this?
You can change the angle but before I do that I change the opacity. If I bring this to 100
or to one then you see the overlay.
You see it's from top to bottom, if I want to change that I can change the angle over
here, to 90 for instance, so it's from the left to the right. You see it looks nice with
the logo it's the same style, also this line, but I want to see the mountain so I can decrease
the opacity like that until I think this is what I like. So I bring it to something like
that and if you take a different color, I copy this one for now for instance blue, look
how beautiful it can get. I really like it. I actually like those colors also, maybe I
can change my logo with the colors and then use this, but you know its okay decrease it
you can always change it later. I like it so far, I update, I refresh and then you see
it's updating automatically so that's great so let me show you one more time. I close
this, if I click over here, it opens in a new tab but it's not the final page yet. So
if I change something for instance I put a header over here and I click over here. I
see nothing and people that visit my site at this moment don't see the changes but if
I click on update then I don't need to refresh because it will automatically show you that
but what you also can do you can click over here and then you'll see how do website will
look. The only thing you don't see when you're in
Elementor you don't see animations. Yes we can add animations but you'll not see them
over here, but if you take a look over here then you'll see them. So I remove this but
now for you I will drag the header over here. I want to say something about my company.
I call this ELEMASTRA. What can you do? You can add a link to it. I don't want that, you
can change the HTML tag for now I leave it as this and you can change the alignment I
bring it to the center then we can go to the style and adjust it even more. I can change
the color I want to change it to white. You also can change the opacity, so you can
make it more transparent and since we're talking about colors, you see a few colors over here.
We're going to use colors a lot. If you have to copy and paste all those color codes every
time it will take a lot of time. So one more time I go to canva over here, then at Elementor
I update this and I click over here then I can go to default colors, my primary color,
I think it should be the middle one. So I click over here, I click on the color, on
the plus I grab the middle color and I grab the code. I copy it and I paste it over here.
The same goes for the accent color I paste it also over here, then I go to logo to this
color, I copy it, it's the color of Elemastra and that will be the secondary color and the
text color will be this one. What I also can do is make this a secondary
color. I think that is better, then I apply the changes. I click over here again and now
I go to the color picker and here we have white and black, I think that's quite important
and after that I want to grab my three colors I use or for instance, this one copy it and
I start over here, the latest four, I paste it then this color we're starting with dark,
paste it, second one, copy it, paste it and the third one copy it and paste it. Now I
apply it and now if I click over here and I go to style, I can choose a text color,
I can choose those four colors immediately. So this will save a lot of time.
Now we have typography that has everything
to do with how the text will look. So I click on it, at first we can have a font family.
So I can say Arial or Google fonts, I like a Raleway for instance, then I can change
the size, make it really big like that. We can change the weight, make it bold or make
it really thin. I like this one actually then we can transform it to uppercase but it's
already uppercase. I can make it italic, I just leave it at default. The decoration do
I want to have it underlined or over lined or lined through, I leave that default and
since we have one sentence we don't need line height, if I do something and I don't want
it, I can say command or control Z and then it will be back so that's really nice and
then the letter spacing, yes make it a little bit more dramatic. So right now you don't
see it but if I would say update, the only thing you need to do is go over here and it
is adjusted, amazing. What I like to do when I scroll I want the image in the background
to stay at the same place, so I go to Elementor, I hover over here, click on this icon, go
to style, scroll down and go to attachment and I say fixed, update and now it stays in
the same place. I hope you like it so far. I hope you learn a ton of good stuff, if you
do so please like this video and please subscribe and then click on the bell icon so you will
be the first that gets a notification when I upload a new video.
What's next? I click over here then I go to
the elements and I want to go for the divider. You can also search for it, the divider, yes
drag it over here and it's a black line. It is solid. Let's change the weight so I can
make the line bigger 5 pixels for instance. I can change the color, I want to change it
to white and I can change the style to double, two lines or dotted or dashed. I like the
solid line. The width is in percentage, if I would say 50%, it will be 50% of the width.
I bring it to the center but I can also do it in pixels but I like it in percentage so
I say 60%. How big should a gap between those elements,
not much, zero, update and by the way if I make the screen smaller and you don't see
the background over here at the left and here at the right then go to the section over here
and click on stretch section and the content width where we stayed at the box so it will
not go further than here at the left and here at the right and if you say full width and
that can go anywhere, update okay make it a little bit smaller. The line 50, I can go
too advanced and then we can work with margin and padding. I will explain it later but margin
is actually pushing space outside of the element and padding is pushing space within the elements
but since it is a divider I cannot show how it works. I will show that later but if I want to bring
this closer to each other, I can un-check this. I can go to the top I click on the arrow
down a few times and I bring it closer to each other. Now I can duplicate something
so I like this, I hover over here, I click on duplicate. You can do the same here at
the columns and over here so I can drag it so I drag it
below the divider or I drag the divider on top and then I can change this over here.
So I say photo pipe, film, pipe, web-design, you know I do it photography. Now what should
happen now? It should be smaller so I go to style typography, make it a lot smaller
like that. It can have more weight in my opinion so I
say 500 like that, update and I think this line can be thinner so I click over here,
make it 3 or 2 and what would happen if we decrease the height? I click over here on
the section and I change the height then it stays in the middle which is really nice,
so say 400 and what I want to do now? I want to add a button not only one but I want to
add two. How can we do that? I click over here and I go to columns and a column is actually
a kind of section in a section. I'll explain what I mean. I drag it over here below until I see that
blue area. I release it. Now if two areas and in those areas I can add new elements.
So I search for a button and drag it over here and says click me. You can change the
type but we do not need to do that because we can change everything ourselves and the
text is portfolio. I want to show what I can do? So I want to give people the possibility
to take a look at my work, then we can have a link I say forward slash portfolio and that
means that everybody that clicks over here goes to yourdomain.com/portfolio and that
is this page. So I bring this to the right, like that, the size can be extra large or
small or normal medium and I like it that way. We can have an icon, so I can place
this over here. I can place it before the text or after the text. I place it before
and I can have some spacing between the icon and the text like that then I go to the style,
the typography and we have normal and hover. When we hover over it, you see it lights up
a little bit or the color increases. Now we can change that, the text color is actually
okay but you can change it. I changed it to white. The background color again let's go
to Google colors, take a look over here and I search for a green color, for instance,
this one copy and paste it, like that. We can have a border, solid, make it 3 pixels.
We can change the color and we can have a border radius, so if I bring this up with
the arrows, you see the border radius increases. I don't want that and I also don't need a
border, so I say none but it's really nice. We can have a box shadow, so I can click over
here and there it is, I can change the blur, the spread, horizontal, vertical, position
can be outlined but also in line so you can change a lot over here and then it gets a
new effect. If I will change this to zero, a vertical to zero then I can make the spread
everywhere like that, so you can play around with that. I can just say you know what I
don't want to have a shadow so I remove it. You also can have a different color with a
shadow. You can do a lot, but as I said before, I
don't use it, so totally transparent but we can also change the hover. So if I click on
hover, I can change the background color to this one for instance and now if I hover over
it, it becomes that color. We can have an animation for the hover shrink, so if I hover
over it. It shrinks a bit, you see beautiful animation, different animations. So really
nice options, I update it and that looks like that. I want to duplicate this whole area on this
whole column, so I click over here then I want to remove this column by clicking over
here, then I click here, I align it to the left. Now I have two call to actions over
here in the middle. I change it to 'Contact' and it should link to contact, /contact this
page. I can change this to something else. I want to change the color so I go to style
and for now I copy this color, copy and I change it to this one but when they hover
over it, it should be green. So here it becomes this color and here it
becomes the green color. I like that, update, yes beautiful. What can we do? We can bring
some life into it so, I click over here. I go to advanced and as I said before I can
change the margin and the padding. We'll take a look at it in a few minutes. I want to have
an entrance animation, so I can say zoom in and then you see it zooms in like that, then
I want this line to come from the left or to the right. So I go to advanced, entrance
animation, fade in from left and then also here I want this to appear as a zoom in. On this to come from the left and this to
come from the right, like that but it's a lot at the same time so I can bring some changes
in it. What you also can do? If I go to this one, you can decrease the speed. So right
now the animation duration is normal, you can make it slow or fast. I like it slow and
then I click over here, I want to bring some delay in it, in milliseconds so one second
is a thousand milliseconds. So after a half second then this will appear, after one second,
disappears and then after one and a half seconds this one and after
two seconds, this one should appear. So how will that look? Like that, I like it but what
will happen when we make this smaller. So far so good, so far so good ooh, that's not
good, that's not good. This is also not good, so now we have a really, really big problem.
Now that's not true because we have Elementor, so over here you can change to the tablet
view and if you like it, you can leave it. If you don't like it, you can click for instance
over here, maybe increase the gap a little bit so you have more space to select it and
you can go to advanced. Let's say, minus five, and at the top or bottom
minus five, but what you see when I'm editing right now, I'm editing here at the tablet.
So I can have different settings on a tablet than on a screen and that is great because
if we take a look at the tablet, I think this is too small but for a screen, it is great.
So how can we change that? Just click on the tablets or on a device that you want to select
or edit something. For instance I go to content to do with and I want to increase it, something
like that, 82% but if I go to a smartphone well this line is still OK but I really don't
like this. So how can I fix that? I just click over it. I go to style, typography,
everywhere you see those icons you can change it for a different device. So right now it's
for a smart phone. I want to make it smaller, like that and of course this should also be
smaller, so I go to style, typography and change it. What you even can do, maybe you
think I really don't like this, you can do it like that but then you see those pipes
over here. What you also can do is go to advanced and now this is getting crazy, scroll down,
crazy in a good way by the way, go to responsive and say hide on a mobile, update. Now when you go to the mobile version it disappears,
you see it, you see it, now it is gone why? Because then we can change it, so what I can
do now? I hope I do not go too fast. I can go to the desktop and I can go to text editor
and drag it here below and then I can say photography shift enter, film, shift enter,
and web design then I go to style. I bring it to the center, change the text color to
white. I change the topography to open sans like that, maybe a little bit bigger, like
that. Now I go too advanced and I say at responsive
hide on a desktop and hide on a tablet, update. Let's see what happens? Elemastra, photography,
film, web design we make it smaller and I see it over here photography, film, web design.
So this one disappears on a mobile and this one will be shown but this one will not be
shown somewhere else, so that's the power of Elementor. Let’s change this really quickly,
it's not that hard, Elementor home, I click over here. I go to the alignment of a smart
phone and I bring it to the center and also here to the center, update one more time.
This is how it looks, make it smaller, make it smaller, make it smaller
and one more thing, I go to this bar the divider. I changed it from percentage to pixels. I
go to the desktop first, two pixels, like that then I go to a tablet I change it to
pixels, then I go to a smartphone I change it to pixels, update, make it smaller and
that's how it looks Elemastra, photography, film, web design. You can click on portfolio
and then on contact, the menu appears, the logo appears in the middle, really nice. Now I go to the back end and I'm going to
create a second section. I go back to the desktop view and now it looks a little bit
weird but only for us. So I click on add new section and I want it this time to be three
areas. If I update it, I see there's a white space but really small. I click on the plus
and I go for an icon box. I drag it over here and this is how it looks, default view we
can have it stacked and framed. I like stacked, I want to showcase my three surfaces and maybe
you're like hey in my last tutorial, I made almost the same and that's because making
a page like this shows you all the options you have in Elementor but I decided to do
something new. I will also create different pages and create
tutorials about them. So that will be tutorials around 20-30 minutes where I showcase, how
I create a website, How we optimize it for a smartphone and tablet and If you want to
see those videos and subscribe then you can go to FerdyKorp.com, go to resources, design
videos, be updated with new design videos, sign me up and then fill in your first name
and your email address, subscribe and then I will send you a few videos about creating
beautiful pages using Elementor. I continue over here, the title is photography
and we can have an icon, so I can search or I can type in Cam of camera, there it is then
have a text over here, so I paste it like that and I will link it to /photography. It
will be centered in the middle H3, I can make it H2 and then we can style it even further
over here at style, primary color is this one. The secondary color is this one, I like
that. The spacing can be a little bit less. The size, I think it should not be too big
so something like that is great, padding, you can change that, you can rotate it if
you want to. You can have a border, you can make it a square by heading-0, a hover, what
happens when you hover over the icon. You can change the colors or you can have an animation.
I like shrink and then the content of course a line in the middle that's already the case.
Alignment at the top, the title. How much spacing? Not much, something like that. The
color is OK. The typography, it's a little bit bold the text I don't want that, but I
will not change it over here, but I want to change it everywhere. So I go over here again to default fonts and
then I go for the body text and I search for open sans and normal, like that and the accent
text, open sans and maybe a little bit bigger, 500, update and now it should be looking fine.
I update it, so that's it. What I want to do now? I want to add a new element, an image
carousel, I search for image and there it is. I drag it over here and I can add a few
images and now you can make use of the images. I use in my tutorial which you've downloaded
at the desktop. Now we go to Home, photography and there are a few images. You see they've
all the same height and width. You can do that also within WordPress, I've shown you
before. I upload them all and I create a new gallery. I can change the order. I can reverse
the order and I can insert them into the gallery. You will see the result immediately. I don't
want this, I want to change the image size to full. How many slides do I want to show?
Only one at a time, like that, no stretching of the images, no navigation, no arrows, no
dots, no links, no captions then here are additional options, pause on hover, no, auto
play yes, every 3 seconds, infinite loop that means that after the latest picture, the first
one appears again and the effect I want it to be fade. So let's take a look, now it does not slide,
but it does fade and the animation of the fade can be one second. Direction is not relevant
anymore because we fade then we have the style and it falls in this all, okay, I go to the
elements and I search for a button and I drag it here below. So I say more information,
I'll link it to /photography, in the center, size medium. I can have an icon the same one
for instance again and then style, hover, create an animation, shrink and that's okay
like that, update and now I want to do something new. I want to do a few things, first I want to
create a new style over here at the bottom. So I go back, I click on this section of the
header. I go to style, all the way over here, and it says here is a shape divider. So I
can add a shape, drops and you see that over here or tilt and I don't want that at the
top but I want it at the button, so I choose for the type tilt and I want to flip it and
I can change the height. I think this is OK. The color is fine, update and now it looks
like that. I like that, what I want to do now? I want to bring this up over here. How
can we do that? Can I go to the settings over here? I increase the height a bit. I go to 550 pixels, update, like that but
then I go to this column. I go to advanced, now bring the margin down. First I need to
uncheck this, now I bring the margin down, so everything goes up I think 90 or a 100
is okay. Let's see how that will work. Now I go to this section, advanced, uncheck and
at the top I say minus and there it goes, it scrolls up now and goes to the other section
and this is also an amazing feature of Elementor, maybe minus 200 but well I see, it doesn't
have a white background. So I go to the element icon so I add the icon box background. I go to advanced, backgrounds and I make it
a white background like that, but now there's no padding here. So I go to the element style
here at advanced then I go to padding and I increase this. You see that, so that is
little bit more space from here to there. So padding is increasing or decreasing space
within the element and margin is increasing space from outside of the element but now
I see, this also is farther away so I uncheck this and at the button I bring it back to
zero. So this will be close to this text, update, let's take a look and I want to decrease
this, so I go to this column, advance, -200, update, like that, great. I want to bring an animation over here, so
I click over here on the column advanced, entrance animation, fading up like that, I
want it to be slow and this is after 2 seconds so on this to be after 2 and a half seconds,
update. It can be after 2 seconds, like that then I want to duplicate this area. So I hover
over here at the column. I click here and I click one more time. I hover over here and
I close it, I hover over here and I close it then I go to this column, advanced and
I say 2250 and here I say 2500. So there's a small delay between those three, like that.
I love it all with free tools, I really like it. So what's the plan over here? The plan over
here is to change this. So I click over here and I want to change this to film, change
the text, I scroll down more information. I change the icon to cam, video camera, also
here, cam video camera OK. Again over here I change the link to film. I do the same over
here, I say web design, I change the text. I change the icon. Also over here, I change the link then I want
to change the images over here so I click over here. I click on clear, delete add images,
upload files and I go to my folder again, select files, Astra Elementor, home page or
web design and I select them all five command A, open, create a new gallery, insert and
it has all the same style, so it should be fine. This one I want to remove, I go to elements
I want to drag a video over here from Vimeo, I go to my folder, I go to portfolio films,
Montana and I grab the video link without sound, copy, I paste over here and there it
is, auto play but before we do that, I don't want this, so I click on remove, remove, remove
and then I click on auto play. Keep in mind that when you click on auto play, it will
not be auto played on a smartphone or a tablet, that's why I duplicate it and over here I
will have the setting auto play at will be off. I click on advanced, responsive and I say
hide on a desktop and here I say responsive, hide on a tablet and hide on a mobile, update.
So if I make this smaller, it will not be playing anymore. You see and then you can
click on it and then you can play it. Same goes for the iPhone and you see it's all responsive,
so that's really nice. I want to decrease the height bring it to 500 update. Let's see
what it does, then you see that stroke better and the works fine. Great this is what we
have made so far.
I don't like this, it's a little bit bigger. So I need to change the text, see if that
does the trick, yes it is all the same, great icons, we can click on it and go to a certain
page. Only change this one, I like it. One more thing but what I want to do? I want to
increase space here at the button. So I click over here. I go to advanced, bottom and I
say 30, you don't see it but you will, you see there's more space now. Great I'm going
to create the next area.
I click over here. I add a new section one area. I click over here and I go for a stretched
section minimum height 600, style background, type, classic. I want to add an image. I grab
it from the folder you downloaded, of course you can grab your own image. I want to talk
a little bit about myself and my team, my wife and I, so I go to the home page folder
who we are? Open, insert the media and there it is. I want us to be at the left and some
text at the right. How can I do that? I'm still at the section, settings, style
and the position I say focus on the center-center or Center-top-center and that's better, but
I will say size cover, attachment fixed. So if I scroll it will be still like that and
then over here I can duplicate this area so now we have two columns. I go to the elements
and I drag a header over here. I say who we are? What we do? I go to style typography,
change the weight to 300 like that. I click over here on the column settings. I go to
style background type classic and it's just white then I go to Advanced padding, I say
20, everywhere you see it's changing. Maybe even 30 I go to the elements, I search for
the divider, I drag it over here, the weight - 2 pixels, a solid line of this color and
I make it something like that. Then I go for a text > text editor, I drag it over here,
I create my text over here, I go to the elements and I search for a button. It might as well
be this one. So I duplicate it and I drag one over here. I click on it and I say 'More
About Us'; change the icon and I search for slide share, two people that should be us,
okay. And now I update it, who we are and what we do. The text, it's still bold I don't
know why, but I will take a look how can I fix that. Who we are? What we do? More About
Us and I like it. If you want to decrease this area, then you click over here, go to
advanced and margin uncheck it. Go to right and say 50 or 100. What will happen, it will
decrease over here. You also can do that in percentage so I say 30% update and it looks
like that. What happens when you make this smaller, it
looks like that and that has everything to do with betting over here, so let's see if
we can fix that.
I go to tablets and then it's ok, but at the tablet, I want it to be different. I want
no margin, like that; and at the smartphone, I don't make any changes. So I update and
I will take a look. I drag it like that. It's okay. What I can do? I can go over here, go
to the screen, full screen desktop screen, to the column style and I change it to more
transparent white. But you should read it so let me see, something like that. You still
can see us a little bit, I like it. What's next? A new area, add a new section with one
column and a title. So I duplicate this one, in that way I can save some time. I say "what
people say about us"; I bring it to the middle; make it a bit bigger; give it a little bit
more margin. How to use testimonial and I want to have four testimonials. So I use columns,
two columns and then I searched for testimonial. I drag it over here and let's start with testimonial
one.
The text, I paste the text. I add an image and I add a few images, I select files, here
at the homepage I go to the testimonials and there are four people. I open all the images
and I insert this one - Daniel. And I say, his name is Daniel, his job is designer, the
image should be aside or on top. I like this and then I want to style it but what I want
to do first, I go to the backend I go to style and the background should be a gradient with
this color at the start and this color in the end. I change the angle to 90, like that.
Now, what can we make of this. I should click
over here, make this text white. So let's see what we can do. Designer - it's all fine.
Then I go to style, we have the content, we can change the text color but actually I would
like to change backgrounds, so over here I go to backgrounds, at advanced, backgrounds
> white. I like that. Then we have the margin. As I said padding is creating space outside
of the element, padding is inside of the element - 30, like that. Then I go back to style - text
color is okay. Typography - typography is fine. Let me see, I make this 90, this is
okay. This is okay. Line height, you can change it, letter spacing - I close it and then I
go to the image, I change the image size and make it bigger. The border type, you can have
a square image. So if I say no it is square, we can have a border with two pixels and the
color of the border is this one; border radius - that's okay.
The name - it can be bigger, so I go to Typography
> Daniel. I change the font to Raleway, I close it. I go to job, change the phones also
to Raleway and weight to bold and I make it a little bit bigger like that. Okay, advanced
> let me see what we can do. I want to give this an animation for instance zoom in like
that and then we go to the background, that's all okay. We go to border, we can have a border
a solid one and if I would say 40, it will look like this. If I say 10 it would look
like that, why not. Now we can do all other kinds of things, we can have a shadow, spread
it, blur it but I don't want that, but you can have it. The border radius can be 30 or
50 and it can change also on hover, change the transition, make this 100. So when you
hover over it, it changes like that and then you can change how long it will take
like that. I change the border to 3 pixels and this just for illustration, I would not
do this on the website, that's okay. So if I update it, it looks like that, then we can
duplicate this, so over here, then I close this one and I can change the text and grab
this image and then I copy this and I have 2 more, so I click over here, I change the
text, I change the image > header - traveler and the last one - a wedding couple and it
looks like that. A little bit more space here, at the bottom; how can I do that? I click
over here, go to advanced, I add some padding at the top - 40 and at the bottom - 40. I
click over here > advanced and remove this, like that. Look at that, this is our website
using Astra and the Elementor page builder. Then I want to do one more thing on the front
page, I want to show people the clients we have.
So a new section, one column. I copy the title,
I drag it here below, change the color to the middle one over here and then I go for
an image carousal again but now we are going to apply it differently. I drag it over here;
add images > upload files > select files. I go to the home page > clients CMD A and
open. I create a new gallery; insert the gallery and this is how it looks. Not everything is
shown fully, so I change it from thumbnail to medium and that should do the trick. We
can navigate over here and over here and we can configure it. Slides to show - it says
default, so it will decide by itself. Slides to scroll, so if I go over here, you see two
new ones. So if I go to the left WordPress you will still see because it only will show
two new ones. I can say one and then I have more bullets like that. No image stretching.
Do we want to have navigation? Yes. No links. Additional options > pause and hover - yes;
auto play- every 2 seconds show a new one; infinite loop; animation speed - yes; and
the direction is also fine with me. Then I can go over here to the section settings > advanced
and I say margin top or you know what padding is 40. I uncheck this, this is zero, zero.
Update; I like it.
If I want to decrease the space from the bullets and this line over here, I click over here
again; advanced > margin - uncheck and at the button I say -20. Update. So let's take
a look. It can be -60; that's a little bit too close. So I say -45; like that. Let's
make it smaller, this looks nice. Change one more thing of course, the title - 'The clients
we work for'; update. So this is our home page. It looks amazing, beautiful images,
nice style, more animations and even when we make it smaller, it will still look fine.
A nice menu, free logo, so far so good. Now if we go to about, you see we inserted that
template already, this one does not belong there. So I edit it with Elementor, I scroll
down and I remove it. If you want to follow this website in order to learn more about
Elementor then please click over here on the 'I' that you will see right now, and then
you can go to a different video where I show you step by step how to create this, how to
create this, how to create a contact page so you can learn more about Elementor. And
if you want to start importing everything, then go to Elementor.ferdykorpershoek.com
and take a look at this and insert all the sections you want and this library is growing.
It's all for free and everybody can make a website really quickly and that's what my
channel is all about, helping people to make a website. So I go over here, I close this,
I go to services, let me show you really quickly how I can do that, I edit the page; I scroll
down; disable the title; disable featured image; update > edit with Elementor; I go
to complete pages; I scroll down > services I click over here; scroll down - right mouse
click > Save Link As > save it > add a template > upload > select > services page > open > insert
and update it. And all this you can learn in the other video which you can see if you
click on the link over here.
Now I want to install a plugin, so I click on the 'I' over here and if I scroll down,
I see the contact form it's not working. So I go to the back end, I go to plugins > add
new and as you see over here there are a lot of free plugins. A plugin extends your website
with a certain aspect and maybe it provides some information in a certain way or it makes
your website faster. So right now I want to have a plugin that helps me to create a beautiful
form and in order to find it you can search for contact form 7. Don't press enter, it
will search automatically; 1 million installs and a lot of good reviews. So I install it
now. I activate it and that's all.
If I go to the website, to services and I click on videography, then I click on get
in contact, now we have a beautiful form over here. If you want to optimize this form then
click on edit with Elementor, go to ferdykorp.com > tutorials > Astra Elementor; scroll down
and here copy the code of a contact form, like that. I select it, CMD + C, go to the
website, click on the eye, so I can go to the backend. Then I go to contact, click on
Contact Form 1, I select everything and I say CMD V or CTRL V, I paste it. I scroll
down; I save it and now if we take a look, now we scroll down, it looks like that. So
in that way, you can build a website really fast. Let's take a look at the portfolio page.
I close all this stuff, normally a portfolio plug-in will come with the theme. We use Astra
and with the free Astra theme, there is no portfolio plugin unfortunately. So we need
to download one. I found one that I like for free portfolio item. So I go to the backend,
I go to plugins > add new and I search for portfolio and I search for the one from theme
radius or radius theme. This one; I click on Install Now > activate.
It is now activated and here at the left we
see a new item portfolio. I click on all portfolios and it means portfolio items but this says
portfolio, so I'm going to add a portfolio item by clicking this link add portfolio.
And if you go to the folder you've downloaded in the beginning, this one you can go to portfolio
and I have a few. So I have the wedding of Daniel and Lia, so I'll start with the title
Daniel and Lia and it Pro features but we will use the free version.
I want to add some media so I click on add
media > upload files > select files and I go to portfolio photography > Daniel and Lia.
I select them all; open. Now when you click on it, it remove the dashes, copy the title
and place it in the alt text. That's it. If I scroll down, I see some attachment display
settings. I want alignment to be in the center. I want it to link to the media file and I
want the size to be full size. I click on insert into the post. I click on it and I
remove it again and now I can add the media and now if I select it, those settings still
apply. So I select this one, I hold shift and I select the latest one, I insert them
into the post and I all insert them with the same settings. There they are.
Now we have categories; I have three categories.
The first one is photography. I click on add new category and if I want to, I can have
a subcategory - for instance wedding photography and then I can have a parent, I select photography
and I can add the new category and then I've subcategories and in that way you can organize
your portfolio. I don't use it for now so I uncheck it, I scroll down and I need a featured
image, set featured image, I click on it and I select one image of those pictures for instance
this one. Set featured image > here we have a short description and since we are working
with a free portfolio and you need to be creative to get the result that you want, so I want
to place over here photography. The project URL - No; the tools used - I leave this empty.
I scroll up and I click on publish. I can
view the portfolio and it looks like that. Now I want to add a second one and this time
it is a video and I call this Montana Lisianthus. Here at visual I want to add a video, so I
go to that video > films > Montana > then a Vimeo link. Here it is, I copy the link;
I go to a Vimeo, paste the link, then I click over here on share, show options; I don't
want to display the text, I click over here on embed, copy the link, go back, go to the
text, not a visual but the text. I paste a link and now if I go to visual, I'm embedding
a video. I add a new category which is called film. I add it like that and I select it.
Short description - film; featured image - I upload a file select file and I can find it
at blog > Montana over here. Open it, I can optimize it. I leave it for now, set featured
image > publish.
Let's take a look. The video, the image and people can see the video. I close it. I close
it, I close this, I close this; one more and I say Counsel Maassluis NL, add media, it
is a website; this one, inserted into the post. I can click over here and I can add
a link to it which is this one. It's a Dutch website, open in a new tab; add a new category
web design, like that. Featured image, also this one and you need a featured image so
it will be shown on the portfolio page and I call this web design. Publish.
Now I open the website in a new tab holding
CMD or CTRL on a computer, I go to portfolio and I want to edit the page. I scroll down,
I disable the title and now I go to the backend, to short code. We can create our own short
code. We can choose a layout; for instance layout two, columns - I like to have four,
order by date, the order is descending or ascending. It means the most recent one will
be shown first. Total number 50 and which categories - those three. I can say disable
image but I enable it. The title color can be the color of our website, paste it here.
The size - not too big, 14 and then I can grab this code, copy, I go to text over here,
I paste it and I update it. I click on view page and I don't like this, so how can we
fix that? I edit a page in a new tab, I drag it to the left and what you can see if you
go over here, you can go to settings and scroll down and here it says demo. I open the demo
and actually I like this way of displaying things. So I can select this code, copy, go
to portfolio > edit page and I place it below and I want to copy all this information until
the quote mark, copy it I paste it over here, space, then I remove this area, update; refresh.
I like that better. And here it says - web design, photography, film. You can see the
image or you can go to the portfolio item and then you can see the images over here
and here I see the category and you can share this.
I will make a few more and come back to you.
So I added a few portfolio items and this is how it looks. I think this is really small.
So I click on edit page, I drag it to the left and let me see, font size. If I would
say 18, update and refresh, it's a bit bigger, I think that looks better and let me try something
else, copy this, paste it space and size I change in weight and I say bold and over here
I also need to make a space, update, refresh. Now it is bold. So this is what we have, nice
animation. If you click on the item, you go to the item, great.
Now let's take a look at the blog page. I
close this. Now you should see here ready to publish your first post, if you don't see
that then go to the back end, to settings > reading. You should have displays a static
page, homepage home and the post page blog. If that's the case, then you should see this.
We hover over new and click on post. We're going to write our first blogpost and in my
case the title is the Elementor page builder. We can use Elementor to create a blog post
but I will use the visual editor. Create a category, I call this WordPress and it has
everything to do with the category of blog post you want to have. So if you're traveling
through the whole world, then you could say Asia or Africa and then with a subcategory
South Africa, so it's just the subject where you're writing about. In my case, it is about
WordPress related stuff. Set featured image > upload files > select files, I go to the
folder blog > Elementor and there it is, Astra Elementor 2018. I open it and I set the featured
image, I publish it and now when I go to the blog page over here, I see it over here.
The Elementor page builder, I can leave a comment. It's uncategorized, so let me see
what's going on over there. After I type WordPress, I should click on add new category, I uncheck
this; update; refresh like that; by Ferdy Korpershoek. And here we have the recent posts,
recent comments and all the widgets, we'll take a look at that later. So I want to explain
a little bit about writing blog posts and the use of paragraphs and headings. If I would
say over here, The Elementor Page builder and I would say enter, I can type a text and
it will be a new Alenia since I pressed ENTER. If I press ENTER again, you see it skips a
line. So this is a new alinea. If I would press SHIFT ENTER, this is the same alinea
as the sentence above. What do I mean? Every time you hit ENTER a new alinea starts, a
new paragraph starts; and every paragraph you can give it a style. You can give it the
style paragraph but you can also give it a heading style. So if I want this to be a title,
I click over here, I click on paragraph and I make this a heading - heading 2 for instance.
Heading 1, you don't need to do that because this over here will already be heading 1,
and you can use heading 1 only one time on a page. So, I will choose heading 2. So, this
was one sentence, and it is now a heading 2. Also here, if I click here, and I would
say heading 2, this becomes a heading 2. If I update it and I view the post, I close this,
then it looks like that. It's bigger; this is a header 2 and this is an alinea. But remember
here I said SHIFT ENTER, so this is still 1 alinea. So if I only want this sentence
to be a heading 2, it's not possible. So keep in mind that if you want to have a certain
text as a heading, you need to hit ENTER for it to be a separate alinea.
So again if I would say ENTER, then now I
can make this a heading 2. What else can we do? If I would select everything and say paragraph,
I can click over here, that's a toolbar toggle, I click over here and now I have more options.
So I can select this over here, I can make it bold, I can make this italic, I can make
this a color - purple and if I update it, I refresh it, it is bold, it is italic, it
is purple. We can add a link, new alinea, I select it. I click over here and I say go
to http://Elementor.com.
I can click over here and have a few more options, I open the link in a new tab, update
> update. I refresh the page and now this is a link. I can also make it bold and a link
update > refresh and if I click over here, I go to elementor.com in a new tab like that.
So that's the basic of paragraphs. So let me show you how we can put this to practice
even more.
I remove this text. I will grab a new text. So I have a text over here about Elementor;
here you see there's no space. So what is this? This is one paragraph. So if I would
like to have this as a header, what will happen everything will be a header 2 like that.
So what should I do if I want this to be a
header? I leave this paragraph, I should say ENTER and then I can say heading 2 and now
it works like that. So let me show you how I do it, ENTER, I go down, one BACKSPACE ENTER,
one BACKSPACE ENTER. I click over here and as you see, there are shortcuts. So in this
case on the Mac it is CTRL ALT 2, so I selected CTRL ALT 2 and in that way you can work faster.
If I do it over here, something goes wrong because this is just another SHIFT ENTER.
So I would say, ENTER and now it works; like that.
I would always start with a title, so I copy
this title and I paste it over here and then I say CTRL ALT 2 and now if I update it and
I refresh the page, it looks a little bit better already. As you see, you have the image
over here with the sidebar, with the widgets. We can leave a comment. Let's make it even
better. When you want to optimize your blog post for google or for other search engines,
it's good to highlight the word you want to be found on. In my case its 'Elementor Page
builder'; so I select it and I say CMD B or I click over here. Page builder, I select
it, CMD B. Don't do this too much, you should highlight it now and then but not too much.
Elementor Pro, here's a link. Click here.
I'll make it a link and I say https://ferdykorpershoek.com/elementor in a new tab. Update. We can make it a color.
So make it bold, make it green, update, refresh and it looks a little bit better. You also
can give it a color if you want to. Now I want to add a few images. How can I do that?
I go with my cursor to a place where I want to have the image; for instance over here.
I click on add media > upload files > select files and I want to import those three images
and they're already optimized for Google. Open Elementor live page builder.
So I want to start with this one. I align
it at the right. It can link to the file itself or you can have no link to it and I want is
to be medium. Insert into the post and now it's over there and here, pixel perfect with
no coding I can put my cursor over here. Add media; select this one; bring it to the left;
insert and maybe I want this to be bigger or smaller, that's up to you. You see if I
make it bigger, their quality is worse. So I click on edit and I say full size, update
and now it's better and now I can decrease it but the quality is still better.
Here is the one minute template setup, so
I click before the header > add media and here you see a few demos. I want to align
it at the right, full size and then I make it smaller. So I select it and then I make
it smaller, like that. And here I press ENTER and I say add media, this one, but now no
alignment, none; full size, like that. Now maybe I want to show a video so say enter
and then I go to YouTube, I search for Elementor 2018, my last tutorial, click on it, click
on share > embed, copy the code and go to the text editor and I paste the code. I go
to visible and there we have it. I say update, refresh and now we have images over here.
In the video now let's take a look at the customize settings of the blog page. First
a blog post, the single post. I click on customize, I close this, I go to layout > blog > single
post; so this is over here and over here I uncheck the featured image and it is gone,
then I can remove this one if I want to, unchecking it over here but maybe I want to have them
both, so I click here and I click here and I can also change the order. So I place this
here above, so if the title and the image like that. I uncheck this one, I want to show
the title and blog meta, so what do I want to show? First the comments, leave a comment,
I want that to be the latest one, leave a comment by Ferdy Korpershoek, WordPress. I
can uncheck the category. It says by Ferdy Korpershoek, leave a comment. So you can play
around with that. The published date, I want that to be first. January 22, today it is
four years ago that I asked my wife to become my girlfriend and she said yes. So I'm happy,
it's a special day today.
If you want to change this, maybe you're in a different country and there's a different
way of displaying the date, then you can go to your website, go to the backend, then go
to settings > general, scroll down and change the date format. So this is okay. Single post,
content width default or custom. Maybe I want it to be smaller, that's possible. I go back
and I go back; I go to container and here at the blog post, it says content box. So
if I would change this to box and I go back to colors and backgrounds and I go to base
colors and I change the background to nothing, you see it looks like that. All boxes like
that and actually I like it, so I publish it and now it looks like that. You don't see
it here, if you want to change it, over here click on customize, go to layout > container
> blog post archives boxed and they have the same effect. I bring them both back to default,
but you see it is an option. Publish, close it. So this is a single blog post with the
title, the date, the author, leave a comment, the Elementor page builder. Maybe we want
to change this? How can we do that? Click on customize, it is a header 2. We go to typography,
base typography, the headings are Raleway, maybe they can be a little bit more bold like
that. I like that. I go back, content and now heading one is very big, heading 2 is
a little bit less big. So I can say make this 30 or 10 and then it becomes smaller - 20;
not too big so maybe 22. You can do that for everything.
You can also change it for tablet and for
smartphone but I like it. Publish, okay. I want to make this a little bit bigger, I edit
the post, I go to the text tab, I scroll down all the way and now I could say 800 by 450.
I don't know if it is correct but if I would update it and I view the post, it will probably
look like that. I like it. So now it's from right over here to the left, all the way on
all width. I like it more. I can leave a comment. So if I would open Safari and I can say "wow!
great blog post." My name - Ferdy, my email, my website no, post comment. Your comment
is awaiting moderation.
Now if I go to the back end, I see comments over here. I can approve it. I click on approve
> reply, "thank you sir," reply and now if I go to the blog post, I click on read more,
it says two comments. If I click on it, I see it from Ferdy, "wow great blog post" and
from me "thank you sir." So that's really nice.
I want to show a few more things. If I go to the blog page, I see text over here and
then those three dots. How can I change this text? I go to the blog post, I edit the post
and then if you scroll down, you see nothing over here, if you scroll up, you click on
screen options, excerpt, close this and now you see an excerpt text. And that is a text
you can create yourself. I grab the first Alenia and it ends with go, update, now if
I view the post and I go to the blog page, it ends with go. So in that way you can decide
for yourself what text you want to play it over here. So you could give a summary about
your blog post. The only thing is that you don't see the read more button anymore but
you can click here and you can click here. So that's great. And I want to take a look
at the sidebar over here. If I hover over here and I go to widgets in a new tab, holding
CMD, I see search, recent posts, recent comments here at the main sidebar. If I take a look
at the website, it says search > recent post > recent comments. So everything you see over
here will be displayed here in the sidebar, in the main sidebar. The main sidebar means
that on all the pages and posts that have a sidebar, those widgets will appear. So if
I would delete search and I refresh the page, it is gone. So we have recent post, recent
comments; I will remove them all like that, refresh and that's empty.
Now I go to plugins and we are going to add
a new plugin. That plugin will show you the recent post with a thumbnail. So I say recent
posts with thumbnail. From Martin, a lot of active installations. Install now and I activate
it and this is a widget. So now if I go to appearance > widgets, it should appear over
here. Those are all the widgets and here it says recent post with thumbnails and speaking
about widgets, a lot of premium themes have their own widgets. So the amount of widgets
depends on the theme you have, but you can also have plugins like this one and I bring
it to the main sidebar, I click add widget, then I say a recent posts. The amount I want
to show, we only have one but I want to show a maximum of 5, then I scroll down, I want
to show all the categories, display posts featured image and I want it to be 50 by 50.
Save it, refresh the page and I see recent posts, the Elementor page builder so I like
it.
I'm going to build a few more blog posts, let me show you. New post, let me do it quickly
"The Oasis of the Seas." I paste some text over here and I add two images > upload files
> select files > blog > Oasis of the Seas; two pictures open them, you need to optimize
them and then insert into the post, like that. A new category, photography > edit > featured
image > set featured image and I grab this text as my excerpt. Publish and we have a
new blog post. We can take a look and there it is - The Oasis of the Seas.
Now if I go to the blog page, you see the
image - Oasis of the Seas; so that's how it works. I will create a few more blog posts
and then come back to you. So I added a few blog posts, I refresh and there they are and
it's displayed nicely. So looks good. We can customize it. I click on customize and I go
to layout > blog > blog archive. Do we want to show an excerpt - a text like that or do
we want to show the full content? That's also a possibility and you'll see all the images,
you'll see the full text like that. I choose excerpt. Do we want to see all the featured
images if I would turn it off. We will not see them. I do want to see them and the rest
works the same. They want to see this, leave a comment, maybe, I don't want to show that.
I want to show personal and by Ferdy Korpershoek. Now what I want to do, I want to change those
two. So the title will be on top, then the image, then the text. I like that better.
So this is our blog page. I publish it, what I want to show you, right now there's no date
over here but if I click on the link, you see January, the 22nd, and all the blog posts
are of the same date because I just made them today.
If you want to edit that, for instance - our
honeymoon was in 2015. So I click on Edit Post and over here at publish, I click on
edit and I can say December 12, 2015. I can change the time; say ok. Now if I update it
and I view the post, you see the date has changed but not only that, now it is here
at the bottom, why because it's ordering and it is ascending. So the most recent one will
be 1st, 2018 and the oldest one will be here below. But you can do something else, you
can also schedule a post. So if I click over here, I say edit post, I can say this should
be published the first of February at 10 o'clock; ok. Now it says schedule; so if I go to the
website, to blog, you don't see it anymore because it's scheduled.
So the 1st of February, it will appear at
10 o'clock automatically. So in that way you can create a lot of blog posts and configure
that they will all be scheduled for every Friday. So every Friday there will be a new
blog post online and in that way you can automate your blog posts on your website which is really
nice. I will put it back so I go to the backend > posts > all posts and there it says, it's
scheduled for the date. Quick edit, 1st of January, update. Now it's over here; over
here we can have more widgets and here at the bottom, we can also have a few widgets.
So I click on customize, I go to layout > footer > footer widgets and I turn them on. So right
now they are not here and now they will be like that. Publish, I close this and I want
to add a Facebook widget so I go to the backend > plugins > add new and I search for Facebook
by weblizar and there it is. A lot of installations, install now > activate and now I can go to
appearance > widgets and here it is. I click on it and now I can select footer widget area
one, I add the widget and I say like us on Facebook. I go to my Facebook URL, the international
one, remove this; copy it; I paste it here and do I want to show faces? Yes. Do I want
to show a live stream? No. Save it. Let's take a look and here it is. Like us on Facebook
and if you want to, you can like me and I would like that. The second one. I go to plugins
> add new > instagram > wpzoom. There it is. Install now; it can get a little bit complicated
but I'll show you step by step what you need to do, because you need to configure your
Instagram widget.
I click on the settings page, otherwise you can go to Instagram widget and then go to
settings, connect with Instagram and there's my token, I save the changes and now I go
to appearance > widgets or you can go to the front-end, go to customize, scroll down and
do it over here. So you can go to widgets footer widget area 2, add a widget search
for WP Instagram widget by WPzoom and there it is. I can say follow us, 9 images, 3 columns.
I want to bring this back to five, the image spacing. So it will be a little bit more narrow;
the third one I want it to be the same one we have already. Something with blog posts
or with posts, recent posts with thumbnails, like that. Title recent posts - five; it's
all fine. Publish and what we can do, I can go back, go to footer widget 4, add a widget,
search for text, about and then I go to, I grab this text, I paste it here and I publish
it; close. And now actually I want to change the order. How can we do that?
I go to widgets, I open those four areas,
the text I want to be at the left and then I want to drag this all one down, like that;
refresh. I like it. What you also can do, you can add more widgets over here. For instance
below about, I can have another one, for instance a search widget, you don't need a title so
I can refresh it and I've searched over here and over here I can say, I want to show only
30 posts. Save; refresh and now it looks like that. I like it a lot. If I click over here,
you go to the blog post. Also here I want to add a few things. So that is over here,
Facebook and I just can go over here. Copy this, paste it, show faces - yes, show livestream
- no; save and Instagram I can also drag it like that. Save; refresh. Now it looks like
that. You can have more things like sign up for our newsletter if you want to learn more
about email marketing. I've tutorials about it using MailChimp or using ConvertKit.
So that's it. I go to contact, let me show
you how fast I can do this, edit the page, go to Elementor.ferdykorpershoek.com, search
for complete pages, contact page one, right mouse click, save as, save, I scroll down,
disable title, update, edit with Elementor, close this, add a template, upload, select
file, contact page, insert; that's it. Update, let's take a look and there it is. Look how
fast that goes. So I have a tutorial that is about what's next, optimizing your website
for Google, adding a few more plugins, you can watch it over here and I want to do one
more thing, if I go to, new blog page, for instance this one and I edit the post and
I say edit > link to media file > update > update, view the post and if I click here > I go to
the file itself. I don't want it. I want to have a lightbox. So I go to the backend > plugins
> add new and I search for light box. I did not prepare this. So video lightbox, image
light box, a lot of installs; not that good. Responsive light box. I like this one. Install
> active. I go to the website, to the blog page; Oasis of the Seas,. the first image
and it looks like that. I like it. I'm happy. So that's what you can do with free tools
within WordPress.
So if you have made this whole website on your own computer, then I will show you how
to transfer it to your live website. I go to the back end. I go to plugins > add new,
we're going to transfer this website from our local computer to a website. I search
for all in one, install now. I activate it and here you see a new item, all-in-one WP
migration. I click on export > export to file and I click over here to download the website.
And here I can see it is downloaded.
Now you can follow the steps in this video how to get a domain name, a web hosting through
SiteGround and if you follow through all the steps, then you are here. So over here I can
go to the backend of my website and I go to plugins, I want to deactivate jetpack, select
all the plugins, delete them, apply > ok. I go to the dashboard, to the post, I click
on trash, empty the trash, I go to the dashboard, I dismiss this message and now we are ready
to go to plugins > add new, all-in-one and it is the second one, install now > activate.
Here it is. I click on import, import from file, the file we just created, here it is
from our developer website, open it and now it is uploading. I click on proceed and then
we need to go to the permalink settings. We need to log in first probably with our login
details of your developer website, click on post name, save the changes, again save the
changes; two times. Now your website is live - new.astra.elementor.com. So that's how it
works. So we have made a beautiful website using free tools. I hope you learn a ton of
stuff and if you want to take it to the next level and you want to take a look at the pro
versions of Astra or Elementor then go to FerdyKorp.com > tutorials > Astra Elementor
and let's take a look at Astra first.
So I click over here; I go to download now and we use the free version and if you take
Astra Pro, what do you get? You can use them on limited websites, you pay it once a year.
You can also buy it for a lifetime so you pay once $250 and then for the rest of your
life you can use all the Astra Pro features on unlimited websites, so that's ideal when
you want to become a web developer. What do you get? You get updates and supports for
a lifetime if you get the lifetime version. You pay only one time for the rest of your
life and the top features, you have a transparent header, so I made a website with a pro version.
So if we take a look over here, give this a nice menu, if you scroll down the header
can be sticky. What else? As far as footer, we've now four footer widgets. But if you
go to layouts > footer > footer widgets, you see there are more options, so you can be
very creative over here.
Let's take a look at all the features - transparent header, sticky header. We can have page headers,
we have more control of all the colors, better typography, custom layouts, the footer widgets,
I scroll to top, so over here if I click over here, I go up. We can have different blog
layouts, so if you go to the blog page, there are more options. For instance I have a grid
view like that. So if we take a look at the blog archive page, you see there are more
options but also at the single post there are more options. We can have a mega menu
and more stuff. But if you even want to take it to the next level and you go for the agency
bundle, if you pay per year you pay $250 per year, if you go for a lifetime you pay one-time
$700 and then for the rest of your life, if Astra Pro add-on, Astra premium sites, let
me show you premium sites, I go to appearance > Astra sites, I go to Elementor, what you
see over here, this is the portfolio plug-in that comes with the agency. So this is what
you also can create when you get this package, but if I take a look at Elementor and I see
a site that I like, for instance this one details and preview and I want to have this,
I say install plugins and import this site, okay. So if you make a website for a client,
you can start from this point.
So you search for a site that you like in the Astra sites and then you can import it
with a few clicks and then you can work from there and it will save you so much time and
it will make you so much more money. So I have to say, it is a big investment, $700
or you can start with annual but what you get for it is amazing. It will save you a
lot of time. Done; view the site and there it is. With a few clicks you get this take
a look at shop, click on a product, look how amazing it looks. So if a client wants a website
with a webshop, you can choose this one and change it and then within 2 days you can show
the first preview and it is amazing. What else do we get? Convert Pro, only one Schema
Pro, so that's about Astras and then we have Elementor. So if I would go to Pro. Astraelementor
and I go to Elementor Pro, here you see what is possible. Again the menu, that is sticky
and here I show you all the pro elements. The animated header, the Facebook button element,
the slides element, slides element that you can use to show images like this, the price
table; so all those elements are not within the free package but in the pro package. Portfolio,
again the blog quote, so it gives you even more freedom to create whatever you want on
the website. I like this one the most. Look at that, the flip box, there are so much great
options over here. For instance this one, the template element, if I change this over
here and have also placed this element on different place on the web sites, then it
is also automatically changed.
The media carousal in a different way and if I click on it, I go to video, the share
button, woo products; I don't have WooCommerce on this website but it gives you so much freedom.
If you want to get that, go to FerdyKorp.com, click on tutorials, Astra Elementor and here
you can get Elementor and I have also tutorials on all the pro elements. So I want to take
a look at that click over here and that's it. I wrap it up. So that was it.
Thank you so much for watching this video.
I hope this video was helpful to you and you are able to create a beautiful website. Good
luck with your business, which are nonprofit or whatever else you are doing and I hope
you have a great day. Please like this video and subscribe for more upcoming videos and
then you'll see me the next time. Bye.
