Make A Wordpress Website Using Elementor Pro

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 [e-mail] 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 [e-mail]. 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 [e-mail]. 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]

Channel: Ferdy Korpershoek

Views: 473,466

Keywords: Elementor Pro Tutorial, Elementor Pro Tutorial 2018, elementor pro wordpress, elementor pro, Elementor Pro Tutorial 2019, Elementor Pro Blend Modes, Elementor Pro 2.2, Elementor Pro Templates, Elementor Pro Menu, elementor page builder, best wordpress page builder, elementor page builder wordpress, elementor 2.0, elementor header, elementor pro demo, How To Make A Wordpress Website, How To Make A Wordpress Website 2019, How To Make A Wordpress Website 2018

Id: 2n1vG5OK-Xs

Length: 170min 24sec (10224 seconds)

Published: Wed Sep 05 2018