How To Make A WordPress Website | Elementor
Articles Blog

How To Make A WordPress Website | Elementor

September 2, 2019


Hi guys! My name is Ferdy and in this video, I will
show you step by step how you can create a professional website using a free theme, a
free page builder called Elementor and free stock images. Even if you have never made a website before,
and this will be your first one, this tutorial is for you. Let me show you what we are going to make
in this tutorial. So this is the website we are going to create. You can have a call to action over here, your
social media icons, a great menu with a submenu, beautiful logo and if you scroll down, it
shrinks a little bit and it will be sticky on the whole website. Beautiful animated title with a call to action
for portfolio or contact. If I scroll down, I show my services – photography,
videography and web design, and we want to show a little bit about who we are, with a
call to action, the About Us page, what do clients say about us, we can have beautiful
animations like that. We can show the clients we work for… and
over here we have the footer widget area, with an Instagram widgets, the Facebook widgets
and the recent post widgets and here Ferdy Korpershoek productions and our social icons
over here. I click over here, and I go up again but let
me show you the power of Elementor. I click over here, and elementor is a free
live page builder, so you can see the result immediately. So maybe I want this text to be bigger or
smaller, then we have content, style and advanced. I want to style it so I go to style and I
make this bigger or smaller and you see the result immediately. You see that line over here, it’s not straight. I can click over here, on the section settings,
I go to style, scroll down, I go to shape divider and I can go to the button which is
over here and I can tilt it, I can change the height, so I can tilt it quite much and
I can also say, I want to have mountains or drops. You don’t see it that good, I’ll bring it
back to tilt. You can also do it at the top over here; you
can choose the type>pyramids like that or fan opacity like that, curve and you can change
it, you can change the color, you can change the width and change the height. So you can do a lot of things within Elementor
to style things within your website. Then we go to the About Us page; I’ll show
you how to configure this and it’s all made with Elementor – a free page builder. That is the page builder we will use. If I scroll down, a nice text, I will show
you how to create photos like this, a text about me, photo about me, a text about my
wife and a photo about my wife with a beautiful animation. The call-to-action if you click over here,
you scroll down to the get in contact with us, with a nice background of time-lapse and
a few social media icons. If we go to the services page, I’ll show you
the services and if you click over here, you go to the area photography with a nice media
gallery and getting contact button. Some information about videography; if you
click over here you see more information, the amount of wedding films, business films
and video clips we have made. It is amazing what you can do with it. It’s an amazing page builder. Here we can show, what we are capable of with
a nice animation, I show the website I made, and if people are interested based on what
they see so far, they can click over here and then they go to the contact form and they
can get in contact with us. We have the portfolio where we can showcase
what we have made. You can select the category, for instance
you only want to see videography, portfolio items or photography or web design. If I click on it, I can show the pictures
like that and then you can go to the previous portfolio item or next one or the related
ones. I’ll show you how to create a blog page like
this with a featured blog post and here we see the other ones and you see it all looks
really clean and beautiful. If I click over here, I’ll show you how to
create a sidebar like this, how to create a blog post with images and headers like that,
how to save a little bit about who you are as the author of the blogpost. People can leave a comment. And then we have the contact page where people
can see where we are located, they can get in contact with us and they can see some information
and they can see who they are dealing with. But it’s all nice. What I really love about Elementor, when you
have a website and it’s finished and it looks amazing on a desktop and you’re going to take
a look at your tablet, then it can look a little bit weird. This looks fine but over here, I don’t like
this. What can you do – you click over here, on
the elements, you go to the style to the content what you see, you see desktop icon, tablet
icon and a phone icon. Right now, I’m over here. Now just for the tablet, I can change the
size. So I make it 20; so I say 20 over here, I
click on this one I do the same, I go to style, scroll down into content and change the size
to 20. Same over here, I save it and now it looks
fine. But if I take a look at the same website on
a mobile, then I see that this looks weird. So I click over here in the mobile version
and here again, I see the alignment and you see it’s at the right, I bring it to the center
also over here, I bring it to the center and now if I save it and I want to view the page,
you see it looks really nice on a desktop and if I make it smaller, it will be adjusted. This is perfect for a tablet and if I go to
the mobile version, you see it’s here in the middle. So that’s amazing; you can configure everything
exactly as you want it to be with the elementor page builder. If you like what you’re seeing so far, please
give this video a thumbs up. It would mean the world to me. Thank you for that and let’s continue with
this tutorial. Everything you’ve seen so far is with the
free page builder Elementor, you can also get elemental pro and you get extra possibilities
and you get extra features and a few of those are the slider, you can have an animation
in the background, you can have a call to action, you can have multiple sliders. The latest blog post, in a really nice way
is displayed. Latest work in a really nice way … You have
a lot of options. I will also talk about these options. So without further ado, let’s get started
with the amazing page builder called Elementor. The first thing we are going to do is get
a domain name and web hosting, and I can provide you through my link with a 60% discount of
your hosting. After that, we will install WordPress, after
that we are going to install a free theme called flux and a free page builder called
Elementor; and when we have done that, we will create our amazing website. So let’s get started. If you have web hosting already, that’s great-
then you can skip this part, if not then follow along. So if we want to get a domain name and web
hosting, we go to webhosting125.com and then we click on the link and it will redirect
us siteground. Siteground is in my opinion the best web hosting
provider. Their support is amazing and if you take a
look at popular Facebook groups, you’d see siteground is number one. So I advise everyone to use siteground. We have three plans and you need only one,
so which one do you need, if you want to make your first website then you can start with
a startup area. This is $3.95 per month euros or dollars and
it holds one website, 10 gigabyte of space, it’s suitable for 10,000 visits per month
and if you get more than that, that is great, then you can upgrade to GrowBig. With GrowBig you can have a lot of websites
under one name and you only pay $6.45 per month. What does it mean you get web hosting for
$6.45 per month and besides that you can have extra domain names and add them to your web
hosting, and in that way you can have multiple websites with a few domains for just $6.45. If you get more visitors and need more space,
then you can upgrade another time to GoGeek. But we start with one website only $3.95 per
month, I did some tests and siteground is the fastest web hosting company I’ve found
and they have great customer support, they have a live chat. So in order to get a domain name and web hosting
here, let’s click on get started. We can choose a domain name, if you have one
already, click over here. You can fill in over here and it will do a
website transfer for free. I want to register a domain name, if you choose
Facebook and select .com and you say proceed, it says “Error, you have chosen invalid domain
name.” Why is that? Because Facebook.com already exists. But if I would say elementor2018.com and I
say proceed, it says congratulations – domain Elementor2018 is available for registration
with your hosting account. I need to fill in some details – my email
address [email protected] and I need to create a password and here’s some
client information, my country – the Netherlands, first name, last name, my company, my city
and all that stuff and your VAT number if you have a company, you can fill in your VAT
number and then the taxes will be subtracted from the total amount you have to pay. I scroll down, I want to pay with credit cards,
my card number, my billing address is the same as given in the contact information and
I want to have the startup plan, I can change this from Amsterdam to Chicago because I want
to create a website that’s for English people, the period is 12 months, I like it and I have
a domain registration, I don’t want domain privacy. If you do that, then nobody can see who the
domain owner is, so they can’t email you with questions. I want to be transparent, I leave it as this. I don’t need a site scanner, so I also leave
that as it is. So total $59.35, I confirm that I’ve read
and agreed to the siteground terms of service and if you get web hosting here at siteground
through my link, I get a commission. So thank you for that, it supports my channel
and helps me to create more tutorials. And what you can do now is pay now. “Your order was successfully submitted.” So that’s great. “Please hold, it takes less than 2 minutes
to complete your account creation.” And it takes less than 10 seconds. So we completed step 1. We have a domain name and web hosting. I click over here, proceed to customer area. Now siteground wants to help you, but we don’t
need the help of siteground because I will show you everything. So when this pops up, say thanks but I don’t
need help and click on proceed. I click on my accounts over here and I go
to the cPanel. We are going to install WordPress. I go to the cPanel by clicking this red button. I remember my selection, I click on proceed
and here is our cPanel. What I want to do, I want to install WordPress. Over here is the auto installers, you can
click on WordPress or you can go to WordPress tools, install the WordPress, I click on this
one, I scroll down and here it says install now. I click on it and I want to choose HTTP. If you have only one website, this is the
only option, here it says the directory; I can install it at Elementor2018.com/test or
something like that. I keep this empty and here are the site settings. The site name is Ferdy Korpershoek Productions,
the site description – you deserve to be seen. This is not necessary. And my username FerdyKorp and my password,
I like it. My admin email – [email protected] The language – English and everything here
is fine. What you see over here, I need to verify my
account, otherwise my website will be offline within two days. So I go to my email, I click over here and
I need to verify it. So in order to ensure your domain remains
active, you must now click on the following link. Click over here, scroll down, verify information. “Thank you the following contact data has
been verified.” Really important to do, if you don’t do that
your website can be offline after a few days. I click on install and it says it can take
up between 3 and 4 minutes, but it only takes 15 seconds. And now we have installed the WordPress. I can go to the front-end on my website or
to the backend. If I click on the front-end, it opens in a
new tab, this is the front-end. Everybody in the world that goes to Elementor2018
right now will see this. If you go to the backend, this is the place,
only we can access and we can change everything on the website, then we see the backend. The great thing about siteground is that our
website is online immediately. With other web hosting companies I worked
with, it took 20 minutes, sometimes it took 2 hours and sometimes even 48 hours and now
we are online immediately. What I want to do now, I want to clean my
website up. When you install WordPress through siteground,
siteground brings some plugins with it and I don’t need them. I want to start really clean. So the first thing I will do, I will dismiss
this over here. I will close this and what I want to do, now
I go over here to FerdyKorp and I edit my profile. You can choose a color scheme, you can have
it light or like sunrise, or midnight; I like to use it as default. I scroll down, my user name is this one, my
first name is Ferdy, my last name, my nickname and then my display name publicly. If I click over here, and I hold command or
control on the PC, I go to my website and here’s a blog post. If I click on it, you see it’s by Ferdy Korp. I want to change that. So I change my name publicity to Ferdy Korpershoek. You see right now it’s “Howdy, Ferdy Korpershoek.” I scroll down and if you want to, you can
generate a new password. I can do that over here, update profile and
that’s done. Now if I refresh this page, it’s by Ferdy
Korpershoek. What I also see when I’m here at this blog
post, I see Elementor2018/ the year and the date and then the title. If you want to change that, go to the back
end>go to settings>permalinks, I like to keep things clean and here it is displayed,
the common settings of the permalinks day and name; so it will look like this. I don’t want that, I want it to look like
this – Elementor.com/ (then the post or the page name). So I click on post name, I scroll down and
I say save the changes. Now if I go to the home page, I click on this
link and I go to elementor2018.com and I go to the blog post and I click on it, it looks
like this. It’s better… way better. I close this for now and I go to the dashboard. Here is a post and I want to delete it. So I click on the post, I click on trash,
now I need to go to the trash over here and I can delete it permanently by clicking this
link or I can empty the trash. I click on empty the trash and now if you
go to the dashboard, it is gone. I go to plugins and jetpack came with siteground;
what I can do, I can deactivate it and I can also select all the plugins and do a bulk
action, which is delete. I click on apply>yes, I’m sure and now if
you go to the dashboard and I close this, and this, and this, and this – it looks way
better in my opinion. It looks really clean. I like to work in a clean environment, and
in that way you don’t have unnecessary stuff on your WordPress website. Your website will be quicker. So what I can do? I want to create a few pages. So I can go to pages>add new, but if I’m
at the front end I can hover over new and create a new page. This bar is only visible when you are logged
in, so all the visitors of your website will not see this, only when you are logged in
so I hover over new, I click on page and of course I want to create a home page and when
I’ve done that, I can publish it and you see Elementor2018/home. I add a new one and I want to tell a little
bit a little bit about myself. So I can say About me, or About us or about… Publish; add new, I want to show my services
so I say services>publish. And in this tutorial I will have three services
I will offer – photography, videography, and web design and I do that on purpose because
I will show you it with portfolios how we can have different categories. If you’re not a photographer, videographer
or web designer, this tutorial still applies to you because I will show you the principles
I use in this tutorial that will help you to create a beautiful website. So the three services are, the first one,
I add a new page for it; Photography>publish, Add new, videography, I publish it, and the
third one – web design and I publish it. What else do I want to have? I want to showcase what I offer, so I click
on add new and I say portfolio, publish. Maybe we want to write a few blog posts, then
I add a new one and I want to have a blog page, blog and I want to give people opportunity
to be in contact with me, so I add a new page and I say contact, publish. When I take a look at the website, you don’t
see all those pages, how can we do that? I want to close this for now. I hover over here and I can go to menus or
I go to the back end, to appearance, menus and we need to create a menu. So I give it a name, I call this main menu,
you can give it a different name if you want to. I create the menu and here are all the pages
I just created. I want to view them all, I want to select
them all and I want to add them to the menu like that. What I see, I have two home pages; one is
a page we just created and one is a custom link. I want to remove the custom link, how can
I do that, I click on this arrow down, I click on remove. If I save the menu and I open this in a new
tab, I still don’t see the menu. I go to the back end and I scroll down and
I want to assign the menu to a certain place on the website; menu settings, display location
and I want to show it in the top menu. So I check this and if I check the social
links menu and I save it, and I refresh it, I will see it over here and if I scroll down,
I will see it over here but I don’t like this way of displaying things. So I uncheck this one. I can also change the order. So the whole page I wanted to be the first
page, so I drag it up then about us and portfolio and between those my services, blog and contact. So if I save it now and I refresh the page,
I have home first, about us, like that. But I want this to be submenu items, how can
I do that? I scroll down, I grab photography and I go
to services but I go to the right a little bit and you see there’s a tab. I release it and now it is a sub-item. The same I can do for videography over here
and over here. I even can have another sub item, so I drag
it to the right even more. Now web design is a sub item of videography,
videography is a sub item of services. So how will that look? I refresh it, home, about us, services, photography
and if you hover over videography, you can go to web design. So that’s how you can navigate through your
menu. It’s really easy just dragging and dropping. I like it this way, I saved the menu and if
I go to apple.com and I go to iPhone and I want to go back to the home page. There’s no home page over here, you need to
click on the logo. So that’s why I want to do the same, I want
to remove the homepage, click over here, remove it, because I want to let people click on
the logo when they want to go to the homepage. Right now, we don’t have a logo but we will
have one. If I click on this name, I go to the home
page and what does it say over here, Posts – nothing found. A WordPress homepage is normally showing the
latest post, but we don’t have any posts. I want the homepage to be normal page. So I go to the back end, to settings>reading
>front page displays, your latest post; I want to change it to a static page and I want
to select the page home and the post page blog. Save the changes and now if I go to the home
page, it shows the home page. There’s not much information, but it shows
the homepage. I want to go to the back end and walk you
through the settings, in general we have our site title FerdyKorp Productions, the tagline
– “you deserve to be seen”; you can also say something else, the URL, your email address
and you can go to the writing and leave this as this reading we just changed. If you want, you can discourage search engines
to following your website and if you go to media, you can organize all your files into
month and year based folders in your website, if you uncheck it, it will all be stored in
one folder called uploads. I like this one. If I go to permalinks, we discussed this already,
so those were the settings. What I want to do now, I actually don’t like
the way how this look. I want to use a different word press theme. What is the WordPress theme? If you go to the backend, you go to parents
and go to themes, you can choose a lot of look and feels for your website. If you install WordPress, you will get three
themes and if I would activate this one, the information on your website will stay the
same but the look and feel and the navigation will be different, and now it will look like
this with the menu over here. If I click over here, it will open like that. There are also premium themes, I have a lot
of tutorials about them but in this tutorial, I want to focus on the best quality website
without spending money only for web hosting. So I want to use a free theme and we can find
it within WordPress, I go to themes and I add a new one and here you can choose between
a lot of WordPress themes. You can even take a look. I want to search for Phlox – it’s a flower. I want to install it, I want to use this theme
for this tutorial. It’s an amazing theme. I activate it and what I like to do, I want
to keep it clean, so those themes I don’t need anymore, I have phlox, I don’t need those
three. So I click on theme details, delete, delete
and the latest one, delete. Well, if we take a look at the website and
we refresh it, we don’t see much yet. Our menu is gone, but we will create something
beautiful out of this. So I go back to the backend and what it says
here above – I need to install the core plug-in. I click over here, I say install now and I
want to activate it. I can run the setup wizard, I don’t want that. I want to do everything myself. I want to add my menu, so I go to the backend
>menus and here below, I want to assign this menu to the primary navigation. Save the menu and refresh it. Now it is over here, about us, I don’t like
that it’s here above, but we will fix that. I close this for now- the backend, and I want
to customize the homepage especially the header area for now. How can I do that, I click on customize. Everything has its own customization option
and this free theme has really great options, and I will show them to you step-by-step,
you will see the result immediately, I press CMD – (minus) once, so I see the website as
I should see it – this area at the left, and the menu at the right. You see, this looks really nice. The first thing I want to do, I want to add
a logo. If you want to follow along in this tutorial
with the same images I use, then go to FerdyKorp.com, go to tutorials, Elementary tutorial 2018
and over here it says “download the images I used in the tutorial”; click on it, you
download it, you unpack it and then you can follow along with the same images. I cannot share all the images I use because
for some images I have paid, so that would be illegal. I go to site identity and here I can upload
a logo. I select a logo over here and I can upload
a logo clicking this button or I go to upload files and I click on this button. On my desktop, I have the file you can download
and I go to customize and here is my logo. It’s 92 by 82 pixels, I open it, it’s a PNG
so the background is transparent and I can optimize it, so I say space over here, over
here; I will select it, I will copy it and I will paste it in the alt text and you should
do that with all your images, that’s good for the search results. I select it, I don’t want to crop it. I skip cropping and there it is. Here’s my site title – Ferdy Korpershoek productions,
you deserve to be seen and here we can change the width of the logo. So if I would say 30, you’ll see the logo
becomes really small. If I would say 200, it will not be larger
than this area. So let me see, 92 is original width and I
will leave it like that, then we have the site icon, it’s the area you’ll see over here,
so I select an image, upload files, select files and here’s the favicon 62×62, it needs
to be square and it doesn’t matter how big it is, you should have at least 16 x 16 pixels. I open it, optimize it, select>no cropping,
and there it is, I really like it. I scroll down, I think it’s okay and I say
it’s safe and publish. I go back and now I go to the general settings
over here. I click on it and I go to the general layout
and here I can assign what kind of layout I want to have. Do I want to have a full white layout or a
box layout. If I would say CMD – – – and I say box layout,
you’ll see there is a box around here; that means that the website will be wrapped in
a box. And we can have a different background if
we want to, but it means if I have full width slider, it will not go from here to here. I want that, so I choose full width. Then we can have a really wide website like
that or smaller one like that. I like 1200 pixels, I say CMD + 0 and minus
(-) one time, so I see how it is. So I like this layout. I go back and I go to the website socials. We can have social icons in our website and
I really like that, so I go to Facebook, I go to my Ferdy Korpershoek page and I copy
this link and I paste over here and what we see, over here appears the social icon. Same for twitter, twitter FredKorp, copy the
link and paste it; google plus, I have a YouTube channel – youtube.com/ferdykorpershoek, copy
link, paste it, I have Vimeo but I will not show that over here. Let me see, I have Instagram over here. Instagram, there it is; copy it and that’s
okay for now. I save it and I publish it and now we have
our social icons over here. I go back, page animation and pre-loading. If you want to, you can have a page animation. If I turn this on and the website loads, you’ll
see a small fade. You can also choose this one with animation
and then you will see, it appears like that. It looks okay, but I don’t like it. I don’t see the use of it so I uncheck it. What you can do, you can enable the page pre-loading
if you have a really big website with a lot of images, then you may want to use a page
pre-load; that means there’s logo over here and when the complete website is loaded, then
the complete website appears. So instead of you first see this image, then
this image, then here a few images, it all appears at once; but if you use a page pre-loading,
then you first see the logo until the website is loaded completely. If I do that again you see also a bar over
here like that. So use custom loading, I can have an image,
I delete this one, I add one – for instance this one. What you’ll see over here, because website
loads really quickly, you see the really short time. And if you have a progress bar, you can give
the progress bar a certain color. I will not use it but I wanted to show you
what is possible. So I save it and I publish it and I go back. Here we have custom JavaScript code. I will not use it, I go back. I want to use this for Google Analytics and
if you have Google Analytics, go to GoogleAnalytics.com; if you don’t have it, you can sign up you,
you go to admin. I have it already. You can go and create a new account – Elementor,
Elementor, Elementor2020.com for instance; this is all fine with me, get a tracking ID,
I accept everything, I can click over here, copy the code and then I paste it over here. I save it and I publish it and that’s it. I go back and I go back again, I go to appearance
to the website background and we don’t have the background because we have a full wide
website. But if you wanna have a box layout, you can
turn this on; you can give everything outside of the box different color or an image and
if you add an image, you can style it a certain way. You can have a pattern, you can have a repeat
of the background, you can have a certain position of the background, you can make it
a fixed background so if you scroll, the background stays in the same place, but I don’t use it
so I go back. Content background is this area over here,
if I make this black, everything here becomes black. I don’t want that of course, I want it to
be white. A website frame, if I turn this on, you will
see a nice frame over here. Maybe that is nice for photography websites,
so you will see better and I turn this off. Typography, we see certain typography over
here, our fonts. I can turn this off. Then we have all the default fonts that comes
with Phlox, I can turn this on, I can select a different font over here; there are a lot
of fonts. So for instance if I go to the main content
over here, we don’t have that, you do not see it. But if I go to the page heading, that is this
title over here and I would say Questrail, you’ll see it changes. So that’s how you can change it over here. I like open sans, I select that one and like
I say make it really bold or really thin. The menu over here, you can change it; you
can make it even bolder or you can make it really thin, then you don’t see it. So I like 600 and I like to use Raleway. So that’s that, the skin options – if you
have a video player or audio player, you can choose dark background with light icons or
the other way around. I will probably not use it and if you have
a lot of blog posts, then you can navigate to different pages, you can select the layout
of the navigation of that. The mobile browser – you can change the color
of the address bar, I want to change it to this color of my logo. I use color picker for that. In Google Chrome, just search for Google Chrome
color picker and you will find it, you can install it. I grabbed the color, I copied color code and
I paste the color over here and I say apply. I go back, I go back and I go to the header
settings. The header section is this area over here,
we can select the certain layout. Right now, we have the logo at the left and
the menu at the right but you can also have it the other way around. I click on this one and you see immediately
the logo at the right and the menu at the left. Almost all the websites in the world have
it the other way around, so I use the same thing because I want people to navigate really
easily through the website. So it will be a little bit weird if my website
is completely different than all the other websites in the world. I don’t want people to get confused, I want
people to make use of my services. So I leave it as this. What I can do, I can have a hammer menu or
a burger menu and then it becomes like this and if I click on it, it looks like that – a
real nice option. I scroll down, but you can also have it like
this, the logo in the middle – menu like that. So there are a lot of options, I’ll use the
first one and I scroll down. We can have a search button here at the right
but I don’t want it, I have one already here, so I disable it. The header width – right now, it’s from here
until here. If I press CMD – a few times, you’ll see it
starts here and it ends here. If I would say, the header width is completely
100% of the page, then will be totally at the left and the menu totally at the right. I don’t want that and I can also change the
height of the header, so I can say 150 and then they’ll be like this. I will leave it at 80. If I scroll down, you see the logo fits really
nice. It becomes a little bit smaller, I can disable
the border so it will be gone over here, I like the border. We have ‘enable overlay header,’ you do not
want to do that. If you do that then this area overlaps the
menu, it looks really weird. And we can have a header background color,
so this area can have a certain color if you want to. And then we have the sticky header height,
if you scroll down, this is the height of the sticky header. It’s 50 pixels you can make it bigger or smaller. So say 80 or 60 and if you think the logo
is not shrinked enough, then you can go back, go to site identity and make it a little bit
smaller like that. Save and publish and if we take a look, it
looks like this and when we shrink, it looks like that. You can also have a color for sticky header,
so if you change this color, when you scroll down it means you’ll adjust this area over
here. ‘Scale the logo on the sticky header’ – yes
we want to do it, so it will be a little bit smaller, otherwise it will be the same height
and width. Go back and let’s go to the header menu. It’s a horizontal menu, you can make it vertical
and then it will look like this; I don’t know why you should want that. I bring it back and then we have the sub menu
skin. Right now, if we hover over services you see
this. If you select this one for instance, it will
be a dark background and light text. So you can take a look what you want. I like this one, so when I hover over it,
it becomes dark. Submenu animation effect – right now it will
be there immediately, you can also say, fade and move; now if I hover over it, it appears. I like it more. Right now, we see those dots over here, you
can uncheck it and then it will be gone. I like this better, so I leave it as this. Here you can select the location of your submenu. I save it and I publish it and I go back to
the burger menu. This is only if you have a burger menu, so
if you go to header section and you say I want the menu to be like this and go back,
you go to the burger menu, you can change the color to this one, you can change the
form, make it bigger like that. There are a lot of options here, use an indicator. Do you want to have the toggle like that? And you see Phlox shows that really nice. So you don’t have to select it or activate
it before you can see. You can see it over here; and that’s what
I like about this theme – some options are even better than paid themes, premium themes. So that’s a great thing. I don’t use the burger menu so I go back to
the header section and I select the first one, but it shows you a little bit what the
possibilities are. I go to the top header bar, it’s this bar
over here with social icons and I want to display it and here again social icons, on
the left we can have something else and here you can choose for social icons, the menu
and the text. If you enable this and you have WooCommerce,
then you will see a shopping cart, I will bring it back to this one, I change it to
this one here at the right. Now I have social icons and at the left I
have text. So I scroll down even further and the message
on the top is get in contact and then I can have a number over here; like that. I go back and to the full-screen search, you
can choose a skin, dark background, light area or the other way around, so you can choose
that. So that was the header settings. Blog we will discuss later. The page, page layout, do we want to have
a sidebar – no, we can edit manually later at certain pages. Display content top margin – no, I don’t want
to have margin at the top; I uncheck it. And I want to have full white layout or a
normal one. I leave it as it is. I go back. Page title – I don’t want to show a page title. It should be gone, it isn’t. I save it and I publish it. If I close this, you still see it. You can edit the page, scroll down, go to
the title section setting, display title bar – no, update, view the page and now it is
gone. I don’t know why it works like that, but this
is what we have so far. I think it looks really nice… a logo, if
I scroll it shrinks, the menu sticks around. I have a nice animation. Now, what I want to do. I want to change the look of view of the menu. So I go to customize again, I go to appearance
>typography. I enable it. Then I go to the menu over here – raleways,
okay. I want it to be bold. So for instance 800, if I save it, now you
see it is bold. It is too bold in my opinion, customize it
again, appearance>typography, I scroll down, I say 600 and now you see it like that. I go back and what else… blog, we’ll take
a look at later. We are at the footer. I like it for now, I will take a look at the
footer later and all the other options. For now, this is okay with me. I save it and I publish it. I close it and right now it looks like this. We see the footer over here, we will change
it later. For now I’m really happy with how everything
looks. The next thing we will do, we will use Elementor
as our page builder. Elementor is a free page builder with really
professional functions and I will show you how to create a beautiful website with it. So let’s go to FerdyKorp.com, then we go to
tutorials>Elementor tutorial 2018 and I click on get elementor. I click on download or free download, you
can leave your email address or you say no thanks, I just want to download Elementor. And now we are downloading, I go to the backend
of WordPress, I click over here, I go to plugins>add new>upload plug-in>choose a file,
I go to downloads, then I go to Elementor and I open it. I install it now and I activate the plug-in
and now we’ve installed the Phlox theme and the page builder Elementor. Now let’s create an amazing website. And there it is. It’s a free version, you have a lot of amazing
options and I will walk you through the options. I close this for now and now if I go to the
home page, and I want to edit the page, I can say edit with elementor. I click over here and now we are going to
create our home page. So, if we take a look at Elementor here at
the left, we can add elements and here we can add new sections. I will walk you through it step by step and
at the end of this tutorial, you’ll have a great understanding of the Elementor page
builder. So first we need a section; I click on it
and in that section, I can select my structure, one column or two or five. I want to start with a header, so I want to
start with one column. I click over here and here it is. There are three parts in this section; we
have the section itself. Within this section, we have columns – we
can have one column or two columns or three columns and in those columns we can add elements. So if I click on the plus, I see an overview
of the elements and all those elements we can use. This is by far the best free page builder
I know. It has a pro version but I’m going to show
you what you can do with the free version. So, I want to remove the columns. I want to have only one column, so I hover
over here, I remove this column. I hover over here and I remove this column. If I want to go to the settings of the section,
I go to this blue area, to this icon and I click on it and here at the left, I can edit
the section settings. The sections, columns and elements have three
parts, the layout, the style and advanced. Over here at layout, I can stretch this section. I want the section or the background in this
section to go full white. If I press CMD —-, I want the section not
to be from here until here, with full white like that and now it’s from the left of the
page to the right. Come on zero. The content, I want it to be between the logo
and the contact element, so I leave it as boxed and I want to add a background. So I click on style, I can add a color as
a background or a gradient or a video and I want to use an image for now. So I click on classic and on image. If you want to use free professional images
for your website, then go to pixels.com or unsplash.com and there you can find beautiful
images. So over here at pixels, maybe I like this
one and I click over here, I click on free download and that’s it. It’s a really big image as you see. So right mouse click>save image as>save. I go to the backend, I go to media>add new
>select the file; I grab the file from the desktop, the original one, it’s 8.7 megabytes
and it’s really big so I open it and if you use this within WordPress, your website becomes
slow and you don’t want that. So how can you fix this within WordPress,
I will show you. I click on the image, I say edit more details,
I scroll down and I say edit image. Then I say I want to scale this to 1920 and
then it will say 1280, scale. So now it is scaled. I can restore this later if I want. Now I want to make a selection. I can do it like this and I can change this
to 1920 by 1080. Let me see 1080, like that. I select the area I want to have, maybe a
little bit lower like that. I click over here again and now it will be
cropped till 1920 by 1080. I save it, I update it and now the size is
not 8 megabytes anymore but just 385 kilobytes. So I can go to the website and edit it with
Elementor and I want to add a background. So I click on style and on image and it is
this one 1920×1080. So take a look at pixels.com; you can search
for beautiful images like that, all beautiful and you can use it for free in your website
or unsplash – sunset like that, or mountains, wow! Look at that. And you can all compromise it and scale it
with WordPress. So that’s amazing. I use an image what I paid for, so I delete
this image and I delete this one. The file I will use, I bought it so you cannot
use it unfortunately, but you can use all the other pictures at pixels or unsplash. Here it is, the one I will use 1920×1080;
I remove the dash, copy the title, place it in the alt text. Okay like that. You only see a part of the image, how can
fix that. Over here you can scroll down, show the position
where it should be fixed on, this is also the position where it will be fixed on the
mobile phone when you see the website. So center will be this area. What I like to do, the size I want it to be
set on cover; no-repeat, default, and the attachment. Right now, if I scroll the picture is still
and I want it to be fixed like that. I think that looks really professional. There are so much more what we can do, I will
talk about it later about adjusting this area. For now, I want to add something in it. I go to this icon, so I see all the elements
and I want add a heading. I drag it over here and I say Ferdy Korp productions. I can link it, I will not do it for now. The size is default, I can change it later. H2, that’s okay. This can be H1 and I bring it to the center. I go to style, the text color will be white,
I close it by clicking on the color and I want to change the typography. And before we do that, I can go over here
to this icon, and I can add a few global settings. So I want to change the global colors, so
I will see all those colors every time I open a color palette, so I don’t have to type the
code in manually, I can just select one of those four. The first one I want to use is this blue color
of my logo. I can use a color picker of Chrome, I have
a tutorial about that and I grab this color, copy, escape and I can paste it over here. I click on the color, the second one is this
gray color, copy it, escape, paste it over here and the third one is a green color and
I want to use a color that Google advises, so I say Google colors and I click on the
upper one , I scroll down and I want to search for green. For instance, this one; I copy this code,
Google probably knows what’s best so why should I figure it out myself, if I use green, I
use this color and the accent. I also want to choose an orange kind of color,
and it will be this one. So I click over here, I paste it, I click
on apply, I click over here again and I go to the fonts, the primary headline and actually
I want to use Open Sans everywhere – open sans. So if I want something else, I will change
it in the element but everything will originally be Open Sans, apply and here again I want
to place the same colors. So I go to global colors, I copy this one,
I go to color picker, I leave black and white. So I grab the latest four, I paste it here,
global colors second one, second one, the third one, and you do this one time and then
you can enjoy the benefits the rest of the time you are making this website. So that’s great. So that’s it; I click over here again or I
go over here, I click on the text again and now if I go to style, to the color, I see
those four colors. I can use them really easily. I click here – title, typography; I can make
it bigger. This already is open Sans, so if I will say
open Sans, it will stay exactly the same. The weight – really thin, like this and I
want it to be upper cases Ferdy Korp productions and the style is normal, you can do italic,
adjust default. We don’t need line height, because we have
only one row and we can have text shadow, I’ll take a look at it later. For now, I don’t need that. Then we can go to advanced, and here we can
use the margin padding, we can use an animation like this, we can make it slow, we can have
delay. For now, I like it to be normal and I say
safe and then I will duplicate it. So I hover over here, if I want to duplicate
the column, I hover over here and I click over here and now I have two columns which
are exactly the same. I hover again and I remove it and if I want
to duplicate this element, I go over here to the right and duplicate it and that’s what
I want to do. I click over here, I go to the text and I
say “You deserve to be seen” and I want to make it smaller like that. I go to the elements by clicking this icon,
and I want to add a divider. You can search for it over here or you can
search for it over here and in that way, you can navigate all the elements really quickly. It’s a green line, it’s solid but you can
also change the style like that. Add some weight, make it bigger. I changed the color to white or to the blue
color, make it solid again, change the weight. I will change the width like that, I want
it to be in the middle so I bring it to the center and I can increase and decrease the
gap. I want to decrease it, make it a bit smaller. You know what, I will make it white, make
it a bit bigger like that. Save it; I close this for now and I want to
take a look. You see the animation like that, Ferdy Korp
productions, you deserve to be seen. I want this also to have an animation. So, I go to advanced, I scroll down; fade
in from left like that, that’s okay. If I want to bring this closer to each other,
I can do it in a few different ways. I can click over here, go to advanced and
change the margin, bring it to – and then you’ll bring it closer or I can go to this
one, go to advanced, margin say zero, if I only want to change the top and the bottom,
I can unlink all those four, so I can adjust all individually. Here I say -15 and with the bottom, just arrow
down – 15, so it’s close to each other. I like it and I save it and this is what we
have so far. And I think the animation is a little bit
too soon. So I click over here, click on this one, go
to advanced and I say animation delay in milliseconds, so a thousand milliseconds is one second. So I would say after a half second, this will
come and at the same time this one, then a small delay – extra 750, and I say save it,
refresh. I like that; I like it so far. Of course you can adjust it to your own wishes,
I just want to show you what is possible. I want to add two buttons, how can I do that? I go to the home page, to elements and I want
to drag this column over here below. The first column, the second one; I can click
on the plus and I can search for a button. I drag it over here and I want to align it
to the right. You can choose a type and it’ll give you some
settings. This one is green, this one is orange. I just want to use the default one. Change the text to portfolio, the link will
be /slash portfolio, the size can be medium, and I can have an icon if I want to. I can select it and at portfolio I want to
use a camera. So I say camera and here it is. Or you can search the whole list like that
and I select one. The icon position lets you decide, if you
want I can to be before the text or after the text. I want it to be before the text. You can change the spacing like that. Then we go up to style, here we can change
the colors and stuff. The text is white, the background color. I want it to be this green color. You even can make it transparent like that. You can have a border, so if you make it transparent,
it will look like this which is also really nice. I do it like this and if you have a border,
you can change the border thickness like that. And if you have a border or if you don’t have
a border, you can have a radius then if I remove this for now, you can change the radius
and make it round or less round. So there’s a lot you can do. I will bring it back to square. You can have a shadow, change the color of
the shadow to black for instance. Now it’s 50% transparent. You can change the blur, the spread, the position;
there’s a lot you can do. So there’s a lot of freedom to do what you
want to do. I don’t use the box shadow, I want to keep
it flat and clean. We can change the typography, make it bigger,
and weight 300, so it will be little bit thinner. But this is a button, so I want it to be bold
or just normal or default. You can have it, uppercase, lowercase capitalized
and again italic, oblique. You can have more space between the letters
like that and the great thing is, if you click on hover, you can adjust everything. So when you hover over it, how should it look. You can say if you hover, the text should
be white, the backgrounds should be transparent, the border color should be blue and width
of the border should be two. Now if you hover over it, it looks like this. I clear this for now and I clear this also,
so it will stay the same. I don’t use a border but what you also can
do, if you hover there can be an animation. So push for instance, like that or grow or
shrink. I will use shrink. I save it and I want to make a second column. I close the third one like that. I click on it and at content, I will bring
it to the left. I’ll change the text, contact – /contact. I change this to address-book and I want the
icon position to be after, like that. You know what, I’ll bring this to before and
I go to the style, I scroll down and I go to normal, text color is OK, background color
can be blue. And if I hover over it, I want it to be green. So I go to hover over here, background color
green. So if I hover over it, it becomes green. And this one I could make blue if I want to;
style>hover>blue. Save it, refresh
like that. I think they are a little bit big, so I will
make them smaller. I can do it really easily. I click over here, I go to content>medium,
I bring it to small or extra small and over here also extra small, save it. Let’s see what it does. Okay, and I want to make the text smaller. So I go to style, make it 14 or 16; Ferdy
Korp Productions – “You deserve to be seen”; portfolio, contact. I think I don’t like the fit to hide thing,
so I go to the backend, over here to the settings of the section and I change it from fit to
screen to minimum height and it will be 400. I think that looks better. Refresh and I want to add some animation to
it. So I click on the button>advanced>entrance
>fade in. You know what, fade in left and after one
and a half second and this one, advanced>fade in from right after setting it on 50 milliseconds,
so let me refresh it. It looks like that, I like it. If I go to the back end and I go to the section
settings, to style and I scroll down, I can have a background overlay and I want to use
a gradient for this. So just the first color, second color; so
if I would say the first color is blue, the second color is less blue or a darker blue
a little bit or you know what orange, you see I get an overlay maybe like that. And I can do a few things with it. I can change the location, so the bigger part
can be the red color or the blue color. I leave it in the middle, it can be linear;
it can also be radial. So the inner part will be blue, the other
part will be red. I like to use a radio. I can change the angle like that, I want to
drag this little bit around. I can change the opacity, so this is nothing. This is everything 100%. So I want to reduce it to something like that
and then there is the shape divider. It’s a really nice tool. I’ll show you what you can do. This is the top, I can place mountains, so
it will get an effect like that or drops. You can do a lot with it. I will use the tilt one and I can change the
color but this color is white, so why should I change it. And you can change the height, but I don’t
want to do it here. At the top, I want to do it at the bottom. So I change the type to none, I go to the
bottom, I change it to tilt and I want to bring it back to something like that – 37. I really like this effect. I can flip it, I can bring it to the front
which it is already; so that’s it for now. I save it, and if I want to take a look to
the whole site, I can click over here and then I see how it is. It looks really nice in my opinion. I open it again and if I refresh it, you will
see the animations again, really nice. So that’s that, let’s go to the second element. I go to the backend, I click on add new section
and I want to have three parts. So I select this one, and here’s the first
one. I can click on the plus and I want to add
a icon box. I drag it over here and I want to show my
three services. The first one is photography, so at the title
and description I say, photography and I want to change this to a camera like that. I can change the text, I double click, I use
this text and the text is green right now, so that’s not what I want. So I go to the settings over here, global
colors and the text color, I’ll bring it to something like that. So primary color, secondary text and accent. An accent, I’ll change it to blue, apply. I click over here again and the view can be
default or stacked like that or framed. I like default, only the icon; the text I
can link it to someplace, so I link it to photography. Keep everything in the middle, h2 and then
we go to the style. You can change the primary color of this icon. I leave it, you can change the spacing, the
size of the icon, I think 50 is okay. You can rotate it, you can have a hover, shrink
it, like that or make it bigger. I want to make it bigger and the content in
the center, vertical alignment is top, title color, typography; I want to use uppercase
and make it a little bit smaller like that. Line height, though we have the description,
the color is this one, the typography. You can change the line for instance like
that. I think that’s okay, the letter spacing. If I don’t want that, I say CMD+Z and it’ll
be back. I save it and I go for a new element and that
is the image carousel. So I search for carousal, here it is. I release it and I can add a few images. I upload files, select files, you can also
use these files. I go to homepage, photography and I select
them. I create a new gallery, I can change the order
if I want to, I can make this one first or I can reverse the order, insert into the gallery. Now I’ll see three in a row, so I will use
the full size. Slides to scroll – ten, I want to bring this
to one, like that. Image stretch – no, no arrows, no dots; link
to URL /photography or to the media file. I want to use a lightbox, no caption. Additional options – pause on hover – no,
autoplay – yes, autoplay speed – every five seconds, infinite loop; so after the last
photo the first one begins again. The effect I want it to be a fade instead
of a slide and the animation speed, if you take a look. I think it can be one second and direction
doesn’t apply because the fact is a fade and not a slide. So I like that. Then we go to the style, we don’t need a border,
we don’t need a radius and the margin, I want to bring this closer to this text over here,
so I uncheck this one and I use my arrows down and I will bring this closer to this
area. I don’t want to have an animation, so I’m
okay with this. I save it and that’s okay. The third element I want to use is a button. I drag it over here below, default. More information, link/photography, bring
it to the middle, make it medium. I want to have the same icon – camera; that’s
all fine. I go to the style, text color is blue – this
one. The background is transparent, I want to have
a border – a solid one, two pixels, no radius, no shadow, no text padding. If I hover over it… I want it to be inverted, so the text will
be white. The background will be blue like that. No animation or an animation will be shrink. Now we can go to advanced and I like it the
way it is right now, I save it and I want to refresh it and it looks like this. What I want to do now, I want to bring this
a little bit more in this area. So I go to the section settings, I go to advanced,
I uncheck the link and with margin I say – and I hold it for a while, I scroll up a little
bit; let’s see -150. I save it, what I do, I click over here at
the section settings and I bring this to 550. I click over here, I go to Advanced>Background
and I make the background white, like that. I go to the element style, padding and I say
10 pixels and I can even make it 20 pixels. Save it and refresh. So I like this style. And I want to bring this more up because now,
this is the button, this is the top and this is not in the middle, how can I do that? I go over here to these settings, advanced
and I bring it down again. I uncheck this 0, 0, 0; and I bring it up
again like that. So it should in the middle. I save it, refresh and what I will do, I’m
just trying other things a little. I’m bringing it back to 450. So even we have a small desktop screen, you
will see this area immediately, like that photography and I think this is okay. What I want to do, I want to give this an
animation also. So I click over here on the column, advanced
and I say fade up>slow with a delay of 1000, save it, refresh like that. I want to duplicate this one more time and
the second time and I want to remove this one, remove this one and I click over here. I go to advanced, this one after 1500 seconds
and this one after 2000 seconds, save it, refresh and now this is how it looks. I really like it. So it looks really professional and I like
that because it’s a free theme with a free page builder and I’m really impressed with
what it can do. I need to adjust those of course, so I will
do that. I’ll go to the second one, change this to
a video, change the title, change the text, I remove this one because I will not show
photos. I go to the third one. I search for address, I like that one or this
one title – web design, here’s some text. I click over here, I want to clear those images,
delete them add images>upload files>select files and I go to web design. CMD + A – open them all, create a new gallery,
insert the gallery and there they are. Save it then I search for the video. I drag it over here, I click over here and
I will say Vimeo with a Vimeo link, autoplay, loop it so it will start over again when it’s
finished. I don’t want to show the title, portrait or
byline and I save it. What you’ll see, this one is a little bit
lower than this image. Why is that? If I click over here and I go to advanced,
I see -14 and I want to do the same over here. Advanced, no link, -14. Here it says Photography, here videography
and here web design, so we have to change it over here. So I go to more information and if you change
the link to videography, and I want to change the camera icon to video camera icon like
that. Also over here change the link to videography. And I go to web design, I change the link
to web design, I change the icon to address card, like that. And also here the link web design. I save it, I refresh it and this is how it
looks; really nice. Okay let’s add a new section. I go to the backend and over here, I click
on new section and I have only one column. Here it is, I click over here on the settings
of the section. I want it to be stretched, I want it to be
full wide or full width; style>background>classic. I want to add an image. I upload a file; select files and here it
says “who we are?”; open it. This is me with my wife. We are is not a title I want to be found on,
so I don’t optimize it; insert media. I go back to layout, and here I say minimum
height of 600. I go to the style again, I scroll down a bit
and I change the size to cover and attachment to fixed. Now over here, I create a second column, so
I click on duplicate in the right column, I go to the elements and I drag the header
over here. And I say, who we are, what we do. And I want to style this, there’s no link. This is all fine with me, I want it to be
aligned. At the left, I go to the style – the text
color is this one, typography – I want it to be really small, like this. We are what we do and I want to change the
background of this column, so I click over here on the settings of this column and I
go to style>background>classic and the white color. I want to make it a little bit transparent
like that. I go to the elements, I search for divider,
I drag it here below, I release it. The weight can be two pixels, the color can
be also the blue one the width – I make it smaller like that and a gap. It’s okay like that. I make it a little bit wider like that. See how easy it goes, I really like this page
builder. Now I want to add a text element, text editor
like that and change the text. I don’t know if this text is correct but I
leave it as this and I want to play around with the margin. If I save this and I take a look, refresh
it, I scroll down, we are what we do. I want to make the margin bigger but also
here I want to make the margin bigger – how can I do that? A few ways, I go and add a divider. I drag it over here at the right, the weight
is zero. There’s no color and the gap is 20. Now over here, I go to the settings of the
column>advanced, margin is okay, I want to go for the padding – 40; save it, refresh
it. That’s better. I don’t want this to stick at the side, so
what can I do. I go to margin, I uncheck this and I say right
80 pixels. Save it, and now I want to make the background
a little bit less transparent, so I go to style, to the color, make it less transparent. Save it, fresh and there it is – who we are
what we do. And there’s a lot of space over here. Maybe a bit too much so what will I do, I
click over here, I make it 12 or 13, I go back and I want to duplicate this area so
I hover over here and duplicate it. I grab it over here at the blue area and drag
it down. I release it and drag it even more. I click on it, the link will be about us at
the left, no icon and I say “more about us”; save it. And you see, in a relatively short time, we’ve
created this area which is really nice. So this is what we are so far. Let’s take a look at a new section. I go to the backend, I scroll down and I add
a new section with only one column. I want to show few testimonials of people
we have worked for, and I want to have a background, so I make a stretched section, full width. I go to style>background>normal and I
want to have an image. I want to have again this image, I insert
the media, I scroll down, attachment-fixed and that’s it. I go for the background overlay and I want
to have a gradient, two times this color, only the second time, it should be a little
bit darker. I like that. I go back to layout and I say height, minimum
height of 600, so I can see how it looks. And I want to change the gradients from vertical
to horizontal. So I go to style again, to the background
overlay and the angle should be 90 like that. Opacity, I can increase it or decrease it. I like this. I go to the elements and I start with a header. I click on it and I say: “What our clients
say about us.” No link, it should be in the middle. Styling – it should be white and then by typography,
I only want to change the weight and it will be 300. Maybe a little bit bigger like that. What you can do, if you go to the backend
and you search for testimonial, you can have a testimonial element, what I don’t like about
this element is that you cannot slide between different testimonials, that’s only with the
pro version, I will talk about it later, how we can do that. We want to work with the free version for
now. If I search for test, the great thing is you
also see the Phlox elements. If I remove this and I scroll down, you see
general elements and below that you see WordPress elements, those are the elements that come
with a WordPress theme you have. So the Phlox theme has also all these elements
and one of them is testimonial. So I can use that one if I want to, but I
also don’t like that one; so what will I do, I will use a column and create the effect
that I want. I go back and I search for the text editor. I drag it over here and I want to click over
here and add it to column settings. I go to style>background and I want to make
that white, like that. I click over here and now I want to place
my testimonial text of the first person and that is this text. And this is Daniel and he has a website DanielOrtega.com
and I want to add an image so I point my mouse over here and I click. I add media, I upload files, I select the
files and if I go to the homepage folder and I go to the smiles, I can say CMD+A or I select
them all and I open them like that. I deselect those, I only want to add one image. And if I click on it, I scroll down. I align it to the left; no link and I want
the thumbnail like that Ferdy and Anna create some amazing pictures of me and my companions. Thanks Denniel’s and I want to make a link
of this. So over here insert edit link – HTTP, DanielOrtega.com;
open in a new tab, update and save. I refresh it. What the clients say about us, and you have
this area. I like it. What I can do now, I can duplicate it hover
over here, duplicate and remove this one and if I save it, and I refresh it, what do I
see; they stick to each other. I don’t want that. So I go back, I click over here on the column
settings, I go to advanced and the margin is 10 pixels and now you see, it appears like
that. And at the inside, I also want to have a padding
so margin is for the outside to push from the outside and padding is to push from the
inside. So 15 pixels, if I would make this 50, you’ll
see this will be pushing the borders to the side. This is way too much, so I say 20 or 15. I like that. What else I’ll do, I will scroll down. I want to have an animation fading up and
the delay will be nothing. I save it. I can remove this one now and I copy this
one, like that. I go to this one over here, to the settings
of this column, I go to advanced>delay – 500; save it. And what you’ll see now, if I go over here,
I refresh it and I scroll down, there’s a nice delay. So I like it. What I want to do now? I want to duplicate this column section, so
I duplicate it like that. Now I want to change the text of course, so
I click over here, I remove this one and I add an image and it’s the second one, insert
into post and the third one, remove the image at media, this is from Heather – HeatherAndrews.com,
copy the link, HTTPS or P – in a new tab, update and the latest one, change the text,
remove the image, add media, Gwenn and David – GwennAndDavid.com; something like that;
save it, and refresh. I scroll down and this is how it looks. What our clients say about us. I think that looks really nice. We’re going to create another section with
a white background, I click over here. So I hope you get to see how this all works. It works really easily and you can work really
fast. So if I want to duplicate this for instance,
I hover over here duplicate it, drag it below, over here; you see nothing because the text
is white. I go to style, change it to the blue color,
change the title to clients we work for. I go to the elements, I search for carousel,
image carousel, I drag it over here below. I add a few images, upload files>select
files, go to the home page to clients, those are a few. Open them and I create a new gallery with
them, I can change the order. Insert them into the gallery and let’s configure
it is… I want it to be the full size, slides to show
– 4, so now you see three, now you see four. Slides to scroll- two that’s okay. Image stretch – no, navigation – none, no
links, no captions and the additional options, pause on hover – no, autoplay – yes, infinite
loop – yes and the animation speed – 1000. I like that. I want to have more margin over here, so I
click over here, I go to advanced, margin, I uncheck this and top is 40; save it, refresh. Clients we work for, now we have those and
scrolls I get. What I want to add to the homepage is, the
latest blog posts and the latest portfolio items, but we don’t have them yet so I will
leave this for now, but look at this – a beautiful home page with a free theme, a free page builder,
almost all free images and a beautiful result. So that’s it for now, let’s go to the about
page. I want to close the home page for now and
I want to remove this area over here. So I edit the page, I scroll down and I go
to the title section settings and again I scroll down and over here I say no, update;
now I edit this with Elementor and there it goes. I want to show a few new tricks using Elementor
on this page. So I start with something we did already. I add a new section, one column and here are
the settings. I stretch it, I want to make it full width,
I go to style and I click over here for a background image and I click on the plus. I will go through it a little bit faster because
it should be a little bit familiar already with everything. I upload the files, I go to about us and I
want to go for we love Capetown. I open it. I can optimize it like this, but for the sake
of the tutorial. I will not do that anymore. I insert the media and I want to make this
cover everything and I go to layout and the height will be 400. That’s okay. I go to the elements and drag the heading
over here and heading will be this text; no link, the size – I will change it later. I’ll bring it to the center. I go to style, the text will be white and
typography, it will be 300 in weight like that. If I close this, now you see, it looks like
that. I want to make the background a little bit
darker, so I hover to this area, style and I can have a background overlay, you can have
a gradient or just a color. I will grab this color, make it a little bit
more transparent or I can do that over here at transparency. This is 100% zero, something like that. So you can see the image but you can also
see the text. That’s nice. I want to add a new section, a really simple
one, with just the text. So I go to the elements and I drag the text
editor over here. Now I’m going to write a text like that. I go to style, I bring it to the middle, text
color is okay and I want to make it a little bit bigger like that. I go back, what I can do, I can copy this
so I’ll go here to the right, copy it and drag it over here, I change the color of course
and then I change the text here at the content and I say about us. So we’re busy with this for five minutes and
this is the result already. Now we have this already, there needs to be
more space over here and I want to remove this area. So I edit the page, I scroll down I go to
layout options and over here at display content top margin – no, update, view the page and
now it is gone. I want to have a little bit more space over
here, how can I do that? I can do it two ways or I click here and I
go to the padding top and I say 20 or I go over here to the header, advanced margin 20. So you can do it in different ways. I like this way for now. I say we love to have fun travel and enjoy
life and I want to show a few pictures about that. So I add a new section over here with four
columns. I click on the plus over here and search for
an image and I drag it over here. I click on the image, upload files select
files and I want to select four files I have – Anna Italy, Ferdy Italy, Ferdy Cape Town
and Anna photography. Open it and I want to start with this one,
insert media and this is how it looks like. Actually, I don’t like it. I want this image to start totally at the
left. How can I do that; I go to the settings of
the section, stretch the section, full width, no column gaps and now if I do this, you see
it’s totally at the left. Okay, I click on it again. This is all fine with me. Link to the media file, do you want to have
the lightbox – yes, and what I want more, if I hover over the image I want an animation
or just a simple shrink like that or a grow; I like shrink. That’s it. I save it, what I can do now, I can duplicate
it and I can remove those. So all the settings are the same, I just click
on it and I change the image to this one, the third one, click on the image, change
it to this one close it and the fourth one, change the image to this one. So this one is looking to the right and this
one is looking to the left and those are in the middle, I like it. I save it and I refresh the page. About us, a text and then here, you see those
images. I like it and that’s how easy you can work
with this amazing tool, with this amazing page builder called Elementor. I’m going to make a new section with two columns
and here at the left, I want to have some text about myself and here at the right I
want a picture of myself. I click on the plus, I search for an image
like that or what you can do, you can put the image in the background. The difference is if you use an image you
cannot have text over it and if you would use the image in the background, then you
can add text over it or a different image or a button or all the other elements. In this case, I just want to use an image
so I drag this over here, I click on it, upload files and it’s just Ferdy Korpershoek and
I will also upload Anna Korpershoek. The images are square and here it is. I insert the media and there it is. No link, no caption. I go to style, it’s all fine with me and then
I save it and then I go to the settings of the section, and it is stretched. It is full width. The column is gone, no column gap. So if I close this, the image is covering
the whole right area of the page. And over here, I have an area and I can click
on the plus. I can add a heading and say Ferdy Korpershoek
and then I go back, I search for a divider; I drag it over here. Color can also be the blue one and I can make
it smaller like that. I can even add a gap like that and now I want
to have a text about myself. I go for dummy text, and I grab this area
over here, I copy it and I paste it over here. Make a new few new alineas, like that; maybe
one more. What I want to do now, if I take a look at
this and I refresh it you see it’s totally here at the left and at the top. I don’t want that. So what I will do, I go to this area, advanced
and I say padding – 100 pixels, that’s maybe too much, 50, save it, refresh. Now it looks like that. I think that is better. I want to add a button, so I go over here,
search for button. I drag it here below and I click on it and
I say get in contact and I link this to hashtag contacts. Now I’ll explain later, why I will do that. We already configured the buttons so I leave
it as this and this is okay for me. I want to duplicate this area, I will do that
over here and here it is again, this area – I drag to the left or this area to the right
like that. I change this to Anna and this text is also
okay. This is also okay and I change the image of
course to this one and now we are talking, this is way better. Refresh, Ferdy Korpershoek, Anna Korpershoek
and in that way, you can put some information about yourself. I like it. So if you hover over here, you see this – you
see some text about us. The quote and I think we made it really quickly,
so that’s great. Now what I want to do, I want to add a contact
area over here. So I click over here add a new section and
what I want to do, I want to add a video in the background of this. So I go to the settings of this section, stretch
the section, make it full width and now I go to YouTube and if you take a look over
here, this is made in South Africa. This is me in South Africa. This one and this one, so why not find something
about South Africa; Cape Town time lapse. I click over here. Yes this one begins immediately. If you copy this and you paste it, the sound
will not be used. So over here, I click on style and background,
click on the video icon and paste the link. Go to layout, say fit to screen, so there
it is. I’ve been here, this is such a beautiful place. I really like this one. So what will we do right now, I go over here
and I want to add a text editor, and before we continue – I save this, I go over here
to the backend and we are going to install the contact form plug-in. I go to plugins>add new and I search for
contact form 7. It’s a really easy contacts form maker. I use it all the time and I install it now;
it has more than a million installs. I activate it and now we see over here, the
contact form plug-in – I click on it, I dismiss this and I grab this code, I copy it and over
here I paste it. Maybe I should save it first and I will close
this, I go to the website again, to about us and there is a contact form. It looks a little bit weird like this, so
I will fix that. I edit it with Elementor, I scroll down and
over here, I have the video in the background but here at the column, I just want to have
a white background like this. And then I go to advanced, I uncheck this
at margin and I say the top – 100 right – 200, bottom – 100, and left – 200. I save it and how does it look now, it does
look a little weird. Why? I have set the height of this background to
fit to screen and I should not do that. So I go over here to the settings and I don’t
say fit to screen, but I say default. Now it is at the right place. I also click over here, I go to advanced,
to padding and I say 20. Save it so there’s a little bit more space
over here. I refresh it and if you scroll down, you’ll
see the form over here. I don’t like this way of showing the form,
so I made something for that. If you go to Ferdy Korp.com, it will change
the look of view of the form and go to tutorials>Elementor 2018, scroll down and then copy
this text, go to about us, to the back end, to contact, click on the contact form 1 and
then replace this text with the text you just copied. Save it; close this. Now if we refresh it, and we scroll down,
it looks like this. Now the name is within the area, you can type
over here, so that is great. So, if you take a look at the real result,
I scroll down, it looks like this – name, email, subject and your message and you can
send it. What I want to do now, when people click on
this link or on this link, they will go directly to this area, that’s called an anchor link. So I go to the backend, I search for anchor
and there it is, menu anchor. I drag it over here on top of the menu and
I call this contact. I save it, I refresh the page when I’m here
on top, I scroll down and I click over here and there I go to the form. One more thing for this page. I go over here, and I duplicate this area
like that. I drag it down and if it does not work, then
I can use the arrows over here and I bring some padding on 20. I go to content, get in contact with us, save
it. So in quite a short time, we made this page
– the About Us page, with a header, with a background and the title. Some text about us, some images and if you
hover over it, you can open them in the lightbox with area like this, with an image and the
same time, the other way around. And if you click over here, you go to contact,
get in contact with us. They can fill this form and when they do,
you will get an email. If you want to change the email of the receiver,
then go to the backend, to contact, contact form, mail and change this email address. Let’s take a look at the services page. So we made two pages already – the home page
and the about page and now I will go through it a little bit more fast. So hang on. I edit the page, I scroll down and I go to
display content top margin – no and I go to title settings>display title bar section
– no. I save it and I edit the page with Elementor. I want to showcase my three services over
here. I add a new section, one column, stretched
content width boxed and I go to style, background type, I upload a new image, upload files,
select files and here I go to services, services background; I open it, I insert the media
and I go to layout again, height – minimum height of 250 or 300. I save it, I click on the plus if I want to
and I want to add a button. We have styled a button before, so I will
do it really quickly. This is photography, the link is #photography,
in the middle it’s a large button, no icon. I go to style, text color is white, background
is transparent. And I have a solid border like that. I go to hover and the animation is shrink
like that. I save it and I want to duplicate the whole
column, so I get a second column. I hover over here and I click over here. I go to the second one, which is videography. I copy this text and I paste it over here
and I remove the capital like that and everything is correct. I save it and I do it one more time, hover
over the column, duplicate it, I click over here, I change this to web design, I copy
the text, I paste it here and I remove the capital W. I save it. I scroll down, I add a new section and this
time it is this one. 1/3rd and 2/3rd, like that. I go to the elements and I go for the heading,
I drag it over here and I say photography. I go to style>typography>weight; like
that. And I go to the section>advanced, I want
to add a padding from the top. So I uncheck this, make it 20 or 30, like
that. Okay. Below that, I want to have text about photography
and I want to go for a dummy text. I think this will do. Make a few alineas. I rather have less text and let the final
result of the pictures or the videos or the website speak for itself. So I’ll remove this and I make a button again. How can we do that, we copy it, we go to the
element itself, duplicate it and I drag it over here. Scroll down and drag it even further. I click on it, I go to style and the text
color should be blue and then everything is fixed. I click on it one more time. I go to content and I drag it to the left
like that. Here at the right, I want to have an image
gallery of a few images of photography I have. So I search for image and gallery, you see
over here. I drag it here at the right and I want to
add a few images. I upload the files, I select the files and
I go to Elementor, portfolio>photography>Daniel Leah and I add those all. Open them; I create the gallery and I insert
the gallery and there they are. I can configure this if I want to. Right now it says thumbnails. I can also say full size and what you’ll see,
the images will be posted in their original format. So this one is longer than that one, so I’ll
bring it back to medium. So it will keep the aspect ratio or you know
what thumbnails like that. So it all will be square, I like that more. How many columns – three, like that. We can link to the media file, have a lightbox
– yes, default ordering. I go to style>spacing – we can have a custom
spacing, so I can make it bigger or smaller. So I will save this and I’ll take a look now. How does it look over here. Photography, videography, web design – I like
that. Photography and I think that I don’t like
this, there’s too much page in my opinion. So what can I do? I can do a few things. I can drag over here like that, save it and
that’s how easy you can change things with Elementor and now it looks like this. It looks better in my opinion. What else we can do. I can go to content, make it full, click on
the images and I will remove this one. Insert>I drag this to the left again, now
you see it contains the aspect ratio, refresh and I like that. If I click on the image, I can navigate to
the right and to the left and what you also can do, if we go to the back end, you can
go to the settings over here to the global settings and then here you see light box settings. We can turn it on, we have turned it on, we
can enable it in the editor – that means if I click over here right now, I will see that. Now I’m again in the gallery settings, so
I click over here again – global settings>light box and I can change the background
color. So I click here one more time, global settings
light box, I can change the color to this one for instance and I can change the transparency,
so if you want to maintain your style or you want to give it look like this, then you can
use that. You can also make it more transparent as I
said before. So it will really be focused on the picture. So that’s really handy, you can change it
if you want to. I save it. If I click now, it’s like that and if I refresh
it and I click, it’s darker. That’s what you can do, maybe a little bit
more spacing; over here advanced and make this 50. And at the bottom also 50. I save it. What I have to do now; I go to the elements
and I go to anchor and there it is – menu anchor. I drag it over here on top of the title photography
and I call this photography. I save it, if I refresh the page, and I click
on photography, I go to photography. The same I will do with videography and web
design. I don’t want to have a title over here, so
I do duplicate this, I drag it over here, what do see, I can only put it over here,
I make the text white, so how can I fix that? I drag them all to one column; this one I
remove, this one I remove. So we have one column now. In that column, I will drag two columns and
I can even make it three columns. The first one I drag over here, the third
one over here, the second one over here, and photography, I bring it here to the middle
and I say “service with a smile” – I don’t know, I make something up. I’ll make it bigger. I like that. Save it, refresh it; service with a smile
– Photography, videography, web design and here we see photography. And if I click on this link, let me change
that. The link should be #contact. Now I duplicate this whole area over here,
I duplicate it and here it is. I can drag this to the left, this over here
I change it to videography, I change the title to videography, and I can say videography
– let me put something new over here. I close this, I go to elements, let me see
what we have not discussed yet. We have discussed all these, this we will
discuss in contact page, this one we have discussed I think in the first page. I want to use a toggle for now. So I drag it over here and here I can say
wedding films with a certain text. I close this, the second one is business films,
I can duplicate it and here’s the third one and I can say video clips. And at each one I can give an explanation;
“We love weddings” and then some more text. For your website, you can fill in your own
text. I’ll leave it as it is. I save it, I refresh it, I go to videography
and I want to see more about wedding films, business films and video clips. I close them. We can add more items if we want to, we can
go to the style, make the border thicker or thinner and we can change all this stuff over
here if we want to. I want to add a small text, let’s say we offer
three kind of services – videography services like that. And people can click over here and if I click
over here, this text should be changed, actually to get in contact, here also get in contact,
I save it. I to remove this one and I go to the desktop,
to Elementor, to the folder, portfolio, films Montana, Montana Vimeo link and I want to
grab this video. Copy it, I drag the video over here, the video
player, I select Vimeo and I paste the code. No autoplay, no intro title, just like that. What we can do; I save it, refresh it and
now it looks like this. We offer three kinds of videography services,
wedding films, business films and the video clips and here we have an example. These areas are both white, this one and this
one. So I want to make this one blue. I can do that really easily, I click over
here, style>background, a color – the blue color and I need to click here. I go to style, make it white. Over here I go to style>background, white
and then to typography in this text, we can make that also white. I click over here, go to style and make it
white. Save it, refresh, photography and here videography. I see this area here at the left is not white,
so what we can do, we can go over here and stretch this section. Now it’s totally blue from the left to the
right like that. I don’t see the button anymore, so also over
here, I click, go to style and change the blue colors to white. Save it, and now I can add a new section,
I want to do that but it’s still part of this section. So I add a new section, one column, click
over here, make it stretch. I go to the backgrounds and grab an image,
it’s the same one we have used before on this page and I go to background overlay and it
will be black like that. And I go over here and I go for a counter. Here it is, like that. I want to give this a blue background. So here at the background, at Advanced, I
select a white background like that and at advanced, if I go to element style I want
to have a margin of 50 like that. I go over to content, how many wedding films
did I do already – 27 and I go to the title over here, wedding films, save it. I go over here and I duplicate the column,
the second one of course is business films with it – 48 already; and the third one we
duplicate it, and we did already 12 video clips. Save it. Refresh. Now this the area of videography – wedding
films, business films, video clips. Maybe you think it’s already counted, you
can make it slower; so animation duration you can say make it 5 seconds and then it
goes like that. Also here, 5 seconds and the higher the number,
the faster it goes of course. Save it, refresh. So we have photography, videography, now we
need web design. What I want to do, I want to duplicate this
section over here, like this and now I have two of them. So I hold this over here, I want to drag it
down over here. It’s not working, maybe the other way around
like this. And then this area like that. I’ll rename this to web design. I rename this to web design, this is the anchor
link, so if you click over here you scroll over here. Let me see what we can use, we can have an
icon list or a progress bar. So if I drag this over here, my skill – my
skill is web design or you can say HTML and PHP. I bring this up to 100 and here’s the inner
text. I don’t need inner text. I want to show the percentage and if I want
to change the color I can do that over here. I can also duplicate it and I can say Java
Script and I can make this 75. I can change the color like that. What you also can do, you see a light area
over here, so for instance if I make this background a little bit darker, so for instance
like this, if I make this black and I save it and I go to JavaScript, style background
and I make this transparent, then you see I see this black background. So in that way, it’s really nice to remove
the background. I go over here again, I bring this back, people
are not interested in knowing the script languages I know. They just want to know if I can build my website. Well, this is all for illustration purposes. So I can make this one blue again. Let’s say – creating a webshop, and I can
say hundred again. Save it and over here I want to showcase my
websites, so I click over here. I close it. Now I go for image carousal like that. I click on it. I add a few images upload files>select files,
I go to portfolio>web design, select them all and I open them, create a new gallery. I want to show the full size, show only one
slide at a time, no arrows, no dots. I want to link it to the media file, lightbox
– default, additional options, the speed – every 5 seconds. I want to change them every three seconds,
infinite loop – yes, I want it to fade and the animation speed is a 1000, which is one
second. I remove this text, save it, and let’s take
a look. Web design, like that. Get in contact and over here and this is changing
every few seconds. So I like it and get in contact if you click
on it nothing happens. We need to create a contact area. I’ll do it really easily and I create a new
section like that, I go to the text editor, I go to the front page, to the back end, to
contact and I copy this code and I paste it over here and there it is. Then again I can go to this area and make
it stretched, give it a background – the same one I used before. Bring the dark overlay, for instance black,
change the opacity over here like that and then over here. I want to have a margin but this time not
in pixels but in percentage. So I want to say only at the top 5%, the bottom
also 5%, and the right and the left 20%, like that. Save it, go back, search for the anchor, drag
it here above and call this contact. Save it, click over here, view the page. I close this. Now if I click over here, I scroll down to
name, email, subject and sent. So that’s great, I want to fix the background,
so I hover over here – style, attachment, fixed, save, refresh. Now it looks like that. I like it very much. I can add one more text over here. Bring it to the middle, ‘get in contact with
us’ change the style, text is white, typography>weight – 300 and I want to give it a little
bit of padding from the top – 30. Save it. Voila! Get in contact with us; name, email, subject. So that is our services page. We’ve also a few pages about photography,
videography and web design and I want to use this information on these pages. So what I want to do, I want to save this
page as a template. How can you do that? Go to the backend, I close this and over here
you can hover over the folder icon and you can save this as a template. Enter the name services, I save it, I close
it, I save this and I go to the photography page. Let me do this really quickly. I edit the page, I say no over here, no margin,
no title. I update it, then I say edit with Elementor. I go to the folder icon, template front library. I can use a lot of different templates over
here, I can click on it and I can insert it but I also have my own template which is this
one – the services page. I insert it and there it is and I don’t use
this for photography. I only use this. So this over here, I can remove this area,
this area and get in contact, I’ll leave that. Save it, view the page, the photography page
and now if I am at a home page and I click on more information, I go to this page over
here. The second one is videography and then the
third one web design, and that’s how you can work really efficiently within Elementor and
really quickly. But what if I only want to use this header. Then I click on save over here, save your
section to the library, header home page. Save it. Now it’s saved. I close it, I save it and now if I only want
to import the header of the home page, I go over here – Template library>my templates
and here you see it’s only a section. I click on insert and there it is, and that’s
how it works. Let’s keep those pages. I will do that later. Let’s go to the contact page. Edit the page and we do the same thing again,
say no over here, say no over here. Update and use Elementor. So what do we want to place on a contact page? I want to show people where I am located. I want to give people the opportunity to get
in contact with me through a form, so we will use contact form 7 again and I want to give
people some information about my company – the address and stuff. So let’s start with the location; I add a
new section, 1 column. I click over here, I stretch the section and
the content width will be full width. I go to the elements and I search for map
and there it is, Google Maps; I drag it over here and I want to fill in my address. It is 93 William Street, New York and there
it is already. I want to zoom in a little bit more, so I
go to level 13 so people see this is New York. I can change the height, I think 250 is okay
– 250. And if you scroll over here, you just scroll
down, if you uncheck this and you scroll here, you can zoom in and I don’t like that. I go over here again, I see a small white
area over here, so I go to column gap and I see no gap and the gap is gone. Save it, let’s take a look. I think that looks fine. I go to the back end, to contact and I copy
this code, then I go to Elementor add a new section with two columns and I start with
having over here and I say get in contact with us. I go to style>typography and change this
to 300. I go to the elements, text editor, I drag
it here below, select everything and I paste the code of the contact form. I save it, I close this and I take a look
at the page, get in contact with us in the contact form again and here I want to enter
some information about my company. So I go to the elements, I go to the text
editor, I drag it over here and I start with the address again – 93 William Street… if
I say enter. I start a new alinea, I don’t want to start
a new alinea but a new line, so I say SHIFT + ENTER, now it starts right below the 93
William Street sentence, 1920 New York… NY, now I say enter and I say W: elementor2018.com;
Shift + Enter, the E of email – [email protected] elementor2018.com, shift enter – the P of phone: +312345678. I select Elementor2018.com, I copy it, then
I click on this icon; HTTP and I paste this, ENTER, I select the email address, create
a link and then it will be emailed to link. So if someone clicks over here, they will
go to their email client and can send me an email and I like it that way. I can also make this bold, click over here
or press command or control B. I go to the elements and I want to add an image. I am the one who deals with all the clients. So I drag this over here below and I want
to add a photo of me. I want to upload it, select files, Ferdy Korpershoek
Maassluis in about us, open it and what I want to do with this picture, I want to make
it round. I will bring it to the left and I go to style. I can give it a border of 20 pixels and you
see those curves in the corners. I will remove this and I go for percentage
and I say 50% and now it is a perfect circle. I save it and I refresh it and there it is,
get in contact with us William Street and what I can do I can duplicate this, drag it
here to the right and say Ferdy Korpershoek productions. Okay. I want to create a little bit more space between
this area and this area. So I click over here, go to advanced, uncheck
this and I say margin top – 30 pixels; save it, refresh and this is our contact page. I like it. Now I want to go to the portfolio page and
I want to add some portfolio items. I go to portfolio, I close this and I want
to edit this page and this time we will not use Elementor. I will edit the page and again I will remove
this area and the title, I also want to remove it. Update and view the page okay and before we
are going to configure this page, I want to create a portfolio item but before I do that,
I need to install the portfolio plug-in. So I go to the backend, to appearance, install
plugins, it comes with the Phlox theme and here it says Phlox portfolio. I click on install, okay – it’s installed. Now I go to plugins over here and here it
is. I want to activate it and now if I go to the
front-end, to portfolio for instance, and I hover over new, I can create a portfolio
item. So I click over here and I say this is a wedding,
so I will say Daniel and Leah and over here I can create a category. So I have photography, videography and web
design, so I create a category called photography. Here I say add Photography, then I scroll
down and I want to add a featured image. I add one and all those images I used already,
so they are over here. So I can choose one image I want to use, and
I like this one. So I add this image as a featured image, I
want to hide it on the portfolio item itself. I’ll show you where it will show up and also
here I will do it twice, the same one set featured image. What you can do over here, you can add some
text, add some images. So I go to add media and I grab one image,
I scroll down, I want to align it to the center; no link and I want to show it in full size. I insert it into the post, I click on it and
now I delete it again. Now I add the media again and now I can select
them all. ALT + SHIFT, click over here. Now they will all have these settings. I insert them into the post and there they
go; really nice. Now I can publish it. Now I go to the website, I go to portfolio
and I still don’t see it. How can I fix that; I want to edit the page
and I want to work with the site origin, page builder that comes with the Phlox theme but
I don’t see it. So I go to appearance>install plugins and
those are plugins that you can install with the phlox theme and let’s see, the page builder
is over here. I click on install and again I go to plugins,
and I want to activate the page builder by site origin and since we’re installing plugins,
I go to appearance>install plugins and let’s see if I can use another one; page builder
widgets bundle. So I select this one and that’s it; only this
one. I click on install, I go to plugins and I
activate it. So now we have a few extra widgets, we can
use later in the tutorial. Now I go back to the home page, I go to portfolio,
I click on edit the page and what you will see now, over here at the right, you see the
page builder. Just like Elementor, this is a page builder. I click on it and please don’t get scared. It’s this area over here and I want to use
one simple thing. I want to add a row, just click here and this
row has two columns right now. Here we can change the columns to one, so
it’s one column and I insert it and inside this column, I want to add a widget. So I click over here and I search for a recent
portfolio and create tile and masonry. I click on it and there it is. If I update it now and I view the page in
the new tab, I see this item over here – Daniel and Lia photography and I can edit it because
I’m logged in. This is the featured image we use and it has
also the category photography. This looks okay. If I click on it, I will see this over here,
the images like that and in that way I can showcase my photos, videos and websites. Here we see related projects, we’ll take a
look at this later how we can configure this, but I go to portfolio again and I want to
add a second portfolio item but this time I want it to be video. So I hover over new>portfolio and I say
Montana Lisianthus and because this is a portfolio item, I cannot use a page builder. But what I can do, if I go to visual, I can
go to short codes and I can still put some things over here in the content like that. I want to add a new category which is videography;
add new, you can also have a subcategory for instance – business films. And I say the parent category is videography,
add new, so I could also say wedding films, video clips as a subcategory of videography. I’ll explain later what you can do with that. I want to go for a featured image, I add the
image upload files, I select files, I go to blog Montana and I grab this photo, I open
it and I add the image. The same I will do over here. Add the image, I will hide the image and now
I will add the video. I go to the Elementor, I go over here to portfolio
films, Montana and I grab the Vimeo link, this one. I paste the link and over here, I want this
to be shared. So I click over here, I grab this code and
I show the options and I say show text underneath the video – no. I think that’s okay. I grab this code, copy it, close this; I go
to the text tab, here you see the visual, so if I say hi there and I give this a color,
you see there is a color but if I go to the text tab, you see the code behind the style. So I go to the text tab because I’m going
to paste the code and if I go to visual, I will see this over here like that. I click on publish and if I want to view this,
view the portfolio in a new tab like that, I go to portfolio and now we see photography,
videography and business films. If I click on photography, I only see the
photography items. If I click on videography, I only see the
videography items. If I click on business films, it’s the same. How can we change this? Let me add one more and then I will talk about
the portfolio page. I go to new>portfolio; I close these two
and I say CounselMaassluis.com – something like that. Add a new category; it’s called web design. I add a new portfolio category, I want to
get the image>upload files, go to Elementor>portfolio>web design>Counsel Maassluis,
open it, add the image and the featured image and actually over here also, I will just add
the image and I want to add the link to the image. So I click on the image, I go to the link
icon and I say http://CounselMaassluis.com; I want it to be opened in a new tab. Update
and I publish it. I view the portfolio item and if I go to portfolio,
we have now three different items. Well I’ll add a few more and I will fast forward. I will add 12 more portfolio items and then
I will show you how to configure the portfolio page. I will fast forward right now. So I added them all. If I refresh it, we get this; we only see
8, that’s why we are going to configure it and we see a lot of categories. So if I select videography, I only will see
videography. If I say photography, I’ll see all these. Let’s edit it because we are going to make
it look better. I go and edit the page and over here, we go
to recent portfolio and grid, click on it. Now we can adjust it. It looks a little bit weird but that’s ok. Here we can select the categories. I close this and I will select videography,
I search for photography and w for web design. I only want to show these three categories. These are the main categories, all those others
are subcategories. The number of items I want to show. I want to show 50. Do we want to exclude things or include – no. How do we want the layout to be shown? Look at the layout and the image aspect ratio,
I can change it to 16 x 9, we can have an overlay title style. We can remove the title or metadata or the
filters. How do we want to show the filters, in the
center or at the left or at the right? I want it to be in the center. How do we want to show the filters, right
now it looks like this and we can also use this one or this one and actually I like this
one. So I select this one and let’s take a look. Say done, update, I view the page in a new
tab; now this is how it looks like. If you hover over it, you see engaged business
films, Vang quality, web design. I like it. And you can select Videography, you see all
the videos and photography. I really like it. I want to change one more thing. I click over here or actually two things. I want to change the aspect ratio to 4 by
3, again, you can play around with these settings and if I go to layout, I want to change the
padding from the top to 40 pixels. Done, update; so there should be more space
over here. I refresh it and now we have more space over
here. So this is our portfolio page. Play around with it. I really like this. So that’s it. That’s how it works. Really beautiful. If I click on an item for instance this one,
I see the video here at the left and here at the right I see share. Actually I don’t want that, so I want to adjust
the single post areas. How can we do that, I click on customize. I close this, press CMD minus one time, so
we see the website. How we should see it and I go to portfolio,
to the single portfolio and here it says, at the left we should see the content and
at the right, we should see other stuff. I like this better but I don’t like the share
area here. So I like this even better – this one. So we have the video at the top, below we
have the share button and I want to uncheck display portfolio Meta information and here
I can adjust a few things. Display single portfolio categories – no,
display single portfolio Tax – Tax, if you have a sidebar you can let it have dark background. We can have next and previous portfolio like
that. I would like it with a picture like this. So you can see it like that and you can take
a look over here. I can go to the previous or to the next portfolio
item. So that’s how it works with the portfolio,
really nice. Let’s go to the blog page and if we are at
the blog page, you will probably see nothing found. If you don’t see this then go to the backend,
go to settings, reading and the front page display – a static page and then the post
page should the blog page. We are not going to configure the blog page
yet, we are going to create a blog post and I will show you how it works. I hover over new, click on post and I’m going
to create a blog post about Elementor and this time I will not use Elementor, I’ll just
use the visual build over here. I can also use a page builder, but I don’t
need that. So I go back to normal editor, but first I
want to create a category which is WordPress. I have WordPress related posts and this one
is WordPress, so I add a new category which is WordPress. What kind of format do I want to have, just
a standard format. What does it mean? If you change this to image or a video, when
you go to the blog overview, instead of seeing an image you will see a quote or a link or
a video or an audio. I will leave that standard for now, I want
to create an image. So I set the featured the image, I want to
upload a file over here at blog Elementor elementor2018. I set it as a featured image and I will publish
it for now and I view the post, and you see this over here and I don’t want that. So I also do not want to see this, how can
I fix that? I added the post, I scroll down display top
content – no, title section settings – no, I want to view the post again, it looks like
this, no more title, bread crumb. Here we have a right sidebar. I don’t need it, through visual. Now let me show you a little bit about this
page builder. If I click over here, I see only this row,
if you want to have more options click over here and it will give you more options. I want to start with a title and then I want
to start with a paragraph. So how does it work? I start typing the elementor page builder. What I can do now, if I press ENTER, I create
a new Alinea. If I say SHIFT ENTER I create a new line. Now if I would say ENTER again, I create a
new alinea or a new paragraph. This is a paragraph. Let me add some text to it, for instance this
is a paragraph. If I want to have a new paragraph, I do not
say shift enter, but I do say enter and I can add a new alinea like this. So actually we have four alineas 1, 2, 3,
4 and if I do one more and I say responsive. I can make a header out of this. So if I update it, maybe you’re like what
are you doing. Well, I’m trying to explain something. Let’s take a look. Right now, we’ll get rid of this later. We say only in this text is all flat no style,
nothing. I want to organize this in paragraphs and
headers. How can we do that? I go to the backend and over here you see
paragraph and heading one until heading 6. If I select an area or I just click on it
and I say make it a heading 2, you see the text becomes bigger. But the same thing goes this one. If I would grab this paragraph I click on
it and I say make this heading two, the whole paragraph becomes a header two. I don’t want this, I want this to be a paragraph. So… and if I want only this line to be a
title and I want this to be a paragraph, that doesn’t work because I said SHIFT ENTER, and
as long as you say shift enter this will be one text. You cannot make this a header and this in
alinea or a paragraph. So if you want this to be a title and this
to be an alinea, if you try it like this, it will not work but if you say ENTER, then
you create a new alinea, I remove this for now and then I can select this, I say make
this a paragraph. So we have titles and alenias. I hope I make myself clear. This is also a title or a header. If you don’t understand it, no problem, you
will get it. I will create a blog post and I will show
you how it works. I update it for now. I refresh it and now you will see, you have
titles and blog posts. So I will paste the text over here, now what
can you do. If you take a look at visual, you can add
colors and stuff. I can select this, if this a different color,
I can select this over here. I can make it bold. If you click one time, you go to that place. If you click two times, you’ll select a word
and if you click three times, you select the alinea. So I click two times over here and I can make
this italic, or two times over here and I can give it a link. And I say go to http://elementor.com. Now if I update it, and if I refresh it, you’ll
see this is purple, this is bold, this is italic and this is a link. So that’s how it works. If I take a look at the text editor, now I’d
see the code. So this header over here has a code behind
it in HTML and if you want to see the HTML, you can go to the text tab then you’ll see
HTML. You don’t need to be here because you can
do everything over here. I will select it all, remove it and I will
paste a text. I paste it like this and this text has no
style yet. So I update it, I refresh it and you see it’s
a text but it really looks ugly. If somebody enters this page and he thinks
okay, an image and then he sees the text, this is not appealing; how can we make it
appealing – I will show you step by step. I edit the post and as I said before, we work
with headers. I select it over here, I want this to be a
header. So I change it from paragraph to heading two,
don’t use heading 1. If you use it, use it only once on your website. So I could say the elementor page builder,
I can select this and make this a heading 1, but it can only appear one time on your
post or on your page. Then I select over here or I click once and
I’ll make a heading 2. Over here heading 2, heading 2, heading 2. I update and I refresh. Alright, now it looks like this. The header 1 and all the header twos and it
looks already a little bit better. Now I want to add a few images in it, but
before I do that. I want to optimize this page for google. How can I do that? Over here you see Elementor2018/Elementor
and google search for this term after the .com, so if I only say Elementor, it does
not give a lot of information. So I want to drag this over here, Elementor
page builder and that will be the title of my blog post. And if I update it, you see the permalink
is still only Elementor, so I can edit this and add something manually and it will be
the same. If I say okay, it will automatically create
the dashes and remove the capitals. I update it, now if I view the post, it looks
like this. Elementor page builder, which is way better. The Elementor page builder, now this looks
okay but I want to add some images. So I edit the post and if I want to add an
image, we’ve done this before, I click over here and I add media. I upload files, I select the files and I want
to add all those, open them and I want to start with this one. I click on it I scroll down, I want to align
it at the right, link to media and the size is 300×152 like that. It is responsive; that is nice. One minute template setup, below that I want
to show the templates. I add the image, it is this one and this time
I want to align it in the center. I want to show the full size, insert it into
the post so it looks like this. And here we have Elementor Pro, I want to
say something about that. So I click over here, add the media, and I
want to use this one. I want to make it a little bit smaller, but
bigger than this, so what can I do. I make it small for now or medium. I bring it to the right like that and now
I want to make it bigger. So I click on it and drag it over here and
make it bigger like that. Now, if I update it and I refresh it, it looks
like this. The Elementor page builder with this image
and with this image and with this image and if I click on one of the images, I see it
like that. I can go back. There are a few things I don’t like, this
is way too big. I want to change the font and I want to get
rid of this area over here. How can I do that? I go to customize press CMD minus once, so
I see the website with the logo here at the left and the menu at the right. And I go to appearance>typography and I
change the main content – this text over here to open sans; just the regular but also the
main titles. This one open sans, the page heading, open
sans; only the menu can stay like this, I like that. Save and publish, I close this, I want to
get rid of this, so I edit the post, I scroll down and I want to remove the featured image,
so display featured image on archive block – yes, display featured image on single post
– no. Then I go to the title section settings, it
says no already and then I go to advanced settings and here we can add some custom CSS
and if I take a look at the blog post, I want is to be a different color and I want this
to be a little bit smaller. How can I do that? I want to add some custom CSS, CSS is a code
that will tell your website, WordPress does it for you and the theme does it for you,
but we can also adjust a little bit manually. In order to do that, go to FerdyKorp.com;
I have a CSS code over there that you can copy and paste. I go to tutorials, elementor tutorial 2018,
I scroll down and here it is – HeaderCSS for blog post. I copy this, I go to the first tab and I paste
it over here. And if I update this and i refresh it, you’ll
see it’s a little bit smaller and it’s blue now and here it is still normal, why? Because this is a Header one and this is a
header two. So if we go to the backend, scroll down; we
can copy this. If this is a Header one and what I also want
to do, I want to change the font white to normal. Also this one, normal and now we are here
and I want to change the margin a little bit; margin bottom -10 pixels. Let’s see what will happen. Copy this, update, close this and what it
does. It brings this 10 pixels closer to the alenia. Refresh, this is a little bit too close I
think. So I go back and I change it to 5 and you
know what, I bring this to 5, set of -5. Update, so there will be 5 pixels between
those two, between the header and element like that. This is what I like. So this is our blog page and we have the title
over here and because we have the title over here, I don’t need it over here anymore. So I can remove this, like that. You see still this area over here, if you
want to remove that. Go to text and here is the code. H1, then we go to visual and then we fix it,
update and this is our post. Elementor page builder, October 25th, 2017
by Ferdy Korpershoek with no comments. And the text and the image and the titles,
and the headers, I like it the way it is. People can leave a comment which is amazing
and then we have this area at the right. I want to show the latest post over here. How can I do that? I go to the widgets and if I take a look at
the blog post, I go to blog and I click over here, so I go to the blog post. You see search recent posts and as everything
you see over here at a global primary widget area, what our widgets? Widgets are additions to your website that
will show information in a certain way. So we can have a search widget, a recent post
widget, recent comments and I don’t like this, so I delete them all, I open them here, delete,
delete and I delete them all. I like that. If i refresh it, you see nothing. Now I want to add a recent post widget with
thumbnails. We don’t have that so we need to get it. We go to plugins>add new. Over here, I can search for recent posts with
thumbnails and it’s from Martin, installed a lot of times, a really good rating so I
install it now. I activate it and now if I go to appearance
>widgets and I take a look over here, and I search for a recent posts with thumbnails,
you see it over here, I click on it once and now we need to select an area and it’s a global
primary widget area. So I scroll down and I say add widget and
there it is. And I say recent posts, I want to show five,
I don’t want to open them in a new window. I think this is all okay, all categories>display
post featured image and I want this to be 45 x 45 pixels. A lot of options, I don’t need them. I save it and now I refresh it and there you
see it, our recent post – elementor page builder; really nice. So this is our first blog post and if I go
to the blog page, you’ll see an overview with a featured image and the title and the date,
and also here you see the latest blog post complete. We can adjust later; I will create a second
blog post, so I hover over new>post and as a photographer, I like to make photos and
there was a really beautiful cruise ship here in the Netherlands and I took some photos
and I want to share that with my customers, with my visitors. So I say “Oasis of the Seas.” I want to add a text over here, I have it
already. Press ENTER. I add some media, I upload files, select the
files, I go to blog, ‘oasis of the seas’ and there are two pictures. And what I do, when I upload pictures, I don’t
call them IMG0001 0002 etc. I call them ‘oasis of the seas Maassluis’,
‘oasis of the seas Rotterdam’ why? If people search for ‘oasis of the seas Maassluis,’
and they go to images, my picture comes up first, why? If I take a look at the image, it’s called
oasis of the seas Maassluis. If you search for img0001 and you go to images,
you see this image why? If you take a look at the image, you see it’s
called IMG0001. People are not searching for this if they
are searching for the Oasis of the Seas. So rename your pictures always before you
upload them because you will be found better in Google. So I upload those two files and if you want
to optimize them for Google even more, which I did with this picture. Then remove the dashes over here, copy it
and paste it at all text and I want to bring them to the center. I uncheck this one, center – no, link to the
media file. I want to show them at full size. I insert them and again, now the settings
are correct so I delete it again, add media and I will select them both and insert them
into the post. It’s not WordPress, it’s photography and featured
image is this one and again it’s general settings – nothing, featured image – don’t show or
yes here it can be shown. Don’t show it, so over here I say no. Title section – no, advanced settings, we
can have custom CSS. I don’t need it so everything is fine. I don’t want to have this, so I uncheck it
and I publish it. We can view the post and what we will see,
here at the right we have oasis of the seas and Elementor page builder. The title, the date again – so that’s how
it works. And now we can have a previous post or the
next one. If we go to previous post, we can see the
next one over here. So I will add a few other ones, I will fast
forward and then I will come back to you. So there you have it, four blog posts; one,
two, three, four. Maybe I’m, like my honeymoon, was way earlier
than now. So what can I do I click on honeymoon, I edit
the post here it says October the 25th. I can edit this and I can say it was in November
21st or 20th of 2015. I say okay and if I update it now, and I view
the post, you see it’s now November, the 20th 2015. What I also can do, I can click on Montana
Lisianthus, I can edit the post and I say… I want this to be published in a month, so
I press okay, and now it’s scheduled for November the 25th, 2017. If I schedule this then go to the blog page,
you don’t see it anymore. But at the 25th, at the time it is set to,
it will appear automatically. So you can write blog post all day for one
day and then spread them out over the next 8 weeks and then that way you can upload automatically
new blog post every week without doing it manually. You only have to configure it once. So that’s great, I’ll bring it back of course. I go to the back end and I go to posts>all
posts and here it’s as scheduled. I can do a quick edit and I can say release
it right now. Update, go to the website, to the blog page
and this is our most recent one and categorize so I click on it, I edit the post and I make
a new category which is personal. I uncheck this one, update and now again if
I take a look at blog, it is in personal. If I click on personal, I will see all the
categories that are in personal – our honeymoon is personal. So in that way people can navigate really
easily through your website, maybe people only want to see videography blog post, then
I click on film projects on that category and then they see all the blog post that has
category film projects. So that’s how it works, really nice. I go back to the blog page and I can configure
this if I want to. Right now we see the latest post over here
with the featured image, the title and the date and the category and here at the right
recent post and here all the blog posts, but we can change that. I can go to customize, CMD minus and I go
to blog and I can change things on a single post but for now I can do it on the blog page
and here you see, how it looks. We can also make a grid of it and then you
still will see this and then it will be displayed as a grid. And in grid layout we can change it to this
one and let’s configure this a little bit. The columns are three, not more and I save
it and I publish it. I see not everything is correct, so I close
this for now. Our featured blog posts and then we’ve those
three and I don’t see the images, so I click on this one, I edit the post, I scroll down
– here is a featured image. Maybe I should have one also here. Here I should say yes probably, display a
featured image on archive block. If I would say update and I go over here to
blog, now I will see them. So I should do that manually, maybe I can
do it also here at the customize and I don’t know why but you have to turn it on manually. So what are the different options. We have to read more text over here, we can
remove the sidebar, so make it like this. Actually I like that, I save it and I publish
it. I close it, what else can we do? First I want to open this one in the new tab
and this one CTRL tab and then I go to the next tab, edit the post, edit this post. I scroll down, I go to featured image setting,
say yes always, update; also here. Featured image over here – yes, so yes and
no, update, refresh this and then over here, it looks better already. And there is no sidebar and if I click on
elementor page builder, I will see the sidebar over here with the recent posts and also here,
I can go to the previous post or to the next one. If I go to customize, I go to blog>single
post and I scroll down. I have the sidebar. I can also have the sidebar at the left like
that or no sidebar. I want to have it at the right, I can have
a dark side bar like that. I don’t want that or no lines like that. I want to have a line. Content style like this or like that, I want
this one display post info – yes, display post date – yes, I want to show that, author
– yes, comment numbers – no, especially not in the beginning. Do I want to show the categories? For now – no. Display like button – no, display text, we
can add text, I don’t need that, so I remove that. Display author section, you can do that. Then you can put some text about yourself. I will show you how that works. Display author biography text, we can do this
in a few minutes, display other socials, display next and previous post over here. And if we want to do that, how do we want
to show that, just like that and that’s it. I save it and I publish it. I close it and then I go to the back end,
I go to users>all users>click on myself. I changed my email address, update and my
email address is connected with a profile on the internet. If you want to get a profile like that, go
over here to Gravatar and then you can configure that and here I can say something about myself. Something like that. I can have all my social icons over here. So for instance http://ferdykorpershoek.com;
that’s okay for now. I update my profile and now when I go to a
blog post, for instance this one, I scroll down. It says, Ferdy Korpershoek, my name is Ferdy
Korpershoek and then I see some icons over there. So that’s how it works. If I leave a comment, great blog post; because
I’m logged in, I can do it by myself. I can submit it and you see it over here. If I log out, I can say my name is Josh at
Ferdy Korpershoek and no website. I say this is amazing, submit, your comment
is awaiting moderation. So I need to accept it. So if I log in again, I see a comment over
here and I can say, I approve it or I bring it to the trash. Now if I go to the blog post over here, it
says this is amazing and I can reply on it. ‘Thank You Josh’ and that’s how it works;
submit, great. So now I want to add a few widgets over here,
footer widgets. So I go to customize, I scroll down and I
go to footer, sub footer and I want to turn it on like that. Here I can choose the amount of widgets; right
now there are three and I want to make it four. And you see an area over here and it’s quite
light. I want to make it darker, so the background
color of the widget area, the footer widget area will be like that. I like it, I save it and I publish it. I can put widgets here in two ways. I can go back and I go back again. I go to widgets and then I go to the sub footer
first widget area and I can add a widget and I can see the result immediately. But I need to plug in for the first widget,
so I close this, I go to the backend, to plugins>add new and I say Instagram widget by WP
zoom. Here it is – ten thousand active installs. Install Now>activate it; I need to configure
it, so I will do that. If you don’t see this then go to Instagram
widget it by WPzoom, go to settings, this can look a little bit complicated but just
follow along. I hold control or comments to open this in
a new tab, connect with Instagram. It sees my name already, so I say I’m not
Ferdy Korpershoek. I need to log in, so I log in like that. And I say authorize and my user ID is this
one and my access token is this one, and I need my access token to be filled in over
here. So I paste it and I save the change, okay. I can close this and then I go to appearance
>widgets and I scroll down and I search for it – Instagram. I click on it, I scroll down for the sub footer
first widget area, add the widget and I say follow us. Number of images to show – nine, how many
rows – three; this is all okay with me and I save it. I take a look, I scroll down and there it
is. What I see is that this title is dark, so
I go to customize, close this for now, I scroll down, I go to footer, sub footer. And over here it says dark-skin for widgets,
I turn this on and now the title will be white like that. Save and publish. Then I close it. I go to the backend, to plugins>add new
and I want to add a Facebook like box. The best one in my opinion is Facebook by
WebLizar, install now, activate it. Now go to appearance>widgets and search
for it. Here it is; I click on it, I scroll down,
sub footer, second widget area, scroll down add the widget and then say like us on Facebook. Our Facebook URL – Facebook, my page, copy
it, paste it. I want to show faces. I don’t want to show the live stream and I
think this is all ok. I save it and again I’m going to take a look. Go to the contact page, the footer widget
you will see everywhere on all pages and here it is. Follow us on Instagram and like us on Facebook. The third one, I want it to be recent post,
just as we have at the blog page. So I click on customize, I close this, I scroll
down, I go to widgets- the 3rd widget area. I add a widget and I search for post. Recent posts with thumbnails; I click on it. I say recent posts, I want to show 5. Again all categories, 45 x 45 and you know
what, I will go back, I’ll go back and go to footer, sub footer. I change the background color, make it lighter,
like that. And then I closed this and I could screw up
and I say disable dark-skin. Now it looks like that. Follow us, like us on Facebook, recent posts
and what I can do, if I’m like this is okay, I want to only have three widgets, then I
can turn on this one or this one and I like it. Then I can go to the widgets one more time,
widgets, the third widget area and I want to bring this back to 70 x 70. Let’s see what it does. I like that better, I save it and I publish
it. What I will do now, I will adjust a few things. I will just show it to you how quickly I will
do this. So over here, I like this. I like this too. This is all fine with me. I go to about us, I want this text to go from
the left to the right. So I say edit with Elementor or from the left
to the right. So I scroll down and over here, I say fading
from left like that. Also over here, I click over here, advanced,
fading from left and here fading from right. You can have it normal, fast or slow; it is
okay. Here’s a small white area, so I add a new
section like that. Click on the plus and I search for social
icons. I drag it over here, Facebook. I copy it over here, Twitter and I paste it;
no Google+ but I can add another one or I change it to LinkedIn. Paste it, I want to have another one which
is of course Instagram, copy the link and paste it. So I go to this area, advanced padding-top,
now I’ll say- 30; save it, refresh and this is better. I go to services and the rest is fine with
me. So that’s how you can change things really
quickly. So we have this beautiful website over here
and on a desktop it looks amazing in my opinion. But as you probably know most of the people
these times visit your website through a smartphone or through a tablet, so how does your website
look on a mobile or a tablet. Well let’s take a look and the great thing
is, with Elementor you can adjust everything for the desktop and separately for the tablet
and also for a smartphone. So let’s take a look at that. I edit with Elementor and this is our website
on the desktop. Well I want to know how this looks on a tablet,
so I go over here. I click on the screen and I go for the tablet
and this is how it looks on the tablet. And you see, I don’t like this very much. Let’s take a look at this first, I click over
here and if I go to style, you’ll see three icons over here. If I click over here, I can see the settings
for the desktop. If I click over here on the tablet, I can
adjust it for the tablet so maybe like this and if I click over here, I go to style. I can do the same, make this a little bit
bigger like that. I click on the divider, and here at tablet
I can make it bigger. So that’s better. I save it. And If I scroll down, I think this does not
fit. It should be in one line. I click on it, I go to style, to content and
again the size, I make it 20. Also here, style>content – 20 and here also
style>content -20. So it’s just amazing what you can do. So I really like it. I save it and if you really want to see the
results, push this away and this is what you’ll see now on a tablet. But if I go to a mobile phone, it looks like
this. I don’t like it and you see this looks really
weird. So let’s fix this. I think this is OK, I want this on one line. I click on it I go to the style and I make
this like that. Maybe I can make this a little bit bigger,
at style>size like that. And I click over here and align that a little
bit like that. This looks weird, so I click over here and
add alignment for the smart phone, I can bring it to the center. Also for this one I can bring it to the center. So I scroll down, this is all fine with me. So that’s great. I save it and here on a smart phone, it looks
nice. On a tablet it looks nice and on the desktop
it looks nice. That’s the power of Elementor. I take a look over here, I view the page. Let me show you one more time in different
way. This is on the desktop, make it smaller. This is on a tablet and this is on a mobile. I go to about us and again, here it looks
really nice, those animations, these animations. But what I see, here I have my text at the
left and the picture at the right and here I have the other way around. How will that look on a mobile or on a tablet. I edit it with Elementor and I click over
here, I go to tablet and this looks all fine. So let’s take a look how does it look on a
mobile. This looks great, this looks great. I like this and here I see Ferdy Korpershoek
and my text and here I see the picture, but here I see the picture of my wife and then
below I see the text. How can I change those two columns. So first you will see the picture of me and
then my text, really easily. I click over here on the section. I go to advanced, I scroll down, I go to responsive
and here it says reverse columns. When on a mobile, the column order is reversed. So I check this and now you see first the
picture, then the text, then the picture and then the text. Over here, I don’t see this form. How can I fix that? I click over here. I go to advanced and again on a mobile phone,
you can have different margins but we should not edit the margins of the section with the
margin of the column. So I click on the column, I go to advanced
and if I say 0000, you see no background but I could also say 5 pixels or 10 pixels and
then you see a small background like that. But you also can do if I remove all this stuff. It looks a little bit weird but if I go to
desktop, I click over here, I see the padding is in pixels, that’s why it looks so weird
on the mobile. If I were to remove this and I change the
pixels to percentage and I will say 10% on the top, 20% at the right, 10% at the bottom
and 20% at the left and I save it. I want to take a look here at a mobile, it
looks like this. Maybe not that great, so I can go back to
the desktop and change this to 10. Save it, let’s take a look at the mobile and
in that way, it looks great on both devices – on a desktop and on the mobile and the tablets,
it looks also fine. So sometimes it’s better to work with percentage
instead of pixels. Okay let’s go to services edit with Elementor,
let’s take a look on mobile. I like this, this is all fine with me. It looks great. I view the page and I go to contact, the portfolio
and blog page look great and what you also can do the last thing, I will show you edit
with Elementor, you can also say certain elements, I only want to show on a mobile or I only
want to show them on a desktop. So for instance this one, I only want to show
on a desktop and on a tablet. What can I do then? I click over here, I go to advanced, scroll
down go to responsive and I say hide on a mobile phone. So I save it, and on a desktop I will see
it but if I go to mobile I still see it but if I remove this then I will see the final
results and then it’s gone. So let me show you, I view the page. This is the desktop version, this is the tablet
version and this is the mobile version and that mobile version you don’t see it. So in that way you can make your website perfect
for a desktop, for a tablet and for a smartphone. So if you want to take it to the next level
we are going to work with elementor pro. If you want to work with elementor pro, go
to FerdyKorp.com, go to tutorials>Elementor tutorial 2018 and click on get elementor. Click on pro and click on buy now. Here we have a few prices, there’s some discount
right now. I hope for you that’s the case right now. If you want to use it for only one site, it
is normally $49 this time $39. If you want it for 3 sites, then it is $79. If you want to use it unlimited then it is
$200 it is $199 normally and now $159. I want to use it for 3 sites, you get one
years of updates and support and after that you can still use it without paying for a
second year. If you want to get new updates and support
you can upgrade, it will probably cost less but this is to start with. So I click on buy now, here are my details. So I say check out now and I want to pay with
PayPal. So I click on continue and it is completed
and now I can click over here and get Elementor Pro. It’s downloading right now. I go to plugins>add new and here I say upload
plugin>choose file and here are downloads. I go here for Elementor Pro. I open it and I install it now. I want to activate the plug-in, “welcome to
Elemental pro, please activate your license key.” So I want to activate my license and I can
find my license over here. You can also find it in the email you will
probably get or you go to your account and there you’ll get it. So I fill this in over here and I activate
it. So I can use it for 3 websites and right now
it is active. Now, if I go to the home page and I go to
Elementor Pro and I click on edit with Elementor and I scroll down, you see the pro elements,
posts, slides, plugin, navigation menu, price list. As you see I made a few things with Elementor
Pro. If you want to learn everything about Elementor
pro, please follow the tutorial you will see in the description. This was it, for now thank you for watching
this tutorial. I hope you create an amazing website. So what is the next step for you? I have a few tutorials for you that will help
you to continue to build your website. I have two tutorials about search engine optimization,
I will show them in the description. I have a tutorial about MailChimp where I
show you step-by-step, how to create an account. Create an opt-in form and grow your email
list. I have a tutorial about WooCommerce, how to
create a web shop within your website. So feel free to take a look at those tutorials
and grow your business even more. This was it for now, thank you so much for
watching this tutorial. Please like the video, subscribe for more
upcoming videos and then you will see me next time. Bye Bye.

Only registered users can comment.

  1. hi, Ferdy Korpershoek
    i need one help,
    in one column i add two things one Text editor and Heading , if i mouse hover on that column i need to change the text color of "text editor and heading" to gather .What i have to do for that one….? please help me…..

  2. Hii Ferdy,
    I've hardly even started watching this video and 3 mins into it, I'm excited to give my new website an amazing look! You've done an awesome job explaining everything. I'm sure by the end of this tutorial I'll have a lot of questions but I'm sure you'll answer my queries like you've answered all others' doubts. Thanks again for this amazing video!
    Love,
    Tanvi
    P.S. Your accent is adorable πŸ™‚

  3. Hi Ferdy, in my opinion you make great tutorials. Keep up the good work. I've applied several times on your website for the Elementor templates, but never got any email. Can you help me out?

  4. Hi…
    awesome videos. Can you please tell me how to put a transparent (opaque) box on
    top of an image, adjust it opaqueness (is that a word :))? and add text to it?

    Thank you, John PS – I have Elementor Pro with the Extras Pack and Phlox Pro.

  5. This is mind blowing!!! Been searching for a low-cost way to set up my online book shop, and THIS IS IT!!! Thank you so much!!!

  6. Hi Ferdy.
    Thanks for Tutorial, How to make the padding decreased . The boxes size itself is too much i want to make narrow padding . Btw i used the zero padding from settings .

  7. Great video and extremely helpful. But I can't figure out how to show up this hover menu on top of the Elementor's elements (sections and others). It's very useful but I don't know how to enable it. And one more thing, why there isn't a login/register page and menu items? It will be great if you add them to the video. For example, I found a free plugin called ThemeMyLogin, and it looks good and is beginer-friendly.

  8. Thank You so much for this tutorial. How perfectly unselfish of you to take the time to help others.
    You and your wife look beautiful together.
    πŸ™‚

  9. Hello Fredy , I installed Phlox Core Elements
    & Phlox Portfolio BUT I CANT SEE ON MY DASHBOARD LEFT SIDE "PORTFOLIO"OPTION WHY..? Best Regards Robert

  10. Ferdy Thank you for all your tutorials. They are great…..but HELP, I am trying to change the image on mu homepage, and I canot get to it….cannot find the selection to change….sorry this is not well explained but I send you the link so maybe you can help me. Thanks http://www.terroirvinhos.pt/?v=35357b9c8fe4 (also I don't know what the numbers after my site name is….sorry maybe stupid questions, but I am really a beginner….
    Thank

  11. Hi Ferdy, geweldige video en uitleg! Dank je wel. Ik vroeg me alleen af of je bij emailadres je reeds bestaande mailadres in moet voeren of dat je een nieuwe speciaal voor je site aan moet maken? Zou je me dit nog kunnen laten weten. Thx.

  12. Now 2 option in general customization setting are not there in free pholox theme
    These are google seo and custom css

  13. Hi Ferdy.
    Am happy to pay hand your tutorial elementor 2018. You are great. You said I can download few of the images used above, couldn't find it here. Kindly help

  14. For people having problem with media maximum size upload limit check this video https://www.youtube.com/watch?v=-vaytecoRto

  15. Drag and Drop not working in mobile plz make a video on it waiting for it if you already made it plz share the link

  16. This is a great tutorial! Thank you, Ferdy! I've used your videos as a foundation for my own website business. Thanks to you, my websites are flawless, functional and are gorgeous to look at!

    Just a simple suggestion, though…switch to NameHero for hosting. They have a no nonsense plans whether you're a beginner or a business professional. They offer the latest cloud tech for their customers and a plethora of videos that show you how to get your website or web business going.

    Check them out and take advantage of their awesome spring promo: https://www.namehero.com/promo/220.php

  17. Hello, may I ask you why you using Astra in your website, while in this tutorial when I see the phlox theme seems to have a lot of options and features? Im just curious, what the reason was to select Astra instead of Phlox πŸ™‚ Thanks

  18. Thanks you Ferdy, very useful tutorial, I learned so much about WordPress, themes and self web development, you practically walked me through to creating my first personal website and blog that was on hold for so long

  19. Thank you ferdy.How can a Swiper Carousel like a picture be built by Elementor?Please Help me.
    https://ibb.co/dP1vcVP
    like this: https://codepen.io/dannyb/pen/mVZbar

  20. Thank you for this tutorial! This is very helpful! God bless you and your beautiful family!
    What is better, Phlox, Astra, or Oceanwp?

  21. You are a CAPOOOOO!!!! GENIOOOOO! MAGOOOOO! TE SIGO COMO VOS A MESSI! JAJAJAJ I follow for than you to Messi. Jajajaja The Barça fall down to Liverpool! When he plays we "us" his country is not a "Magic".

  22. Very good and clear tutorial. One question…. when you created the menu you skipped the home button, because you liked an image (like the little apple on the apple site) better. But i did not see you do it. How can I make a home button with an image instead of the word "home"?

  23. first of all, i would like to thank Ferdy's tutorial, it is truly helpful, i follow it step by step, easy to catch and can build prof site with money saving.
    i encountered a situation when using PHLOX theme, when it turns to phone view, the text in burger menu shows very small, barely seen, i tried to remove the theme and reinstall it, still not working.how can i fix it? www.meefmy.com

  24. Thank you so much for this tutorial!! I have a question. For example with the 'What Our Clients Say About Us' all the messages are about the same length, so they all appear on three lines. What if one review is longer then the other? The boxes would become of unequal size. What is a way to overcome this problem? Thanks in advance!

  25. Hi Ferdy! thanks for this great tut. At 52:41, I can see you drag and drop the header in the row without any issue. When replicating this, the row I get after uploading the background picture becomes way smaller than yours which cause the Header text to be fragmented in 2 lines. Any idea of how to fix this?
    Don't know if that has something to do with that, but when I upload the picture, the picture is full width but is not full height, thus I have to manually by increase the padding so that it is like yours.

    Thanks again for your help! Axel

  26. Question: At 23:27 and even at 24:22, there is no search field. But, then when you change themes at 24:45, there is now a search field (and several other elements!). And then you comment on it later on (37:40) "We could have a search button at the right, but I don't want it. I have one already here. So I disable it." Where did the other one come from?

  27. Ferdy, Thank you SO much for this amazing tutorial. You made me like WP a lot better. Love your work man!!! all the best

  28. Hey Fredy, thank you for the valuable tutorial. I have a question at @12:33. Can I go and change my site name(not the domain) by going back to word press? also when I visited the site to check the output, pages in the menu are flickering and blinking . Please help.

  29. Thank you very much.i have 2 questions
    1.is there any limit number of sections in one page?
    2.can we make submenu in separated page of its parent?

  30. Thank you very much for this tutorial, even if English is not my native language, it's so clear and precise that creating a website seems basic after watching everything. I'm still far from an expert but thanks to you I can start working. The most complicated for me is the alignment of all columns and sections, but it will come. Continue like this, you do awesome work!

  31. Hi. This video has helped me way too much, so a very very big thank you for this. This is the best tutorial i have ever come across. But the icons are not appearing on my site and come as a blank square. i have used the default icons only. Can you guide me on the same?

  32. Please u could help me to solved this problem I couldn't open customised it showing customise.php undefined please reply to me

  33. Ferdy, what if I want to work on my website and make it available to the public only after I complete it. Can I do this in SiteGround? Thanks

  34. Is it possible to insert a link so that clients can get in contact with me via whatsapp as well?

  35. Hi Ferdy,
    Loving this tutorial. Having a problem at 1.32.36 in the tutorial. The photo wont load into the testimonial. Am following exact process. the pic is 554kb

  36. It was a nice video… Loved it… I'm a newbie… It helped me a lot to get familiarise with WordPress & elementor.
    Could you suggest a nice theme for my health, fitness and lifestyle blog?

  37. Hi Ferdy, you are excellent website designer, I am learning many things on your video, I am new and not experience on websites, are you going to make any website Templates, how to create Soccer (Football) tournament, thanks, toni Soccer Player

  38. great tutorial, well explained, big thumbs up………..
    can u make a video on how to make a music website, purpose is to upload mp3 files to the site to sell them to the fans.. πŸ™‚ a website for a music compamy i mean…. thank you

  39. in photography icon box, the size of image carousal is kept as full then i upload video in videography icon box the size of video and image carousal are not same. how can i fix the size of video in icon box????

  40. Thank you so much for this video. I recently purchased Jupiter X theme that comes with Elementor. There is no tutorial for Jupiter X yet. I will use Elementor from that theme but I wish you'd make a tutorial for Jupiter X. You'd be first online to make it.

  41. Ferdy you are my hero! I've been faffing around wasting time and money and you have taught me more in this tutorial than everything else I've learnt. I agree with the comment below, it is so unselfish of you to take the time to post such a comprehensive tutorial. Thank you!!! Baie, baie dankie!

  42. God bless today I came across your channel! Your videos are amazing. Thank you for sharing your wealth of wisdom.

  43. How u find customizable WP themes like this???
    Can u make one tutorial for customizable theme review??
    By the way ur video is awesome dude πŸ™‚

Leave a Reply

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