Make A WordPress Website Using Elementor Pro 2019

Make A WordPress Website Using Elementor Pro 2019


Hi guys, my name is Ferdy and in this video
I will show you how you can create a beautiful WordPress website using Elementor pro. Elementor is the best free page builder there
is and elementor pro is even better. Let me show you what we are going to cover
in this tutorial. I will show you how to install elementor pro,
make pages using blogs that means that you import demo content and you can adjust it
to your wishes. I will show you how to import pre-made templates
that are made by Elementor and by the community and I will show you how to create a web page
from scratch, with elementor pro you can create every part of the website yourself; the header,
the footer, archive pages, blog pages, the sky is the limit. We are also going to work with dynamic content
that enables you to create advanced web pages and save a lot of time. Besides that we will work with conditional
logic, you can assign certain templates to certain areas within your web site and that
way you can give certain parts of your website a different style than the general style and
that’s not all we will talk about the Navigator, how to make your web site responsive for all
devices. Assigning roles and restrictions to other
users, getting professional images for your website for free and when you want to you
can get to know everything about creating a web page from scratch. I have tutorials about all the Elementor elements
and if you take a look at the comments people seem to love those tutorials. So when you watch this video and you apply
the things I teach you, you will become a pro web designer and you can create websites
for a living if you want to. In the description of the video you can find
timestamps. So if you want to go to a certain part, you
can do that using the timestamps. If I go too fast for you in the tutorial,
you can click on the icon here and lower the speed of the tutorial. If you like what you’re seeing so far please
like this video and if you want to support me in any way please subscribe to the YouTube
channel, click on the bell and you will get a notification when I upload a new video. Now let’s get started. For who is this tutorial? This tutorial is for anyone who doesn’t want
to spend a lot of money on a website. It is for anyone who doesn’t have much time
I want to do it within a few hours. This video is for anyone who has never made
a website, it is for beginners, it is for anyone who wants to adjust their website themselves
without waiting for a web developer that they paid too much to do it for them and anyone
wants to learn more about Elementor and Elementor Pro. So what are we going to do? We’re going to get a domain name and web hosting
and through my link I can give you 60% off, then I will show you how to install WordPress,
then I will show you how to install elementor pro and then we will create our amazing website. So the first two things we need to do is get
a domain name and web hosting. If you have that already that is great, then
you can skip this part if you don’t have it go to webhosting127.com and then you can click
on the link, go to Sitegrounds. I love Siteground, I host all my websites
at Siteground. Siteground is in my opinion the best web hosting
provider there is and I’m not the only one with an opinion and a Facebook web hosting
group with more than 5,000 members Siteground is mentioned the most as best web hosting
provider there is and I agree with them. I scroll down a bit and there are three plans
you can choose and the best value for your money is grow big and the big difference between
GrowBig and StartUp is that here you can have unlimited websites. Here you can have only one website and all
the time people are upgrading later because after the first website, they want to create
a second website so I suggest GrowBig and you can always upgrade later, so over here
you can have unlimited websites, enough web space, you can have around 25,000 visitors
per month and if you get more than that, then you can upgrade to GoGeek. This is the package I have because I have
a lot of websites but you can also upgrade later so I choose GrowBig, get started, I
click over here and then you can choose a domain name. If you would say facebook.com and click on
proceed, it will say it is not possible because the domain name is already in use. So I would go for Ferdypro.com, I click on
proceed and it is still available, congratulations domain ferdypro is available for registration. So over here I need to fill in some details,
of course my email address [email protected] and you need to have access to this email
address of course. You need to choose your own password, I choose
this one and then I need to fill in some client information, where I’m from I’m from the Netherlands
and since I’m from the Netherlands I get a VAT over here so my first name, my last name,
my company name and if I fill in my VAT registration number the VAT amount will be subtracted from
my total amount I have to pay, zip code without a space over here, my phone number and I scroll
down how do I want to pay? I want to pay with credit card so I fill in
my details and I scroll down so then we go to Hosting Services. The plan is GrowBig the data center is in
Chicago that’s okay and the period is 12 months and keep in mind that the first purchase will
give you 60% discount so if you go for 12 months you get 12 months of discount but if
you go for 24 or 36 months, you will get 36 months of discount. I’ll leave it at 12 months, you have a 30
day money back guarantee so if you don’t like it you can get your money back and then here’s
the domain registration. Domain privacy I use it because if you don’t
use it you get a lot of spam emails from people that say hey I can make a website for you
and I don’t like that, I want to have my inbox to be clean. So I check this, I uncheck this one I don’t
need it, there are tools that can do this for you and the total amount is $99.35. I confirm everything and I click on Pay Now
then we click on Pay Now you don’t pay more but I get a commission and it helps me to
create those tutorials, so thank you for that. Your order was successfully submitted and
now it’s completed. We have our domain name and web hosting. Let’s install WordPress, I click on proceed
to customer area and SiteGround is offering me some help but I don’t need any help, and
I don’t need to add this so I say confirm. Yes I confirm everything, complete setup and
there we are and now we need to click on my accounts, go to the cPanel and I click on
proceed and now I go to WordPress. I scroll down, I click on install now and
we are going to install WordPress. So here we can choose the domain I’ve only
one FerdyPro and we can choose HTTP or HTTPS, we will take a look at HTTPS later for now
I use HTTP. I can also say I want to install my website
at ferdypro.com/new test but I leave this empty so I installed on the root ferdypro.com. I scroll down, our site name I can say Ferdy
Korp Media but this name will be indexed by all kinds of search engines, so I rather say
what I offer so I say photography, film and webdesign and then I can say Ferdy Korp Media,
the more to the left, the keyword is the better you will be found on the world, when people
want to have a photographer they don’t search for Ferdy Kork because they probably do not
know me but they will search for photography so I rather be found on photography than on
Ferdy Korp because people are searching more for photography than on Ferdy korp. Site description I like to have a slogan you
deserve to be seen. Admin username, this is the username that
we need to login into your WordPress website. I say Ferdy Korp, I can create my own password,
I hide it and I create really save one like that. My admin email is [email protected] The language of my website is English, this
is all fine with me. I click on install and now WordPress is being
installed on a brand new domain name and there it is, if I click over here, I go to our website
and the great thing about SiteGround is that your website is live immediately, with all
the other web hosting platforms, it takes longer, it can take 20 minutes, it can take
an hour it can take 48 hours, but here at SiteGround you are alive immediately. So now we have installed WordPress. Let’s continue; if I go back to the cPanel
I can also go to the backend of the website, so I click over here for that. Now I close this I don’t need this anymore
and here is the back end of the website, here you can edit all kinds of stuff and here’s
the front end of our website. Everybody that enters ferdyPro.com at this
moment will see this over here so we are totally live. This is what people will see. This is what we will see when we login. So let me tell you what we can do over here
but first I want to clean things up. This message I want to dismiss it, also this
one, dismiss, close this and dismiss this. This is our dashboard overview. Here at the left, we can change all kinds
of things. We can take a look for updates. We can add blog posts, we can add media pages. We can approve comments when we have them,
we can change the look a few of our website we can add plugins, add users. There’s a lot of stuff and we will talk about
it. The first thing I want to do, I want to clean
up my WordPress website. At this moment I think it is a mess and I
like to have a clean area to work in, so the first thing I will do, I will go to plugins. There are a few plugins, I select all plugins
and I click on build actions and I say deactivate and I click on apply. Now all plugins are deactivated I select them
all again by clicking here, Bulk Actions, delete I want to start with zero plugins. I click on apply OK, great now if I go to
the website and I go to the blog post WordPress resources at SiteGround this is a blog post
that comes with installation of WordPress. I click on it, what you will see Ferdypro.com/
you see the date and then you see the title I don’t like that, So I go to the backend
to change it. I go to settings, permalinks and over here
you see the permalinks are set by date name so first you see the date and then the name. I want to change that to the post name, I
only want to see the post name. So I click on post name over here I scroll
down and I click on save the changes. Now if I go to the website, I click on this
big texts over here and I scroll down and I go to the link again. Now you see Ferdypro.com/wordpressresources
at SiteGround I’ll Ike that, what I also see that the post is by Ferdy Korp, this is my
login name, but over here I want to display my complete name. Also over here, what I can do? I can hover over here, edit my profile or
I go to the backend do the same or I go to users, your profile. Over here, we can change the look of few of
our backend, so you can change the colors but I like the default one. I scroll down, I want to add my first name
over here ferdy, my latest name and then my display name publicity. I want it to be ferdy korpershoek so over
here this change to ferdy korpershoek. I scroll down, I can generate a new password
if I want to, I don’t need it I click on update profile and now if I refresh the page you
see ferdy korpershoek I like that. I go to the back end>to the dashboard and
I see I have one post and one comment and I want to remove it. I click on the post which is this one over
here and I hover over it and I click on trash, then I go to the trash can over here and I
can remove it permanently or I can empty the trash. If I have a lot of blog posts and I want to
remove them all, I click on empty trash and everything over here will be deleted. Now I go to the dashboard and also the comment
is gone. I collapse this and this and this and this
and it looks much better in my opinion. What I want to do now? I want to add a few pages to this website,
so I go to pages and I hover over add new and I click on it. If you’re at the front end of the website
you can also hover over here, new and click on post media page. Now you can add a new page and this bar is
only seen by you when you are logged in so your visitor will not see this upper bar over
here. I create a page and I call this home, publish
because we need a home page. What else do I want to show on my website. I want to say something about myself or about
my company so I add a new page and I call this about or about me or about us, but I
like about, publish then I want to show my services maybe you’re a photographer, maybe
you’re a web designer, maybe you’re an accountant, you want to show your services what can you
offer to someone else in exchange for money. In my case it is photography, film and web
design so I make a page services, where I showcase my services but I also want to have
a page for every service I offer so I add a new page, photography, add a new one videography
and I add a new one webdesign OK. I want to show what I can do? So I want to have a portfolio where I can
showcase everything that I’ve made so far, so I add a new page and I call this one portfolio
publish. I add a new one and if it’s the blog page
I want to show you some great things that you can do with Elementor Pro, publish and
the latest one if people are convinced they want to get in contact with me so I create
a contact page, publish. If I take a look at the website and I refresh
it you don’t see the pages, so I go to the back end and I need to create a menu and put
all those pages in the menu, in order to do that I go to appearance menus and over here
we can create a menu name and nobody will see this only you will see this but I like
main underscore menu. Create the menu and over here we have the
most recent pages we’ve created, so I can select them all and I can add them to the
menu and there they are. What we can do now? We can change the order, so I can click over
here, hold to click and drag it on top. So we have home, about, services, contact
is below, before that comes blog, before that comes portfolio and then we have those three
services and what I can do now? I can add a display location over here at
the top menu and if I would save this and I would refresh the page, you see the menu
over here. If you go to apple.com and you go to mac and
you want to go back to the home page, then need to click on this logo over here. They invested a lot of money to optimize their
website so I think we should do the same. We don’t use the homepage but we use our logo
even though we don’t have a logo yet right now it’s this text over here, if you click
over here you go back to the home page. So we have home here I want to remove that,
so I go to the menu and I click over here. I click on remove so it starts with about. Below services I want to have a sub-menu with
my three services. How can I do that? I grab it and I go to the right a bit and
then you see a tab like that I release it and now this is a sub item of services. Same goes for videography or film and I can
even take it a step further I can also make this a sub item but I can also make this a
sub item of videography, and if I save it and I refresh the website, you see services,
you hover over it then you see photography, videography and if I hover over videography
you see webdesign, so in that way you can make a beautiful navigation to your menu. I bring this one back and I save it and I
refresh it like that. Now I really don’t like this website. We can make this much better. How can we do that? We can make use of a different theme. So if I go to the backend and I go to appearance,
themes we have three pre-installed themes. Right now we have 2017 but we also have 2015
and if I would activate this theme and I refresh the page, then you still see all the same
information, the title, the subtitle, the menu and the text but this time you see it
in a totally different way. So the menu is at the left, the title is at
the left everything is different and if I would go to the themes and select 2016, refresh,
it looks different again. So a theme is there to help you to display
everything in a really nice way on your website and there are amazing themes that will do
that for you. There are paid themes, there are free themes
but in this tutorial, Elementor Pro is both the theme builder and the page builder. So we don’t need a thing but we need Elementor
and in order to get it let’s go to ferdyKorp.com, then we go to tutorials, elementor pro tutorial. I scroll down and here at the important links
here is get Elementor pro. The great thing is if you have sign up through
SiteGround, there is a discount for you, so I click on pricing and we can use it for one
site, three sites or unlimited sites. You pay $49 per year but the second year you
will get some discount, so for the first year $49. I click on buy now, I scroll down and if you
have a discount code, you can click here to enter it and for the people that sign up with
SiteGrounds, you can go to SiteGround, login, sign in, go to resources, there you will find
the 20% coupon code, so I will use it unfortunately this is only for SiteGround users so I type
it in and I apply it and now, it’s only $39.20. I scroll down I want to use PayPal for this
one, my company name, my VAT. I click on checkout and if you use it for
one site or three sites or unlimited you have you have all the pro features. I login and now I’m here at my account page
and I can download the plug-in and there it is so I go back to the backend, I go to plugins,
add new and we can upload the plug-in that first we need to have the free version of
Elementor, so I searched for Elementor enter. I click on install now you see more than a
million active installs, install now. I activate it now I click on add new, upload
plug-in choose a file and downloads I go for Elementor Pro. I open it and I click on install now. I activate the plug-in. I activate the license and we need to fill
in our license key, you can find it at my account over here, I copy it and I paste it
and I activate it. So we’ve installed Elementor Pro now let’s
create an amazing website. Even though this overrides the theme settings
I still want to use a theme which has some functions that we can use in combination with
elemental Pro and that one is OceanWP. So I go one more time to Ferdykorp.com tutorials,
Elementor pro tutorial. I scroll down I go to get the OceanWP theme. I can go for the free download and I say ferdy
[email protected] I agree with everything that click on get
it now. If you don’t want to do this, than you can
also go to the backend to appearance themes and add new and search for ocean WP, install. I click on activate and then remove this over
here 2015 delete, 2017 delete and 2016 delete. I like to keep it clean like that. I click on begin installing plugins and I
install ocean demo import and ocean extra, that’s it. So I close this and I close this. Now if I go to the front-end I refresh it
it looks like this. A title or menu, title of the page or a recent
blog post which we don’t have and our sidebar. So what I want to do now? I go to the back end. I go to settings reading and at this moment
you see your home page this displays your latest post, you see that over here ready
to publish your first post get started here. If you would have a few blog posts you will
see them over here, but I want to change it to a static page which is the home page and
the post page is the blog page. I scroll down. I save the changes and now if I refresh the
page you will see the home page. The next thing we need to do we need to customize
the free theme ocean WP in order to get the best results for Elementor pro. So I click here on customize and I will customize
a few things. So first I want to go to the header. I want to go to logo now I want to upload
a logo. If you want to follow along with the same
images I use in this tutorial and go to FerdyKorp.com tutorials Elementor pro tutorial, scroll down
and click on download the images I use in the tutorial. I click on it. I unzip them and I bring them to the desktop. I close this and I select a logo, select files,
logos and I use Ferdy Corp in general. This is my logo. I open it. I select it I can crop it if I want to but
I skip the cropping and there it is I also want to select a retina logo. Which is the same logo I choose it not become
smaller and here I can change the height and width that will do that for now. I go back go back the top bar you see it over
here, I don’t want that so I click on general and don’t any width, so now it is gone okay
great. Then general options page title over here,
I want to make it hidden so it is gone and the padding I want to say zero and zero. I can publish it. I go back I go to general settings and layout
I say no sidebar over here and also if I scroll down here no sidebar. If I go back I click on publish. Now we go to the blog page, I have a sidebar
so I also go to the blog options over here blog entries, no sidebar, single post no sidebar. We can always bring it back but I think this
is great. I go back, publish and I close it. So right now this is our website with our
menu like that. Before we start working with elemental Pro
I want to do one more thing. I go to SiteGround and I want to make this
secure. I close this, I login I go to my accounts
go to cPanel and I search for let over here and it says let’s encrypt. I click on it and here it is ferdy pro let’s
encrypt SSL Ferdie Pro. I click on install OK that’s it. I refresh the page OK, now it’s over here. I click over here I turn it on and I turn
this one on ok, I think it’s active now. I go to the back end, I need to login again
I go to permalinks and I save it twice, then I go to in general and I add an S over here
and an S over here. I save the changes. I login one more time. I go to the front end and now we have a secure
web site where the domain name that was live immediately with web site that we are going
to make beautiful using Elementor pro. So now I want to show the power of elemental
pro by creating a header template but before we do that I’m going to edit the page and
import some pre-made content. So we can see how the header will behave. I click on edit page and I click on edit with
Elementor. Now elemental reload and we can create a website
using elementor. If your website States blank that can happen
then go back, then go to elementor settings advanced, switch editor loader method and
enable it. I save the changes now I go to the home page,
I click on edit with Elementor and now Elementor is loading. So this is the elementor page builder. We can add elements over here we can add sections
we can add columns. I will talk about it later for now I just
want to import some demo content, so I click over here on this icon and since we use elementor
Pro we have extra content that we can use. So I grab this one for instance I click on
insert but, I see that it’s not full width so I remove it all. I update then I go back, exit to dashboard
I scroll down and I say content layout 100% full width, update, edit with Elementor, again
I click here and I insert it and there it is full width, that saves a lot
of time. I click on update and it can be that you see
a wide gap over here if that is the case, go over here exit to dashboard, scroll down
and at margins disable it. So if I view the page it looks like this. This is our header we have made with ocean
WP. If I scroll down the website looks like this. I like it. What I want to do now? I want to add our own custom header. How can we do that? I go to the backend dashboard, Elementor my
templates and I add a new template over here. What kind of template do I want to have? You can have a page template, a section, header,
footer, single and archive. I want to go for a header, let’s give this
is name and I say Heather general. I want to create more headers in this tutorial
so I call this one header general, create template and now we can choose from a few
templates. We can start from scratch by clicking on the
X over here or we can use one. If I click on the plus I can see an example,
so if you want something like this with the top bar, logo and the menu you click on insert. I want to use this one it’s really simple
and I will show you what is possible. So over here I have my template. So a logo and a menu and I want to configure
this, right mouse click delete over here I have a lot of different elements, Pro elements
free elements I can use them all so I search for image and I can drag it over here and
now I can add an image over here. So here I’ve content I click over here and
I search for my logo and I insert the media. I can say, where I want to align it. So every element has content style and fonts
and depending on what kind of element you use there are different settings. So over here we can choose an image, we can
change the size we can align it. I want to align it at the left and I want
to link it to a custom URL which is our home page command C or Ctrl C and paste. Then I go to style and I can change the width
and the great thing about Elementor pro or Elementor is that you have a lot of customization
options. So this is not possible with everything but
here we can select how much per sentence it should be of the total image or how much pixels,
so I say 180 pixels and when you hover over it you can change a few things I don’t want
to change anything so I’ll leave it as this, and what I can do now? I can go over here to the menu I click here
and I can edit in the navigation menu. I can select the menu over here. I can align it to the right or to the left
or I can stretch it. If I would drag this to the left this area,
you see it stretches with it. I don’t like that so I align it to the right
and over here we have the pointer. If we hover over it you see above a color
over here. I can make it on the line like this or some
different options framed like that. I want to bring it back to on the line and
the animation, we can make it fade or grow like that. So there are a lot of things we can do. I go to style and the text color I want to
be the same color as his logo I use the color picker to check the colors cause of my logo. This one is 555 escape, so I go over here
a text color and I say 555 that’s it. Then I go to typography I click over here
and I want to change this to uppercase so I go to transform, uppercase voila there it
is. I can change the size by dragging. This is really big so maybe I say seventeen. The weight I can make it very thin, very thick,
bold I say four hundred or North three hundred style I can make it italic if I want to but
I don’t want it. We can do some decoration on the line but
I don’t want that. So if I hover over it you see the color with
the animation and if I want to change that I go to hover over here at style hover and
I see this color and if I click on it you see a few colors over here that I can choose
from. If I want to change those colors I can do
that, I go over here to the default colors and the primary color I can change it. So I go to logos, colors and here’s the general
color, I copy it I paste it over here okay I have my secondary color and I go for my
accent color and I also change it to this one. Then I go back and I go to the color picker
and here you see those eighth colors I was just talking about. So I grabbed the latest four colors this one
I place color one, the second one, color two, the third one is this one and the latest one
is this one. I click on apply. So if I want to change something over here
I go to style hover and I want to change the pointer color. I have those four colors over here always
that’s really handy and I select this one so now it’s same color as a logo I like that. What I really like about Elementor is the
possibility to optimize your websites for all devices, so if I click on tablet it looks
like that. If I click over here it opens but I don’t
like this. How can I fix that? I go to style I scroll down I can collapse
this and I go to the drop down. This is a drop down. I click over here and I like this but I want
it to be upper cases so I click over here and again transform to upper case, now it’s
upper case. I want to change the background when I hover
over it so I click on the tap hover and I change it to this one, like that and that’s
what I like? Then I go to the mobile version. I can make this Icon bigger so I go to the
toggle button I can change the size as you see. I think it can be very big because you use
your thumb to access it so like that and maybe this can be bigger on the mobile. So I go to the drop down again. I go to typography let’s say if I open it
make it bigger so again here, you can change the line height, another spacing so if I close
this. If I do something I don’t like, I can say
command or control Z it goes back, like this and this over here what you see you don’t
see that on your website. So what I can do? I think I’m happy. I can click on publish and now it says where
do you want to display your header? Well in this case I want to display everywhere
in the website. So I click on add condition and include the
entire website. What I can do? I can add a new conditions and I can say exclude
it on all the singular posts for instance, we will talk about it later. This header I want to display everywhere. So I click on publish and I can have a look
and this is how our header looks, we haven’t styled this yet but we can do that if you
want to. If I click over here I go to the website and
now I see our header like this, but if I scroll down it does not stick with us. If I want to do that I go over here, I click
on desktop version again. I click over here, settings of the section. I go to advanced, scrolling effect, sticky
top so if I say update and I refresh the page, I scroll down you see the menu sticks with
us but there’s no background, so I need to add a background. So I go to style classic color background
so here we have the backgrounds, normal backgrounds like that, update, refresh and now it looks
like that. What we also can do, there are so much freedom
with elemental Pro. You can click on the plus then I scroll up,
we have a new area over here, so what I can do I can go for a simple text editor and there
are some text over here and remove a bit and I go over here to the section settings, background
make it blue and then I go to the text over here, style make it white bring it to the
center for instance and if I go to the section settings by clicking over here I go to advanced,
scrolling effect. I’d say numb so if I update it in the whole
website this area where we add it to the header. So if I would refresh this page you see this,
but if I scroll it does not stick with us why? Because we said over here it is not sticky. So that gives you a lot of flexibility to
create beautiful websites have some information about how to contact you for instance or some
social media icons and if they scroll down, then they don’t see that. So they only see it when they’re at the top
of the website. Well I remove it, update and now I refresh
it and when I make it smaller it looks like that. I like it really big because I’m assuming
someone is on smartphone so you don’t want to have small icons, want to be big so they
can click on the right thing. What I see if I go to the right, like this,
like this there’s not much space over here especially here I don’t like that. How can I fix that? I click over here, advanced I go to padding,
uncheck it and at the left I increase it like that and I say 30 update. I refresh it so now it is not totally at the
left anymore. If I scroll down I still see it if I go to
the about page. I still see this header and what I also like
you see the blue area so it’s indicating where you are in the website, because over here
let’s style it active. We have nothing so it’s automatically taking
this color. So if I would change this color to orange
update and we refresh the page it is orange. So when you hover it is blue on your active
on a page it is orange. So that’s it about the header. That’s how you can create beautiful things
using templates. Let me bring this back to the normal color,
so I click over here I click on clear, update, refresh that looks like that. Let me go to some elementor general settings,
so I go to the dashboard, Elementor, settings I go to style. Over here we can change the content with,
if I would go to the website so I go to dashboard, go to the website. I click on customize I go to general options,
general settings you see the width of the website is 1200. I think this can be a thousand, that’s great. So I copy this. I publish it and I go over here and I changed
it to thousand. So now our theme and our elementor page builder
are both thousand pixels in width. And why thousands? If I take a look at apple.com again they know
what they’re doing and I measure it, is also a thousand. So I copy it from the best here we did it,
here we did it so I click on Save Changes okay. So now if I refresh the website is a bit smaller
and I think that is perfect, see it lines up really nice. This is the margin we created, so I like that. What else if I go to the back end, Elementor,
settings, style this is a tablet break point. So if I make the site smaller, from which
point should become a menu like this. If I would lower this to for instance 900
and this one to 500 and I save the changes and I refresh the page, then you see the same
width but this time the menu is still like the normal menu, so we can change the breakpoint
manually and you see it does look really crappy. So I’ll leave it as it is but you can change
it if you want to you can also say make it a thousand and make it 700. If you make it empty you will have the standard
sizes and if I take a look and I refresh, I think that looks great. So normally people don’t do this, so if you’re
on a smart phone you see this. If you’re on a tablet you see this and if
you’re on a desktop you see this and don’t stress it about the changes you see over here
like this. It also has to do with the upper bar over
here so everything is fine. It’s a great option of Elementor that you
can create your own breakpoints. Image lightbox, If you click on the image
do you want to have a lightbox? Yes, okay you can save the changes and talking
about the lightbox if you go to edit with Elementor, you click over here. We can go to the global settings and then
we have the lightbox options over here. So you can change the background color of
the light box. You can change the user interface colors and
when you hover over it. So you can change all those. You can disable the lightbox and if I go to
style we can change the font and again the content with which we just changed in the
backend, so that then we have the default fonts, primary headline. So you can change it over here, for the title
I like a real way. What I have I like that, we can change the
weight, then we have the secondary headline also real way. Now have the body text is over here, you can
change it unless it’s already assigned over here that it should be a different font, but
I like open sense also here open sense okay. Apply, go back dashboard settings, those are
the settings we just watched. So here at style we were then we can go to
integrations. You can use reCAPTCHA and all those other
things and we can go to advanced and it’s all fine. Then I go to tools. What I personally like to do, if I go to version
control? I like to use better versions because I want
to see what’s new. So you can enable that and then you have the
new version. So if I would click on save changes and I
go to updates over here. I check it again you can install the new version
of Elementor. I suggest you do not do this on a live website,
but I’m confident that Elementor is great. I already tested this better version and it’s
great so I will use it. So at the time this video is online you can
use the tools I show in this video. Let’s go back to Elementor tools, maintenance
mode. You can any word you say this website is coming
soon and you can log in and you can choose a template, but we don’t have one so we should
create one and I don’t use this. I save the changes. Now we are ready to create a page using elemental
pro. I will not talk too much about it because
I have a lot of separate tutorials as we’ll talk about all pro elements of elemental pro
and of elemental free and I’ve complete tutorials where I show you how it works? But I just want to show you how it works with
sections, columns and elements and after that we will work with templates and I will show
you the big great beautiful power of elemental pro. So I close those two tabs. I added the page with Elementor and I remove
everything like that. I update it and now I’m ready to show you
how to work with elementor and elementor pro? So here we are in the page builder of Elementor. Here at the left we have all the elements,
free elements, pro elements and since we use elementor pro we have access to all those
elements, general elements with more site elements, single post elements, more wordpress
related elements and the great thing is you can collapse them if you want to. And if you search for something for instance
text, everything that’s text related will pop-up or image or a video. So in that way you can navigate really easily
through everything. I click on basic and what I can do? If I want to use an element I can just drag
it over here and then I can use it. But before we do that let me talk about the
structure of the elementor page builder. First we have sections. So if I click on the plus I can have a section
for instance a section with one column, a section with two columns, a section with three
columns and there are more ways possible. So if I click over here I have one section. A section is outlined with a blue line. You see it over here and when I hover over
here I see edit section. Within sections we can have columns, so for
instance over here this gray thing shows that is a column. I can edit the column. I can duplicate the column. I can remove it so there is columns within
a section you can have columns and within those columns you can have elements. So if I duplicate is one more time I have
two columns now. Now I can click over here and now I can add
a heading for instance. When I have a heading this is a heading element. I can change the text over here either if
I click over here again, I go to all the elements and below this heading element I can have
something else, a button, I go back a video. So using a section, columns and elements you
can create your website. If I liked this video but I want to place
it somewhere else I can just drag it over here and that’s the great thing about elemental
pro is just drag and drop that will show you how it can create beautiful pages using elementor
and elementor pro. I close it. I want to show you more. We can also click over here and we start here
with the templates and since we use elementor pro we have access to all the pro templates
and I can view this, and we can insert this as a template. If I do that it is in our website and also
you see over here this is a section, we have one column over here and in that we have one
element. It’s the heading element and we scroll down
we have a new section and see the creativity you have when you create a website with Elementor
because over here, this image is kind of out of proportions it should be within this area,
but with Elementor you can easily bring it out of the area with the advanced margins
over here. We will talk about that. I will show you how to create things like
this. But this way we can import with a few clicks
and then we have a website and we can change the text over here maybe of a restaurant website
you can use this template. Change the text, meet something like that
maybe I want to change the background color. I click over here, go to style and I change
the color to something else. So that’s what we can do. If I remove everything, I click here again
we also can use blocks and they can help you to create the frame of your website really
quick and then change everything, so if I’m searching for a hero for instance I search
for a hero, I click on it and I see all the heroes. So I can insert this, now over here it’s the
first part that people see when you create a website and I think I like this. Okay what’s next? I click over here. I go to the blocks and now I want to have
a call to action. So I search for call to action and I can use
a dark one or a white one and I think you know what I will insert this one. So now I have this area over here. This area maybe I think I want to have a light
area between, then I click on the plus over here, click over here. I go to blocks and I searched for features
and I do it in a light way so I insert this one. So in a few seconds we created this over here
and then maybe I’m going a bit fast but I will explain later. I can edit the section, go to style, here
we have the background. I scroll down I go to background overlay and
now I can create an overlay for instance in gradient. So the first color is this one. The second color is this one, then I can change
a few things I can change the angle and change the opacity. So that’s what you can do in Elementor in
a nutshell, but we can also create things ourselves. So I will close this, close this, closes this. I’ll update it and we can start from scratch. Well I have a few websites over here, if you
take a look at Apple you see an image, you see the title, the subtitle and two call to
actions, learn more and buy. We have Airbnb call to action, if you scroll
down a bit you see more call to actions, information, call to actions. If we go to Uber, call to actions, an image,
text, subtext and a call to action also here in the menu. And here Tony Robbins a big header a subtitle
and a call to action. So if we want to learn from the best we should
say you need an image, a good title, subtitle and a call to action. So I go to elementor pro website of course. I click on the plus and I go for one column. It’s over here in order to see the height
of the section I go to style and I give it a color for now, black and now I go to the
layout of the section. So I click on the section over here, then
I see the layout style and advanced. Here at layout we can stretch the section
that means that the section will be totally from the left to the right. So I say yes the content is boxed. So the content within this area is from here
until here. So if I will make my screen smaller and if
I would say full width, the content starts over here I don’t want that. I want it to be boxed command zero. And what I want to do? I want to take a look at the height. I can say fit the screen so no matter how
big the screen is it will fit to the height of the screen. So you’ll see nothing else or a minimum height
for instance 600 pixels, for now I say 400 okay. Now I want to have a background and I can
show you free images for your backgrounds. So if we go to pixabay.com or we go to unsplash.com
or we go to pexels.com we can find beautiful images that we can use for free. Over here for instance you see high quality
images. Also here at unsplash and you can use those,
here at pixabay. So let me see over here they serve their product. Here she a beautiful place where you can stay. You were of course on in the car. I want to talk about web design, photography,
videography so maybe something with a computer, laptop. So maybe this one yeah. I click on free download and there it goes
it’s a really big fell. So what I will do? I will go to the back end. I click on update. I click on this icon and I exit to the dashboard
and if you take a look at the website right now, it looks like that. I go back, I go to media and before I uploaded
I want to rename it. So over here I go to the finder and I call
this ferdy Korp media because then I can be found on that term. I add new, select the file and here it is
and what you see is over 1 megabyte. Which is really big and the resolution is
also really big. I open this and I want to make it smaller
and I want to change the aspect ratio. I’ll show you how it is done. I click over here and I click on edit image. The first thing I want to say width of the
image should be 1920, so I click on scale and now this is a new width, but I also want
to make it the height of 1080. So I drag over here, totally to the left and
to the right like that and I want to make an image crop and I say 16 by 9 and that will
change the aspect ratio maybe I should drag it up 9 yes. I can select an area I want to crop over here
and I click over here and now it’s cropping. So I save it and now our image is 10 times
as small 1920 by 1080 then I want to optimize it, so at title I remove the dashes. I copy the text and I paste it here at the
alt text and that’s it okay. I go to the website, edit what Elementor. I click on the section, style and instead
of a color I choose an image. So I select this file. It’s optimized already. I insert the media and there it is, but I
don’t see that much of the image it’s too big. So I go to the position over here. I can focus on a certain area I leave it at
default and at size I say cover and I want to say fixed. So if I would scroll the image you’ll stay
in the background like that, but that’s not all. We can also add a gradient descent of an image
or even a video in the background. So you can use it if you want to I use the
image over here and then I collapse this and then we have the background overlay and we
can do a lot over here. I can add a gradient, so I can choose the
blue color and then second one also maybe blue or dark blue and I can change the angle,
but I also can change the blend mode, multiply screen overlay and in that way you can figure
out for yourself what you like? Here I can change the opacity. Now opacity will also change the blend mode. How they’ll look? This is a little bit too light, too dark overlay
you know what I do normal like that. I have a complete tutorial about blending
modes you can do so much crazy beautiful things with it. So I like this I think I go to the layout
and I make it a little bit bigger 500 for instance OK, update and again if I take a
look over here a title. So I go back and I drag a heading over here
and I can say ferdy Korp media but they will see it over here already. They can see it in the domain name already
they can see it on the title already clicked on in order to go to my website, so maybe
Ferdy korp Media isn’t enough. Over here it doesn’t say Apple. Over here it doesn’t say Airbnb. Over here it doesn’t say Uber. Over here it doesn’t say Tony Robbins. So I can better say what I want to say, which
is photography, film or web design or even better oh I’ll keep this. I bring to the center I can go to style, text
color make the text white. Here a typography I can make it really thin
I like that, make it bigger, make it bit thicker like that and then I can duplicate it and
over here I can say we offer a three-in-one solution and maybe this is too big already,
because over here one word or two over here one sentence, one sentence, one sentence and
sub sentence. So maybe I should just say three-in-one or
just one sentence like boost your business. Now I can make it smaller so the whole line
or what I also like between that I like a separator, so here a divider I can drag it
over here you see a line over here. I can change the weight and every element
has its own settings and if you go to YouTube to elementor, elements you see here all Elementor
elements explained all three elements and here all the pro elements, you see two hours
two and a half hours there’s four and a half hours of valuable content where I will show
you all the elements one by one. So I highly suggest you watch that, so I will
not talk too much about all the settings, but I will talk about right now to show you
how Elementor works. I can change the color here. I can change the width two pixels. I can say it should be in the center so like
that. I can change the gap but I want it to be really
close to each other. If I want to I click over here on the element,
advanced I uncheck this so I can if I don’t do that and I say 10 over here. There will be 10 on all sides if I check that
I can say what I want it to be everywhere, so this is zero over here I want the button
to be minus. So I bring it closer to each other, minus
20 also over here, advanced uncheck. The top minus 20 or minus 15 maybe it’s a
bit too close, so over here like that update and if you want to see the result I click
on this eye over here. Boost your business photography, film and
web design. I close this I don’t need it anymore, I think
the images okay this can be bigger of course. So I click over here style typography make
it a bit bigger like 70. Also over here I want to be aligned okay and
I remove this and I remove this update and then will renew automatically like that. The background is fixed but I don’t like it
yet. So what can I do? I make this wider and maybe I can make this
one really big, so style, typography, weight, bold something like that yes and maybe this
one also let’s see how it looks, bold. If I don’t like it I say command Z. If I do like it I say command shift Z or control
shift C. I like it and make the text a little bit smaller this one also. And what else I don’t have to call to actions. So I go over here then I go for a column and
I drag it here below. In that column I can place more elements which
gives you more flexibility to put something on the website where you want it to be placed. So I click on the button and drag it over
here and I align it to the right and I can say portfolio. I can have an icon but I don’t want that and
I change the size to large and here at style I can do so much things I can change the background
color, to this one if you hover over it. I can give it a border solid to pixels like
that. We can give the radius 10 or 20 we can give
it a shadow and so much that you can do. Also at the inside I don’t want to shadow
so I bring it back and then if I like it I just duplicate it and I drag it here to the
right. I click over here I bring it to the left,
change the color of the background to green update, that looks like that. Boosts your business photography, film, web
design. I like the information but I really don’t
like to style so I will fix that really quickly, click over here and I think you know what
I don’t want to have a border, so I say na, I don’t want to have a radius so I say 0. Now I like this style maybe I can make it
text a bit bigger and if I like it I can do right mouse click, copy and over here right
mouse click, paste the style and now I paste it the complete style of this element over
here. So I bring this to the left again. I call this contact, contact and I can give
it a link of course. The link should be forward slash contact over
here forward slash portfolio. I change the color, If I hover over it, it
should be blue. So if I hover over here it becomes blue, if
I offer hover over here it becomes green. Over here advanced bring it a bit closer,
also here not too close, update and what I like to do personally bring some animation
so I click over here, go to entrance animation and I say fading left like that. I can say slow I can make this one come from
the right alright slow, over here I can say just fade in, slow but I can add an animation
delay. So I say after one second it should appear. So I update it. I take a look over here and it looks like
that. Keep in mind that if you do a lot of animations
that it can slow down your website. Most of those buttons, entrance from left,
entrance from right. But if we take a look at a poem all those
other websites you don’t see that often, sometimes when you Scroll you see it but on the home
page I would not use it, and I just want to show you what is possible. So people come on a website boost your business,
photography, film, web design. Then people can go to our portfolio to see
ok how does it look? What you have to offer? People can get in contact with you. Before I show you the next way how to create
your page. I go to the backend over here to the dashboard
and I put Elementor settings. I go to advanced and editing handles I want
then back. I click on show so you will see it’s changed
a little bit. For instance here at the section you have
a new button and when I hover over the column you see this over here. First thing is do right mouse click, but I
rather have this so if I duplicate it it is not duplicated if I move it. It’s removed it’s way easier in my opinion
also here duplicate or remove so that’s that.. What else can you do in order to create your
website? I like to build websites fast. So what I’ve made if you go to Ferdykorp.com
and click on templates I made a lot of Elemental templates for free. You can fill in your first name and your email
address and then say give me the package. I do not send you spam, you can unsubscribe
whenever you want to. I consent to everything because I’m from Europe
so I go to my Gmail as it says over here Gmail and what I do when I update my library of
Elemental templates I send you an email or when I have a new elementor related tutorial. So here it is Ferdy Korpershoek get your elementor
template back I click on it and I click over here and I can download the template back
or I can download a file that will import all the templates at once. So I click over here it’s downloading a small
file. I open it and I can take a look at the images
and if I see something I like, I can import it wait a few clicks, so let me see I like
this one. So I close it, it’s media business page version
3. So I go to Elementor I go to the backend,
exit to the dashboard elementor, my templates and I click on import templates. I choose a file that downloads I go to complete
elementor template back to media business page version 3, only five kilobytes I open
it and I click on import now. Now it’s imported I go back to the website,
edit with elementor. Now I scroll down I click on this icon. I go to my templates and there it is media
business page version 3. I can preview it or I can insert it. Yes, I insert it and there it is looks a bit
the same. I can collapse this one, Boost your business
and then I go to style, I say upper case I make it smaller like that updates. So now I have a complete page with a few clicks
and maybe think why does it look so funny? Because I optimize this for a desktop and
I optimize this for a smartphone and a tablet. So if you take a look at the result you only
see one video, like that but animation over here, button animation the simonia1:15:00
and this is how I like to work. Just import stuff into my website until I
like it and if I don’t like the background, I go to the back end, click over here go to
style and I can change the background and that’s how you can work with elementor pro
really quickly. But I wanted to show you an overview of what
you can do? If you want to know how to make a website
from scratch using Elementor and click on the tutorial over here, because there I will
talk you through all the details how to make a website step by step. And in this video I want to show you how to
make it yourself but I also want to show you how you can do it by using templates. So boost your business, photography, film,
web design to call to actions, photography, film, web design. About who we are? What people say about us?Nice animations,
the clients we work for you can just change the images over here really quickly, really
easily. So I click over here I can change the order
I can add things to this gallery and then you can change it to your wishes. So that’s how it works. The same goes for about, if I go to the about
page, close this, close this, close this. I can create an about page over here myself
or I can use a template and change it. So if I go to the Thank You page I can click
over here on all elements and then I can search for complete pages. I can search for pro elements, so a header
for instance, a slider I click over here, download the slider. I go to the dashboard my templates, import
templates choose the file. I go to downloads slider version 1. Open it, import now I go to the website to
about. I click on edit page I scroll down first let
me see if everything is OK. I want to be 100% full width, update, edit
with elementor and then I can build something myself or I can click over here. I can use pre-made templates from Elementor
itself or I can make something using all the blocks or I can use the downloaded templates
and in this case the slider for instance yes, there it is. I click over here advanced, no margin, update
and there it is, you can change the text over here. You can change the amount of time it takes
if you’re before the second slide to rise in the third slide. So that’s what you can do and again I go back
to complete pages, maybe I’m like that. I like this one, see an example you can download
it, go back Elementor, my templates, import template choose a file about Us page version
one, open, import click on edit with Elementor, close this click over here, my templates,
about Us page version one yes. And then you can change all things make the
title bigger, copy this style, paste the style only then change the color to white of course
and that is how it is done. I update it so making a website with Elementor
you can do it a few different ways totally do-it-yourself from scratch or use pre-made
templates or pre-made blocks or use template set some a lot of people on the internet made. If you want to know more as I said before
about all the elements or creating complete website, I would say Ferdy elementor 2018. This tutorial will show you step by step how
to make a beautiful website. How to make beautiful pages? This one and this and this one displays all
the individual elements, so if I click on it here in the description you can see all
the elements see icon accordion, tabs, testimonial. So that’s how it works? Now I want to show you things I’m really excited
about and that is blog. So I close this and I go to the blog page
and here you can create beautiful things using elemental pro. The blog post area using templates is one
of the greatest things I like about elemental pro, but in order to create a beautiful block
page layout or blog layouts we need to have a blog post. So in order to do that I hover over new and
I click on post. I will create a first blog post and the title
is the elementor pro site builder. This is the title this is very important because
sure we found on the title in Google. So I like to use elemental pro so that people
will find me on elemental pro. So that’s great I scroll down, when you have
a blog post you can have categories. If you have a lot of blog posts and you have
no categories it can become a mess. So you want to create some structure in your
blog posts. So this one is about web design because I’m
going to talk about elementor pro. So I say add new category and I say web design. I add a new category I also can create subcategories
for instance web design and a sub category can be themes. So I can make a sub category and the parent
is web design and I can say themes. Add a new category and now you see this over
here. Okay I scroll down even further and I want
to add a featured image and I’m going to show you where you can find those, so I go to pixels.com
and I search for computer, so something like this okay, free download. It’s downloading, it’s two megabyte which
is too big so I close this I publish it right now and if we take a look at the website at
blog we see it over here. If you don’t see this then go to the backend
of your website, go to settings, reading and then here choose blog. I go to media add new, select files and I
first want to rename it, so I say elementor Pro. I open it. I go back to the blog post, posts, all posts. I click over here I scroll down featured image
and here it is okay. Now I can start writing a blog post over here. I click over here double toolbar so we have
more options and I have a text you can find it in the downloads and blog, blog post one. It’s a flat text with no styling so I place
it over here. So what we have over here is a text. If I update it and I go to the website to
blog and first I see featured image. I see the title the author and the date the
categories and the amount of comments. Here I see the first line and I click on continue
reading and this is the text but I don’t like it. We can design this, so how can we do that? So WordPress works with paragraphs all this
over here are all paragraphs. This is a paragraph. This is a paragraph. This is one, one, one. If I want to split this paragraph into paragraphs,
I can select it over here and if I would say, enter you see I skip a line why is that if
you press ENTER within the WordPress blog post editor you create a new paragraph. If I want to keep this one paragraph then
I would say shift enter and what you’ll see I don’t skip a line. So this is still one paragraph. So if you want to create a new paragraph for
instance you’re typing over here and you are done with this paragraph, then you can start
a new paragraph by hitting Enter. This is a new paragraph. So we have paragraph here, here, here and
here and the thing is if you change a paragraph to title for instance or a header the whole
paragraph will be changed. So this is one paragraph. If I would say I want this to be a header
then the whole Alinea[1:25:01] becomes a header. So using the enter you can create a new paragraph
or new headers. So I’ve here one line, I selected over here
and I change it to heading two. The same I do over here heading two, heading
two and you even have a shortcut which you can see over here. So if I select it and it is control option
two on a Mac. So I select it control option two, control
option two. So in that way you can create paragraphs and
you can create headers. And if you want to start a new line without
starting a new paragraph then you say shift enter. So I update it and I can view the post over
here and if I hold command or control I go to a new tab. I can see it so it looks a bit better already
using titles. What else can we do? We can highlight words so Elementor. I want to highlight it. I can say command B or I click over here on
the B and here again I can make it italic, professional or page builder maybe I want
to highlight that. I can make it bold command B or I can give
it a different color over here. A red color for instance like that. I can also choose a word in the Header and
say hey there over here select it, give it a color like that. So that’s what you can do. I can create a link so I will talk about elementor
pro. I can select it I can create a link over here
let’s say ferdykorp.com/get-elementor-pro something like that, enter and now I also
edit it and I say open in a new tab. It’s not the real link by the way. So now we have a link what I also can do I
can have a quote. This is an amazing quote about Elementor and
I can select it. I can make a block quote and every theme will
show this a different way. I refresh it. It looks like this using ocean WP. What else can we do? We can add images. Images are important to give the website a
professional look a few. So I go to the backend I click over here,
add media, upload files, select files I go to blogs and here are three images I want
to upload at once, open this one is selected I can optimize it by removing the dashes,
that’s really important. Over here the same remove the dashes, copy
it paste in the alt text and that way you’ll be found better in the images on Google and
other search engines. So I uncheck those two, I select this one
I click insert into the post. It looked like this but I can change it. I can remove it, add media select it and I
can scroll down, I can say where I want to align it, left center or right or none, link
to media fell or something else or none and the size I want it to be full size. So if I say insert into the post it will be
here on top of this area. What I also can do. I can align it to the left but because the
width of the image is so big I need to make it smaller before I see text at the right
hand. So like that and now you see it looks like
that and I can bring it to the right so I like this, make it a bit smaller. So it’s important where you leave your cursor
when you import images. Again add media this one, I can say align
it to the right I want to show the medium size like that and I think hey this is about
templates. Here is also about templates I drag this over
here and then in the end I think you know what enter at media one big image about all
the pro elements and I want to display this in the center full size, insert like that. Update, fresh so we have an image over here,
image over here, here and here. It looks okay but I want to style this using
elementor pro. So we will use elementor pro for it but before
I do that I will add two different blog post really quickly and then I will talk about
how we can make something beautiful out of this. So I hover our new, post let me go through
this really quickly. As A Man Thinks in his heart okay. I made a new category inspiration. I need to feature image but first once I have
the text so I go to the blog post two, copy it, paste it over here I publish it then I
go to media, library. I go to pixels, man smiling for instance
and as a man thinks in the heart is hot that’s worse about, men thinking. What you can do? You can grab this image, download it and go
to the media library add new, select files, go to downloads, rename it as a man thinks
in his heart, open and although this is a standing image you can change it. So I click on edit image you see it’s really
big I like that, edit image and again I want to say 1920 scale. I want
to make a selection, I say sixteen by nine now I can grab this area and I can say enter
or I click over here and I say safe okay. I go to the blog posts, all posts I click
here set featured image, this one okay and then I can style this again. Let me show you quickly heading two, control
option two, control option two and then over here I want to start using a bulleted list. So I click over here then I select this over
here, backspace, enter, again below backspace enter backspace enter, 5 points know how to
get a better self image and good luck I wanted to be title or a heading. I always do heading two because the title
of your blog post is a heading 1 and you can use it only one time in your website and then
we get a few images, so we could get more if you want to. For instance smiling people maybe, I can select
a smaller one over here, small download, title life is good something like that, and then
here how to be happy I add an image, upload files there it is really small the file so
that’s great, that saves you time, place it in at the right, a bit smaller like that and
then one big smiling person maybe a woman smiling one [Music]. They’re all great so large, download optimized. How to get a better life? Open full-size like that, update. Now if we take a look at the blog post you
see this one as a man thinks in his heart and I’m in pro site builder if I click over
here and see the image, the title, the author, the date in the category the amount of comments
and the blog posts. I will create one more blog post and I’ll
show you different way on how to make a blog post probably a better way and the title is
2018 is going to be amazing. So the new category, personal I add the new
category. Featured image I’ll upload a few files from
my computer. First this one, open optimize it, set the
featured image. I publish it before I will use elementor so
I’ve published it and I click on edit with Elementor. Because you can also create a blog post using
Elementor and then you have much more options. So over here I can do whatever I want to do
and don’t mind this. It’s a small glitch but you will not see this
on the website. So you can use everything you want. I can start with a video but because I will
talk about this much more in a few minutes I will just use the text editor. Now I will get a text blog post 3, copy it,
paste it and I’ll do the same, control option two, control option two, control option two
and for the sake of the tutorial I will just skip the images and let’s go to the next important
thing where I want to show you how to create a template for a blog post. So I preview the changes it look like that’s
great. If I go to my blog page, it looks like that
and you know what I will first talk about creating the blog page using a template and
then we will talk about creating a template for your blog post and what you can do it
that you can do whatever you want to do. You get a lot of freedom to create the blog
post you have in mind. You can make use of dynamic content I will
talk about it later but first we’re going to configure the blog page. So how can we do that? I close this, I go to the back end. I go to elementor, my templates and I will
create a new template just as we did with the header. I will also do that with the archive page
or with the blog page. So I click on archive, add a new archive page
over here. Select the post type, post and the name and
I call this blog page general. I create the template for it and we can immediately
choose a template. So if we take a look at the archive page you
see all the blog posts displayed here’s a featured image, the title and a small text. So here you can see how you want to display
things. Do you want to see all the blog posts below
each other or two rows, three rows or something like this, with a sidebar? You can do a lot of things well I like this
one is really simple, you know what I like this one even more, so I insert it and what
you see I see immediately blog posts over here. So it’s a dark background with a white text,
the featured image. This is the category and this is how it looks. Over here you see some dynamic data if I click
over here you see the archive title. So what I will do first if I click on publish
I can add conditions and I add a condition and that is that I want to show this on all
archives. I can also say only from a certain author,
so if I would have more authors me and someone else I can say, my archive page should look
like this but someone else’s archive page should look different based on the template
you use and how you adjust it, but at this time I want to say all archive pages, publish
and now if I would take a look preview. I go to the blog page, it looked like this. So now we can style this and it will be edited
and it will change on all archive pages. So I think this is way too much space that’s
not used. So I don’t use this I delete it, people see
when you go to the blog page that is a blog page. They don’t need a title with blog. So over here, I can click over here you see
that this is an archive post element. So the skin you see its cards I can change
it to classic and then it’ll look like that. I like cards and we can configure this or
we can start from scratch. I will do that so right mouse click over here
and delete or hover over it and close it. You know what I will close everything and
I click on the plus one column and then I searched for the archive post element and
I drag it over here. So I changed it to cards, you can have three
columns or two and then look like or five, we don’t have that much. I say, three I like that, show an image the
featured image if I say no, you don’t see it if I say yes, you do see it. We can have a masonry that means that if an
image is bigger it will take up more space. So if you have a lot of blog posts beneath
each other it will get a masonry look but I like it to be without masonry. The image size if I bring this up it will
have a better quality. I like it and the image ratio you can play
around with that and since I used sixteen by nine I can bring this down a bit, I like
that. Do we want to show the title? Yes, so I have a tutorial about this I think
this is a great. The excerpt length this text how long should
it be you can make it longer fifty like that, read more text and if you’re from the Netherlands
or somewhere else you can say lace mirror. Sometimes it takes so long to figure out how
it works in the theme. Where’s the translation? How can you fix it? And here you can just change it really easily
read more I like it, without this. Do we want to show the batch over here? Which is the catagory batch. Then you can show the categories or the text
or the format, avatar my area over here that’s really nice if you have a blog post with more
authors and you see the image and you save and then you think oh this from ferdy I want
to read this, oh this from someone else I don’t want to read it something like that. So over here I still see five words. I want to change it to 25. Pagination, if we have more blog posts than
three. How many do we want to show? First I want to show six, so two rows of three
and after that I can show a pagination with numbers or previous/next. We can even go to advanced and there’s nothing
fat, then we can go to the style. We can chase a column gap. I will go through this a bit quickly because
I want to focus on and all the special things we can do and this is basic stuff. We can change this over here, the card change
the background color to something else. The border with or remove the border of course
if you go over here to the section, edit section you can change the background, make it a bit
grey so in that way it pops out a bit more and then go back over here, style card you
can change a lot of things over here. When you hover over it you can change the
gradient hover effect, spacing between the image and the title the batch left or right. I would say play around with this I have a
tour about this where I go deeply into all this stuff. I click on update and you see there is not
much padding over here. So how can I fix that? I click over here advanced, padding should
be 40 and 40 update, so that looks nice and if you click on that of course you go to the
blog post and again as I said before this is the ocean WP display and now we’re going
to do what I liked the most about this amazing page builder. We’re going to create a custom blog post template. So I close this, I go to the dashboard I go
to elementor my templates and or I click on add new and select a single or I go to single
and add new. So here the selected single, select post type
post and the name will be blog post general. I click on create a template and through the
tutorial I’ve been waiting for this moment. So I can choose between two templates and
let me talk you through it. Over here you see the featured image you see
an image of the author, the name of the author, the title, some information about the blog
post and here you see the blog post so this area is the blog post itself and everything
around it is a template and below is an option to share to add a comment and this is also
a template. So this area is templates. This is the blog post and this is template
again so the great thing is we can work with dynamic content and instead of explaining
I will show it to you. I will choose this template and I click on
insert and what you will see immediately is that you see a blog post. You see the blog post 2018 it’s the most recent
one and if I go to the settings over here, left preview settings I can select a blog
post that I want to be shown. So if I would say elementor, the elementor
pro site builder apply in preview I see this blog post. So let me talk about this what you see over
here. Here you see an image and it’s not just an
image, if I click on it, it is the featured image that is shown over here. So if I go to a different blog post with this
template you see the featured image of that particular blog post over here. So over here you see a title if I click on
it you see there this the post title. How does it work? We work with dynamic content. Well, this looks really nice. Here you see the blog post here below you
see some share options but I want to start from scratch. So I close this, I have this area over here
and I click on the plus and I go for a section and what I want to do in this section I want
to show the featured image of a blog post in the background. So first I want to stretch the section. I want to change the height to fit the screen,
so it will be really high I love a solid. I go to style then we can go to the background,
background type. I click on classic and I can choose an image
or I can click on dynamic and I can choose the featured image. So now we see the featured image of the blog
post of Elementor. Go back and I want to style this because right
now you don’t see that much of the featured image. I click on style, so we have the dynamic featured
image the position that’s okay with me. The attachment I can make this fixed so when
I scroll it stays in the same place. I don’t want to repeat it, no repeat and I
want size to be cover. So it covers from left to right. So if I scroll like that looked like that. Over here you see gap but we’ll take a look
at it later. So it look like that then we can have a background
overlay. We’ll take a look at that later. We can have a shape divider so on the bottom
I’d like to have a tilt, not that much like that okay. I click over here and I want to go to the
post title. So I drag the post title over here and it
says the Elementor Pro site builder. Well this gives you a lot of freedom. We can just drag elements that are related
to a blog post template. So I click over here I want to style this
because I don’t like the way it is shown right now. I click on style, I bring it to the center
its h1, I go to style change the text color to white and the typography to a bit bigger. I can make this uppercase if I want to. I can give an on the line, you can do a lot
of things over here, but I like it. If you have really light featured image you
don’t see the text anymore, so I go back to the section, style, backgrounds overlay and
then I can make this color black and then over here we can change the opacity. So no matter how light the background is,
so if I go to a different blog post for instance as a man apply a preview. It has a light background but you still see
the text really good, so I like that. What else can we do? I go to let me see post info and I drag this
here below. You see something information over here, the
author, the date, the time, the comments over here. First I want to see this so I go to style. You see the icon I want it to be white and
the text I also want it to be white. Maybe you know I can make the icon blue depending
on where I am in the website. Now I say blue like that. So I can text and list space between everything,
alignment in the center. Can we have a divider? We can, I don’t need that and if I go to the
text I want to make it a bit bigger and if I go to advanced I want to decrease
the padding, so bring it a little bit closer to each other. Before I continue I want to publish this. Where do I want to publish it? All posts or a certain category we’ll take
a look into this later. Right now I say all posts everything, publish
we can take a look and if I would go to the blog page this is our template over here. If I click over here you see it looked like
that, but you don’t see anything else because we did not finish our template yet. If I want to fix this area over here I click
on edit post. I scroll down, margins, disable, update, view
post and now it is gone so that’s how you can fix that okay. Let’s continue over here I click on the plus
area like that and I want to make use of the author box, so I can drag it over here and
you don’t see any text but you see this image. How does it work? I update it, I have a look. I go to the back end, users, your profile
and you can get a Gravatar account over here, then you need to log in, you need to upload
an image and that image will be shown over here, but you see my name but you don’t see
any text over here. So again a profile you see some information
over here and I can create a text something like that. I update my profile and if I would preview,
I close this, see the text over here and I can edit the blog post general over here. You see it’s from a single post Ok. What I can do now? I click over here now I can go to Advanced
margin and do a – I uncheck, this like that somewhere over there like that. I go to style, border, solid border of 3 pixels,
with the color blue okay so this is what I can do if I want to. Then I click on the plus one area and I say
post content. This is the area where the blog post will
be shown. So over here you see an example. So we have the title here all the information
about the author and then here starts our blog post. Well, I think you agree that this does not
look that good. So I click over here, advanced nothing and
I drag this all the way down over here ,here there should be more distance. So margin top something like that. I think the text can be a bit smaller, style,
text typography, title, nothing biography a little bit smaller, something like that
update. What else do we want to have in a blog post? We want to have a way to share things. So I search for social share and here it is. So I can drag this over here for instance. It looked like that but what I saw in the
example in the template that it was outlined really well. So what I can do? I close this, I can click over here and then
I add this one because I see some things I like and instead of doing them again from
scratch I will use those to save some time. So I scroll down in this area I want to use,
so I drag it above all the way to the top over here. So people can share it. I can duplicate it, use it another time over
here for instance then I click over here, I go to style. I want to remove the border none’ okay. What else do I like? This area, this area to leave comments, but
we can also close this click on the plus, one area and I search for comments, post comments. I drag it over here and there’s not much we
can do so I just leave it at that. What we also can do help people to navigate
to the next post, so post navigation maybe here on top or here below, previous posts,
next post and here we can change a few things we can change the words, disable the label. We can have the arrows, change it go through
the style, make it a bit bigger. Open you know what a real way, make it bold
upper case if we want to. So it looks like that. So let’s take a look if I update it and I
refresh the page. We have the title a nice background which
is the featured image. It’s a little bit darkened so you can have
the light text over here, people can share this. If I click over here I can share this, you
see an image, the title, the website and I can say something about it and post it same
goes for Google, Twitter, Linkedin, Pinterest then we have the blog post, below that we
can share it again you see something about the author and can go to the next blog posts
and you can leave a reply. If I click over here I go to the next one. So a few things I want to change, over here
this section I want to change it from fit to screen to minimal height of 600, you know
what 500 update, refresh, you know what 450, update it will be changed on all the blog
post if I refresh it, then you see this. I scroll down and what I see is that text
is a bit small, so I can change that using the customizer. I scroll down to see it. Let me see typography, body text, I can change
that to 16 and okay go back, go to heading to change it to 24, 25, 26 even change the
line height. I
can say just one and change the font color, but what I want to do I want to change the
padding over here. How can I do that? I go back, I scroll down custom CSS okay then
I say h2 or you can copy this code, opening parenthesis closing margin 20 pixels. You see margin 20 pixels everywhere. So if I would say 50 looks like that but you
can have four times the same amount and I think about trol, trol and at least four top
so the top I want it to be 30. They are right zero under zero or maybe five
and at the left zero, it’s not looks like that maybe a little bit more space then and
then that way it looks better in my opinion. The text is readable not too small. I like this over here. I publish it I close it and I think this looks
amazing. I’ve never seen a theme where you have so
much freedom to create a blog post you want, but we can take it to the next level and we’re
going to do that right now. If you have a website with more categories
or more subjects you can bring some order in your website by changing the colors of
categories. So let me show you if I go to the blog page,
we have three categories personal, inspiration and themes and if I open one of those blog
posts they all look the same in style. I want to change it if I’m talking about personal
I want to give the style of the website a different color. If I talk about inspiration I also want to
give the different color, so let me show you I go to the dashboard. I close this, I go to elementor, my templates
if I scroll down I see header general. What I will do I will export the template
and I don’t want to make this complicated. I’ll show you how it’s done. I open the Jason file which I just exported,
right mouse click open with text edit and here you see on the upper line header in general. I changed it into header, inspiration command
s or ctrl s on the PC. Now I want to import it, I import the template
choose file and here at downloads I import this one, open it, import now. Now it’s called Header inspiration. If I click on edit I can also change it here
but then the permalink is not right anymore so we did it the right way. I click on edit with Elementor and I hope
this will blow your mind I’m really happy that elemental pro can do this. I tried it before but then you need to use
custom posts and all kinds of complicated things. Over here I want to change the color of my
logo, so I click here I choose a different image. I click on upload files, select files and
here at logos I go for photography, inspiration will be green. I open it and I can optimize it and I insert
the media so that’s it. I click on update and now I add a condition
and that is included on certain posts from the category, inspiration and I publish it
OK. Now if we go to the website, I click over
here preview and I go to the blog page. It is blue but if I go to an inspiration blog
post I click over here, now it is green. Wow, so if you have a website with three strong
subject’s inspiration, personal and web design they can change three different colors
or you can even change the text of the logo. So I could say ferdy inspiration, ferdy web
design, ferdy personal but now I do it like this, but this is not everything because if
I go back I go to the dashboard. I go to my templates and okay now I go to
the blog post, general I do the same thing. I export the template I rename it using TextEdit
I can skip that so if I would say import template, choose file and I grab this one open it and
import it. Now there are two the same, so I grab this
one let me see yeah I grab this one, edit and now I can say blog post inspiration and
if I update it, you still see the permalink talks about general, so that’s why I rename
it okay I added this with Elementor and now this is going to be next level stuff. Let me see I want to grab a different preview
elementor for instance, apply, preview okay. What I want to do now? We’re now in blog post inspiration, so I can
change the style to a little bit greenish, so I click on edit section. I go to style and what I can do I can go to
the background overlay and I can change this to green and I want to grab the same green
color I have in the logo, like that and now it looks like that so if I would say update,
add a condition and I do the same in category, inspiration, publish. I take a look and I go to the blog page and
I go to inspiration, you see nothing why is that? Because there are two blog post templates. Let’s say they should have a certain style. So I go to the dashboard and I go to my templates
and if I go to blog post in general I click on edit with Elementor and now I click over
here on display conditions, include all posts and now I add a condition and I say exclude
it, add category inspiration, publish. So I say display this everywhere except inspiration
and the other one I say display nowhere except at inspiration. So if I were to refresh the page, Wow It look
like that. So there’s a greenish style but that’s not
all. We can do even more. I want to change the single of blog post inspiration. I close this, I close this and I want to grab
the inspiration blog post as a man thinks in his heart apply in preview. I go to the background here’s the image here’s
the overlay. I can change the color of course but I can
also change the opacity or even CSS filters, but since I’m working with a color. I cannot do that much I can change the contrast
but a color so there’s not not really much I can do, but if I do it the other way around
so I to the backgrounds and here I say I want to add a color green and dynamic, nothing
so here I only show the color and then I go to the background overlay. And I go to dynamic featured image and I cover
it and I change the attachment to fixed. Now if I start working with CSS filters I
can do some crazy things. I can make this blurry. I can change the brightness, contrast, saturation. I can do a lot of things. I can also bring it all back, change this
over here. I can make it 100% and then I can go to blend
modes like I say multiply or screen overlay. What I did before, I went to Photoshop, I
use the image and I changed everything but now I can do all the same things over here. I can make it blurry like that. What you also can do it says normal over here. so I can say when I hover over it, it should
all be normal again. So when I hover over it, it will be brought
back and then I can have transition of few seconds. So I update it, I take a look and in order
to get a real good look I go to blog inspiration, when I over it looks like that but I want
to change the transition duration so let me see if I can fix that, update
I don’t know but it does not look like that, so let’s forget about this. So I go to normal color actually it doesn’t
matter I change it to green and this I bring back. So I can say overlay or multiply and when
I hover over it everything should be normal again, like that and hover no hover no changes
just the same. So update I go to blog inspiration. I’ve green header over here and a green logo. So what else can we do we can do the same
with the different categories so I go to the backend, elementor, my templates, header inspiration,
export and then import but before I do that I want to change the title
to Header, personal command S, choose a file, latest one Imports, edit with Elementor, click
here and here I want to use, purple, insert, update, conditions, only archives, category,
personal, publish OK then I go back to the dashboard. My templates, then I go to blog post, inspiration,
export, rename, blog post, personal, import, open it, import now so blog post personal
edit with elemental pro, sorry and go over here, style change it, update add a condition,
category, personal, publish OK and now I go to the dashboard. What I can do actually I go to my templates,
I go to blog post, general I can edit it and since I don’t need it anymore because I use
a style everywhere I can say blog post web design, update, edit with Elementor, style
remove this, grab the color, web design okay. Then again to the featured image, cover 100%
and overlay, now it was multiplied like that, update but now options display conditions. I close this, I close this and I say that
condition category Web Design, publish and then one more thing, dashboard, my templates,
Header personal export text edit, web design save it, import it, use this one, import,
edit would Elementor. I change the logo to the orange one, open,
insert, update add a condition, singular category, web design, publish. Let’s take a look, I go to the home page. I go to blog, if I go to personal in a new
tab the color is purple, inspiration green and green and themes origin orange, only the
first one the first one is not working. So let me see that’s personal I go to the
dashboard, elementor, my templates. So the Header personal edit with elementor,
conditions, singular, category and then personal, publish refresh and that’s how it works and
I think I keep it really simple but you can do so much things with it. But this gives you an idea of what is possible
using templates dynamic content and conditions, so that’s it for blog posts of course I can
create much more and since we are working with templates, let’s do the footer. So I close this over here and I want to add
a footer using a template. So I go to the backend, dashboard, my templates
and I create a new template in the footer. So I add a new footer and I select a page,
like all this footer and I will only have one footer sergeant coffees general or inspiration
only one footer, create a template and I can choose between a lot of options. So what would I like? What do I want to show in the footer? I want to say something about myself. I want to have social media icons and a few
links. So I think this one is really nice and it
is a pro version and the great thing is we use Elementor pro, so we can use this version. If you see something else you like maybe with
a signup form you can use it. This one is also nice. I click on the insert first things first the
backgrounds, edit section, backgrounds I think this color should be great and that is 555555
or maybe darker blue. So I grab this color make it dark something
like this, I remove this, delete it but I want to show an image of my logo, so I search
for image. I drag it over here and if I don’t have it
already I upload a file, select File and it is that white logo. This one open, optimize and insert it, can
be a bit smaller I want it to be aligned at the left. So here I can change the width pretty quick. Yes although I have a text about myself so
that’s great I can change the color to white no transparency and what do I use? I use Facebook, YouTube and that’s it maybe
I’ll start Instagram. You can have a link over here of your Instagram
accounts okay. I want to make them a bit bigger not that
big. When you hover over it what happens, yeah
I like it okay. Then over here we have an icon list and if
I don’t like a column I can just remove it like that. So I remove this, I remove that and I can
say post, archived posts or portfolio and in a portfolio I can show blog posts. So I want to show six but I don’t have six
so I’ve shown three or you know what two columns, I show four
blog posts in large I can make the masonry item ratio
here I can select what I want to show. Where I want to have a filter bar above no
when you hover over it you see the title, no you can do is I don’t do it. So I delete this column, then I have here
menu. So I search for the menu and I want to be
vertical, with a white color. What happens when you hover over it? No problem, the left it’s okay for me I like
it, maybe it takes a bit bigger, then I can publish it add a condition and I wanted to
be shown on the entire site. I publish. let’s see if it interferes with the theme. Preview go to the website okay there it is. It’s overruling the theme footer which I like
but we have also this area so I hover over here and I can change the footer and over
here. I can say ferdy Korp. I can have a disclaimer. I have privacy policy. What I do? I copy this, I update it on the preview page
in a new tab okay like that. I want to add a new blog post not really but
I want to do something really quickly. I paste the text over here, disclaimer. I add a link forward slash disclaimer so we
need to make a page that’s called disclaimer, enter, edit opening a new tab the same goes
for privacy policy link forward slash privacy policy, enter in a new tab. Then I go to the text the HTML text. I copy it all, copy paste. Now you have links over here. I go to style, text color should be white
and then here I can add something else I can remove it. I remove the whole column I can bring this
to the center make it a little bit bigger. I can add 2018 and I update it. I leave this page and there it is a logo some
text, social media, the menu and some information with a disclaimer and a privacy policy. If I click over here and go to the top. So if I go to the blog page it looks like
that, I see where I am and if I go to this one a different logo and stuff I still see
the footer. So that’s how you can make a footer that this
is really simple. Maybe a bit too simple but I just want to
illustrate what is possible. Now let’s go to the portfolio. So in order to create a portfolio page we
need to portfolio items. So I will download a plug-in that will enable
that for us. I go to the backend. So I hover over plugins and I click on add
new and I search over here for portfolio for Elementor. Let me see it is from WpPug. I click on Install Now and I activate it. You see there are a lot of plugins that will
help you to add certain functions on your WordPress website. So over here we see portfolio for Elementor. I can add a new item and I will do that and
I have three categories, the first one is photography. I add a new one the second one is film or
a videography and the third one is web design. I unchecked film and I uncheck photography. I can add a featured image so I click over
here and if you have downloaded the files I use in this tutorial you can go to that
folder, the portfolio photography, DanielLia and I can upload them all by clicking comment
or control a I select them all and I click on upload and there they go and then one by
one I can optimize them removing the – copying the title and pasting it for the sake of this
tutorial. I will skip that for now. I click on let me see this one I like it. Set featured image and title wedding Daniel
and Lia. I click on publish. I’ll show you how I like to work with a portfolio. I click on a visual over here and I add media
and I select one image then I scroll down over here and I can change the alignment I
like to change it to center link to none and size large. Then I click on insert into the post I click
on it and I remove it immediately, then I click on add media. I select the first one then I hold shift and
I select the latest one, except for this one because that’s the featured image already. I click on insert into the post and now they
all have the same settings as I just said. I click on update and probably if you click
on View item you will not see it. It says, page not found. Why is that? We need to go to settings, permalinks and
save it twice and now if I go to portfolio for Elementor. I click on this one I view the item and this
is how it looks. Over here you see the sidebar but before we
take a look into that I will add a few more blog posts for instance video. I hover over new you see no portfolio item,
so I go to the back end and I click on add new item or here add new item met portfolio
for Elementor. This time I want to add a video. I call this one Montana lisianthus okay. If this film set a featured image, upload
files, select files. I go to film Montana the image, set featured
image and then I go to the Vimeo link which is over here. I copy the link. I go to Vimeo and then I want to share this
or embed it so I click over here share and then embed I can show a few options or change
them autoplay for instance, show text, no fixed size or responsive. I like responsive then I copy the code, command
C or control C. Now I go to the text over here. I place it. I publish it and if I take a look here see
image and here’s the video we can play it okay. Then another item, new item design a website. Let me see what design fits perfect so I can
say fitsperfect.com I go to visual. I add media, upload files, select files, I
go to film or web design and then I go to fits perfect. I open it, you can optimize it I insert it
into the post this time I want to add a link, so I click over here. I go to insert link and I can say fitsperfect.com
okay and then this web design. I need a featured image which will be the
same, I said it, I click on publish. So we have three portfolio items I will add
six more and then I will be back with you. So I am back with nine portfolio items. So if I go to the website I close this and
I go to portfolio I still see nothing. I click on edit page and I click on edit with
Elementor okay. Now I can search for portfolio and here it
is. I can drag this over here and you see three
blog posts and we want to show portfolio items. So how can we fix that over here at query
the source is post and we can change it to portfolio for Elementor. There it is, now we see six items so I close
this and I go back to layout start from the beginning. We can change the amount of columns, I can
say I want to have two columns like that or four columns, but I like three. How many posts do I want to show per page? I would say something like 15 and by 15 because
you can have 5 rows 5 rows 15 over here we see 9 because I only have 9 portfolio items
and the image size, if you take a look the quality is okay but if I make this large,
you see the quality is sharper. Let me see medium that’s also okay. I like quality but it should not be too big
in size otherwise website can slow down. So we can have a masonry, well I don’t like
it because you see those gaps over here so I’ve turned it off. If I hover over it you see the title. If it’s so long ago second line it looked
like this. So the item ratio I can make it bigger or
smaller you can play around with it like this. Do we want to show the title? If I turn this off you don’t see that. I turn it on title tag I think h2 is okay. So then we go to query again I can say I only
want to see portfolio items of a certain author, but there’s only one ferdy in this case for
you or a certain category. So if I would say only film you only see film
categories. I’ll the show them all so I leave this empty. We can order them by date or by title many
order or random. I like date the most recent one, first your
at descending and we can offset so if I would say offset one we don’t see the most recent
one, so one and that is gone. Why is that? Let me show you if I click on the plus over
here I can add a new portfolio, portfolio like that and then I can say I only want to
show one column, one post large and of course it should be hey portfolio. So this one is the first one then we see the
second one and the rest. So we can use offset in order to create a
special area for the most recent portfolio item. I don’t use it so I go back over here to query
no offset. I can exclude some avoid duplicates then we
have the filter bar I like that I turn it on and the taxonomy is categories, but you
don’t see that so we need to have portfolio categories like that. So if I update it and I go through website
and I say I only want see film, only see film, photography, web design or all, I love it. Now we can change the layout so first I can
go over here to the section, like I say stretch it and I can say content with full width,
update then it will be totally from the left to the right. Maybe you like that maybe don’t. Why not? I like it. I go to this element over here portfolio style
and then we can change the column gap. We can change a little bit of space everywhere
and if I would say 10 you can also say 10 over here at the row gap so you have a nice
line between all the elements. I like it. We could have a radius like that maybe 30
pixels really small radius. I like it. The overlay right now it is blue but we can
also make it blue but transparent yet. The day you don’t see the title does well. So maybe a little bit more or we do it like
this a little bit darker that’s transparent. I like it to fit with this color. You can play around with that maybe something
like that okay. The color of the text you can make it white,
you can change the font make and big I’ll make it small. I like it at default. The filter bar over here the color you can
make it certain color, active color, blue typography maybe the bigger. I like it to be uppercase, so I go to transform
uppercase like that in the space between the text and the portfolio and since we’re using
this I want to make this Boulder because I think it’s too thin so how can we do that
over here. We see the result I really like it and if
I click on it I go to the video. I go back to portfolio and I say edit header
general. I click over style, topography I make it bold. It’s too bold normal. Let me see 600 yeah 600 that’s it. That is what I’m searching for. So I close this then I go to blog and I open
them all in a new tab and here I say edit header personal. Here I say edit header inspiration and here
I say at that Heather web design. So I click here, go to style I say 600 update,
edit widget 600 and edit widget style 600 and update, close, close,
close refresh here it is bold if we take a look here at the different color it is also
bold. So that looks much better I should have done
that before but we did it. I go to the portfolio page and this is how
it looks and I like it. So if I click on this one for instance I see
the images and we see a sidebar. So how can we change this over here? If you hover over here you can go to widgets. If you are at the backend you can go to appearance
widgets. Right now you see the default sidebar. This sidebar is shown on all pages that have
a sidebar. So what do we want to see here. I don’t want to have a search bar. I don’t want to have recent comments, no archives,
no categories and no meta. Over here you can see a lot of things that
you can place here. For instance a facebook like box, place it
here on top. If I open this I can say like us on Facebook
and this widget comes with the ocean WP theme, so I go to Facebook Ferdy Korpershoek, remove
this, copy the link and paste my link here. I don’t want to show faces, border. I save it and now if I go to a portfolio item
I see like us on Facebook. Below I see recent posts and we have three
blog posts. So we can decide over here what we want to
show? I can change the order and then if I refresh
it you see the recent post and like us on facebook. What else Instagram, social icons, social
share people can share it. So there’s a lot we can add over here. A video but we also can add plugins if we
want to a gallery plug-in for instance that we can have here at the sidebar. So in that way you can create something beautiful
at the sidebar over here. So that’s it about the portfolio. Let’s go to the contact page and we will talk
about Elementor a bit more. How to edit things in Elementor? So I click on edit the page. I close this I edit through Elementor and
what do I want to do? I want to have a Google Maps area over here
that the rest can be Los Angeles. You can change the zoom, zoom out or zoom
in prevent scrolling I like that. So what can we do? I go to the section, stretch this section
full with advanced okay then I go to the column because I see a small area over here that
is white and I go to advanced and I say margin:0 and padding:0 and there goes then, I want
to have an area over here one area I click on it. I stretch this section and I say height fit
to screen then I go to style, background type now to add a background of la upload files,
select files and I go to contact la background. I open it. I found this also at pixels insert into the
media and attachment fixed-size cover okay. Then I go to backgrounds overlay gradient
and now I want to show you something I click on update. I take a look I go to the home page I added
the home page with Elementor and I want to copy the whole style. So over here right mouse click copy and then
over here right mouse click paste style. The only thing I need to do now is go back
to the backgrounds and grab this image. So that’s how easy this. Then I go to the background overlay and change
that opacity a bit so you see a bit more and then I want to add something over here which
is a header, I say contact bring it to the center change the color to the blue one make
a bigger upper case okay, then I want to edit text. I drag it over here and I say get in touch
with us. I want this word to be blue, so I place this
code and the rest you see style bring it to the center, color white typography change
the size, make it bold not that bold normal that’s okay. I go to advanced margin get in touch with
us. So it’ll look like that and what I can do
now right mouse click navigator. I just change those sections and check this
one here below. So it looked like that I close it, click here
maybe it’s style shape divider, at the bottom I say none like that and then we can have
a forum if we want to and I have no background video yet, so I do YouTube. I can say la timelapse right mouse click copy
link address. I click on the plus this area stretch it and
say minimum height 500 style and then the background type can be a video. I paste the link start time is just 0 at the
beginning and time is nothing you know what I don’t like this, server start time can be
10 and the minimum height should be something like that. I go over here to forms, let me see it should
be the one off Elementor which is this one I drag it here and then I can uncheck the
labels okay and there at the section I go to style and I want to have a background overlay
of a color like that and If you want to know more about the form I have the tour about
it over here so you can watch it there. Update and that’s how we made the contact
page and If I see this I click on edit page, disable, view it and there it is contact get
in touch with us here we are you can fill out the form and get in contact with us so. If I take a look at the website. We made the homepage. I showed you how to work with Elementor and
how to import pre-made templates from elementalor from me. This one is from me. I showed you how to change things in the website. How to create a custom footer? Then at the about page we also use a premade
template. Then of you go to the portfolio page, we created
a beautiful portfolio using a free plugin and if you click on it, you see the images
here at the left and here at the right you see a sidebar with the most recent post and
like us on Facebook area then if we go to the blog page. I showed you how to work with dynamic content. We created this ourselves and if you go to
the personal category you get a different color in the menu and in the title the same
goes for inspirational category everything is greenish. We created this ourselves and the third one
themes there’s like this orange and that gives you a lot of freedom to create the page that
you have in mind and if I want to change something for instance, the padding over here is really
easy I hover over it, I go to the blog post, web design, I scroll down I click over here
and I say advanced, I want to add some margin. So I uncheck this top 20 pixels, here 20 pixels
and in the other way you can do that really easily 40 update. You should also update it at the other blog
post. So that’s how you can create a beautiful website
using Elementor Pro. And then we have the contact page great it’s
really quick to show you what is possible and if you want to know everything about all
the elements then I suggest you go to youtube, you search for elementor all elements explained
and there I explained all the elements one by one. One more thing I want to show you, if you
made a website for a client they can give the client access to the website, but maybe
you’re like I don’t want the client to ruin the website so I give him a few restrictions. If you want to do that then go to the backend,
go to users at new. I create a user name I call this one ferdy
client, his email address first name ferdy clients. I create a password for him, that one send
it to him and I want them to be in editor. I add the new user OK and now I log out. Now I want to log in as ferdy client with
my password I log in and if I go to the website. I click on edit with Elementor. I can ruin everything, so I don’t want my
client to give the option to ruin everything. So what I will do I log out. Now I go to Elementor role manager and if
I click on editor, I can say no access to the editor or access to edit content only. So if I check this one the client cannot even
open Elementor and if I select this one, he can open Elementor but not edit this style
only edit the content. So I say the changes. I log out, I log in as a client I go to the
website. I add it with Elementor and now if I want
to remove this I cannot do this but what I can do I can click here and I can change the
text. Here I can change the text. I can change the theme things but I cannot
remove things. So in that way you can give access to your
clients without giving him a chance to ruin everything you have made. So now you have a website you are ready to
make websites for clients, make one site for yourself. I want to thank you for watching this video. I hope you learn a ton of stuff and you are
able to make a beautiful website. I wish you a great day. Feel free to like this video if you have not
done so and subscribe for more upcoming videos and then you will see me the next time bye
bye! [Music]

100 thoughts on “Make A WordPress Website Using Elementor Pro 2019

  1. Ferdy, the link to the OceanWP Theme is broken. I had to read the URL it was trying to find, then type it into the browser, to get to the free OceanWP Theme.

  2. Hi… awesome videos. Can you please tell me how to put a transpanent (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.

  3. Hi, I’ve changed over to follow this WordPress tut because it’s elementor Pro… I notice when you choose “new page” you have an editor below for changing fonts types and sizes etc… I don’t have that?… all I have is a comp,eye blank page?.

  4. Ah ur using siteground… I was wondering why my site wasn’t showing up as the basic front end… I was only getting a blank hello page with no header as showing in yours…. on my last tut I had to install that for starting…

  5. Hey Fredy, your video is amazing!! Thank you so much, it helps me to deal with wordpress 😀 I just have a question: I creat a blog it's about traveling and lifestyle. So I created two pages where my post's go. But how can I select on which page my post's appear?

  6. Hi again! At 33:11, and following your steps. I cannot drag my menu to the left at all (I have more menu items than in your tutorial; they are stacked on 3 lines)…how do I get them onto one line if I can't drag to the left?

  7. Great tutorial Ferdy, thanks a lot. Just one thing. How you do to measure a selection in the screen as you did during the tutorial. Thanks in advance.

  8. Hi Ferdy. I think that your video was very inspiring. I would like to take advantage of the info, could please supply the link that activates my discount and enables your commission to be dispatched.

  9. Hi, Just got to appreciate WordPress. I employ quite a few different page builders yet this one is one that I work with a lot.
    Thanks a lots for the helpful videos. 🖤

  10. GREAT JOB!!! I'm so much grateful to you I can hardly put it in words. I'm at the moment at the very beginning of building my first website and it's already obvious to me I wouldn't make it without you. You are natural born tutor. My warmest regards!

  11. I have seen a lots of tutorial about wordpress. and I must have to say that "you are great, awesome, unique".

    May Allah bless you and long live also.

  12. Could you please tell me if there is a way to use a custom Elementor header if I already have the WP header in place? I'd hate to have to redo the whole site and I really don't want to use another plugin or have to do some CSS codeing 🙂 Thank you, John

  13. Oh yeah… also, what is your prefered theme when using Elementor? I'm using Phlox Pro and was thinking about trying WPocean.

  14. Amazing video. Thanks for your wisdom. Can you tell me the name of the colour picker widget, please? It looks a handy tool

  15. Hey Ferdy, first, I want to congratulate you for your tutorials. Second, I seem to have run into a problem. I'm trying to duplicate the " Header General" just like in your tutorial @2:02:55 and I get an "Invalid File" message when I import the .json file. Any help would be greatly appreciated. Thanks.

  16. Hi ferdy i hope you would reply i am currently in you portfolio making area of the video and when i do click portfolio in nav menu > and edit page > edit with elementor to put the portfolio widget i get and error it loads for a while then i get an error saying "Sorry the content area was not found in your page.
    You must call 'the_content' function in the current template, in order for Elementor to work on this page.

    Using Elementor Pro

  17. Thank you for the tutorial. I hope you can be able to help me to create my header using the template header. This is the website that I created using this tutorial. Notice that only the Home appeared in the- nav menu. http://rizal.buyphrealty.com/

  18. "my templates" is not found under elementor, but in "Templates" under elementor in the menu . Just a quick tip if anyone else is struggling to find it.

  19. Great Video. I am having trouble on my product page there are 5 items on the desktop version on tablet shows 3 which is great but the mobile phone only one product. If I get the pro version can I put 3 products on the mobile version?

  20. It appears that is order to install the Elementor plugin you have to upgrade to the paid business version of WordPress. Is this the case or not?

  21. I've watched it all. Very good. You've got a new Subscriber. Hope I may learn more from you. Thanks alot.

  22. You're one of the best and have the most detailed instructions on how to use and set up these themes of any I've seen. You're stuff is so good that I can't make a decision between Newspaper 9 or Astra with Elementor Pro. I think I could do what I like about Newspaper 9 on Astra and get the benefits of more and more updates in Elementor in the future. Is anyone else having trouble deciding which theme to use?

  23. Hello Ferdy, thank for all the tutorials. It has extremely improved my web development experience. I would like to see a video tutorial where you implement LEARNDASH using Elementor. Thank you once again.

  24. May I please, please have a bit of help.

    I want to create a blog page With Elementor Pro.

    My problem is that I have Elementor Pro and Anywhere Elementor

    Pro and I can't figure out how to get WP to display it.

    I'm not talking about a single post template. Those are easy enough to make and use.

    I want a page that is going to come up when someone clicks on a Nav link that says Blog.

    One that I can put say… three rows of four columns, that when they click on "Read More" they are taken to the single post template.

    I made a nice one and styled it using cards in Elementor just creating a page in WP and assigning it to be the post page in WP and the themes customize section. Nothing came up when I clicked on the Blog link. Not even the themes blog page. It was just blank, except for the custom sidebar I made using AE.

    Very confusing to me.

    Ya know… videos are great and I learn from then all the time, but DAMN… is there no one that has made any Elementor cheat pages?

    You know…

    Build a custom sidebar

    1. bla bla bla.

    2. bla bla bla.

    That is really what would help me and I am sure others as well.

    Thank you for your time,

    John

  25. Hi Ferdy, your instruction has been simply invaluable to me, far and away the most comprehensive easy to understand tutorial I have ever followed, looking forward to viewing your other material. I appreciate and respect you. I've liked this and subscribed to your channel, please let me know how else I can appreciate your work, you deserve much more than this. Best Regards,
    Mark.

  26. Hi Ferdy, I am following the part from 1:20:30 (blog posts), and for some reason, when I viewed the blog page after inputting beforehand, the CONTINUE READING button took me to the service page that has the same title as the blog post. Is the title where I am going wrong? I will try to rename it and see if that helps.

  27. Ferdy when he's about to create a template for blogging: "Through the tutorial, I've been waiting for this moment". LOL

  28. Is there any way to use " Transparent Header " like of ' ENFOLD THEME ' in this " OCEANWP THEME "?

    I know making logo small & big is the unique part of ENFOLD THEME but I just want to know about the TRANSPARENCY in the header ?

  29. Great job Ferdy. This is literally the ONLY tutorial I could find that doesn't ramble on while we wait for the instructor to figure out what they're doing. This tutorial is precise and to the point. It's also a great reference to go back to just by clicking a topic in the description. Thank you!

  30. I am having trouble changing the logo I used when I first started my site. In the header, it shows a logo, but yet there is not a file selected for the logo. When I upload a logo, it doesn't change or show. I did this exactly how you showed me.

    Thank you for making this video! Has helped!

  31. Hey Ferdy,

    i just wanted to thank you 1000 times, this what you are showing is just amazing!
    You are a very positive and sympathetic person and you give people so much value awsome channel! and thank you for that.
    After i watched your video i both immediately Elementor pro its an fantastic website builder. Please keep the good work up im pretty sure that
    this channel will explode with subscribers and likes 🙂

    Thank you and have a great day!
    Adi.

  32. Hi Ferdy, I have added pages to my menu and checked off "Top Menu" but for some reason it is still showing on the bottom of the page. Would you be able to tell me what I am doing wrong? Thanks!

  33. Could you please explain the difference with this your other video ? https://www.youtube.com/watch?v=FXcJOVtJkBo

  34. Thank you. You realy help me. I just become to new work and I've never done in wordpress and they want to me I learn that.

  35. How do I save all my work and then import it later when I want to follow your WooCommerce shop tutorial

  36. I saw your video, and it helped me build a blog, I came looking for link to elementor pro, since you helped me-i am trying to use your affiliated link to help you…not on this video maybe the next one!

  37. Thank you so much for the best of the best Elemetor Pro tutorial on youtube, So much detail and this tutorial is worth thousands of dollars. Keep up the good work and once again thank you so much for this tutorial and i just subscribe to your channel. Warm regards

  38. hi thank you for your video but i have a question i have link from a travel company and i have only html code and i need to build my webiste with elementor does elemetor accept that if yes how thank you

  39. Uhhh! I dont even know where to start. The fact that you took time to even do this 3 hour long video or that you put time stamps in to make it easy for us, or that you have made a TON of other Elementor videos, or that you probably saved my life!!! Probably the last part is most important. You are amazing for doing this. Thank you 1000x's over. P.S. you should get some kind of medal for this bro

  40. Thank you, thank you, thank you. We recently wanted to change our WordPress site and knew the old template we used was not up to being responsive, etc. When we found Elementor, we were blown away but had no idea where to start. I have gone through so many elements of this video over and over. You can see the amount of research and frustration you have been through to gain the knowledge you have. We have tonight launched our new Elementor site and I am delighted so far. Now we need to tweak and blog our site (www.lumosia.co.uk) Thank you Ferdy, we owe you a nice cold Dutch beer!

  41. Hello ferdy , can we style latest posts , recent comments etc in the widget like in sidebar with elementor pro ?

  42. Note for at 30:02 Elementor has moved 'My templates' to it's own menu in the dashboard. It's in 'Templates' now 🙂

  43. Hi there! GREAT video!!

    At 25:25, enabling 'Full Width' (in both sections of general settings) does NOT get rid of the right sidebar, in doing some research it says it might be a plugin conflict, but the only ones I have active are OceanWP and Elementor and Elementor Pro.

    Any thoughts?

  44. I can't get my header to stick like yours. Mine judders after the scroll then settles. I've followed exactly what you did except using a different template.

  45. Hi, Ferdy.

    I tried using the Media Business Homepage V3.jpg file; however, I get a message that the file is unrecognized. How do I solve this?

  46. Great content, very well done and easy to follow; also your timestamps in the description are very helpful!

  47. Great video. I’m in need of help and can’t find it anywhere. I’ve followed your steps but for some reason when I add an image it’s not full width. It’s just the image in the middle of the screen. Any ideas?

  48. hello sir ferdy introduce me to Andy from Indonesia, I want to ask, why does my pro element not change both image, text and others. I deleted the cache, checked the plugin, changed the theme just like that. Please help.

  49. I had overlooked this smashing tutorial. Just bumped into it. This one is a feat ! People would pay a good bundle of bucks for such material. Thank you (again) Ferdy. You are a good man.

  50. Hi Ferdy, thank you for taking the time to make this amazing tutorial. We really appreciate the effort you put into this. GOD bless you and your lovely wife. Cheers from South Africa!

  51. Ferdy I have purchased both pro versions of Astra and Elementor. Would you please explain why when I have an issue they say it is a Astra problem contact them or Elementor says contact Astra. I thought these two work together which is why I bought both.

  52. Hi Ferdy, so far this is a great tutorial. Everything worked good. Until I came at 'Create a Header Template', there I was not able to select 'My Templates' in 'Elementor' in the 'Dashboard'. I search and I search but didn't find it. Did I miss something? Thanks for your answer.

  53. Hi Ferdy, so far this is a great tutorial. Everything worked good. Until I came at 'Create a Header Template', there I was not able to select 'My Templates' in 'Elementor' in the 'Dashboard'. I search and I search but didn't find it. Did I miss something? What I see is that I aso had to install the WPForms plugin – this is different to your video. Thanks for your answer.

  54. Hi Ferdy, Does elementor have a hover over a picture and it blows up and you can move it around and it stayed focused feature? Similar to a map zoom, or move around.

Leave a Reply

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