How To Make A Professional WordPress Website FOR FREE

How To Make A Professional WordPress Website FOR FREE


Hi guys my name is Ferdy Korpershoek and in
this tutorial I will show you how to create an amazing website using a free theme, using
free plugins and using free stock images. This is the website we are going to create. A nice logo, a clean menu with a sub-menu
like this. If I scroll down, you see that the menu will
shrink a little bit. Here we have a beautiful slider where you
can show some photos, a text about your company, what you do, and you can have a call to action
if you want to. If I scroll down, I want to show my services
over here – photography, videography and web design and I want to show some examples images
I make, about videos I make and websites I make. If you want to have more information, you
can click on the button with animation and then you go to one of these pages. Here you scroll down and you see the recent
projects. So a website or a video, if you hover over
it you see the text over here and if you click on it, you go to that page. Here I have a fixed background again and I
want to show what I offer, my services again, nice picture. If I think I want this gap to be bigger or
smaller, I just click on edit with Elementor I click on the section and I can say I want
this to be higher or lower, you see when I do it, it changes immediately and that’s amazing
about this front-end editor – you see what you are doing. You can change the text over here, you can
change the images if you want to, you can change the order. If you do that, you see immediately the result. So that’s how easy it works. Here we have the recent post or latest blog
post, if you click on it, you go to the blog post. I scroll down and here I have the footer widget
area. I will show you how to create an Instagram
widget, the Facebook widget, a recent post widget and the latest project widget. I have to say I don’t like these colors, so
if I want to edit the style of this page, I click on customize, I go to colors over
here and if I search for colors, I go to the footer and I scroll down, I can see what I’m
doing. So over here it says footer widget area background,
if I make this different color, you see it immediately. I want make it darker and I still don’t like
this text, so I go to the footer widget area color and I can change this to a different
color. For instance almost white and now it is changed
and here below I will show you how to change this text, you can even have a disclaimer
link or a different link. I click over here and I go up again and then
I can go to the about page. Now I will show you step-by-step how to create
the about page with the amazing Elementor editor. I have a text over here and image, nice background
that is fixed, here I want to show you my slogan with a background, my logo, and if
I scroll up and I click on testimonials, I scroll down to the testimonials immediately
automatically. So you can also use anchor links, you click
on the link on the same page and you go to certain area, so you can even create a one
page with this amazing website. Some social media links; I go to services,
nice text over here. Again this same area I will show you how to
copy and paste certain elements in your website and if I click here on ‘more information about
photography’, I go to photography. I can click on the picture and I can navigate
to it; you can change the order or randomize the order. I don’t like this image over here, it’s too
long, so I click on edit with Elementor. I click on this element. I click on the images and I remove it and
here at ordering I say random and now it is gone, it looks better and if I refresh it,
you see there is a different order. I will show you how to create a video area
like this, web design same thing, then we go to the blog page. I will show you how to create a beautiful
blog page. Here’s an overview of the recent posts and
here at the left you also see them, if you click on the title, you go to the blog post
or if you click on this image and if I want to change the look and feel of the blog page,
I click on customize, I go to the blog options and I change it to masonry and immediately
you will see the result. So here we see our blog post, you can change
the length of this text. So if I would say show 100, you get more text;
I leave it at 55 and there are more options. And if I go to the single post, the Enfold
theme, I’ll show you how to add images if you click on it. You can navigate through all the pictures
in the website. I’ll show you how to highlight words, how
to create links. How to put images on different places in the
website, how to create headers, how to adjust the sizes, the margins and the paddings? You can even go to all our blog post or a
newer one you can leave a reply and on all the pages you see the footer widgets. If I go to the portfolio, I will show you
how to create a beautiful portfolio like this. If you hover over it, you see the title, you
can click on it but I also can say I only want to see the photography projects or the
videography projects or the web design project or I want to show them all, it’s a really
nice plugin. If I go to the contact page. I will show you how to create a simple form,
some information about your company and where you are on the map. If I want to change this, I can do it really
easily. I click on edit with Elementor. I click over here, maybe I want to change
the size. So here I go to height, the same height as
the form and then I can go to all the other elements. I can search for image, I can drag it here
above or below. You can click on it; I can search for Ferdy,
I want to add this image, insert it, save it and that’s how easy it is to change things
on your website. So if you want to learn how to create a website
like this with a free theme, free plugins, free images then stick around because I will
show you step by step how you can do that. I will show you how to create this website
without spending $1, but if you want to get web hosting, then you need to pay money. Web hosting costs money but I will also give
you the option to create a website on your own computer and then at the end of this tutorial
you haven’t spent $1 and you will have the same result as the website I have just shown
you, so I would say let’s get started. So the first thing we want to do, we want
to get our website live on our own computer or through web hosting. Right now I will get it to a domain name web
hosting, so I can show you the website I am going to make in this tutorial. If you want to install your WordPress website
on your own computer, then please go to minute 14 of this tutorial and I will show you how
to get it on your own computer using server press. I go to webhosting124.com and that brings
me to Hostgator. I host all my websites at Hostgator. It’s a great web hosting provider. They are cheap, they are reliable and I can
chat with them or call them 24/7, all the days of the year and if I run a test on my
website, I see the websites are very fast, which is very important for me. So in order to get a domain name, and web
hosting I click over here on web hosting and I can choose between three plans. The business plan we can forget, you pay too
much for what you need. We want to choose between a hatchling plan
and the baby plan. What is the difference; if you want to create
only one website then you need the hatchling plan, it’s for one single domain. If you are planning on making more websites
then I should choose the baby plan. You can have unlimited domains, that means
you can create more web sites, you pay a little bit more than the hatchling plan but you can
store all those domains in your website and you only have to pay this price per month. It doesn’t matter how many web sites you will
have. You can always upgrade later. So I start with hatchling plan – one single
domain, one click installs, a lot of band width and I sign up now. I click over here. Now I need to enter a domain name, if I say
Facebook enter, it says it’s already taken, so you need to have a unique domain name that
does not exist yet. So I go for Sydney Elementor because there
are two things I will use, I press enter and it’s still available and right now it says
$15 for a year but I will show you some discount later. So I scroll down, you can also choose different
extensions .club, .site but I leave it as dot com. If you don’t have to dot com but you really
want to have this name, you can choose the dot net or dot org, I would not use all the
others. If you don’t want your information that’s
connected to the domain to be available then check this and nobody can see your information. People can see whatever they want, so I uncheck
this for me so people can see my name, my street, my town and when it’s protected they
only see the Hostgator contact information. Again, which plan – the hatchling plan. The billing cycle – the longer the billing
cycle, the more discount you get. I would like to choose for six months and
it says you don’t get any discount, but I can give you some discounts, my username FerdyKorp,
a security pin 1234. I never use it but it can be when you contact
the customer support they ask for your pin code to verify it is you. Enter your billing information, all the important
information about your website will be sent to this email address and fill in your first
name, company, phone, address, country like this and then you can choose your payment
type; credit card or PayPal. I choose credit card, I fill in my details. If you have a business, you can say use a
business account and your business name, my name is Ferdy Korp Media. My registration number and I scroll down and
I go to step four, and here are some additional services and I don’t need them. We can get the same result of protecting our
site in WordPress without spending any money. So we have six months of web hosting and it
cost $80. However if you use the coupon code FerdyKorp
and validate it and you scroll up and you uncheck this option again, it says you pay
only $51.98 for 6 month of web hosting inclusive, the domain name. So it gives you at least 30% discount. If you use this coupon code you get discount,
I get a commission and you don’t have to pay extra for this. So it’s a win-win-win situation, thank you
for that because in that way you support me. Then you scroll down, I’ve read and agree
to the Terms of Services, check it, and click on checkout now. Get ready we are setting up your account,
so I go to my email account and I should have two emails, you should have two. The first one is the billing information and
the second one is your account information and here’s a link to my control panel with
my username, my domain and my password. I copy my password, copy, I click on the control
panel link and here it says username FerdyKorp and my password I just copied and I paste
it and I say login. I need to click a few other things away, and
I click over here and I want to change my password. I click over here, my old password, I paste
it, my new password and I change my password now. So again my username and now my own password,
I log in and I’m there. Over here, it’s popular links; it says WordPress
one-click installation, I click over here and here I can select my domain, it is sydneyelementor.com,
you can also say forward slash new (/new )so it will be sydneyelementor.com/new and your
website will be over there. I just want to leave it in the root directory,
so sydneyelementary.com. I click on next and I need to say my blog
title. My website is about my services, photography,
videography and web design, so I start with it because Google takes look at the first
word in blog title, so if I say Ferdy Korpershoek, people will not search for a Ferdy Korpershoek
when they search for a web designer, they will search for web designer or photography. So I’ll say photography |
videography and web design Ferdy Korp Media. My user name, my first name, my last name
and my email address [email protected] Ultimately create a new database by clicking
on install import your “accept our terms and services of agreement” and I click on
install. Right now WordPress will be installed at sydneyelementor.com
and there it is. However, if I click on this and I open it
in a new tab, the site can’t be reached. Why is that? It takes up to 20 minutes before Hostgator
get your domain active. So you need to wait for a while and then we
can continue creating our amazing website. It is now 15 minutes later and I refresh it
again and yes our website is online. I can click over here to login and I can use
my username FerdyKorp and my given password, I copy it and I paste it and I login. I don’t need this anymore and I don’t need
this anymore so I close them both and it says welcome to WordPress. In order to install WordPress on your own
local computer. Go to serverpress.com. There it is, click on download, and I scroll
down and I go for the free version and it says here free add to cart, desktop server
limited, you can have three websites running on this local server, $0 filling our details;
Ferdy Korp Media, Ferdy Korpershoek, my email address is [email protected] How did you hear about us? Google, and I agree to the terms. I purchase and I’m on the Mac, so I click
on Macintosh, the latest version. I click over here and it starts downloading. I show the file in finder and there it is,
it is finished. So I double click, I close this and it takes
a while before it is opened. So there it is, I double click on install,
I open it, close this and I click on continue, fill in my password of my computer, I accept,
New desktop server installation, continue please wait a while, files are being copied. Done, you can start desktop server from your
application folder, OK finish. I can go to finder, Applications, then X of
XAMPP and here it is desktop server. I double click close this, yes we start desktop
server with privileges. Next, I need to fill in my computer password
again. Yes start apache and MySQL services, next
create a new development website and this is what we want, so I click on Next and I
say sydneyelementor.div.development. Blueprint will be the newest WordPress and
I click on create and desktop server is now doing all the hard work for us. It’s creating a virtual website on our own
computer with WordPress. I click on next, on next and I go to sites
over here and here it is. I can go to the dashboard, to the database
or to the website. I want to go to the website, I click on visit
website and I need to choose my language. I’m going to install WordPress on my local
computer. I want to choose English, I continue my site
title again photography, videography, web design, FerdyKorp Media, my username, my password,
I confirm use of a weak password and my email address, and I install WordPress and here
it is, Welcome to WordPress. So from this moment on I will work from my
domain name sydneyelementor.com. I will not use the local server but you can
and you can follow along all the steps I will take. The first thing I want to do, I want to clean
things up. So I say I don’t need help and you see there’s
quite a lot of information over here and I want to clean it up within a few minutes. How can I do that? I go to plugins. I want to start with a clean WordPress website
not with all kinds of pre-installed plugins. So here you see a lot of plugins, I don’t
need them. So I click over here, left from plug-in, so
I select everything and then a bulk action will be deactivate them all. I apply it and now all plugins are deactivated. So you see, it looks a bit cleaner already. I select them again all, bulk actions, delete,
apply, yes and one by one they will be deleted. I go to must use and I say disable, I go to
the dashboard and I dismiss this, I close this quick draft, I close this and this one. If I go to my website, I can hold command
and I open it in a new tab when I click. Right now, we have one blog post and if I
click on that blog post, you see sydneyelementor.com/index.php the year, the month and a title. I really don’t like this, just like Google. Google hates this kind of permalinks, so I
need to go to the back end and I want to fix that. How can I do that? I go to settings>permalinks and it says
here we have custom structure, I want to change that to post name, so it will look like sydneyelementor.com/sample
post – a lot cleaner. I save the changes. I go to the website and if I click on this
text I go to the home page, and now if I click on hello world, it looks like hello world
this is what Google likes, this is what I like, so I leave it like that. I go to the back end to the dashboard and
we have one post, one page and one comment. It comes with WordPress and I want to delete
it. So I click on the post, hello world and if
I hover over it, I can put it in the trash. So I click over here, then I need to go to
the trash and I can empty the trash or I can delete it permanently. I click over here and now our blog post is
gone, so if I refresh this, it says oops that page can’t be found. I go back to the dashboard, I go to the page,
I hover over it and I click on trash. I go to trash and I empty the trash. So if I go to the home page, it looks like
this, ‘nothing found.’ There are no posts and there are no pages. I go to the back end and right now my name
is Ferdy Korp, I want to change it. So I click over here on ‘Edit my Profile’
or I go to users, your profile and you can change the back end if you want to. I leave it as this, I want to put my first
name over here, my last name over here and then here it display name publicity, right
now it’s Ferdy Korp. So if I write a blog post, it says written
by Ferdy Korp and I want to change it to my whole name. So I click over here and it says Ferdy Korpershoek. One more thing, I want to create a new password
so I click on generate password and I change it to mine, confirm use of a weak password
and update profile. Now if I log out, I can log in with my username
and my own made password. I click on remember me and I log in, I save
it, I close this so it looked like this and now it looks like this. This is the back end of your website. This is what you only will see. This is what the visitors will see and this
is what you will see. Here you can adjust your complete website
in the back end. So we have the back-end and the front end. What I want to do, now I want to create a
few pages. You can do it through the front end. If you are logged in, you see this bar over
here and you can go to the dashboard, to themes, widget menus or you can customize the theme
or you can create something new of post, media, page or a user. I go for page or you go to the back end to
pages, add new or you click on pages and click on add new. I click on add new and here we can enter a
title of the page, so I say home, I leave it as this and then I just say ‘Publish’. Now we have created our first page – the home
page and you see sydneyelementor.com/home. Over here I can add a new page, so I go for
the second one and what do we want to show on your website? I think if you have a business or an organization,
people want to know who you are. You can offer a lot of things but if people
do not see who you are, maybe then they don’t trust the website. So I want to create an about page – ‘about
me’, about Who I am? What I do? Why I do what I do? And I publish this. So we have a home page, we have an about page
but we also want to show people what we have to offer. So I will make a new page, its called ‘services.’ I add a new page clicking this link, and I
say services, ‘publish’. I offer three services photography, videography
and web design, so I want to make pages about that. I add new and I say Photography, new page
Videography and the new one Web design, ‘publish.’ After services, I want to showcase what I
do so I want to tell people what I do but I also want to show it to them, so we want
to have a portfolio page. I add new portfolio, publish. Sometimes I want to write about my business
about what I learned, about what I’ve been through? So I want to have a blog and blog post. So I click on add new and I create a blog
page, I publish it and when people are convinced they want to contact me. So I want to have a contact page. I add new contact and publish. If I go to the home page, you see no menu
at all. We need to create a menu of all the pages
we have. How can we do that? I go to the back end, I go to appearance and
menus. Here’s the menu name, I say main menu, I don’t
know why that’s the way I like to do it. You can also call it something different. If you have a name you can say create a menu. So here’s our menu, here are our most recent
pages, you can also watch all the pages, you can search pages, you can also add posts or
custom links and maybe I want to say select them all and add them to the menu and there
they are. You see I have home over here and I’ve home
over here. This is a custom link that I want to add the
page in my menu and not the custom link. How can I delete this? I click on this arrow down and I say remove. What I can do, I can change the order by dragging
it. So the Home I want to drag it here above,
after that About, then Services, Portfolio and Contact. I have a few items I want to show beneath
services as a submenu item. How can I do that? I go to photography, I drag it over here,
but I go a little bit to the right and you see it snaps over here like that. I drag them below it, videography and web
design and I want you see it becomes a sub-item, so it will have a drop-down menu. I can save it but then nothing will happen. We need to assign this menu to a place in
our web site. Here it says display location and I can say
the top menu. I save the menu and now if I refresh it, we
see our menu over here and if you hover over services as you see photography, videography
and web design. I really don’t like this WordPress theme. So let’s take a look at a different WordPress
theme. I go to the back end, to appearance and to
themes. Here we have a few WordPress themes and the
WordPress theme is actually a layout of a website. So right now we have 2017, if I would say
2015 and I activate it. The information on our website will stay the
same, but if I refresh it, it will be displayed in a totally different way. So right now, we see the title here at the
left, no picture, no menu and that’s how you can change things. So let’s take a look at a few different themes. I want to add a new theme. You can take a look over here for a few free
themes, for instance you can preview it over here, I am going to minus to make it a little
bit smaller, this is how it looks like and if you like it you can install it. I have a theme in mind, that is in my opinion
the best free theme there is and it’s not here, it is at popular and it’s called ‘Sydney’. If you can’t find it, maybe you can search
over here Sydney and there it is and I can install it, and I can activate it and it says
this theme recommends the following plugins. So I want to install those, begin installing
plugins, OK, I click on it and I click on Install, return to required plug-in installer
and I want to install this one, I click on install, return and now I need to activate
them both, so the first one and the second one. Now, if I refresh the website it looks like
this. A lot better in my opinion. It does not look how I wanted to look yet
but we will work on that. This is the Sydney theme. If you are making this website on your local
computer, you haven’t spent any dollar yet and you won’t spend a dollar unless you want
to have web hosting. Then you need to spend money but the whole
website is made with a free theme and free plugins. Now I want to assign the menu to this theme,
so I go to the back end, I go to appearance>menus. We still have our menu but we need to assign
it to the theme and here we have menu settings, display your location. You can also do it over here, manage locations
and our primary menu will have the main menu. I save the changes and I refresh it and there
it is, our menu. If you want to you can follow along in my
tutorial by downloading the images I use in this tutorial. If you want to go to ferdykorpershoek.com,
go to tutorials>how to make a website for free, click on it; here it says get local
press, get web hosting, download the images I used in this tutorial, click on it and there
they go Enfold 2017. I click on it and I drag it to the desktop,
from there I can watch everything, so here for the settings, I have my logo, my fave
icon, and I have a lot of pictures. I will show you how to get free images from
free websites that you can use for free. This whole WordPress tutorial is based around
free stuff. Now I want to customize the Sydney theme. I close this one, I go and click on customize
and here you see a lot of options. The active theme is the Sydney theme, then
I go to general and that’s the first thing. Over here you see quite a gap and I want to
remove that. If I would say 300, you will see this goes
down over here and I want this to be zero pixels, so I say zero, now it comes closer,
here also zero, so it comes really close, later you will see why I want to have zero
pixels over here because otherwise you get a white bar and I don’t want it. I go back and I go for the side title tagline
and logo. Right now our site title is okay. Photography, Videography and web design and
you have a tagline and if you don’t have a logo, you see the tagline over here. So you can say something about your business. I have a tagline or a slogan which is “you
deserve it to be seen.” I take pictures of people, I put them in a
movie. I make websites, my slogan is you deserve
it to be seen. Everybody has something special, everybody
has talents and everybody is unique so I think you deserve it to be seen. I upload my logo, I select an image and I
can drop files from my finder or I can select files. I click on select files, I go to the desktop,
to Enfold 2017, I go to the settings and I search for my logo. Here it says, Ferdy Korpershoek logo. It’s 92×82 pixels and I open it. I can optimize the title Ferdy Korpershoek
logo, I can copy the title and paste it in the alt text, that’s good for the search engine
results, I choose the image. What you will see it will update real time
so that is really nice, because I’m on the laptop and my screen is not that big, the
theme thinks I’m on a smartphone or on a tablet so the menu is collapsed like this. If I press command minus, the theme again
thinks that I am on a normal computer which I am but because of this space, this space
is too small, so now it looks as I want it to look. So I can work on this, we have nice logo over
here and a site icon. Right now, I see crocodile from Hostgator
and I want to select my favicon. I upload files, I select files and it’s a
favicon. It needs to be square and it can be 62×62
pixels, it can also be 512×512 pixels but the important thing is, it needs to be square
and it can be a PNG, so that this white space will be transparent just as this crocodile. Behind this crocodile you see the color of
Chrome. I open it, I don’t need to optimize this,
I select it, I don’t crop it and over here you see this – Ferdy Korpershoek. Really nice. I go back and I go to the header area and
if I want to, I can say save and publish. We can select our header type. Right now it’s a full-screen slider that’s
really popular of the Sydney theme, if I say I don’t want any header, you’ll see the slider
is gone. I want to have a full screen slider so I select
it, you can also show an image or a video then you need to upload the video or link
it to YouTube. I will use the full screen slider, and if
I go to a different page, I can have an image but I want to show nothing, only the menu. I go back and I go to the header slider. The slider speed, this is milliseconds, so
this means that every 4 seconds the slider will show different picture. So you can say one second and what will happen,
it goes really quick like that. I make it five seconds and you see here welcome
to Sydney and if you go to the second screen of the slider, it sends ready to begin your
journey. If you want to show only one text, I can say
stop slider text. So here’s welcome to Sydney and even if you
go to the second image, it still shows welcome to Sydney. So for now I leave it as that and I want to
replace this image. I change the image, I go to upload files,
I select files and I go to Enfold home and I select all the files. They’re almost all 16×9, so that’s a nice
way to display your screen because a lot of screens are 16×9. I select more again and I say open. As soon as they’re uploaded, I optimize them
so I click over here, I remove the dash over here, I copy it and paste it at alt text,
same goes for this one, remove all the dashes and it can take a while but it will optimize
your website really well. Copy it, paste it. What I always do, I always rename my photos. I don’t say IMG001, 002 etc., I say a tray,
a slice. I only can select one, so I choose for this
one, choose image, now it looks like this. I rather use dark images because then the
white text comes alive better in the picture and I say Ferdy Korp Media and here again
Photography, Videography, Web design. I like it. The second slide change the image to this
one. You can change the text and then uncheck this,
I leave it as this but you can do whatever you want to. The third slide this one, fourth, the fifth
weddings, we have a call to action button, which is this one and I say get in contact,
that’s my call to action and then I say forward slash contact or I can say http://sydneyelmentor.com/contact. I save and publish, then I go back to the
header media and I will not use it so I can leave this as this. I go back and I go to the menu style. Pressing on minus again so we see the menu. If I scroll down, you see the menu sticks
with us no matter where we go, but like I also said I want it to be static. What does it mean? It will stay on top, so here it is. If I scroll down it is gone. I’ll leave it as sticky. Right now it’s an inline menu style, but if
I say make it centered then we have to lower on top and the menu below and if you scroll
down, it sticks with us. I like it the way it is, with inline we save
it and publish it and I go back I have to say that I don’t like this dark background,
so how can I change that? I can use custom CSS over here at the customizations
of the theme. If I click here I can add some code, you don’t
have to code, I made the code for you, go to FerdyKorpershoek.com or check this description
below, I go to tutorials. How to make a free WordPress website and here
header white transparent. I copy this code, I place it here at customize
and now it is white. You see light transparent, if you want to
make it more transparent and lower this, point one means not much transparency. It also not here and point nine means a lot
of transparency. You can change the color so red, green, blue;
so if I would say zero green and zero blue, then the color changes to red. I like it to be white, so I say 255 and 255,
255, save and publish but right now you will see, you don’t see the colors anymore. So the block options I will save for later. The fonts also, I will go to the colors for
now, I go to general and if I go to ferdykorpmedia.com, it is the website I’m trying to copy with
a free theme. If I scroll down, I see this blue area, I
grab my color picker, it’s a Chrome extension it’s called color picker and I have to color
code now and I paste it over here, you see this color changes now to blue. The body text, this color is #444444 so I
changed it also to #444444, I save it and I publish it. So it’s starting to look better but I still
want to change the colors in our menu, so I go back, I go to the header colors, menu
background is black but it’s overruled by the CSS code and the site title is white but
we don’t use this description because we use our logo a top-level menu items, we need to
change those to the same color, the blue one or maybe better. I change it to #444444 and when you hover,
you will get this blue color, so now [unclear – 41:32] and if you hover then it becomes
blue and there’s our sub-menu. It looks great, sub-menu backgrounds, may
be just white like that and then those #444444. I hope I don’t go too fast but now background
is white and the color is grey and if you hover over it, it becomes blue. What you can do? You can change to the tablet view or to the
mobile view. If I go to tablet and I click over here, I
see the menu but I don’t see that I can so here it says mobile menu icon. I can change it to #444444 and now I see it
and if I click on it, I see a menu and I think for a mobile or a tablet menu this looks fine. You can change the colors, but I leave it
as it is. I bring it back to this one, save and publish
and this picture I got for free and there are a few other pictures; if you want to use
free pictures, go to pixels.com and go for City, you can use all these images, free download
and here it says CC zero license free for personal and commercial use, so even for commercial
use you can use it no attribution required. So that’s amazing, you can use this picture
in your background that is amazing. I’ve not seen this picture before, I really
like it, it’s New York and you can also search for Beach. Now you can find all those images, if you
click on them you can see free for personal and commercial use. So I highly recommend pixels, I close it and
you can use it like that. Let’s go up, go back and footer colors, and
change it to #444444. I want to keep the whole website the same
style. I don’t see the footer widget area yet, so
I leave it as this and the footer background, I change that one to #444444 like that and
the color to white like that. I think it looks better when I change it to
the darker color near black, so that’s what I like. Save and publish, go back and go back. I still skip the blog options and now I go
to font. I think this is a little bit too small and
it can be a little bit more bold. How can I do that? Let’s see, the menu items can be 20, you see
it updating immediately, 20 is way too big, but I can say 16, yeah like that. It says real way 400, 500, 600 and if I change
it to 100, 100 and 100, you see the text becomes very thin, I don’t like that. So I can say 700, 800, 900. This is too big my opinion so 5, 6, 7. Just play around with the settings, I think
this is great. What I also like to do actually is make these
capitals. How can I do that? I save and publish, I go back, I go to the
menus, press amount zero and I click on the home and I can change the label to home and
capitals, so I turn on caps lock, I say about services Photography, Videography, Web Design,
blog, portfolio and contact and I save the menu, I go to the home page and I go for customize,
come on minus, and now it looks like this and I really like it. You see this color, it’s not that feasible,
so I go back to colors header and here is sub-menu items, the color can be lighter like
that. It can be even, in order to make it white
like that, save and publish, go back and here at the fonts, we have the site title which
is over here and the description we don’t use it, change it to 16, I don’t use it so
never mind. And H1 is now very big. I really don’t like big titles. I like it to be normal, so I changed all the
font sizes to 16. So this is a header one, I make it 16, 16,
16, all of them can be 16 and the font size 14, save and publish fonts. And I have to say for a free theme this is
looking quite nice, I think. With free images, a logo, a menu I think this
looks amazing. I think this is enough for now. So I close the customization and this is our
website home, about, services, blog, portfolio and contact. What I see at Apple.com, if you go to a different
page, you cannot click on home again because it is the logo. It is normal these days that the logo is the
homepage. So I want to remove the home menu item, so
I go to the back-end menus, press command zero and I click over here and I remove it,
save it, close these and open the website in a new tab like this, about, so if I go
to about, you see this and I go back to the logo and it looks like that and we scroll
down, you see the menu becomes a little bit smaller and it’s is a little bit transparent,
really nice. What I want to do next, I want to configure
the about page. So I go to about and I want to make this professional-looking
page where I can say something about myself. What I need, I used the Sydney theme but I
want to use a different editor, it’s the Elementor editor. It’s a free editor and you can find it at
ferdykorpershoek.com, go to tutorials>how to make a WordPress website for free and click
here on get Elementor. If you want to you can watch the video over
here, it’s a free download. There’s also pro version but I like the free
version and I can do a lot with the free version, so I click on free download. I don’t want to leave my email address, no
thanks. I just want to download Elementor. Thanks for downloading, there it goes. I closed it and I go to the backend to plugins
and I add a new plug-in, our first plug-in. I close this. I close this and I can search for plugins
over here but because we’ve downloaded it, I want to upload the plug-in from my computer. So I upload the plug-in, I choose a file,
I go to downloads and here it is, Elementor 1.4.8. I open it and I install it now, I activate
the plug-in and there it is, we have two plugins from Sydney and one from Elementor. And now if I go to the front page, to about
I can change this page with Elementor. So I click on edit the page and here it says
edit with Elementor but before I do that I want to change the template over here to full
white. Update and if I click here I can view the
page. I open it in a new tab holding command and
clicking. Now we have the full white, we have the header,
we have our footer, we will change the text later, and I want to use Elementor for this
area. So I go to the back end and I say edit with
Elementor. An Elementor is a front page editor, so you
see the website over here and I can edit it and we work with sections and with elements,
it uses the enfold theme which is my favorite theme, but that one cost money and this tutorial
is for people that want to make it for free. So we use the same things – sections, rows
and elements. So I can add a new section and I can decide
how many rows I want to have and I want to have two rows with a large area and a small
area. I click on this one and you see it over here,
we have two rows and in that row we can add text, so I drag the text editor over here
and then I can start typing my text. I go to ferdykorpmedia.com, this is the website
that we have made with the enfold theme, I go to about us and I want to make the same
thing as over here. So I copy this text and I paste it over here
and what I see it’s kind of bold, I don’t like it. So I save it and I go over here and if I click
here, I go to the global settings. So for now I want to go to the global fonts,
body text and I want to change it to open sense and if I click here, you see it changes
and I can make it a normal font instead of really bold. So I click on normal and now it looks amazing
in my opinion. Apply, I go back to the elements and here’s
my text. Over here, I have an image and here I can
make it round but I don’t have that option in Elementor, so I drag this image over here,
I click over here for the image, I upload files, select the file and here it says Ferdy
Korpershoek around it. I open it, I optimize it
and I insert the media like that. If I save this, and I refresh it, it looks
like this. You haven’t seen nothing yet, we can make
this more beautiful. What I don’t like is this about title, so
I go to ferdykorpershoek.com, to tutorials>how to make website for free and here page
header entry display: none, so I select it, I go to Elementor or to about customize, I
scroll down to the additional CSS press ENTER twice and I paste it, what you’ll see now
it is gone, save and publish close it and then I go back to the about to Elementor and
I want to have a background. So I click over here, I hover over section
and I go to style and I can edit background to this whole section, so this is the section
with two rows and those two rows have both one element in it. So this is the section, background type classic
one and I can add an image. I want to add this one, I also got it from
pixels and it look like this, before I adjust it, I save it and I want to view this, it
looks like this. I don’t like it at all. How can I change this? I go to Elementor, to the layout and I say
stretch the section. So if I press command minus minus minus, it
will now be stretched from the left of the page to the right no matter how big your screen
is like that, even if it has to repeat itself. You see the content stays beneath the size
of the website, if I would say full white, it goes to the full white, I like to keep
it boxed, column gap is this area over here, you can direct this to the left or to the
right, and the height: fit to screen, I like that, like that. Now the column positions are in the middle,
content position can be in the middle also, so it can go to the middle of all the elements,
so this one goes down because this is the middle of the element and let’s see what else
can we do, the position can be in the center of the center. So the background changes and we can make
it scroll or fix and if you fix it, you can scroll like that and the backgrounds will
stay in place. Well for a free plugin this is amazing, it
makes me really happy. I hope it makes you happy too but I think
this looks really professional except for this text over here. So no-repeat you can say cover, I liked it
more because then you see the whole picture instead of zoom in picture, so cover and even
if you zoom out, it still covers the background no matter what. So I like to have it fixed and cover it. You can’t have an overlay, for instance the
black color and then make it transparent or not like that why not then the text is a little
bit better visible, I can click here one more time and I can go to style. I can align it different, I leave it at the
left and the text color I can change it to white and I can save it and I can refresh
it again and now it looks like this, looks really nice. I want this text to be bigger. How can I do that? I go to typography and I can change the size
yeah and I see this text is not correct, I use this text for a lot of tutorials and now
I see life is with an F, life, my beautiful life and I save it. Maybe it’s a little bit too big but as you
see, man the theme is so amazing. You can do a lot of things with it and also
the Elementor plugin. So a combination of those two gives you a
lot of possibilities. Wow, let’s create this area over here. It’s quite easy to do. I go back to elements, I scroll down, create
a new section and I want to speed it up a little bit now. Add a new section>one row, here it is, I
don’t see it. I go to section, stretched section content
is boxed. The style as needs a background classic, I
click over here, I grab this image insert, the position is in the center of the center. The attachment is fixed, no repeat but the
size will be cover and I go to layout again, the height is fit to screen and now if I go
to elements, I can have a heading over here. I drag it and I can say you deserve it to
be seen. You can have a link, I don’t want it. The size is XXL, alignment and centre, the
color will be white and I want to add quotes to it, shift quote. I go back to elements, image and I drag it
below. I can choose my image I upload files, select
files>Enfold 2017>settings and here is the white logo you almost don’t see it. Open it and leave it as this for now, insert
media and there it is save, refresh and there it is, Girl you deserve to be seen, the logo
really nice. One more section, add a new section, let’s
start with one row. Here it is. I go to elements and I want to have a testimonial
element. Let’s see if we have that. Here it is. A testimonial, I drag it over here. Again, I will grab this one from over here. I copy it and here’s the text, the image>upload
files>select files, go to enfold>about me and this one is from Danielle. I open it, then you’ll paste it. Danielle Lojenga. He is a designer and he says Ferdy created
some amazing pictures of me and my companions, huge thanks. You also can say put the image on top, I like
that alignment at the left, middle or right, style>content color. It’s okay in this way I think. Typography, it can be looking bigger. The name can be bigger, and the job description
can be bigger. You can change everything, which is really
nice designer. And go to this section and I want to change
the height to minimum of 500 pixels. So it really has its own space and I save
it. And I want to show you something funny. Maybe it’s not funny but it’s a nice way to
display things. I want to stretch this, I want to add a background,
so I go to style, classic background and let’s take this one again. I insert it, let me configure it really quick,
position: center, center, fixed, no-repeat and cover; and I want to have a background
overlay, which is even darker like that. I save it, I click over here and I go to style
>content-color>white. Also the job description can be white like
that. Save it. What I want to do now – something new. I click on section and over here I can save
it, so I save this as testimonial and I save it and there it is I close this and I click
on add template, my templates and insert the testimonial area and there it is, I go to
the second testimonial, I copy it and here’s the first one, here’s the second one, I paste
it, I delete it, I upload a new file, this one is from Eliza. Open>insert, Eliza Dupont. She is a photographer or an artist and I save
it but if I go to the section and I can say, go to style and I scroll down and I go to
backgrounds overlay, like this color and make it lighter. So right now this one is dark and this one
is light. Maybe it’s a little bit too light, save it,
and now if I add a new template, my templates, I insert it again and I save it and I refresh
the page. You get a nice effect of testimonials. So I scroll down, here’s the slogan, now you
see the first testimonial. The background stays the same but becomes
lighter and in that way you can have nice way of displaying things. What I see over here and here below, here
you see a wide gap and here you see an overlay which I don’t like. So I go customize it. I go to Ferdy Korpershoek and here it says
no padding, I copy this code, I go to customize, additional CSS and paste it and I save it
and I close it, now this area’s gone, the overlapping area. It’s looking nice. I want to add one more thing, I go to back-end,
command zero, add a new section with one row and let me search for social icons over here. Social icons, I drag it over here and I can
configure them, I click over here, it is Facebook and I say http://facebook.com/ferdykorpershoek,
second one, twitter twitter.com/ferdykorp, and the third one, and if I liked to have
Instagram I say http://instagram.com/ferdykorpershoek but then I need to change this. There are a lot of icons so I just search
for Instagram and there it is. And the link is this one. I can add a different item or press for instance,
why not. My own website ferdykorpershoek.com and I
can change shape to circle or square around it and leave this circle and I save it. So this is the about page. I scroll down, “you deserve it to be seen.” What I see it, is not aligned in the middle. How can I fix that? I go to the section and I make it a stretched
section. Content positions I wanted to be in the middle
so there will be a little bit more spacing, save it, refresh and there’s a little bit
more space because I have the edit button here because I’m logged in. If I want to have some padding over here,
I can click on section, go to advanced and I say margin top 20 pixels, I can remove this
link and here at the bottom I can say zero refresh and this looks fine? What I don’t like is this area that you can
see through, so I go to customize, I close all the other tabs, I go to additional CSS
and I go for 1.0, and now you can see through it. Save and publish, close it and now you can
see through the manual. I think that looks cleaner. So, so far so good, nice logo, nice menu area,
about, drop down menu and if you go to the web page you see something like this. I think that looks really great. Let’s do one more thing. I click over here, I want to add a button
over here, so I edit with Elementor, I scroll down and I go for the button element and here
it is. I drag it here below and often I see that
it’s a little bit hard to do that so I drag it here above and then I drag it below. I can customize it, first I want to say go
to testimonials and I can change the color, it is the danger and it becomes red. I want to leave it at default. The link will be #testimonials in small capitals. I’ll show later why. I can bring it to the middle, to the right
and little left. It can be quite big, large, medium and I can
have an icon if I want to. I don’t want that, so… and now we can style
it, so I go to the second tab and I want to change the color to text color which is white,
which it is already. In the background color I want to make it
transparent, so that’s interesting. Now I want to have a border so I say a solid
border, now it looks like this and that is what I like. If you go to hover, you can change the colors
and I can change it to this color, maybe float. Save it. I want to view it in a new tab and if I hover
over it, this happens. Quite nice, but if I click on it nothing happens;
the only thing that happens is that you see this over here. so I grab this, I got it command X and I go
to the back end. I scroll down to the first testimonial and
I go to the elements and now if I scroll down, I’m searching for the anchor link, menu anchor. So I drag this over here and I only have to
change the ID, remove the hashtag, and that’s it; save it, refresh it, go to testimonials
and here I am. So that’s really nice. That’s it about the about page. Let’s go to the services page. Before we start creating our services page,
I want to change this text over here. How can we do that? We go to the back end, I close this over here
and I need to go to appearance>editor and I press command+F and I search for footer.php. Here it is, theme footer. I click on it and it opens over here. Here I can change text and right now if we
take a look at our website and I scroll down, I see proudly powered by WordPress. So I need to search for proudly and there
it is. I know quite a bit about coding, but you don’t
have to understand a lot. I will show you what to do. Here it starts in div, the division which
is called site info container and then div opens and div closes. So I select all this stuff over here and I
delete it, remove this one. So here it opens the div and here it closes,
and now I can say alt G 2017 vertical rule, FerdyKorp Media vertical rule – All rights
reserved, something like that. I save it over here. I update the file and if I go to the website,
I scroll down it says 2017 Ferdy Korp Media all rights reserved. Maybe you want to add a link over here. How can you do that? You can create a new post, go to the text
over here and say disclaimer, you know what, vertical line space disclaimer: select it,
make a link over here and it goes to http://sydneyelmentor.com/disclaimer. Open it in a new tab, update. Now we have a link over here. Right now I’m at a visual builder, if I go
to the text builder you’ll see the text code over here. I copy this text code, I go to Appearance
>Editor, I leave the page and I search or I go to the theme footer again and I search
for Ferdy Korp and now I paste this code over here. Make space over here update, I go to the website
which you’ll see now, if I scroll down, Ferdy Korp media all rights reserved now and disclaimer
and it is a link, so if I click here I go to sydneyelementor/disclaimer. This page doesn’t exist, it was just for illustration
purposes but you can have a link over here, so you can say disclaimer, login, contact,
privacy policy, anything you want. Let’s go to the services page. I don’t know why, maybe it has to do with
the word services but I can’t edit this page. I just create a new page and then I later
will put it over here. So I will say ‘Our services’, full white,
publish and I will use Elementor. I want to start with a nice quote or with
a small text based on FerdyKorpmedia.com and I add a new section with one row and I go
to the section settings, make it stretch, content white box. I go to style add a background and I select
this one again, insert then if I go to layout I want to make it at least minimum height
to be 300 pixels, like that. I go to the background, I make it fixed cover. What I like in the background overlay can
even be a gradient. So I click over here, the first color can
be black, the second one be pink or blue, so why not; change it a little bit to the
color of our theme and you can make it transparent or less transparent. I save it, I go to elements and I drag a heading
in it and I wrote it in capitals, so I paste it like that, no link, hashtag the size can
be medium or large in the middle. Let’s style it, text color will be white and
typography, I want it to be a little bit less bold, font-family: open sans, and the weight
will be normal, like that. Yes, save it. Let’s take a look; nice. And I go to the menu, select this one, add
it to the menu and drag it over here. I drag those three below it, I remove services
and I change this to services. So the only difference now is that I can edit
it and that when I click on it, services it is called our services. I think that is fine. What’s next? I will show you a little bit more about Elementor,
what you can do with it. So I go to the back end, I add a new section
in this time, it is 3 columns. 1, 2, 3. What I want to drag in it is an icon box. I drag it over here and I can say its default
or stacked or framed. I like stacked and let me change this camera,
nice camera icon, the title is photography and I paste it. I can link this to a certain place. I will not do that and let’s take a look at
the style. Primary color is the color of the logo, secondary
color is the white. I can change the size, make it 40, then I
go to the content, title spacing, 10 pixels is good, maybe azure blue and the size can
be a little bit bigger. 30 maybe make it capitals, photography and
make it a little bit smaller again and 25. And then the description, the color, I think
hashtag #444444 is great. And maybe a little bit bigger, 16 that looks
great. Save it and now I can duplicate it, so I click
on this icon, I drag it over here. I can duplicate it again and I drag it over
here. I added this one first and I go for something
like this for website. I say web design, I paste it, save it, refresh. You see it’s not a line in center, so let’s
go to the section settings stretch it make it fit to the screen. I go to style>background and I have a background
for this, I go to upload files, select files and I want to go for web design and add this
background. You can optimize it, I leave it now for the
sake of time, and it looks like this. Position center, center, attachment fixed. Now overlay, it’s okay like this and now I
click over here on the column, I go to the column and I want to have a background which
is white. Same goes over here, the column, settings,
background white and third one column, background, white. Save it and refresh. Now what you see, they’re all connected to
each other, I don’t like that. Let’s take a look at the column and the padding. So I go to advanced and I say margin five
or 10, but I also want to have some inner space, so I can say 20 or 50. So there’s more space around it, 50 is a little
bit big but maybe 20 will do. So 10 and 20, also over here 10, 20 and let
me see. Column settings>advanced 10, 20. What I want to do now, I want to show a few
pictures. I’m a photographer, so I will just show an
image carousal over here. I drag it here below, I click on it and I
can add a few images. I upload files, select the files, I go to
Enfold>Home>Photography and I select four images. I create a new gallery, I can change the order
or reverse the order and I insert them into the gallery and it looks like this. I don’t want that. I want to show one image so the image size
I say full, slides to show one, like that and I can say I don’t want to show arrows,
so I am saying none. I don’t need a link, I don’t need a caption,
I go to style and I go to advanced and everything is fine like it is. I save it, and I duplicate it and I drag this
over here to the right and here below and here again I change the images, I clear them
all – yes, add a few different images, upload files>select files, I go to portfolio>Web
Design and I grab all those images. The settings are the same so I don’t need
to change them and create a new gallery. Insert I don’t know what happened here. If it’s a glitch or not, I save it and I refresh
it and that looks like this. I don’t know what went wrong, but I can show
you a different way of displaying this, if I go to the column settings, I want to remove
the background, same goes for here, remove it, remove it. I want to go to the icon element and now I
want to say background: white and I have a margin of 10 and padding of 20 or 15. Same goes for this one, advanced – 10, 15,
background: white, and the third one advanced – 10, 15, background: white. I don’t think I need no margin, may be a big
padding. Yes this is what I want. A lot of difference. Sorry, 20. This is what I want; no margin and a lot of
padding, okay. I need to make this sentence a little bit
shorter, something like that. So now I want to put a video over here, so
I go to the elements and here it is a video, I release it and I don’t see it anywhere so,
I release it here above again and then I drag it below. You know what, maybe I can drag this above. I will use a Vimeo video. I go to Enfold 2017 portfolio>films>Montana
and click here, I get a link, I copy it and I place it over here and there it is; that’s
by ratio of 16 by 9. Auto play – Yes, loop – yes, no title, no
portrait, no by line, that’s it. I don’t like it that you hear the sounds,
so what I did, I download the video, I remove the sound and I uploaded it again. So if I go to Enfold 2017>Portfolio>Films
>Montana and here you see the link without the sound. I copy it and I paste it, so now it starts
playing without sound. I liked that. So let’s save it and refresh, now it looks
like this, I really like it. I don’t like the color of this background
so I change that really quick, section, style, no background or you know what no overlay
safe, so that’s a little bit more contrast. Refresh – yes, so it looks like this. You see a slide over here from the left to
the right, I want to change that, I want to make it fade, so slides>additional options
>pause on hover – no, speed – four seconds, infinite loop – yes, effect – fade and animation
speed can be slow, 15. Save it. So the same over here, and there’s no options
4000, fade, 1500; save it. So with our free theme, Sydney and Elementor
we have a nice menu, nice text over here and our Services Photography, Videography and
web design we can show a few images and we can show a video on auto play. I want to add a few buttons over here, so
let’s do that. Go to the backend, to elements, button, default,
more information #photography, I want it to be in the center, I want it to be small, I
can have the same icon, camera style, text color: white, background-color: transparent
and the border: solid white like that. More information, you can have a hover or
an animation shrink, save. Now I duplicate it, I drag it over here, like
that and I duplicate it again and I bring it over here. I click on this one, this one links to videography
and it should be video camera and the third one should link to web design and should link
to this one, save it, refresh, so it look like that. So I am going to create few more sections
here below photography, videography and web design and I start with photography. So I go for a new section with two rows and
I go to the elements and I go for a text element and I place some text over here, I press ENTER,
one time, then I create a new Leah and now I say photography. I select it and I change it to a header 2. I want to change the color, so I click on
the toolbar toggle and here I can change the text color: custom, here’s the code, okay
and below that I want to have a button. So I go to button and drag it over here or
here and then drag it below, Get in contact and that one goes to this link over here,
paste it. It can be at the left. I style it and the background color will be
this blue color, get in contact. So that looks great and now I go to elements
and I want to add a gallery, image gallery and I drag it here at the right. And I want to show a few pictures so I can
add some images, upload files and I want to select the wedding of Daniel and Leah. I go to portfolio>photography>Daniel Leah,
you know what I select them all, I open them for sake of time, I will not optimize them,
create a new gallery, you can change the order or reverse the order, insert and there they
go, that looks really nice in my opinion. You can change it to show the full size or
medium, I like thumbnails. I can decide how many columns I want to have,
maybe three or just four, link to the media file and the ordering can be random. I save it, I go to services and there it is,
photography. If I click on the picture, it opens like this;
you see when it’s uploaded, I don’t like that. So how can I fix this? I will add a new plugin, I will go to the
back end, I go to plugins>add new and I go for a simple lightbox
over 100,000 installs, install now>activate it and I go to the website, to services and
I click on the photo and now it opens in the light box. I can navigate through all the pictures. I like it and if I refresh it, you see the
order has changed. I don’t like this gap over here, maybe we
can change that. Here it looks perfect, so let’s see, maybe
we can change it to full. Save it, refresh it and now you don’t see
gaps anymore and if I refresh it, you see the order is reversed and depending on the
height of the image, it decides when a new row starts, so it looks a bit a little so
what will I do? I will keep it at full maybe three columns
and I don’t want to have it random but default, and I want to change the order so that this
image will not create a wide gap over here. So I click on one of the images, this one
I drag like that. Insert and now you see these images here below
and if I save it and I refresh it, it looks like this. I like it, so here it says photography, I
think this is a bit small so I go to the text over here, I remove it and I go to heading,
I drag it here and I say photography, no link the size is big, large and the style is this
color. Now I want to do one more thing in this section,
I want to go to elements and again I want to use the menu anchor and I drag it here
above and it’s called photography, I save it because at this link I have hashtag photography,
if I refresh the page and I scroll down and I click on more information I should scroll
down to this area over here. So that’s really nice, save. I think there can be a little bit more space
over here, so I go for the section>advanced and I say margin 50, save and refresh, yes
like that. Amazing! Let’s create a second one, Videography. How can I do that? I go to section, click on it and I duplicate
a whole section so over here there’s another one and now I want to drag this to the left,
I want to drag this to the right and this one and this one can be here. I click on this one and I say Videography
and watch this, I can drag this now like this. I drag this over here, I rename it. I say videography. I leave the text because I don’t want to change
it. I drag this over here below so videography,
some text I can remove this element, yes and I can say go to elements and I want to insert
a video and I go for Vimeo, I paste the link over here and you see those bars. Maybe we can remove it a little bit, making
it 3×2, now unfortunately that’s not an option. I would like to say auto play, it looks like
this. I don’t like those bars. With the enfold theme you can narrow it down
so you don’t see the bar. So I grab a different video and I use this
video again without sound, save it and what I’d like to do, I go to the section, stretch
it and I go to the background and I change the color to this one and then I change this
color to white of course and this title, I change the color to white and get in contact,
I will change the colors, so the text color will be this one, the background color, this
one and again section can have some distance. You know what, I uncheck this and I say 100,
0, 100, 0, save it, refresh. Here it is. I click on more information, there it is videography,
get in contact. I want to duplicate it one more time. So I say, duplicate, I press command minus,
minus, minus, minus and I try to drag this section here below or this section with arrows
over here. So white, blue, white. Command + 0, change this, first over here,
save it, refresh our services page. Nice background with the text, our three services
with images, a video. If I click on more information, I go to photography,
I can go to the contact page by clicking this link. I click over here and I can navigate through
all the pictures, no matter if you zoom in or zoom out, the pictures will stay in the
same place, I need to make this full white. I need to stretch this section by the way. A nice video that’s playing by itself and
a text about web design with images. So that’s our services page. If I do command minus, this stays in the center
is not near this one. So I go to the section, stretch this section
and the same goes for this section. Stretch this section, save it and that is
our services page really really really nice. So let’s take a look at the blog page. I close these for now and here we have our
blog page. Right now you don’t see a blog post because
we don’t have one and here you have the widgets the recent comment widgets, the archive widgets,
category widgets and we’ll take a look into this later. I want to create my first blog post. So I hover over here and I go for new post. It looks the same as a page only this is a
post. I want to create a blog post about the enfold
theme. The enfold theme and what I can do, I can
use the visual builder or the text builder. This is HTML code, the page builder that comes
with the Sydney theme but if you go for the page builder I would like to go for Elementor. For this post I will use the visual builder. I have text already, I can paste it here so
here it is, few Alineas and I want to show you how it works. First I want to make a category, if you have
a blog post you can make categories, so if you have a lot of blog posts you can categorize
them by creating categories. So right now we don’t have a category and
here at the right I can click on add new category. This is about the enfold theme, so I can say
this is about themes and I can add the new category, it is a theme that helps me to sell
more stuff on the internet, so I can also put it under marketing, add the new category
and I can also select two of them and I can also create a subcategory for instance WordPress
themes and then they can select a parent category, which is marketing or themes and I add a new
category and if I publish it with the subcategory WordPress themes and themes. Later you will see how that will look on our
website. We can also use tags for instance WordPress
edit themes, enfold, marketing; whatever word that has something to do with a blog post
and we can set a featured image, so I click on this one and I go to upload files>select
files, I go to blog, the Enfold theme and here it is WordPress enfold theme. I’ll use this one as a featured image. So I open it, I can optimize it and set this
featured image. Now if I update it, I close this one and I
go to the website, to blog, I still don’t see that post. Why? I need to go to the back end to the dashboard,
to the settings, reading and the front page display, if we go to a front page. It shows our latest blog posts. The enfold theme with the text, but I don’t
want it, I want this to be the home page. So I go to the settings again and I change
your latest post on the front page to a static page. The front page will be the home page and the
post page will be the blog page and if I save it, I close this and I go to this page and
I click on blog. Now it appears over here, with the title,
the date and with the categories and if I go to the home page by clicking here, I see
a static page. No more information. If I go to blog, you see here the recent posts,
the Enfold theme, so if you click on it, you can see the theme, you still see the sidebar
with the widgets, we see the text, we can leave a reply and now I want to customize
it, so I close this. I edit the post and I want to talk about Alineas,
our paragraphs and headers. Over here there starts a new sentence, what
I can do if I would say enter you see there’s a white space over here that is because when
you press enter in a blog post it creates a new Alinea, so it does not create a new
line but a new Alinea. If I would say shift enter, then it starts
on a new line but it is still in the same paragraph, so if I update it and I view the
post, you see the Enfold text, it’s still in the same Alinea, but this is a new paragraph. So every time you press ENTER, you start a
new paragraph and what you can do then, you can select a paragraph or click on it, go
over here and you can select a heading, heading 1 until heading 6 so if I would say heading
2, this whole paragraph will become a header. So if I take a look, it looks like this and
that is not what I want to, I want the headers to be over here easy to configure, masonry
element and in that way you can bring some order into your post because if you have this
text, this is not appealing so people will probably not read this text. So I selected this again, I select heading
2 and I change it back to paragraph and I bring this also back in this one and I select
this paragraph over here and I trade heading 2, the same I do for the masonry element heading
2 and if we take a look it says control+alt 2, so if I select this paragraph and I say
control alt 2 on the Mac, it becomes a header 2. I update it and I refresh it and it looks
a little bit better already. Still, this is a lot of text so I want to
highlight a few words. How can I do that? I go to the backend and I want to highlight
words, I want to be found on. So the enfold theme, I select it and I can
click over here on bold or italic, so again the enfold theme, I can also say command B,
enfold command B, I don’t want this too much, so let’s take a look at some different words,
Avia layout editor, retina ready and responsive, WordPress, command B, a beautiful masonry
and you can also make a link. So maybe you want to link to the enfold theme
and you select this text over here, click on this link, and I can paste the link http://ferdykorpershoek.com/enfold-theme/. I can click on the link options, open it in
a new tab or link it to a certain page, I update it and let’s take a look, I update
it again and I refresh it and you don’t see a lot of difference, so I go to customizer,
I go to the Fonts, and I want to see results immediately. What if I would say 400, the text will be
a little bit bigger I like it, we cannot make the bold text bolder, but what we can do,
we can go to additional CSS, so here at CSS we can change the color and the font light
of the bold text, so I go to ferdykorpershoek.com, to tutorials, how to make WordPress websites
for free and here it is Bold text, different color. I copy this code and I paste it here, let’s
see what happens. Now you see it’s bolder and it is blue, so
that’s nice. I save and publish and I close it and if I
scroll down, it looks like this; really nice. We also had a link over here, the Enfold theme
and If you click, you go to the enfold theme in a new tab. So link is also working, what I see is that
header is quite high, it’s closer to this paragraph than to this paragraph. How can I change it? I customize it, I close this, I close this
additional CSS so again I go to ferdykorpershoek.com>tutorials>how to make a WordPress website
for free. I scroll down, h2 margin 0,0,0,0, I place
it and now you see it’s close to this element. I want to create a little bit more space above
the header, so it is trul, top-right-under-left. So top I say 10 pixels, so it pushes it a
little bit above, so if I say 100, it looks like that. That’s a little bit too much, how about 20
or 30, but below there can be a little bit more space also here, so TRO, or U, I don’t
know – 10 pixels or 5 pixels. I think this is great. That looks a lot better than this. We can give it a color, I just copy this strong
color so the h2 will also be blue and we can make it a little bit bigger, but we can also
do that at fonts. So the header too can be a 18, like that. Why not? And then I change it, I want also to 18. Save and publish, close this, close this and
here it is. I want to add a few images. I edit the post, I want to add media over
here, upload files>select files and you can upload all the images at once. So here at enfold, blog, the enfold theme,
I can upload them all. This one I don’t need and this one I used
already, so when I open it for the sake of time, I want to rename it, so now they are
uploaded and I close this. Then I go to the first paragraph, and I click
on add media, I uncheck them all except for this one. I insert it into the post and then I click
on it and I can align it to the right like that, I can make it smaller or bigger. I can click over here and I can align it again,
I can choose the size and I can link it to the media file itself. Update, so I can select it and I can say I
want to align it to the left. Then I go to this title, easy to configure
I place my mouse over here, I click on add media and I go for this one and also here
I can align it to the right, change the size, insert it into the post. I think the size is OK and then we talk about
the two minute demo setup. I can press enter>add media, select this
one and place it in the center at full size, insert it into the post, and it will automatically
align to the center and change the size to the size of the website. And then the full screen slider, same story,
edit, click here center, full size, edit, link it to the media, update and view the
post. Now it looks like this with highlighted colors,
good for Google, if you click over here you open the lightbox, you can navigate through
all the different pictures, that link to themselves and these are blog post with a free theme. And if I go to the blog overview now, it look
like this. I want to customize it, now I go to the blog
options. The blog layout right now is classic but if
I change it to masonry, it looks like this or full light without a sidebar, it looks
like this. So I like to have a masonry grid style, maybe
you want to display the full content right now, it’s just a small text and then you can
click here and then you can read along. If you check this you can see the whole text. I never would use this check box with the
masonry because then you have a long text, so I would use the full light without a sidebar
and then display the whole blog post, so I uncheck this and I check masonry. We can also say full light at single post,
so if you click on the link they see a full light post but in the blog post I want to
see the sidebar so I don’t check this. Here we can decide how many words you want
to see, so I can also say 20 and then this will decrease or you can say 100 and it looks
like that. I want to do 55. Right now I see post it on the date, leave
a comment, I can hide all that stuff and I can also hide it on a single post, so if I
click over here then you will not see all the stuff if I check this and on the post. I do not want to see it and here I do want
to see it. Featured image – check this book to hide a
featured image. So it will be gone or I can check this book
to hide a featured image on a single post. So right now if I view this, I click over
here, it starts with this image and if I check this and I save it and I publish it and I
refresh the single post, it is gone. I close this, I want to change one more thing. I think the text is a little bit small, so
I go to customize and I want to make it bigger. So I go to fonts, the body font size, I will
make it 15 and now it’s a little bit bigger. I think this is better, save and publish and
close. Before we take a look at the cyber and the
widget area, I want to create a few more blog posts and fast forward, so we have a little
bit more blog posts to work with. So I made a few blog posts and let’s take
a look. It is a grid and you see if this blog post
is shorter than this one will go up a little bit. I like it and let’s take a look at a few things. Here it says Oasis of the Seas, posted on
June the 16th all those are post on June 16, 2017. I can leave a comment and here it says it
is posted in uncategorized, I don’t like it, so I want to change it. And if I would say, I go to the category>private,
then I see all the blog posts that are on private, so here at sydneyelementary.com/category/private. So in that way you can navigate really easily
to your blog post in WordPress. I go back to the blog, and I click on Oasis
of the Seas. I want to edit this post. I scroll down and I want to uncheck uncategorized
and I want to mark this on the photography, so I create a new one photography and I add
a new category and I update it and now if I go to the blog page again. Now it’s in Photography. I was engaged on the 26th of October 2014,
so if I click over here and I edit the post, I want to change the date this is published. Right now it says published today, I want
to change it to October 26th, 2014. I was engaged around 12, 12. It was a really nice moment, she said yes,
we were both very happy. Update, go back to the blog page overview
and now Oasis of the Seas is the most recent one and the latest one is “We are engaged
on October 26, 2014. So we can change a date. Maybe I want to create a post and I want to
publish it on a certain date maybe June the 18th, so I click over here, edit the post. What I can do, I click on edit over here and
I can schedule it. So I can say, I want to publish it the 18th
of June in two days and then it says schedule. Now, if we go to the blog page, it is not
there, we have only four blog posts right now and in two days it will appear automatically,
really nice so you can write ten blog posts in one day and then say every week on Friday,
I want to post a new one at twelve o’clock, so you can automate your blog posts. I put it back to 12, 2015 and I think it was
March, OK publish. My honeymoon was in 2015 December in Cape
Town. So I say December the 4th, 2015. This was in the morning. I can change the time, I say okay, update
and then in that way you can change the order of your blog post. If I go to a blog post for instance, the enfold
theme, I see here at the right of the sidebar with a search widget, recent post widget,
recent comments and I want to change this. How can I do that? I go to the back end, widgets, I hold comments
so we go to widgets in the new tab, I drag it here and here we have the sidebar. On all the pages in the website that have
a sidebar, these widgets will appear. I click on them and I can delete them. I leave this one, I delete this one and all
the other ones. Over here we have different widgets and you
can add them to your sidebar area. You see Sydney itself also has a few widgets
that you can use. Here’s a simple text area, a video and I want
to add a better recent post widget. Right now if I refresh it, you see recent
post but I like to see a picture, so I go to the back end and I go to plugins, add new
and over here I click and I search for recent post widget with thumbnails. Now let’s take a look at the amount of downloads,
the rate and the latest update, four months that’s still okay, from Martin Stehle. I install it now, I activate it, so now if
I go back to appearance, widgets, it should appear somewhere over here, so let me see
– here there is recent post with thumbnails, I can click on it and I can select the footer
or the sidebar or I can drag it in here. I like this way, edit to the sidebar and I
want say recent posts. Numbered show five, open post in a new window
– no, show posts in a random order, do not list the current post, I lik it, so you see
only four and what do I want to show? I want to show the post-date – no excerpt. I think this is all great you can choose categories,
display featured image, maybe I want it to be 40×40 of the image, otherwise it’ll be
too big. We save it and I refresh it and there it is,
recent post. I like it, so now I can go back to the widgets
and I can go to the recent post and I can delete this one. Now we have the recent post with widgets. So I refresh and it looks like that, really
nice. So if we go to blog one more time and we click
on customize, I close this click on command minus one time, so I see the menu. If I click a few more times you see there
are more blog posts over here. I can go to the blog options and one more
time I can say classic blog layout and it looks like this or to full wide without a
sidebar than it looks like this. And I want to leave it at classic, nice overview,
you can click on the title and read more and here you see the recent posts. Command+0 save and publish, and that’s how
you can work with the blog page and blog post. Now let’s go to the portfolio page. Here we have our portfolio, we have a sidebar
and it shows our latest posts. I can edit the page and I can say I want to
display at a template a full wide page, update, view the page again and now this is how it
looks. I want to create a beautiful portfolio where
you can showcase the service or the product you offer. In order to get us go to ferdykorpershoek.com
>go to tutorials, how to make a WordPress website for free and at the downloads here
we see the Sydney portfolio plugin. It’s downloaded fifty thousand times already,
probably more when you see this and here it is the download button. I click on it and it is downloading right
now. I go to my website to the back end, I go to
plugins, add new>upload plug-in>choose a file, I go to downloads and here it is,
the Sydney portfolio only fifteen kilobytes but what you can do with it is amazing. I open it and I install it now. I activate the plug-in and now we can go back
to our portfolio page, so I go to portfolio, edit this page and this time for the first
time I will use the page builder that comes with the Sydney theme. I click on it and I don’t want to go too much
into this, I just want to show you how to create a beautiful portfolio page. I want to add a widget. I click on add widget and I can search for
port and there it is, Sydney portfolio – display your project in a grid. I update it and I view the page and you see
nothing because we don’t have a portfolio item yet. I hover over new and I go to project, so we
are going to create our first project and the first project is a photography project,
“Wedding Daniel and Lia”. I can use Elementor but I don’t see it so
I publish it for now and I go to Elementor, settings and I add post types project, save
the changes, now I go to project, wedding Daniel and Lia and I can edit with Elementor,
why not. So I can add a new section, this one and I
want to go for a gallery, image gallery, I drag it over here and I add the images, I
have them already probably from this one until this one. I create a gallery, insert it and you know
what, image size full, columns four and everything is okay, I close it and I view the page, so
it looks like that. I want to change it, click on it I want to
change it to 3 columns, save it, I want to edit the project, close this one and I want
to add a new category, portfolio photography and I want to add a featured image. Those are important in the portfolio area
and I like this one, set featured image, update and now if we go to the portfolio page we
have our first item. I think it’s a little bit small. I’ll take a look into this later. I will create my second one, so I hover over
new project, it’s a new-born shoot. This time I don’t want to use Elementor, and
I want to add media, I upload files, select the files and I go to portfolio photography
and I select all these, open them and I insert them all into the post. I select portfolio photography, I set the
featured image which is this one and maybe you think, what this is. It’s the text editor, right now instead
of the visual editor. So right now it looks like this, I can publish
it, I refresh it and here comes the second. Now I want to add a video portfolio item,
so I go for my third project and I say Montana Lisianthus. I add portfolio Videography, publish. I set the featured image this one, update,
I edit it with Elementor because I want to have the video element. I add a new section and I go for the video,
it’s Vimeo, paste the link, 16×9. I want to auto play it and I don’t want to
show this, save it and I closed it. And it starts by itself. If I go to portfolio, we have three already. So what I want to do now, I want to create
one more project and then I want to configure the portfolio plug-in. So I click on new>project and I go for the
Counsel Maassluis, portfolio web design. I add this category, I set a featured image,
upload files, select the file and I go to web design, Counsel Maassluis, set featured
image, I publish it, I added it with Elementor, add a new section, one on one section and
image. I select the same image, no captions but I
want to link it to the real URL so I can say http://counselmaassluis.nl. Then I go to style, hover animation, I don’t
know what it is, I say Bop save it, view it, this is Bop. Now I can click on it I go to the website. I go to portfolio, I click on edit page and
I click over here and edit. I can have a title, I don’t want it, I can
put a title above it. The number of projects to show minus one,
means show all the projects, you can also say four or five or twenty. You can have the slugs. For instance, you only want to show a few
categories, so for instance I can say portfolio photography, portfolio videography and portfolio
web design. It will give a really nice animation. I can show the project title, I don’t want
to do that and then here I can go to attributes which is all fine. Layout and design and here in design, I can
change the background, I can make it an image. Content alignment in the center and then I
say done, update and I want to view the page and now we have three categories which I like
very much. Now I can select portfolio photography, portfolio
Videography and portfolio web design, or show them all. I still want this to be bigger, so let me
see how I can do that? I can click here on edit but I also can edit
this row, edit row, if I go to layout I can go to row layout and I can select full white
stretched, done, update, refresh. Now they are a bit bigger. You can play some text over here so let’s
do that. Edit, show project title, done, update, refresh. Now you see Montana, Counsel Maassluis; if
I click on it, I go to that portfolio item and maybe I want to show an overview of the
portfolio items over here, so let’s do that. I go to the back end to appearance>widgets
and then I scroll down to Sydney portfolio in the sidebar, add the widget, latest project,
and I want to show all of them or maybe 9. I can have the slugs, I don’t want that; show
navigation filter – no, no project title and I save it and refresh it. And here they are, our latest project; very
small but it’s a nice way to display our latest project. So I can click here and then I go to the video
that starts automatically and from there I also can go to a blog post. So if I go to portfolio again, I want to add
a few more, so I can show you how it looks. So right now it looks like this, really nice. I can hover over it I can see the title, I
can click on it and and in that way I can showcase my portfolio. I want to change a few things. There’s a gap over here I don’t want that,
so I edit the page in a new tab, I drag it to the left and maybe I can change it. So I click over here, edit row and I go to
layout, top and bottom padding 0 pixels done, update, refresh; that’s better. There are five columns now and if I press
command minus, minus, minus, minus, minus; there still will be five in a row. I want to change it, I want to press command+0,
and I’m going to customize it. First, I go to the back end, the row settings,
hover over here, edit row, I go to layout, I scroll down and it says full wide stretched,
I want to say make it full wide, done, update, refresh. I want to change these five columns to three,
so I customize it. I go to ferdykorpershoek.com, to tutorials
how to make WordPress website for free, now you grab this code over here, copy it and
I go to the additional CSS, I paste it over here, I save it and I publish it. I close it and now it looks like this. Three columns and for free theme I think this
is amazing. If I say Photography, it shows all the photography
projects, videography and web design and if I say show all it shows all. One last thing, I edit the page, I click on
edit and I remove it over here, done, update, view the page and now it looks like this. I go to the back end, I go to projects, all
projects I close these for now, go to quick edit and change it from whatever they are
to web design. This one is a promo, videography. This one is a website so I go to web design
again, so now it looks like this, really beautiful. If I say photography, I see all the photography
projects, if I click on videography I see on the videography projects and if I click
on web design it looks like this or show all, so that’s how it works with the portfolio
page. Since we have created our blog posts and a
portfolio post, I want to take a look at widgets over here. So I customize page, then I go to the footer
and I can select the amount of widgets I want to have, I want to select four widgets are
at the blog post at the right but you also can have footer widgets. I save it and I publish it, I close it and
I go to the back end to widgets, we have now four footer widget areas and I want to go
to plugins, so I add a new plug-in. I want to add an Instagram plugin, it’s called
Instagram widget and it’s the first one over 10,000 installs, install now and activate
it. I go to appearance widgets and here it is
Instagram widgets for the footer one, add the widget and title is follow us, Number
of images – nine, desired number of images per row: three, let me see, I think this should
be 25 maybe, not much spacing one pixel, display if you want Instagram button, yes if you want
Instagram… save it and it says you need to configure the plug-in settings. I click over here, settings page, we need
to create an access token, connect with Instagram, so I go back to my website sydneyelementor.com,
backend>plugins>Instagram settings; the access token is this one, I copy it, I paste
it and I save the changes and now if I take a look, here we see a few pictures but I don’t
like the way this is displayed, so let’s take a look at appearance and widgets. I can close this now. Footer one, let’s see. What if I change this to 120 and these to
10, save it, refresh and now it looks like this. That looks amazing, maybe I can bring this
back, save it and refresh – that looks amazing. Now we are going to create a Facebook like
box, so I go to the backend to plugins>add new and I will search for Facebook by webLizar,
here it is Facebook by Weblizar more than 60,000 active installs, install now. I go to my Facebook page, I copy it, I closed
it, I activate it and I go to appearance widgets, Facebook by webLizar, footer 2, follow no…
like us on Facebook, my URL show faces – yes, show live stream – no, save it and refresh
and that’s how easy it is. Now let’s go to the third one, which is the
blog post. I go to widgets and there it says recent post
with thumbnails, footer 3, we install it already. I say the recent posts, I want to show 5 and
I show the date, that’s it. I save it and I refresh it and this is too
big. So I want to make it smaller, so let me see
45, 45 save it, refresh it and that’s better. And then the latest one, latest project something
like this, so let me see Sydney portfolio, footer four add the widget, latest projects
– show 9, show no navigation and save it and let’s see what happens, refresh it and now
it looks like this. So we have the Instagram widget, we have the
Facebook widget, the reason post widget and the latest project widgets. Now we have our footer over here so that looks
really nice. Now we will take a look at the contact page. I edit the page I close this, I close this
and over here I can say template full wide, I update it and I take a look and it looks
like that, then I go to the back end and I edit it with Elementor. We have no sidebar, I add a new section which
has two columns and I want to with a simple text, so text editor here at the right. I want to say something about my company,
I say Ferdy Korp Media, I say enter, my address, some information about my website, my email
address, my phone number and then I can select this, make it a link over here http://ferdykorpershoek.com,
open it in a new tab. Over here I can select this make a link and
this is automatically mail to, enter such as OK. I can select this and make it paragraph or
heading 3, save it, so maybe I want to add a new section one on one. I go back over here, and I want to add Google
Maps. So over here I say Jan Luykenstreet 36, for
instance; that’s where I live. There it is I can zoom more, you can change
the height, prevent scrolling – yes, advanced I think this will okay. Save it, then I go to contact, I go to the
back end, I will add a new plug-in which is contact form, add new contact form seven enter,
install it and activate it if you have not done so already, then go to the contact tab,
copy the short code and over here I go back to all the elements, text editor, I paste
this code, I save it, I view the page and now it looks like this. Contact form, you can send it, some information
of where I live and more information. Let’s edit this with Elementor. I go to the section and I make it stretched,
content wide box, column gaps okay, content position in the middle or top, save it. Let’s take a look and we can do one more thing,
we can make a new column with three sections and drag this one in the right one, drag this
one in the middle one and I drag this one in the left one. This one I want to close, just like this one
and then I can say, section, stretch, save, view the page and you see this is not okay
so I can drag this, like this, save it, refresh it and then it looks like that. So I can drag it back a little bit, save it,
refresh it and that’s it. So we’ve created all these things now we need
to go to the home page. We have the slider already and below we have
the sidebar I don’t want it, so I edit the page. I will have to template full wide, update,
now we use Elementor and if we scroll down, we can add a template
and if I save this and I view the page, this is how our home page look like. Quite nice for a free theme with free plugin. This is not in the middle but we can fix that
but I don’t want to use this but I just wanted to show you what is possible. You can add templates. So I will get rid of this and I want to add
a template again but this time my own template and it’s the Testimonial template I don’t
want that, but what I want to do, I want to go to the services page and this area, I want
to show again on the home page. How can I do that? I edit this with Elementor and I go to this
section and I click on the Save icon, and I call this services, I save it, I close it,
I close this and now I go to add template, my templates and here it is services. I can preview it or I can insert it and here
it is, so that’s really nice. I want to add a new section, one on one section. I want to add a title and I say, latest or
recent project, no link, size large in the middle, I want to change the color to this
one, typography, I want to show it as a normal weight, I put this to 300 something like that. Make it bigger, save it, go back to elements
and I scroll down and I search for Sydney portfolio. Here it is, the latest one. I drag it over here and there it is and I
only want to show six. No title, we have it already, no navigation
and I want to show the title. Save it and let’s view it. So we have our slider, here this area, there’s
no gap which is amazing this is what we did in the beginning when we went to customize
>general and we made this zero. This beautiful area, recent projects you see
it’s not in the middle, so go to the section and make it stretched section, I go back to
the elements to a spacer, I drag it here above and I say, you know what make it 60. Save it, refresh, recent project, it’s in
the middle now. I also want to have some space below the title,
so I can duplicate this one, drag it below, I’ll drag this one above, change this one
to 20 and then I want to do one more thing. I go to this section, I go to advanced and
here I can have an animation, so I can say zooming or bouncing, let’s say slide in up
and if I save it and I refresh it, if I scroll down, you see a slice up like that. I like it. I want to duplicate this area, so I go to
this section, I say duplicate and there it is. Here I want say recent posts, I hover over
here and I click on remove, delete and I search for Sydney latest news, so I have to scroll
down all the way and here it is Sydney latest news. I drag it over here and there it is, I can
show the title but I have one already. I can enter slug so for a special category
or I can add a text and a button, I like it, I save it and I view it. Recent post, really beautiful. I don’t like it that there are two white areas
below each other, so what I can do; I want to create one more thing a new section, add
a new section, one column I press command minus, minus, minus. I want to drag it above, click on it, and
press command+ 0. I want to make it stretched, minimum height
of 250, I go to style background and I want use this background. I already uploaded it, you can find it in
the folder, I insert the media, it will be fixed. It will cover the picture and I want to go
to background overlay and I go for the color of the website – this one. I go to elements>heading and I say photography,
videography and web-design. No link, the size will be XL, in the center,
I go to the style, text color will be white and I save it. I refresh it and here you see, the photography,
videography and web design with a nice image on the background, below that the recent post. So this is our homepage. If I go one more time to our website and this
is our website we have made without any paid plugin or a theme. Here we have a nice menu with a logo sub menu,
call-to-action with a nice slider, some information about my company, the three services I offer
with images, a video more images. I can click on the links to go to those pages
over here. A recent project you can hover over it and
go to that page and if you hover over it, you see the title of that project. A nice text over here with a beautiful background
that is fixed. A recent post you can click on it and you
go to it and here are our footer widgets: Instagram, Facebook, recent post and latest
project. I can click over here and I can go to the
about page; a beautiful page with information about myself with an anchor button. If you click on that, you go down. Nice parallax background, title with our link,
some testimonials, if we go to services, we have again our overview of our services with
some text over here. If you click on it, you go to that place for
more information, nice way of displaying your images with a gallery also here and if you
click on it, you can navigate through all the pictures. We have our blog page, where I showed you
how to display your blog post in different kind of ways. We can go to an individual blog post, I showed
you how to optimize this how to add images, if you click on the image, you can navigate
to all the images in the blog post. You can leave reply, you can go to the next
blog post or the latest one. Here we have a sidebar with recent posts and
with latest project. We can go to our portfolio page, we can categorize
it by photography, videography and web design and we can go to the contact page and there
I show you how to create a contact form some information about yourself and a Google Maps
widget. So that’s what we made, I hope you liked it. Please like this video and subscribe for more
upcoming videos. If you want to see more about SEO, about email
marketing and other things then please check channel or watch these video that will come
up into the screen. My name is Ferdy Korpershoek and I will see
you next time. Bye bye.

100 comments

  1. hey ferdy, great tutorial. Do you mind making another wordpress tutorial on booking websites such as travelling agencies, hotel bookings or transport bookings. Thank you.

  2. I have a question: The changes you did to the footer… Won't that be lost when we upgrade to the next version of Sydney? It's easy enough to change again, although I really hate playing directly with an editor.

    The only suggestion I would make is that people cut and paste the text the are deleting from the editor to TextEdit of NotePad, just in case something goes wrong, you can reconstruct what was originally there. A bit extreme, but you are playing directly with the code from the theme. A comma in the wrong place can mess things up completely. It's probably because I'm very uncomfortable with PHP.

    Not a criticism – it's a great tutorial. It takes patience and time to produce tutorials like this. I am enjoying your info on Elementor. People ask me to work on their WP sites and I haven't tried Elementor before. I tended to work within the customization parameters available and then add some additional css. Limited, but effective depending on what people want.

  3. You make very useful tutorials, thank you for sharing your knowledge. A few small points, you talk about adding rows when adding sections when they're actualy columns. The other point is your pronunciation of the word 'width'. You say it like the word 'wide' but it should be more like the word 'with'. Also the word 'duplicate', you should say 'doopclicate' (doeplikeet in phonetic Dutch). I subcribed to your channel. I hope to become a web/graphic designer myself one day and your video's will be very helpfull to fullfill my dream. Thanks again. Hartelijk bedankt en succes met je carrière.

  4. Can I add more than 5 contact form in contact page > button > contact form more than I have made 4 button and I want to use 4 contact with each button is it passible please give me you email and Skype id

  5. Hey Ferdy, thanks for the amazing tutorial. I am wondering if you have a solution on how to establish a textbox that is linked to different icons/buttons on the same page. Depending on how many buttons I have, the textbox should have different contents (similar to tabs). I dont really know the exact wording for that, but perhaps you already know what I mean.

  6. I've been using the Sydney theme for a very very long time. Yet, I still watched your video, which I found very interesting.
    The Sydney theme ss one of my favourites. It's very flexible, user-friendly, and very professional-looking at the same time.
    As to your tutorial, I would have created a child theme first and used that as the theme for the website. Child themes save you problems in the long run as some modifications may disappear when the theme is updated by the publisher. Although child themes can be created manually, I use a plug-in for that.
    Well done for the tutorial. Keep up the good work.
    Greetings from the small island-nation in the middle of the Mediterranean, Malta.

  7. You are incredible Ferdy! Thank you so much for taking the time and effort to share this tutorial with us newbies! I built my first ever website by following your tutorial and I must say, it is beautiful and looks so professional! I am so happy! 🙂 You’re awesome! Best of luck in EVERYTHING you do and thanks agaaiiin!!

    Juliet

  8. Thanks Ferdy for another great tutorial! I'm hosted on Siteground, using Sydney theme and Elementor. But for some reason a few of the pages will not load the builder (the bouncing ball page is all it does.). From a visitor perspective everything is fine, it's just a backend issue. When I view the page source it is giving a 404 not found (swiper.min.js.map is the missing file), and in the Elementor debug area there's 10 'jquery' errors. Any tips or ideas on how to fix this? Neither Elementor nor Sydney has provided very good support. They each just blame the other.. So I'm really hoping you can help. Thanks in advance!

  9. Thanks a lot for this session. Your efforts has helped me alot in designing website. It's one of the best tutorials available online and it's very good for begginers.

  10. Hi Ferdy, Sydney Portfolio Plugin is not working on my wordpress? Why is that? I use the latest version of wordpress. Thanks for the tutorial.

  11. Hey Everyone, I don't know why but i am not able to see "edit page" on my home page… all the other pages i can see it. What's wrong? am i the only one going through this or making some silly mistake? PLEASE HELP!!!

  12. Ferry, thanks for the great tutorials you make.
    I have one question regarding building a portfolio. Before start using the Elementor plugin, how can I add the portfolio category to the left of my WP work space to place my pictures on the different portfolio pages?
    Kind regards, René

  13. Hi Ferdy or anyone listening, I have a question. halfway through the tutorial I noticed that the top menu bar cuts off a small percentage of the very top of every pages margin, what did I do wrong? please get back to me ASAP

  14. Great video, I made my website using this tutorial. Thank you so much for making it so easy. However can you please help me with one thing? I want to get rid of the extra large black area on my homepage just above footer note. How do I reduce its size or remove it?

    www.women4peacetech.com please check

  15. Как же много воды…. 25 минут видео и ничего полезного, только wp установил и всякой фигней занимается, оформление вп редактирует, плагины удаляет…. очень полезно

  16. Hi Fredy. I just tried this again on another website and the 'Disclaimer' is not showing with white letters. I think it's in black. How can I fix?

  17. Thank you very much! It´s a great tutorial! Could you tell me if the Sydney's free version is compatible with WooCommerce?

  18. Hello, amazing tutorial so far, thank you. I am really struggling with one issue though. For some reason the sidebar (that you may have on a blog page) keeps re-appearing on a specific section (top) on the home page (using elementor). On the WordPress home page I have the template set as full width (no sidebar) not default. I then edit using elementor and randomly the sidebar will appear again. I have changed it back to full width on the wordpress page editor about 20 times now and even tried setting it as the 'elementor full width' option as well but the same issue coninues to occur. Please can you help me set all pages as 'full width.'

  19. Great tutorial thanks so much!!
    (Btw, Wife, is spelled with an F) (I know you Dutch have the f sound represented by a V) 😉

  20. Hye freddy, how to adjust image slider position in the front page? I want my image to position below the transparent navigation bar. So user can see my menu clearly. Hoping for your reply!

  21. Thank you, Ferdy, for this tutorial. I managed to construct our charity website from zero following this tutorial. www.gencad.org
    Abdirashid

  22. Hi Ferdy. Thanks for this awesome tutorial. I have a small question.
    Why did we create a separate page for photo, video and web design..
    since we didn't add anything in those pages . we coverred everything in the Our services page itself.
    is there a way to connect that photography menu to the section we created in services page ?
    Please clarify me .

  23. Hello, I create a website using Sydney theme but when creating a website I came across a small problem I can not solve

    This is the Header Area (Head Area)

    I have pages Home, About me, etc. The problem is how to paint in the picture I want to change the slide only on the Home page and not on every page.

    Can it set / disable somehow?

    Picture :
    1 https://ctrlv.sk/gDp5
    2 https://ctrlv.sk/I1TT

    Thanks in advance for your answers

  24. I did all this yesterday and today when I opened the page it was all gone. Apparently, the site has used all apache/php processes for a free hosting account. Is there anything I could to? Please..some assistance..

  25. Hi, I saw the new site: https://ferdykorpershoek.com/

    and I really like the menu of tutorials. how do you do it the same?

    thank you

  26. Hello Fredy, thanks for this lovely tutorial. Really helpful and during the process of making the website. I tried to view it on mobile the photos and font don't look good on mobile. Can you help, am not a technical guy so don't understand the technical words!

  27. Hi Ferdy,
    First off, great work. I've learned a lot from you tutorials.
    I have a question. At 1:33:15 you start adding a new section and I noticed for the first time there is a scroll up button in your footer.
    Can you tell me what plugin you are using? Or is it custom code?

  28. Sadly I am getting frustrated, as I am stuck at 30th minute of your video, after following step by step, after making menu and installing theme, my front page doesnt look like yours 🙁 the menu only comes down after i scroll to bottom of page, and there is no cover picture :/ I am clueless, i have followed you exactly

  29. Fredy !!!! Nice tutorial !!! Have a quick question on the initial step. When i Change the theme and install the plugin; and publish I get a blank screen . The 'Sydney' theme does not seem to load?

  30. Hi Ferdy, I've been using your video tutorials for some time now. I've created several sites over the last couple of years, and usually keep them simple. I love the Sydney theme, although I've been tempted to use a few others… thanks for the tutorials, They are GREAT!

  31. Hi, thanks for sharing. I have a problem which is when i scroll down and up my header is changing size as well. Do you know how to solve it?? thank you.

  32. hi, Ferdy! I made my website by watching your tutorial. Please suggest me changes. Thank you.
    http://sanketshahane.lipsindianalstop.com

  33. Wow! This seems an amazing tutorial. But people should know it's not totally free before they start. I set up my wordpress website 100% free but then I got stuck in customizing it… Some functions, like installing any plugins are blocked. WordPress asks me to pay to use this feature and be able to customize my website… The 100% free version is very limited and hard to make it look professional. Or I am doing something wrong?

  34. Thanks Ferdy. Me being a complete beginner to web, your tour was 100% helpful. I have a question, as I am using the Sydney theme, can I add a custom page into it. All I am looking for is to have a page, and i want to write the code (html/css/script) for the page with some logic/styles. Please show me the way how to do it, keeping the Sydney environment intact

  35. Can any one help me please to remove the word "EDIT" from elementor template used in about page in this video. Thanks in Advance.

  36. I have a problem on my website with the space above the footer and under the Slider. I don't want to have anything there, but I can't remove it, if somebody could help me, I'd really appreciate it 🙂

  37. Hi,
    Nice tutorial.. But I have facing one issue. After completing my website with theme as shown, on google result I am getting snippet as themes data and not mine.Please help me out in order to remove that and insert mine. Didn't find anything yet on web.. Need Help..

  38. Hi there Ferdy, Awsome presentation !! I must say you are so clear and I am so grateful !!! If I may ask you about the metatags. I know there are plugins for this and also that they can be configured from the editor. Could you help me on this issue?? Thank you in advance. Lili

  39. Two questions. Can I connect a domain using the free version of Elementor and how do I delete blocks? I've tried hovering over the block but the 'x' icon does not appear. And when I attempt to right click a drop-down menu appears for a second then quickly disappears before I can click delete.

  40. I AM NOT ABLE TO EDIT MY FRONT PAGE NOW BECAUSE AFTER DELETING HOME PAGE THERE IS NO PAGE EDIT OPTION FOR FRONT PAGE HELP

  41. Hi Ferdy Thanks a lot for it , i have one Question , When i Actived the theme dont'n Work the Header Slider in the Webpage. Do you know any fix o better practice ?
    Regards…

  42. Fredy, This tutorial is awesome! You are very generous to prepare a 3 hour presentation. I was struggling to turn-off the titles on pages. I tried your CSS code, and some others. I tried a plug-in. Then, I discovered that Elementor has a built-in toggle for this. The instructions are here. https://docs.elementor.com/article/290-hide-page-titles-in-wordpress.

  43. Outstanding tutorial for working with Sydney theme. I followed all the steps and my website looks great. Unfortunately, my website is not mobile friendly according to Google although it looks great on my mobile device.

  44. Love this tutorial – Thank you Ferdy! Quick question though does anyone have an issue where the slide show isn't working/showing? Mines is completely blank as in the ladies hand holding mobile doesn't show anywhere I just have white back ground. I know its relatively minor as I will upload my own pics etc but just curious if anyone experienced same thing? Have deleted theme and plug-ins and started from fresh a couple times but still nothing. Even checked my adobe flash player was working.

  45. The best step-by-step tutorial ever! So clear and so helpful. I used it to renovate my whole website! Thank you so much!

  46. Hi Fredy! Thanks so much for this tutorial! It's been very usefull to us!
    One question: I want to take a button off, but don't kow how to do so. It's the right bottom square that takes me to the very top of the page. How do I do so for every device?
    Reagards!

  47. Hello Ferdy, any chance you will do a tutorial for Sydney Pro 2 { paid verison }
    Using the paid ver. offers soooooooooooooooo much that is not covered in any video
    Much thanks for your awesome video's.

    p.s. your English is perfect, congrats..

  48. Hi ferdy , when ever i upload and puplish my slider image it doesnot not shows full picture but some portion of it and also if i crop my full image it expand image pixels,
    plz give me solution

  49. Hey Ferdy really great work i want to says you something make a one free website same like this but for the traveler person with blog page and travel hope so you ??

  50. Does Eliminator work for all WordPress Theme as I use NewsMag for my website or I should install Sydney Theme? Please reply

Leave a Reply

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