How To Make A Wordpress Website 2019 | Beginners

Hi guys my name is Ferdy and in this video I will show you from scratch how to create a beautiful and professional website using the free page builder called Elementor, using the premium theme called Phlox Pro. Let me show you what we are going to cover in this tutorial. I will show you how to install Elementor. The best free page builder in the world and then we will make it even better by installing the Phlox Pro theme. This theme comes with a ton of add-ons for Elementor which will enable you to create an outstanding website. I will show you how to install a complete website with a few clicks and there are a ton of pre-made websites made with Phlox Pro that you can import in minutes, and then you can adjust them to your wishes and save a lot of time. We will talk about the free pre-made templates from Phlox Pro, from myself and from other people in the community. And of course I will show you how to create a page from scratch using Elementor and Phlox Pro. Besides that we will cover blog posts, widgets, portfolio items. How to get high quality images for free and more? And if you take a look at the comments people seem to love those tutorials. So when you watch this video and you apply things I show you, you will become a pro web designer and can even start doing this for a living if you want to. In the description of the video you can see timestamps, so if you want to go to a certain part of the tutorial you can click on 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. Do you like what you see so far then please like this video and if you're new here consider to subscribe to the YouTube channel and hit the bell notification, 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 much money on a website. It is for anyone who doesn't have too much time and wants to do it within a few hours. This video is for anyone who has never made a website. This video is for beginners. This video is for anyone who wants to adjust our websites themselves without waiting for a web developer that they paid too much that will do that for them and for anyone who wants to learn more about Elementor and Phlox pro. So what are we going to do? We are going to get a domain name and web hosting and through my Link I can give you 70% off. Then we will install WordPress, then we will install Elementor and get the Phlox Pro theme and then we will create our amazing website. So the first two things we want are a domain name and web hosting. If you have that already that is great then you can skip this part and if you don't have that then you can go to webhosting18.com and then we can click over here in order to go to SiteGround. I love SiteGround. SiteGround is in my opinion the best web hosting provider there is and I'm not the only one with that opinion. There's a Facebook web hosting group with more than 6,000 members and SiteGround is mentioned as the most popular web hosting provider there is and I agree with them. So I scroll down a little bit and here you see three plans that you can choose. The first one is a Startup package and with that you can create a one website. You have more than enough web space. You can create email addresses. You get free SSL and SiteGround will make backups of your website every day. Besides that there's 24/7 support through live chat, email phone. SiteGround is so sure about your service that it will give a 30 day money-back guarantee, so if you somehow don't like it then you can get your money back. The best value is GrowBig. It has all features of the Startup package and a lot more, with a GrowBig package you can have unlimited websites, so you can buy 5 10 20 domains and you can use your GrowBig account to create 20 websites with it. There's a free transfer service that enables you to transfer a complete website with email addresses with emails from a different web hosting provider to SiteGround. SiteGround will do all the hard work for you. You get a premium plug-in SuperCacher, which makes your website load even faster and you can restore backups for free. So if you somehow mess things up with a few clicks you can restore your website. And then we have GoGeek. This is the package that I use because I have a lot of websites and I want to make use of the best features of SiteGround. This package is for people that get a lot of visitors. Your website is hosted on a less crowded server which makes your website even faster. This package is especially great for big webshop set in PCI compliance to meet all the safety regulations. And one more big advantage of SiteGround in comparison with other web hosting platforms is that your website is live immediately after purchasing the domain. With other web hosting companies I had to wait for 20 minutes, 60 minutes, and sometimes two days and with SiteGround we can continue at once. For this tutorial I will use to GrowBig account so I click here on and get started and then we need to register a new domain name, if you have one already then you can select this and fill in the domain and you can proceed. If you are new and you want to have a new domain name you can choose it here. If I would say facebook.com and I click on proceed it will say you have chosen invalid domain name. Why is that? Because Facebook.com already exists. So I will choose elePhlox.com, why is that because I will make use of the Phlox theme and the elementor page builder. So I click on proceed and says congratulations and we see this over here it means your domain is available. So we need to fill in some information over here, first your email address, then your password, you need to confirm your password and then here you need to fill in some information. Well I'm from Netherlands so I leave my details over here, first name, last name, my company name and since I'm not from the USA I need to have my VAT registration number and if you fill it in that means you don't have to pay taxes over the amount you have to pay, so I fill that in. My city is maassluis. This is my address where I live right now, my zip code and my phone number and then over here we need to have my payment information and since I'm from a Netherlands I also have a Dutch way of paying and that is great depending on the country where I live there are a few options. I will use credit card so I fill in my details over here. I scroll down and this is important. We have the plan GrowBig. Here's the data center if you want to have a website for people in the United States then I would choose Chicago, but if you want something else in Europe I would choose Amsterdam or London and in Asia I would say Singapore, but they're all great so and this is the important stuff. I want to be upfront with you it says $5.95 per month but after that it says $90.95 and if you have a different plan you see different prices. As you see over here if I would choose a GrowBig plan you see its $5.95 per month but that's only for the first billing period and the period is displayed over here, so if you choose twelve months you get 12 months of web hosting for $5.95 per month. After that it becomes $90.95. If you say 36 months that means that you get 36 months web hosting for $5.95 so you get a lot more discount but you pay more at this moment. So if you are sure that you want to have a website for a few years then I will choose 36 months. If you're not sure then you can say 12 months then you pay $17.40 and I don't know what your services that you want to provide but if I have one Photoshoot or one website I make for a client it's already worth a $19.95 per month for me, so it's up to you. I choose 12 months for the sake of the tutorial later I'll transfer this domain to my GoGeek accounts but now I want to show you how it's done for a beginner. I scroll down here we have extra services and I highly suggest you get domain privacy. Why is that? When you get a new domain name your domain will be registered somewhere on the internet and there are a lot of BOTS and people it will see all the new domains that are registered and then they will spam you with emails like hey, I can make a website for you. I can create a logo for you. I can do SEO for you and we turn on domain privacy they cannot see your email address so they cannot spam you, so in box keeps clean. If you don't do this within 10 days you will have 20 emails with people that want to offer their service to you for $12 per year I highly recommend it and you don't need SiteGround scanner. So the total amount will be around $100 then you need to confirm that you've read and agree to the terms and if you want to you can receive SiteGround news. If you click on pay now know that this is an affiliate link and when you get a website through my affiliate link webhosting128.com you will not pay more but I get a commission and it helps me to create those tutorials so thank you for that. And then you need to click on Pay Now, your order was successfully submitted thank you for choosing SiteGround and now we can proceed to the customer area. So now we have her domain and web hosting. Let's install WordPress, I click over here and here it says set up your new GrowBig hosting account. I want to start a new website so I click over here and I want to have a WordPress website. I click on WordPress, I scroll down I need to have an admin email that is [e-mail]. My username is Ferdykorp, my password and I click on confirm and then over here they ask you if you want to have SiteGround scanner, no so I click on confirm. I confirm everything and I click on complete setup and now our website is made and after a few seconds it says your hosting account is ready to use, proceed to the customer area. I click over here, I go to my accounts and here's my website. What I can do now? I can click on go to the admin panel and now I can log in with the username I just created which is Ferdykorp and my own creative passwords. I click on remember me and I click on login. Our website is not secured yet we all do it later. This is the WordPress starter I don't want to use that so I scroll down and I click on exit. So within a few minutes we have our website up and running elephlox.com is now live. Everybody in the world that visit this website will see this website. Now we've installed WordPress. So if I click over here on my blog then I see the front end of the website. This is how it looks. It looks really ugly this is not what we want but we will change this and if I click again over here I can go to the dashboard and this is the back end, this is where we can edit stuff where you can configure our website. So the first thing I want to do I want to clean things up, it looks a little bit weird in my opinion. So what I want to do? I click on don't show, this again then I go to plugins. And what I want to do? I can use the SiteGround optimizer since I use GrowBig and this will help me to make my website faster but I don't need to WordPress starter so I click on deactivate, delete yes then I go to the dashboard. I dismiss this area, I dismiss this area, I close this, so it look like that. Then I go to this area over here I click on edit my profile and I can change the colors of the backend if I want to. I'll keep it at default, I can fill in my first name, my last name that was a display my name publicity as Ferdy korpershoek alright now you see howdy Ferdy korpershoek. I want to change my email address to [e-mail]. Because if I do so I have linked in Gravatar account with this email address, so I click on update profile and I need to confirm my email so now you see Ferdy korpershoek with my image and if you want to get the same thing I've tutorial about that you can get a Gravatar account. So now I go back to the dashboard. Howdy Ferdy Korpershoek my image it looks really clean then I go to the Settings, General and I can give my site a title, for this tutorial I want to give you as much information as possible and in order to do that, I will create a website about my services photography, videography and web design so my site title will be seen over here and this title is really important for the search results, So what I want to do I want to say photography, pipe, videography another pipe and web design and then I say Ferdy Korp Media because the more to the left the important words are the better they will be found, so if I say Ferdy korpershoek media here at the left people don't search for that if I'm not known if I'm still just starting people search for photography, so I want to be found on photography so that is what I put here at the left. And here in a few words explain what the site is about. We offer high quality photography, videography and web design services. Our address is this one later in the tutorial, we will add SSL right now our website is not secure. Right now we don't use it yet here are I also changed to info, the times zone, the side language, the date format, the time format I like to use this one and in my country it's +1 and the week starts on Monday, I click on Save Changes so that's it. If we take a look at our website it looks really bad, I want to fix that but before we do that I want to create a few pages. So I hover over new and I click on page or I go to the dashboard, I go to pages and add new. They both go to the same page, I close this and here I can add my page title well the first page I want to create is the home page that's the page people will see when you go to elephlox.com. I click on publish and again then I hover over new and I want to create a second page and there is a page called about or about us or about me and I don't fill in anything I just click on publish and publish. Then I want to show my services to the visitors on my website, so I create a page called services. I hover over new click on page and this one is services publish, publish well I have three services I want to offer so I create a page about all the services I offer. So hover over new, page the first one is Photography publish, publish. The second one is videography or film publish and the third one is web design publish and publish. So we have those three services but I also want to showcase what I made so far, so if you're starting a new company you can maybe do a few projects for a cheap price or for free for some friends to build up your portfolio so people can see what you're able to do. So I make a new page and I call this one portfolio publish, publish. Ok then I want to have a blog page with blog posts, so I click on page new blog publish and when people are convinced they want to get in contact with me so I want to create a new page, new page and I call this one contact publish and publish. So if I go to the website now to the front end by clicking here you see the title, you see the subtitle. So I can I get the pages? I have over here in the menu well we need to create a menu for that so I hover over here and we can come to menus or we can go to the dashboard, appearance, menus and maybe you think it looks so ugly a few minutes and then it will start looking better. Here we can create a menu, so we need to create a menu name and I call this main underscore menu you can call whatever you want to call it nobody will see this, but I know when I say main underscore menu it's the biggest menu I have in my website. So I click on create the menu and now I can add pages and other stuff to this menu. How can I do that? I can select all the pages over here and I can click on add on to the menu and there they are. Then here below I can display a location and this is different with every theme right now we use the basic theme that comes with WordPress and with the primary area and if I select this and I click on save the menu and I take a look I hold command or control to open it in a new tab, you see the menu like this, but now I want to change the order, so I go back and what I want to do? If you go to apple.com and you go to Mac and you want to go back to the home page you see no home over here. You can click on the logo. I want to have the same thing with my website. So if I go to the menu I want to remove the homepage. How can I do that? I click on this arrow down and I click on remove. The first page I want to show in my menu is the about page, then the services page, then I have my three services over here. Then I want to have a portfolio and the blog page and a contact page. So I can change the order then I can save it. But what I want to do? I want to create a submenu in the menu. How can I do that? Here are my services and those three services I want to add them to the services menu item, so in order to do that I need to drag it to the right you see a snap like that, I release it and now it is a sub-item. I can do the same for videography and I can even have a sub item of a sub item, so if I bring this to the right even more now where design is a sub item of videography and videography is a sub item of services. I click on save the menu. I refresh the page and now you see this is a sub item and this is another sub item. I drag this one to the left and since I can't stand this appearance, I really want to get the theme we are using. We're going to use a Phlox Pro theme but I want to talk a little bit about themes. A theme is a layout for WordPress and every layout has different features, so we have the information all this text is stored in the website but the theme decides how it will be shown, right now it looks like crap. So if I want have the same information but displayed in a different way we need to have a different theme. Well there are a lot of free themes so if I go to the back end I go to appearance, themes you see that the active theme is 2019 and if I want to change it I can activate 2016. So if I refresh the page now we have the same information but it's displayed in a different way, so right now this submenu look like this, I liked it more but there are also premium themes or pro themes with a lot of extra functionalities and in this tutorial we're going to work with a Phlox Pro theme and in order to get it we need to go to FerdyKorp.com. Then we go to tutorials, Phlox pro tutorial and then I scroll down and I click on get the Phlox pro theme for that we go to theme forest this is an affiliate link by the way I get a commission if you buy this through my affiliate link, so thank you for that. I want to buy this it's only $29 if you take a look at the most themes there are more expensive $60, $59, $39, $59 or what you see at number 10 is Phlox Pro. They are working really hard to improve their product and it's getting more and more sales because the theme is getting better and better. And this is a great deal and the great thing about this theme is that it comes with a lot of page templates with a lot of demos and it works really well with the best FREE page builder in the world called Elementor, so let me tell you a bit about this theme. First I want to go to the live preview and if I scroll down you see a lot of demos so I opened this one for instance and this is what you can import in a few minutes using the Phlox theme and if a beautiful slider over here with a lot of information, you can go to the third slide, nice animations text pops up really nice. If you scroll down your menu is sticky, you can add all this beautiful stuff so you can do a few things you can import a complete website and adjust it using the elementor page builder or we can start from scratch. Well I'll show you both so this is one demo and I think it looks really professional. So everything you see over here in this website we can make it also using Elementor and the Phlox theme, so there's only one demo let me show you another one. This one for instance and here you see that the header is floating a bit which is really nice so the background goes through the menu like this and also this demo is available for you when you get the Phlox Pro theme. Let me show you the backend of a website made with Phlox, so this is what you will see when you create a website using the Phlox theme and Elementor. This is the elementor page builder and you have a lot of free elements a button a video defied our Google Maps etc. I can collapse this we have general elements and we can just drag them over here and adjust them. I will talk about it later but what we also have since we have the Phlox Pro theme if I collapse this one you see here Phlox Pro general. Phlox has made a lot of elements for Elementor and of course some are called the same but the Phlox Pro elements have more options than the free elements of Elementor so with those two combines the basic free ones of Elementor and the pro elements of Phlox pro the sky is the limit you can do so much things which is amazing and these are not even all the elements of Phlox Pro because if you install WooCommerce for instance to make a webshop then there are even more elements that pop up and the element page builder, as I said before is the best free page builder it is and I think it's one of the best page builders when it comes to ease-of-use. You just drag something over here and then you can change the layout, you can change the content you can change the style and you can go to advanced and have even more options and with the Phlox Pro theme you have even more options over here positioning, parallax Pro, entrance animation Pro, solo backgrounds and custom CSS. We'll talk about this but I will tell you that this is an amazing page builder. And one more thing about the Phlox Pro theme here are plugins you can install all those plugins and if I take a look at visual composer if you take a look over here it normally costs 46 dollars. With Phlox Pro you get a lite version for free, so there's not as much features as the pro version but you still can do great things with it the same goes for a revolution slider $26.00 with Phlox Pro it comes for free but also here a free a lite version that can help you to create beautiful sliders same goes for layer slider and a few different plugins over here, except for the master slider over here. This one is for free it normally costs around $24 but you get it for free because the master slider is made by the same makers of the Phlox theme and here you see an example of what the master slider can do. So let's add it to the cart, I click over here yes I go to the checkout, I need to create an Envato accounts, my first name, my last name, my email address is elephlox@freddyKorshoek and I agree to all this stuff over here and I click on next. Here, I can choose a username for instance elephlox, I can choose a password and I'm not a robot and I don't sign up for this stuff. I create an account and I continue. I need to fill in more information and here again I need to fill in EU VAT identification number, if you're from a different place and the United States. So I do that then I click on safe and continue and then I can pay with credit card or a PayPal or with Skrill. I choose PayPal, I scroll down and I click on checkout with PayPal there comes the handling fee of $2 so for $31 we have this amazing theme. I click on checkout with PayPal, so it says you've got mail. We send email with a confirmation link, just click the link to access your downloads. So over here confirm your email to complete your purchase, confirm your email yes, payment complete and I can go to the downloads page and I can download it or I go to downloads and I go to the same page. I click on it and then I click for the installable WordPress file only. Now it starts downloading. I go to the website to appearance and I click on add new and I click on upload theme, I choose a file here it is I click on open and install now. I close this and I see it's at 58% 78 85 and there it is. I activate it and it says Phlox is not activated to unlock all features activate now, that's the first thing I want to do, so I click on activate now. Now can we do that, these are email address it needs to be the same email address that you use here at the envatomarket. Then I click on download and I go for a license certificate PDF or text. I go for text, I click on it and then I need to copy the item purchase code, this one copy. I close it and I paste it over here I click on activate, your license successfully activate it. I close it and then I can go to updates and I can update it now. Then I can go to the dashboard over here, I can close this I can close this and if I refresh the page it looked like this not great a little bit better already. And now we can start configuring everything within the Phlox Pro theme, but before we do that I want to make my site secure. So how can we do that? We can go to SiteGround, we log in, we sign in then I go to my accounts. I go to the cPanel this can look a little bit overwhelming, I select both options proceed and here we have a lot of options. I'm searching over here for l-e-d and it says let's encrypt and this is a free service with in SiteGround for other web hosting platforms you can pay money for it and I want to make my website secure. Over here it says install new let's encrypt certificate and the domain is elephlox.com, let's encrypt SSL and I click on install. Let's encrypt certificate added successfully to the installation queue. So it can take a while before it becomes active and that's great because I need to go to the toilet, so you will see me in a few minutes. So I'm back after a few minutes and I refresh the page now you see it over here. What we can do? Go to select an action HTTPS settings. Now I want to force it to HTTPS and I want to rewrite external links, okay refresh and that's it. Now if I refresh the website it is https and I need to login again. I go to Settings, General I changed it over here to HTTPS and here HTTPS, save the changes. I log in again and now our website is secure. There comes a moment when your side becomes deactivated when you do not confirm that you are the site owner, so I have not confirmed it and now my website is offline. So how do that? Go to SiteGround login and then it says you have pending domains, you can click on view or you go to the email address you sign up with, so right now I need to go to my email account so I do that. So here I see it is now subjected to substantial maybe think oh there's so many spam emails but if you take a look there from SiteGround that's not spam. They're from Envato market where we have bought our theme and they're from Elementor. So outside of that you don't see any spam and that's why we use domain privacy. So I click over here display the images and I want to confirm it over here and I should do that before, if you don't do this on time then it can take two hours before your website is live again. So I say I verify the information and that's it, so I will let you know how long it takes before my website is active again. Well, it took three minutes before my website was live again so make sure you confirm this, let's continue with the tutorial. I go to the back end, I close this and I close this. I go to appearance themes, I remove those things because I don't use many more. Theme details delete okay, theme details delete okay and theme details delete okay. So I need to do a few more things if I take a look at the website in a new tab by holding command or control on a PC and I click over here or here, I see the website here it says nothing found. Well, we have a home page and since we have a home page I want to place at home page over here. How can we do that? We go to settings reading and it says it's shows your latest posts that's because WordPress was originally a blog post creator but now we can also use a static page as the home page, so the home page is home. The Post's Page is blog, I save the changes. Now if I take a look it shows the homepage and one more thing if I go to the permalinks of here settings permalinks, it says they and name and this looks a little bit weird and URL so I'll to fix that, I want to use the post name. So if I have a blog post called Phlox is great, you'll see elephlox.com/Phlox-is-great/ that looks better than with the date and all that stuff, so I save the changes. Let’s take look, if I go to about you see /about so that look great. I go to the back end and then I want to add Elementor that is the free page builder we're going to work with in this tutorial. You can get it through ferdykorp.com, then you go to tutorials, Phlox Pro tutorial and over here it says get Elementor. I click on it and here is a free download. You can say [e-mail], I click on subscribe and download or below you say no thanks I don't want to get updates but I think it's great that you can get updates because Elementor is adding great features every time to their page builder so you can see what they're up to. So I go to plugins, add new, upload plug-in choose a file and here I say I download Elementor 2.3.8 or the newer one, install now. I activate plugin so right now we have the Phlox pro theme with the elementor page builder and that is a great combination. Let's create an amazing website, so if I would go to the home page, I click on edit page over here I can click on edit with Elementor and if I do that you will see the Elementor page builder. If this does not happen then you need to go back, I go over here and I click on exit to the dashboard. Sometimes your screen can freeze they need to go to elementor, settings advanced and then here switch editor loader method enable it and that should solve it, well my case it worked immediately so if use SiteGround I think it should also work with your website but if it does not work you can do that right now it's also loading. We will cover a lot about Elementor because it's the best free page builder. And what I want to show you right now we have a lot of free elements you can drag them over here and do a lot of stuff I will talk about it later, so you have the video element or a button element. Then we have more elements but since we use Phlox Pro there are much more elements and that's the great thing about Phlox Pro, it is created around Elementor. So those two combined what we have right now for our website is a powerhouse of tools. I don't know if that's correct English but it feels like that, so look at this all those elements here you can use them and there are much more options. So if I want to exit this page I can update it if I did something I click over here, I go and exit to the dashboard then. I go to Phlox Pro, I click on it and now I want to show you the power of the Phlox Pro theme. Right now you don't have to follow along you can just watch this. I want to show you how to import a complete website in a few clicks. You can click here import a demo or you can click here demo importer. I scroll down here and I can see all the websites I can import. So if I like this one I on preview and if I like it I think hey I think I want a website like this and change the images all that stuff. I can import this with a few clicks. The great thing is what you see over here for instance when you scroll these images move that is something that comes with Phlox Pro, that's a great addition in the Elementor page builder which you can use when you have Phlox Pro, so I like that a lot. Well this was that looks really beautiful but maybe not for the website I have in mind so I can close this. So if there comes a client to you and he wants you to make a website for him and he says I want this and this and this thing can take a look here and if you see something you like or you find something that suits the needs of the client you can import it so over here I see a nice menu over here, I click on preview and the great thing is the menu goes through the upper section I like that. So if I want to use this I close it and over here I click on import and it's recommended that we insert on a clean WordPress website while our website is clean, we clean it up and I click on continue. I need to install a few more plugins and I don't have to do it manually Phlox will do it for us, so I click on install plug-ins and I just have to wait for a moment. Now I can import the content of the Phlox theme, I can import a complete free build website the one we have just seen or we can select certain data so maybe say I don't want to use the media because I want to use my own media. I want to use everything so I click on import content and it says the process may take between 20 and 30 minutes but that's really not the case it takes a minute, and although it takes a minute I will fast forward. So there it is it only took a minute, we can preview the page and this is how our website looked right now. At Ele Phlox we have this demo exactly as shown. The only thing is that certain images over here you cannot use them so that's why you have a watermark over it. So when you see my watermark you know I cannot use this image and we can configure everything even further. Here we have the blog posts, and you see website setting forward slash content strategy basics. Here I see the image, title, the category the date and the author, the text, tags you can like it you can share it you can add a comment and you can go back up. If I go to the about page it looked like this and if I want to change it again I will talk later about Elementor but I want to show you a little bit of what you can do. I click on edit with Elementor and then I scroll down and then over here I click here and then here at the left I see the information I can change it and we have three types the content so the text in this case, the style and advanced. So I can change this to about me, so here I can change the content I can bring it to the center to the right, do all kinds of stuff with it and then here at style I can change the style, so I can make the text smaller like that in advance we can do things with margin with a background with a border with responsiveness, add custom CSS, use parallax Pro. You see all those things over here are additions that are not in the normal version of elementor so that is great and maybe I think you know what I want to have certain colors in this background then I click over here on the section and then I go to style, you see the background over here and then a background overlay I can have a gradient and again I will talk about this, if I'm going a bit fast I just want to show you what is possible and then I want to change the angle. I want to decrease opacity or increase it and if I update it I can take a look clicking over here. So you can import a complete demo website and you can adjust the text and the style and then you can deliver a beautiful website for yourself or for a client, so that's what you can do. Let me go back to the install we have made to the clean install. We uninstalled the demo then I will show you from scratch how to create a beautiful website using Phlox Pro and Elementor. You can uninstall your demo, I will show you I go to Phlox pro demo importer. I close this I scroll down to the demo you see red button uninstall, this process will erase the images post and settings of this demo, uninstall close and now if I go to the website it is normal again. I go to the back end to settings and reading because I need to select the home page again, save the changes and there we are. Now let's configure our website. In order to do that I click on customize, right now you see home over here so I say command minus or on a PC control - so I see the website as it is in real time but because of this area over here the website becomes a little bit smaller, so I sake month - so I see it as I would see it on a normal screen. So what will I do over here? A lot of things right now if I take a look over here this does not look good. I want to fix this I want to upload a logo over here so we can go to site identity and here below we can upload a site icon and needs to be square so if the width is 512 the height should also be 512 but it also can be 16 by 16. Well if you want to follow along in this tutorial with the images I use you can go to ferdykorp.com, you hover over tutorials you go to Phlox Pro tutorial and over here it says download the images I use in the tutorial. I click on it and they will be downloaded, then I unzip them now I can use them. So I select an image and then I can click on select files and there they are, then I go to number 6 and I go for the fav icon it is 300 by 300 pixels. I open it and I can select it, I skip the cropping all right now you see the logo I think that looks much more professional. Right now over here you see the title of the website, I want to change that into my logo so here at site and it's the hour to upload my logo so I select the logo, upload files select files Ferdy korpershoek logo or the bigger one, I go for the bigger one I click on open and we upload an image you will go to the media library. So here we can upload new files, you can also upload notes profiles and when they are uploaded they go to the media library. Here we can select an image and we can change the title so I can make space over here and what I always do to optimize is for search engines I copy the title and I paste it in the alt text, select. I skip the cropping and here it is it is really small but we can configure that later. For instance here you see the width of the logo so if I would say 200 it look like this I think this is perfect. If I would say 250 to be even bigger but I think 200 is ok so that's ok we have our logo over here and home over here. So I go back and what I want to do now? I want to go to menus and we have our main menu we made it already with the sub menus and I want to assign it to this area over here, so menu locations view all locations and the Header primary menu navigation I select main menu and now we see it over here. There's also a secondary menu and a food or navigation, we'll take a look at the header navigation later. So I go back and I go back and if I want to save it I click on publish and when I close it I say command or ctrl 0. This is how the website looks right now. There's room for improvement but it's much better than the first version of the website we had. So I click on customize to customize it even further right now it looks like this because it's responsive right now the width of our website is this area over here because we have this sidebar but if I make it smaller commend - this is how it looks on a normal screen. So what I want to do now before I configure this header area I want to get rid of this area, so I go to page, page title and I simply turn it off over here. So now we have this header area and the footer area. I go back and I go back and I go to general, general layouts at this moment the general layout setting is full width that means if I make the screen smaller or you have a bigger screen you see those lines over here are totally from the left to the right but if I would say I want it to be boxed then it'd look like this and when you have it boxed you can have a different color over here or a background, so I'd say come on 0 and - and - but I rather have full width like that. The maximum side with well at this moment if I make it smaller again it is 1200 if I would say 1400 you see this is more to the left this more to the right. If you say a thousand it becomes a little bit small, I would say 1200 is okay. Then I go back, I go to website socials and I want to use the brand color and use the brand color as hover no. I want to add a few social media icons so I go to Facebook, I go to my page you are free to like this page of course, I paste it over here then I go for Twitter I don't have it but I want to use it right now, so I copy this link and I paste it and I want to show a YouTube icon, so I go to youtube/ferdykorpshoek, there it is I copy it I think those three are fine. I click on publish right now you see nothing in the website regarding to website socials but we will give them a nice spot in the website in a few minutes. So I go back page animation and pre-loading I don't use it but you can use it and if you do that you see a fade animation like that, fade or cover and you can select one. Then we have page pre-loading, if I turn that on you see a bar over here so I turn it off and I turn it on again and you see bar over here that indicates when the website is fully loaded so if you have a really big website the bar over here will go a little bit slower but an visitor knows when the page is fully loaded. We can add a loading image it can be the logo of your website and here's the progress bar I was talking about it's at the top or at the bottom I like the top. You can change the color but I don't use this I think it's distracting, so I recommend you don't use it but it's a nice option. I go back custom JS code, Google API and SEO. I don't take a look at that I have tutorials about it about getting a Google API key for free and then you can show Google Maps and all that stuff. I go back to appearance, we can have a website background if you use a box layouts content layout this this area I like to keep it white. You can change the typography we don't have to take a look at this I want to focus on the header area over here. So I go back and I go to the header and here's the header section that is this complete area over here. Right now we have the logo at the left and the menu at right and if I take a look at apple.com if the logo at the left and the menu at the right, so I've seen a reason why I should change it. If you want things different sometimes clients say to me you know all my website to stand out from everything else and of course website can stand out but I always advise people to use the main navigation logo at the left maybe a slogan, menu at the right because then it's intuitive for the visitors and if everything is totally different it can be hard for visitors to navigate through your website. But if you'll take a look at the different styles you can have a hamburger menu for instance like this and then you can click on it and it appears like that but I rather use this one, but feel free to take a look at the other versions. This one for instance it brings that navigation to the left and the website to the right but I rather use this one and also for the header we can say full width so if I make the screen smaller now you see the menu is slowly from the left on to the right and if I turn it back it looked like that, I like that better. The header height I think that's okay you can change it here and a search button no. Add social icons so if I turn this on you will see them over here. I turn it off I want to display my logo. I want to have a small border over here I think that's really nice. Do we want to have a Header animation? And do we want to delay it? Well you can do this we'll take a look at this later in this tutorial. We can change the background of the header like that and then we can change of course the text and logo that I'm bringing back to white and if I would make it black for instance I can really simple say I want it to be light over here and then everything is visible again and we can also change the colors manually, enable sticky header if I scroll down I cannot do that yet because I don't have that much content over here, but I like the sticky header that means that when you scroll down on the page the menu still appears on the top of your website and you can change the height I like to keep it the same 85 it's the same height as the normal height and for the sticky we also have a different background color but I think this okay, we can scale the logo of sticky I don't look that I want this to be the same all the time. I click on publish then I go back, I go to the header menu and here we have a submenu like that but I don't see that, you see no area right now it gives his background and I can change that so if I would say this one it is white, so you can choose something else I like this one for instance or this so you can choose whatever you want to have over here. Do we want to have an animation right now it pops up immediately? And here you can see an example I like this one so I selected if I publish it. It should appear different but sometimes you need to close it and customized again before you see the result. So right now it's look like that I think that's great I go to the header again, let me see do the header menu, I scroll down do I want to have a submenu indicator so the visitor will see there's a submenu. I like that but I don't want to have those points here between so I uncheck this one, the submenu location where do I want to show it like this or like this I like this below this line into a pair like that. I go back, the burger menu and what we can do over here we can watch the website through a screen or a tablet or a smartphone and if I would say smartphone I can change some settings over here and I want a burger button to be really big at that. And if I open it, how do I want to display it? I can also bring it to the center like that's really big. I think it's too big so I like it here at the left and how do we want to display it the toggle type, so I click over here like that or like this. It's okay with me like this. I go back then we have the top header bar I want to take a look at that I make the screen bigger again let's take a look the top header bar and after we've discussed that we'll talk about the footer and then we finally we'll start with Elementor and the great page builder, that has a lot of extra options because we use the Phlox Pro theme. I want to display the top header bar, turn it on and you see it over here. Here you can choose what you want to show, a menu at the left and the social media icons at the right or a text at the left. Welcome to your WordPress website and the menu at the right or social icons at the left, the search icon at the right I like this one so I will use that and if you use a webshop you will also see the WooCommerce, icon over here. I scroll down and I want to change the background color and I use a tool so it's called the color pick eyedropper. I click on it and then I can grab every color in the website. I want to use this color, I copy it and that will be the background color so I click on apply and I spoke with the maker of the theme and you will create an option that you can make it white at this moment it's not the case. You can do two things, it looks a bit complicated I can say right mouse click inspect and then here you see the same color as the color of the header icons. I want to change that to white so I say FFFFFF like that normally you will see the result immediately but because the screen is now so small you don't see it. What you need to do? Copy this and maybe it's too complicated for you I'll show you a different way. Now it is white, I publish it I close it then we see the complete page it's still dark I click on customize it is still dark but now if I go to custom CSS and I paste that code it is white, but if you don't want to do that or to complicate it you can go to ferdyKorp.com. If I take a look over here this is still dark but I have a custom CSS code it will fix it so I go to tutorials, Phlox Pro tutorial and here is the code, so I copy this I paste it here at adding CSS and now this is white and this is white okay, publish. I go back to Header and then Header typography the main menu it looks like this I think it's a little bit too thin, so I can change everything over here I can change the color, I can make it red but I don't want that so I bring him back like that or I can click over here so I will reset the settings and then I can change the boldness, that's to bold maybe 500 yeah that's okay. I want to make it a little bit bigger not too big let's see 16 that's okay and I can do different things I can say I make it lower case. I like upper case change this style normal italic decoration, line height, letter spacing you can change a lot over here, I like to keep it at 1 but we also have the submenu and we can also change that I want it to be capitals, so I go to the menu drop-down settings. If I change the size here it is really big so you see it is applied over there and make it smaller also 18. I want to make it uppercase so I go to transform uppercase and maybe a bit smaller like 16 that's okay. So that's how you can change the typography and if you have a logo text over here you can change it over here site description and the menu active item how do we want to show that? I grab this color again, copy it, close it and then I go to the active item and I say the color should be this one, choose, publish I close this and if I escape or close it over here and I go to about you see it is blue, so in that way you can see on which page you are you also it here /contact. I want to take a look at the footer so I click on customize, so footer and I go to the footer here how do we want to display it? We can show something here at the left something at the right. I want to have this text in the center so I click over here well tomorrow it's 2019 but with this code it will automatically update the year it is I will remove this and remove this and then I want to say setting pipe Ferdy Korp media then another pipe and then you can say for instance privacy policy and you can have a link to that and if you want this to be a link you can copy this over here, click on publish go to a random different page in a new tab. Then go to the back end, to posts Add new. The title doesn't matter I stopped writing over here. I paste this text I select it and then I make link over here /privacy-policy/ and I say enter then I click over here. I say edit as HTML and then I copy this area without the P stuff, so from here until here copy, I close it I leave it and I select this and I paste it. So now it is a link. You need to create a page called privacy policy in order for this link to work but that's how you can do that. It's a little bit complicated but, but I've shown you step-by-step how it works. I click on publish and I think we are good to go. Let's talk about Elementor because it's such an amazing tool. So I close this there are more options we'll take a look at that later, for instance blog related settings or portfolio related settings. Now I want to go to the home page or click on the logo and I make the screen 100% again. All I can do now I can say edit the page and now I can say edit with Elementor so if I click over here, I open the elementor page builder. So let me introduce you to the elementor page builder. What does it do? Well, the elementor page builder has three parts. The first one is a section. It's like a wrapper, so if I click on plus over here I can select a structure of a section, so if I select this one you see this blue line over here and that means that this is a section. In this section I can have columns that's the second thing within the elementor page builder, so we have sections and in those sections we can have columns. So, we have one section with one column and if I want to write mouse-click I can duplicate the column and now we have two columns in one section. So the first layer is section. The second layer is columns and the third layer is elements. Here we have a lot of free elements for instance the heading, I can drag the heading over here in a column or in a section and then I can change the content bring it to the center, change the HTML tag. Then its style, we can style with, we can make it bold we can give it a different color and then at Advanced we can do even more things with it. Add some margin like that padding. Style I can make it bigger, smaller, transform uppercase here at the content I can bring it to the right. So there are three parts again the first one is a section. In those sections we can have columns so this is one section with three columns and in those columns we can have elements and we have three elements that comes with the elementor page builder and we have the pro elements of PHLOX Pro. So I can drag this over here and in this part of the tutorial I was showing from scratch how to create an amazing web page with Elementor. So I want to remove everything but before I do that normally when you hover over here you get a few options. All right now that's not the case and I want that because it works easy so, I update it. Now I save this layout I click over here I go to the dashboard and then I go to Elementor. Let me see settings, advance and then here editing handles show, show editing handles. When hovering over the element edit button save the changes. I go to the website. I click on edit with Elementor and watch this. Now when I hover over this area you see I can duplicate it. I can create a new column or I can remove this column. So also over here I can duplicate it or remove it and at this moment you don't see the upper area, but if I would create a new element with three column for instance you see those settings. Here we can add another element. We can edit this section so if I click over here you see the settings of the section. I can duplicate it and I can remove it, so and if I can't find this because this menu is in front of the handle over here I can do a right mouse-click navigator with this thing you can do amazing things for instance right mouse click, delete this section but I'll show you later what you can do with it. This is such an amazing tool you can stick it to the right. I'll show that later. Okay let's create something beautiful. This tutorial is for beginners so if you're a new to elementor, I will show you some basic stuff so you get to know how the page builder works, but if you're familiar with Elementor this can be a good refresher. You know Elementor is updating their page builder all the time. Things are changing things are becoming better so I think you also benefit if your familiar with Elementor. So I've shown you a bit about the basics now we're going to put it into practice. So I have my first area over here. I click here I want to go for a nice hero1:05:32 so I click over here, and what I can do? I can go to style, backgrounds I can say background type classic. I can have an image or color I want to start with a color and here you see a few you colors I can choose from, so no matter where I am wherever I can choose a color in the website so for instance here I see this palette of colors and I want to change that. How can you do that? I go back over here to default colors and it gave me that it says over here that you cannot change it that you need to go to the settings. This if that is the case just click on this link and there are two check marks and then it says disable default colors. I uncheck it and disable default font size I uncheck it, save the changes and then I click on edit with Elementor and now when I click over here and I go to default colors, I see those colors. I want to change the primary color to a color I have in my folder with images, so here at number 6 I go to color codes and I grab the blue one, copy it. I paste it here then I grab the green one copy it and I paste it. Then I want the text to be a little bit darker you know what maybe 555 like that and then the exit color I want it to be the same as the primary color, so I paste it like that and I click on apply. I go back and then I go to default fonts. I change this one to a Raleway. All the headers and all the titles on all the menu items I want them to be Raleway, Raleway and if you want to take a look at all the google fonts you can go to fonts.google.com and here you can see I only want to see this sort of fonts or only display or mono space or San serif, I don't know if I've pronounced the right and here you see how it looks you can change the style. You can say I want it to be alphabetical, make it bold and then you can see how its looks in if you like it. Then you can select that font over here. I go to the body text and I want it to be Open Sans and also the action text Open Sans and this is how both it should be the weight and I think this is perfect. Also this one 500, I click on apply and then the third thing I go back and then we have the color picker and that was what I was talking about those eight colors that you will see everywhere where you can pick a color. So I go back default colors I grab this one copy it, I go back to the color picker and it will be the first one because I will use this one the most then and I grab the second one, the third one is 555555 and the fourth one is black or six times zero. The fifth one is white and those ones are also white because I don't use those, apply so that's great. You also can choose some color palettes over here but I like this one. So now if I'm here at the section and I go to style, background color I can choose the blue color. Now you see the area of the section so I'll leave it this color for a moment. I go to layout and what you can do now you can stretch section. So if I click on this then it's over the complete width of the website, so if I make it smaller it is still over complete website. If I would turn it off it will only be within the borders of the width of the website and I wanted to be full width, but the content of the website you see that line over here it's still boxed. If I would say full width then you see also the box you're totally at the left. So if I have a text over here you see it starts totally at the left maybe I should make it a white, so here it's at the left and if I make it smaller it's still at the left but that the section I wants to be box so now it's within this area I like that you can also have a different content width so you can have it really small and then it will be smaller mm-hmm. No, then we have the height that is important. I can say, minimum height I can do it through pixels so I say 200 pixel high or I can say vertical height in percentage, so if I would say 50% it's like this and if I would say 70% like this that what I don't like is when I say fit the screen that it is more than the screen as you see this area over here when I scroll down it's still blue and that is because of the header area. Elementor does not recognize it yet so it's just having some extra space so that's why I never use fit to screen. I say minimum height, pixels how about 450 something like that yeah that's what I like. I say, right mouse click delete and what we can do now I can update it of course and if I want to see it I click on the eye and I don't like that you can see it in the same tab. I wanted to open in a new tab so maybe if I hold command or share or control on the PC but maybe it's for some good reason, but you also can do if you have to see the result click over here. So that's what we will do from now on, open it. So what I want to do? I want to add an image as a background and I will show you what is possible using image in the background. You can go to iStockphoto.com and buy a picture for $30. You see there are great images if I would say City, enter you see beautiful images but they cost money. So if you want something that is free they can go to pixabay.com and if I search for City, you also see beautiful images. If you see something you like you can use that, so maybe I want to show something with a laptop or with a group of people discussing things, so I can say group of people and then maybe office something like this. I like that. You also can go to pexels.com, let some beautiful images or unsplash.com. There are also beautiful images, images you can use for free without giving credit to the owner. I like this one you don't see faces and you see people are working on something having a cup of coffee. You can show a little bit that you're a relaxed company you know we do photos, videos, websites and we buy cappuccinos and all that stuff. So I click on free download, I choose the image and actually this is the perfect image so what I want to do I will choose a different image so I can show you how we can crop things. So I go to pexels.com and I search for group of people at the office and there's the same image, so I get it and over here I think again get it with a bigger size. What I always do? I rename them so I say Ferdy Korp Media Photography something like that. I bring it to the desktop then I close this. I close this and I want to go to the dashboard so I click on exit to the dashboard and that's only because I want to make my images smaller. I go to media I click on add new select files and here it is and you see it's really big. So if I open it, it takes a while and I click on it you see it's 1 megabyte that's a lot for creating website and this dimension is bigger than 4K, so we need to make this smaller and I want to create a different aspect ratio right now this is probably 4 by 3 and aspect ratio and I want to change it to 16 by 9, because that is the size of most screens. First I want to optimize the image, remove the dashes, copy it and I paste it at all text that's what I do all the time. I close it I open it again and still like that. I want to click on edit image. What I want to do first? I want to make a selection within this image and I want to have an aspect ratio of 16 by 9, so I select that now I can make a selection and here I see how big the selection is, so I like this area, I want to see his face a little bit. So I bring it to the top and then I click over here to crop it, so I click like that and I click on save, but you see the image is still really big. So I click on the Edit image again now I want to scale it down to 90 20 and then this will become 1080 and that's perfect this is what I use for backgrounds 1920 by 1080. I click on scale and that's it. I close it and if I click on it it is now 1920 by thousand 1080. Right now it's 181 kilobyte. That's so much less than one megabyte, so I close it I go to the website. I click on edit what Elementor and I can do a few things. First I can select this element and if I do not see it right mouse click, Navigator I click on the section and here I can edit the section. I click on style. I go to the color and I say clear. So there's no background color. I can say I want to have a background image like this. I can select it insert the media but you don't see the whole image. So here we can choose the position center, center for instance but I want to see everything then I can go to size and I say cover and this is what I like and what I also like is attachment fixed that means that when I scroll the image stays in place and that is such a huge feature for a free page builder I really like that, but we can take things to the next level. I close the background and I go to background overlay and now we can go to a gradient for instance. I can choose the first color. I don't know what happened but the colors are a little bit confused but I click on this one and then the second one also blue but then know a bit darker. Let me see like that then I can change the location so maybe the darker area should have 90 percent or of the location. I like it to be 50 in the center. The type is linear from this place over here from here to here or I can say make it a radio so it goes from the center to outside but I like linear. I can change the angle right now it's from top to bottom if I change it to 90 it’s from the left to the right. I can change the opacity. I can bring it totally to the right or totally to the left. Right means fully visible, zero means not visible. I want to change the colors I don't think they match. Let me see, maybe this is better okay and then I bring back image a little bit. Then we can go to blend mode and I can say multiply and that means that the overlay colors and the background are blending somehow. I can darken it, lighten it and you see it gives you a different style. You can do even more things, I'll bring it back to normal later I'll show you how you can take things to the next level. If I go to CSS filters I can do even more. I can change the brightness, contrast, saturation you, you can change a lot you don't need Photoshop anymore I'm just showing how to do this with a free image and free tools. So I want to bring the opacity a little bit up like that and it's okay. What else can we do we have a shape divider here. If we click on it and I go to the bottom. I can say I want to see mountains like that and I can adjust everything, make them bigger make them higher or you say drops triangle. So you can take a look at a few things I like this one tilt opacity. I can change it, change a height so I like that a nice way to display things. You can also do it all at the top maybe the opposite direction, flip it or like that but I think that's too distracting, so I see none only at the bottom. What else can we do? Since we have a section over here we can drag stuff into it so I drag a heading over here. And you don't see it because the color is blue and here we can change the text so I can say Ferdy Korp media. I can add a link so if people click on that they can go somewhere, I don't want that. The size I leave it as this we can change it at the style. HTML tag leave it at h2 because I want to have an h1 title with some keywords Ferdy Korp Media not my keyword people don't search for Ferdy Korp Media when they don't know me and they want to find a photographer, so I don't use that as h1. I bring it to the center of course and I go to style, first text color of course I make it a white. Then here with the typography and we can really make it stand out by making it bigger. I can make it bolder 900 maybe too bold I can transform it to uppercase. I think it's too bold, yes I like that and we can change the letter spacing and all those stuff, line height I leave it as this. We can have a box shadow, increase it horizontal, change opacity or make itself in totally different. So I bring it back by clicking on back to default and I don't want to have a text shadow. I can also say I want to blend this with the backgrounds but since it's white you don't see that much results. Now you see better but I don't want to use that I want to keep it clean and simple so I say normal. So what is next? I go to the elements I can do that by clicking on this icon and I can scroll down and I see a divider. I want to have a divider. So I drag this here below and what you see I can see where I can position it above and then becomes blue or below, so when I release it I know it will be below Ferdy Korp Media, so I release it and I barely see it. So the first thing I want to do I want to make the color white because I don't see it right now. Now you see it a bit better then I want to change the weight to four so you see it better and then we have the style. Right now it's a solid line I can change it to double dotted or dashed. I like solid and the width in percentage I can make it smaller and it goes to the left. I want to change the alignment to the center so I can do it in percentage or in pixels so I can say 250 and drag it to the right, maybe something like this and then a gap above and below I can increase it or decrease it. I decrease it, I also can take a look at a smart phone whenever I see this icon I can change it, right now you see it our tablets and you see it here on a smart phone a lot of smart phone of course I can change all these things where you see those icons. So on the smartphone I want it to be like this and then again on a tablet that's okay another full screen, it's also okay. What I can do a right mouse-click, duplicate this element I can drag this one above between those, so I click over here on this element and I change the text to photography, videography, webdesign and I want to make it a bit bigger because I think is really small that's a really stupid joke. I want to make it smaller of course like this but that's at all I also want to change the weight to something like 300. Let me say 400 maybe yes maybe a bit smaller no that's okay, update. I click here and this is how it looks. What you see is that there's more space over here than here and that's because of the shape if I'd (1:26:07 Unclear) over here we can fix it in a minute. What I want to add now is a button not only one button I want to have two call to actions. The first one is I want to show people what I'm capable of so I want to place a button to my portfolio. The second one I want people to get in touch with me. So I click over here to open it again. I go to the elements and here is a button so maybe I think okay I want to have a button this one is at the left and at the right I want have the other button so I direct another button but then they are below each other, so maybe I think you know what I click here. I align it to the left and now it should be next to each other but that's not working. So how can we fix this? Right mouse click delete, right mouse click delete. I want to make use of an inner section because in a certain area a section or a column you can only have elements below each other but using an intersection, I drag it here I have two areas again so I go again to the button and I drag it over here and I align it to the right and the same thing I can do with the second button I drag it over here and then that way I have two buttons next to each other, using an inner section. So what I want to place over here? Well I said before, portfolio and here's the link /portfolio so that is actually elephlox.com/portfolio okay, the size is medium and I can have an icon so let me see. I want to have a check mark so I search for check so then maybe people start thinking hey this portfolio is good but because normally this is what we seen as something that is good about a product or great feature. So I used to check icon. I can position before or after before spacing between it's nothing but that's possible. Then I go to style the text color is white I can change it to white oh it's already white but the background color I want it to be green. Do I want to have a border? I can have a border if I want to but I don't use a border over here. And we're gonna have a border radius so I can say 20 and then it becomes a button like this or I can say zero that's the square, if I say nothing you see there's a little bit of rounded edges I like it. We can have a shadow again but I don't use it. I bring it back and here we can change the padding so if I uncheck this I can say at the top I want to we have 30 pixels, at the right 100 then 30 and then 100, so in that way you can have a lot of freedom to create the button you have in mind. I'm happy with the results you had already so I checked this and I remove it, so now it's the normal size again. Here you see hover what happens when you hover over portfolio. I want to change the background color to this blue one, so I hover over it and becomes blue and I want to have an animation which is shrink like that. What I can do now? I want to style that I'm just made to be placed on this button. In order to do that I do a right mouse click, copy and the right mouse click paste style. So I click over here, I bring this to the left I have to style and I want the background to be blue and when I hover over it I want the background to be green, update let's take a look like that the only thing I want to add is an icon and the text I want to change that of course, so I click here content and I say contact/contact and then the icon the first one okay, update. I still think there's too much spacing over here. So what I can do? I can go to the section navigator. I select the section and I can change the height maybe that will help, it does but I also can go to this element over here or to the column. I go too advanced. I uncheck this area and at margin-top I say -. What you see now is that it's getting up. So I can make my website pixel perfect the way I wanted to be and that's really nice when I made websites using HTML CSS, it was so hard to do especially since everything had to be responsive, but with Elementor you can do this really easily. And since we're talking about responsive. How does this look on a tablet? Right now it looks nice but how does look on a tablet well let's take a look I can click over here screen, tablet. This how it looks on the tablet and on a mobile it look like this. I don't like that so I click over here. I go to style, I click on typography and there I see the size of a smart phone, I can change it to something like this and then we have the line for smart phone I want it it's okay and then we have this area. And what I can do now? I can go too advanced and I can go to responsive and I can say hide only mobile, because it's just ugly. So I do that then I do right mouse click duplicate, now we have two. What I do now? I click here. I remove the pipes and I make a enter a hard enter like that, then I go to Style, typography and I go to let me see I've changed this I close this and I go back to typography and I change the line height, so there's a bit more space and then I go to advanced, responsive and I show it on a mobile but I hide it on a tablet another desktop. So this item is shown on a tablet and on a desktop and this item is only shown on the mobile. So how will that look, update. Let's take a look preview changes. Right now we see it like this. If I make the screen smaller we see like this in tablet view and if we make it even smaller, it looks like this and then below each other without the pipes and maybe think but here you didn't see that well but there are no screens that have these sizes. So you have this size, you have this size and you have this size, so don't worry about that but what we saw edited with Elementor is that the buttons are still looking weird on a smartphone. So I click over here mobile. I go to this button and I say bring it to the center and also in this button on the mobile I'll bring it to the center, update. So that's how you can make things responsive. I like it. I want to make the screen a bit bigger so right mouse click navigator, I select the section and I want to change the height like that update and now we see twice because this is shown on a mobile and this is shown on a tablet and on a desktop. So what I want to do next? I want to create a new section but this time with three columns. So I click on it and I go to the elements. So what I want to do? I want to show my services, my three services photography, videography and Web Design in those three columns. So I scroll down and I want to have an icon box so I drag it over here and this how it looks and we can configure this and you see every element has its own content settings and style settings. So the icon I want to have a camera, I like this one. How do I want to display this area default or stacked or framed? If I say stacked I have two options, I like this one, and you see this color it's automatically blue. How come? Because over here defaults colors the primary color is this blue color. If would change it you see it's also changing over here. So it's really nice because a lot of things are immediately in your style. I click over here so I go to the settings again circle and this is the heading, photography. So I have a text over here I replace it and you see it over here. I can link it to a file, so I say /photography, so it goes to the photography page. I can align it to the left in the middle and to the right. I wanted to be in the middle and I want to title HTML tag to be h2 okay. Then I go to style, the primary color is white and the secondary color is blue. I like it as this then we can change the spacing between the icon and the text. I can change the size over here of this thing not too big. I think this is great. The padding and we can even rotate it. The border is we have the border and when you hover over it, you can do some things. We can have an animation where you change the colors to something green for instance, but I like a hover. I like the grow again, so when you hover over it, it becomes a bit bigger. Okay then we have the content, first the title. I can change the alignment. I can justify the text I like it in the center, we can change the spacing. I think this is great. The color of the text that's fine with me, the typography I want to change it to uppercase like that and then change the size something like that and maybe a little bit more letter spacing not too much. Okay so that's what we can do. Then I want to add something else below it so I scroll down let me see I want to have a gallery or an image carousel. I drag it over here below you see the blue area so I release it and there it is and now I want to add a few images, so I click on add images, upload files, select files, images tutorial, home and then I go to photography and I grab all those images command a. I open them and as soon as they're uploaded I can optimize them so I can remove the dashes, like that and I can optimize it over here you see photography it's not the all in English. This learning is wrong, Photography Maassluis, Maasland, paste it. Studio photography, Rotterdam copy/paste and the latest one wedding photography sounds probably 2017 copy/paste and I can create a new gallery. Here I can change the order if I want to. I can reverse the order I say insert into the gallery and you see the result immediately and we can show it like this and we can play it automatically but what I rather have is to show the full images. So here we have the size of the images right now it's a thumbnail and I like to use medium/large not too large because it's a small screen. Then how many slides do I want to show? I want to show only one at the time like that and do I want to stretch images no I like to use the same sizes for all the images otherwise weird things can happen in your website. If you have an image like that and after that comes an image that that's the height of this area, so extra more space and I'm here reading something and the image changed then the website goes up or down I don't like that. Do I want to have a navigation? No, I want to link it to nothing and I don't want to have captions, additional options pause on hover no, autoplay yes, autoplay speed every five seconds a new image will appear, I can all say four seconds infinite loop so after the last image the first one appears again yes and I don't want to have a slide effect but I want to have a fade effect. So let's take a look now it fades yes and it can be a little bit slower so I say twelve hundred one point two seconds like that and the direction is irrelevant right now because we don't slide it but we fade it. Then we can go to the style, create a border but I don't want that so I think I'm totally happy with this. Then I want to add one more thing over here I go over here and I drag a button below. What I can also do right mouse click, duplicate and I drag it over here right mouse click delete. I click here I bring it to the center I change the icon to camera, just like here and I say more information or more info and then I sent them to /photography/. When I hover over it it becomes green and looks like that I like it, update okay. What I want to do now? I want to duplicate this area, so I hover over here duplicate and duplicate. This one I want to remove and that's how easy this that's how it can work. I like it a lot. Then over here I will change it quickly do something with film maybe in different camera, video camera yes stacked circle and then I say videography, I paste the text. I scroll down more info and then I change it to videography and I want to have camera and again the video camera and also here, I say web design I paste the info. I change this to webdesign/ and the icon, close this and I grab this one then I go over here and I also say remove and then this one okay. I want to change the images over here so I click here. I click on one image, I remove them all and then I click on select files. I go to home, folder one web design and I grab them all and if you take a look they're all the same height and width. They're quite big actually 1920 by 1080 and again I would always optimize them but for the sake of the time I will leave it right now, so you can do that. And then we see the website we have made, but here we have nothing to show. So what I want to do? Right mouse click delete I want to add a video so I go back over here and I can also search over here for a video and then I see you few widgets and I want to use this one. I drag it over here and I can use a YouTube or Vimeo or dailymotion or self-hosted. I use a Vimeo and in the folder with images I can go to portfolio, film, Montana I see the Vimeo link over here. I copy this one I close this and this and this and then I paste the Vimeo link and there it is. The start time I can say I want to start at 10 seconds in the video but I don't want that I want autoplay I like that. I can mute it. I want to mute it I can loop it and the control colors I don't want to control color so I uncheck everything or exhale control colors, make them completely transparent. I don't know if you see them then or not then the image overlay. Do I want to have an image overlay? No, I'm ok with this, so I say no and especially since I am starting the video already so that's ok. Let me see can I do something more? Now that's it, I go to style aspect ratio. I can change it I can add CSS filters I may called the video blurry, change the brightness it's great what you can do but in this situation I don't think I need to do, so I don't do that but I update it and I take a look Ferdy Korp Media, photography, videography, web design, portfolio, contact and other colors are great I don't know whether this they all take a look at that in a minute. What I don't like is that the text is like this so it's not even there are more lines here and more lines here. So let's fix that I edit the page with Elementor and let's do with the amount of text I have. So I scroll down and maybe we can fix it a different way. What I will do now? It's a little bit crazy but why not, I click over here then I go to advanced and I uncheck this and then at margin I say bring it to the -. And what we will do? We will create a cool effect, the section has no background yet so we can create a cool effect with this, let's see. So I say you know what - 150. So what I can do now? If I go over here to this element the icon box I can go to advanced and here at backgrounds I can create a white background, updates when I do that you get a nice effect here but what I don't like is the padding over here, so I can fix that. I click here on the icon box and it's directive, advanced and then add padding I can increase it like that, but it's also increasing it at the right at the bottom and at the left so if I uncheck this I can say at the top I want to have 20 at the right I want to have 10 at the bottom I want to have 0 and at the left I want to have 10 like that OK. What I can do now right mouse click, copy and then right mouse click paste style and then it's adjusted like that. Also here and that saves you a lot of time so if you change something here you can copy and place the settings you have just configured. What I see now? This is close to this area so let me bring it even further up on top - 200 and the same I will do for this column. I click here, advanced and I want to go to minus 200 update. Let's take a look and I like it, so when you see the page immediately photography, videography and web design I like it so what else can we do I want to give all this stuff and animation. How can we do that? I click over here. I go too advanced, I scroll down to entrance animation Pro and I can choose a lot of animations for instance, fade in left like that. Then I can say the duration is two seconds and the delay is nothing. I go over here to the divider advanced, entrance animation Pro and I can say you know just zoom in two thousand seconds and it comes after 1/4 of a second then we have those two, advanced entrance animation, fade in from the right two thousand and five hundred same goes for this one, fade in from right, 2500 and then those two I also want to show you a different way of the animations, advanced and here at advanced you can say entrance animation and this from the free version of Elementor fade in from the left and then I can say slow like that and after one second, so a thousand million seconds and here advanced entrance from the right slow after 1250, so a little bit later than this one. Then I want to use this one entrance fade up, fading up normal you know what after one and a half seconds, then this one fading up after two seconds and then this one after two and a half seconds. Fading up to 500, update. So let's take a look preview changes, do look like that okay. I think it goes a little bit too slow so I click on edit with Elementor advance, duration four and four and those two also four. So how does it look? Its personal preference but I rather have the text to be totally from the left so I go to animation over here from PHLOX Pro, I say noon. Now I use the advanced one say fade in from the left slow. Also this one advanced nothing from the let me see from the right or zoom in slow. If I slow also over here yeah and then this one from the right. Turn it off over here. Turn it down from the right slow. After how many seconds? One no 750 maybe, also this one for five hundred so I go to this place and say five hundred. Also here exactly the same thing, remove it here advance from the right slow and five hundred, update. Let's take a look, I like it but what I don't like is that you don't see this that well. So I'm going to decrease this area a bit edit with Elementor. Right mouse-click navigator, section l say for 450 close it and then likely here. I'm bring this to 150 and then this one advanced a little bit higher - 230. What will I do? No, that's too much I like this area but this is too high of course. Edit with Elementor, what would happen if I say 160, update let's take a look. This is great I love this. One more thing I want to decrease the margin over here, so I click on edit with Elementor. I click on the divider, advanced margin - let me see and then I go to content and make it to, update and this is how it is. We made something beautiful with the free version of Elementor. Here you see the images and the great thing is that those images will fade at the same time and in between we have a video that's playing lets mute it. All with Elementor and I really like it I also like this area over here I like the animation. This is what you can do with PHLOX and Elementor. You see that those colors are great so I want to make them blue manually. I click on edit with Elementor. Here they are blue I click on them, I go to style and I go to the primary color and I change it to blue, right mouse click copy, paste style and paste style update, let's take a look. Now I am going to a new tab again I'm happy with that and now it looks fine. So this is what we've made so far. So we've added our logo. We have really nice menu with a submenu. We have a sticky header. We have nice animated title with a call to action to the portfolio or to contact and we show our service photography videography and web design with more buttons. So I close this and now I will show you some different ways to import pages to speed up your workflow. I told you already about importing a complete page. So if I click over here I can go to my templates and I can import those pages but what you also can do is go to pages and over here you can import a complete page and some are for the pro version of Elementor and a lot are for a free version. So if I like this I can say insert and maybe I want to have only one section of this page. By the way if you click on a page you can view it. So let's see what we got. Maybe I like this area what I can do then and close this, this one, this one below like that but it's not in the style of our website and it has rounded corners I don't like that. So I click over here, I stretch the section the content is boxed but I want to change the color. So I go to style. What I can do then? Right mouse click over here, copy right mouse click paste style. I don't want to have the background image so I delete it and I don't want to have the shape divider so I go over here and I hope that through the video you get to know the theme better and the page Builder so you can find what you need when you need it. So right now I see here's the shape divider. I hope you get to know where everything is placed so you can speed up your workflow. Here I do a right mouse click copy, right mouse paste the style and now it's here at the right. I can bring it to the center, let me see Center and I can make it capitals. So that's how I can use things. I think there should be a little bit more space over here so what I can do. I can go to this area, the section advanced and add padding button. I uncheck this I increase it a bit something like that. So that's what you can do. You can also search for free Elementor templates and here you see 500 plus free elementor template blocks. If Katka template pack. So you can just go over here, you can download them and then you can import them as I've shown you before. So let's talk about Phlox Pro. What you can do over here at basic this is everything to do with the free version of Elementor. I can collapse this. General I can collapse this. Now we have Phlox Pro general. If I take a look at the modern heading. I drag it over here then it goes to a new section. It is a normal heading as the free one in the elementor free, but over here you have more settings so it's more advanced, secondary heading. You can have a description so you have more options and that's what Phlox Pro is all about. It is about empowering the free Elementor page builder. So here you see a lot of Phlox pro elements created for Elementor. Like this over here and over here but that not all. If we go to the dashboard. We can go to Phlox Pro, plugins and we need search for elementor elements pack, install plugins and this blew my mind. It says, it's activated so I go to the website, edit with elementor. I scroll down and I collapse this, I collapse this and here are the Phlox pro elements I just showed you and these over here and these and these but, now here's the element pack, Phlox element pack and there are even more things. Look at this so many great elements price table, progress by, post list, protects content, scroll navigation so here at the site you can click a link and scroll to a certain section, social share, and scroll button. There is so much more with Phlox Pro and that for such a cheap price. There are elements over here that even Elementor Pro doesn't have, look at that all these additions. So I really like that. OK let's take things to the next level using Elementor and Phlox. What I will do? I will create a new section with two columns and in the first column I will go to the elements. I want to have the intersection, so I drag it over here so I have two areas I delete one. So now I have a section in a section and I do that because within a section I have certain settings I don't have within a column. I'll show you, first I go to the section over here to the Settings, full width, the content width, also full width. I go too advanced and I say padding zero. Then I go to this section. I click on it, content width, and full width, advanced padding 0. Then I go to layout again and I can change the height to minimum height of 800. So if I scroll down this is 800 pixels. Then I want to use an image in the background and this is by the way in about us section. So I go to style I want to have an image about myself but I want to show you what is possible with CSS with certain styles and filters. So at the background I want to have a gradient with this color and the second one also this color but I can grab it from here, so I click here style, background overlay. This color I will copy it and I will use it here. I go to this section settings, style the second color is this one okay, this okay. Then I go to background overlay and then I want to add an image so I go to background overlay, background type, classic and I add an image. I upload a file, select files. I go for a DV photography, open, optimize it. I insert the media and there it is and you see it's here twice. So what I will do? I'll say size cover, it's quite big. Position center left, it's not working at all or you know what center center, so there's me and now if I go to opacity I can change it to full opacity or transparent, I'll leave it at 0.5 but what I also can do I can use CSS filters. So I can blur this, I can make it brighter or darker. I can increase or decrease the contrast, increase the saturation give it more color and change the you. That's not all. I can also choose a blend mode, multiply so it will multiply with this background gradient and with those three tools the background, background overlay actually four tools, CSS filter and the blend mode you can do crazy things that you can also do when in Photoshop, but that's not necessary anymore. I want to make it a bit brighter or change screen mode, overlay darken, lighten, color dodge. So there are a few possibilities. I like luminosity but then I want to make it a bit brighter, so I can do it over here. No, let me see multiply maybe screen and then a bit more contrast and darker. I don't know man but you can do a lot of things with it okay. Then I go back, I close this and I go for an advanced image. I drag it over here, there it is I click on it and I want to use the same image. Insert the media and now I go too advanced, I say zero padding. I go to positioning and this is the power of Phlox Pro. I click on absolute and now I can change the position really easily, so I bring it a bit lower, I can bring it to the right or like this. Then I want to make it smaller by adjusting left maybe a bit more to the right that's how you can play around with this stuff. So you see it in the background and you see it over here but now, what I want to do? I go to parallax Pro. I turn it on. Parallax origin is the middle and I say 0.3 update and this is what I really like about Phlox Pro. We have our website all the animations. I scroll down and now you see the background but you see this image is moving. I really like that effect I've never seen this before on a lot of page builder or theme. So I like that and then here at the right I want to add a modern heading. There it is I want to say about no links HTML tag is h2. I want to display a divider before the heading. Then I can go to description nothing and secondary header and then this about me. Now highlighted or off the text no link, HTML text h3. I go to style, the color I want to make it black and I want to change the topography, change the size to 60 make it bigger, make it bold, and make it uppercase that's it. Then I go to the secondary header, make it black make it bigger 50, you know what just 60s the other one, uppercase, bold, uppercase like this 300 like that okay, close it and then add margin. I uncheck it or at top and do a minus. So it shows like that and then here at the left I want to increase it to 150 like that and I close it. I go to the divider you don't see that you already see the over here a little bit. I want to change the weight to 3, the width to 100 the margins to 60. I uncheck this maybe it looks a little bit weird right now but we will fix it in a minute, 35 0 and 0. The color should be blue then I go to advanced, uncheck this the margin at the top is 50 and then I go to position, positioning and I like it to be relative and then at the left, I say minus 60. Then I close this and I go all the way to custom CSS and if you click over here on custom CSS you'd it says you need Elementor pro, but with Phlox Pro you also have custom CSS, which is really handy. I don't have a lot of knowledge about CSS either the course I think 10 years ago but since then I almost never use it, but I know a little bit about it. So we go to Ferdy Korp to get the codes, so you don't have to write it yourself, tutorials Phlox Pro tutorial and then here Header with divider. I copy this, close it and then here I paste it and that makes this cool area like that, update. So this is how it looks, I like it and I want to bring it a little bit more to the right. How can we do that? I select this over here, positioning drag it a bit more to the right like that. About me, update then I go back and I have another heading like that and the title is Ferdy and then there's the description and I will add some custom text, so I go to dummy text. I have a generator over here, I copy this, paste it few enters. What I can do now? I can go to advanced positioning, I say relative at the left. I drag it over here and then I go to Advanced padding right and I increase it to 185. It's now it looks like this and then I want to have a button try dragging button over here or command Z if I don't want to. If I want to undo it and over here and here right mouse click, copy, right mouse click over here paste, it will be placed below and then I bring it to the right, more info to about - me, update and this is how to look like, or I bring it to the left, I say advanced, padding left and I drag it like this to the right and in that's way you can make it pixel perfect. But how does it look on a tablet? Over here advanced, I scroll down to position, I'm bringing it - a bit like that about me and I'm here I can say you know what, advanced parallax Pro and I can say only disabled on mobile. So it should now work also on a tablet and then we go to the mobile version and then I can say, I click here advanced, responsive hide on a mobile. Then with this text I click on it, advanced I go to positioning and left bring it like this to the center. So this will not be shown, this will be shown and the more info button should be, let me see advanced padding 0 and then I can say you know what, on a mobile I want it to be aligned at the left. So I updated it. This is how it looks on a desktop. Then I drag it to the left until it changes. So this is the version for the tablet and you still see it works and then we have the smartphone version then you see no title and the text is aligned in a way so that you can read it. So that's the power of Elementor and Phlox Pro. What's next? Desktop okay I create a new section. I close this. I click here one column and the first thing I do I go over here and I add an intersection like that. And I go to this area right click copy, right click paste and I say about our team and I drag is to the right like that. I click over here, I go to style. I go to the divider style and I change it to white and then you don't see it but we'll change the background and I will do that through this color over here. I click on it, style background type gradients. The first color is this one. The second color of course is style background overlay, this color copy it, column style, gradient second color like that. Of course I want my text to be white over here so I click here, I go to style color of the heading is white and the color of the secondary heading is white. Then I go over here for another intersection and I drag it over here and I want to have three columns, so I do duplicate one, now we have three. I click over here for the overview of all the elements and I go for staff let me see staff. I drag it over here and the first name is Darlene Zschech. She is a designer. You can have a link to our page, you can have content, you can have an image I will choose an image and I click on upload files, select files and I go to about us and I use those three names and here I see the name so I will change the names. I saw faith Baker I made those names up, pearl Nolan so no darling check but pearl Nolan. The designer, the image is quite big I want to change the size to custom. I say 100 by 100, you can change the shape but first I want to apply this. I can change the shape but I'm okay with how it is, a circle and you can do preload I don't do that. Then we have social, she's on social media on Twitter, on Facebook and on Google+. Those three then I go to style the title is in the color white, typography it can be a bit bigger. Let me change the name pearl Nolan. Then we go to the subtitle which is also a white and I wanted to be in capitals, so I do uppercase and I want you to bring it a little bit closer to the title. So how can I do that? Bottom space at the title I bring it down to two. Then I go to socials and the color is white and I like it the away it is, but I want to change the way it is displayed, so I go to wrappers there I can see I want the image to be at the left, text-align I liked at the left and you can change the padding main wrapper and the content wrapper. So I duplicate it like that, like that close, close and what I also can do over here. I can go to the advanced area, backgrounds change it to black, change the opacity give it some corners on the edge so I go to border, border radius, five I think the radius can be 15. Then you see a bit better but the image is totally at the left against the edge I don't want that so I go to advanced padding and I say then. So now I can right mouse click, copy and paste the style and paste the style. And then here at the second one I go to image I use this one, her name is hope Watson and the third one, what is she? She is the manager and the third one image change it to Faith Baker. Faith Baker she is the photographer, so that's what you can do, update. Let's take a look and then it looks like this so I want to change a few things. I click here and I say stretch this section and advance I want to say 50 padding at the top or a hundred and a hundred at the bottom, update and if I want to I can duplicate it and if I want to I can change it from the left to the right, to the right, right to the left and then it looks like this. What we need to do since we use an image section. I go to the outer section to layout and it's a stretch section but the content which should also be full width and when you do that, then slowly from the left to the right. So what you see over here? When I open it. Is this area and this area I want to get rid of that? How can I do that? First here at the section advanced I remove the margin 0, so now it looks like that and then we have this area. How can we get rid of that, well we can go to the section over here, stretch section and then below content width should be full width? What does it do? It gets rid of this area over here. So now it's all stick together. I like it more and then I want to do a few more things in order to wrap this page up. So what will I do? I want to give this background an animation, but if I click over here I go to style. There is no background. So how can I get to this background whether there's everything to do with the margin the padding we have? Something is hidden over here and if I want to find it I do a right mouse-click. I go to the Navigator and now I can see this column over here. So if the section and below that we have the column and there we have the backgrounds. So I go to style and here you see it. If I go too advanced and I scroll down I can do an entrance animation Pro. So I choose one, I want to mask it from the left and I can change the duration so I can say two seconds, 2000 milliseconds maybe for a little bit slower. A delay of one second like that. Right now the speed is everywhere. The same I want to have an easing in it and quad out like that and now it's really slow, so I would say two seconds and if you don't see an example you can just update it. You preview the change, so when I scroll down I should wait one second and then it comes I think it can be faster, so I say not like this and a bit faster like that update. Yeah, I like that there's one more thing I want to change here. This area I want to get rid of that so I close the page. I close this one and I click over here and I go to the dashboard that means that I go to the backend of this page, you see the home page and then over here I go to page attributes and right now it's a default template and I want to change it to the page builder. You don't see it but now you see it a page builder, update, view the page so now I scroll down and it is gone. So what we've done so far? I've showed you the basic of elementor working with sections, columns and elements and we've created something beautiful over here. We imported a section and we created something like this with Phlox Pro and something like this with Phlox Pro. If I click over here I go up again. I go to the about page and I want to talk about importing templates and in this page I want to talk about creating a page really fast through a few different ways, so we have discussed already but I will show you also some other ways. I click on edit with Elementor. What I want to do now? I want to get free templates for our website, so we only have to adjust them and save a lot of time. In order to do that I go to Ferdykorp.com and here in the header I click on templates. Here we can get all my elementor templates for free, first name, my email address, [e-mail], I say give me the package. Since I'm from Europe I need to consent to some things I click on subscribe and here you see some instructions on how to get the elementor template pack. So I need to go to my email and there it is get your elementor template pack. I click on it and I click over here and I can download the template pack or I can download the pack that will import all the templates at once. Well, let me grab this one. I download the template pack. I showed in finder and here it is complete elementor template pack 2019. I'm updating this package now and then so that people can make a website really quick. I double-click, I drag this to the desktop. What I can do now? I can close this. I can close this and I can also go to all elements and here I can see them all. I can select them based on the text or the categories so maybe I want to have something with contact. Then I see all the templates have contain a form. Here you see contact form, contact form, contact form or you go to the complete pages over here and you see a few complete pages. You can click on it and then you see it in action and then here below you can download it as an individual package if you want to, but I can also go to the template pack over here and then I can take a look here by pressing space on the Mac and then I can take a look which one do I want. So if I see something I like, for instance a about us page then I can import this over here and then it will be installed in my website. So I click over here on my website. I click on this icon so again I click on this folder and this icon, I select the file elementor template pack, about us page. I open it and here below it is January the 9th 2019. I click on insert yes, that's how easy this is working and now we can adjust the information, so if you want to have a different image I click over here. I delete it. I choose a different image this one for instance and also here I click on it, change the image so that's what you can do. If your contact form is not working. I update it, you can go to the dashboard to plugins, add new and search for contact form seven. Then if you install that and activate it then you will see a contact form on your page and I have in tutorial about contact form you can watch it on my YouTube channel. So that's what you can do. Now if I go to the page about, it looks like this. I click on edit with elementor. I close this page and I want to show you a different way to make websites really quick. So I scroll down all the way and here I can click on the folder, I can and then we can go to blocks over here and those are pre-made layouts in black and white and you can adjust them to your wishes and it can help you to create a website really quick. With elementor pro you have even more blocks but with the free version you have also some great ones. So if I go to category and I want to have a hero. I select it and then I go for this one. I click on insert, now it's inserted. I click on the icon again and I want to have services and I like this one or this one and I want to show it in white, insert. There's a second area, a third one close this I just want to take a look around, maybe something like this and then one more, insert. So in a minute we have created a web page and now we can adjust it. So I go to this one and I say stretch this section. The same goes for a third, stretch it that's okay. Okay maybe I want to give it a style then I click on the section. I go to style, background type gradient. I grab the first color. I grab the second color, change the angle a bit okay. I change the image if I click here style I can make it bigger or smaller, here I can make it even bigger. I want to change the text to style, color white. Then I scroll down, I change this to blue then I do right mouse click, copy, paste style, paste style, right mouse click, copy right mouse click paste the style or I say I don't want that command Z and then I go back, then I go to the section settings style and there's a background already and I want to have an overlay over the background. So I go to background overlay, gradient and again the blue color and the darker blue color and then I change the opacity. I can also go over here and grab this color to maintain the style overlay, paste it. I can change the text of course. So one more thing here, I see something green. So I click here, I go to style border in here I change it to blue and then okay right mouse click, copy, paste the style and paste the style. I update it. Let me show you this is what we've imported with our free templates. Then here's the website we've created this literally within five minutes. So that's what you can do with blocks and again if you get element to pro you have even more blocks. So let me talk about for a minute FerdyKorp.com/elementor. If you go to pricing you see for one side its $49 per year. The second year you get the discount 99 for three sides and $199 for unlimited sites for one year. I have this one of course because I can use on a lot of sites. And you get pro widgets, pro templates. You get a theme builder so you can also create a header and a footer. You can even create the WooCommerce page you have in mind because WooCommerce is very limited when it comes to editing and styling the page and get support from here and updates for one year. So if you say I want to quit after a year you still can use it but they don't get support and updates so that's up to you. And if you go to YouTube you want to know more about elementor just search for elementor or elementor pro. I have it tutorial about it how to create a website using elementor pro. More about elementor pro, elementor pro all elements explains. Elementor and advanced custom fields. So feel free to learn more about it and now let's get back to our tutorial to our website. So that's it how to install templates. You can also search for elementor templates and there are some really great ones library and also you just get some inspiration. If also Katka, if you click over here they have 18 pages and can download it a lot of downloads a lot of sections. So there are a lot of people in the community that are helping us to create a beautiful website so definitely take a look at Katka elementor template pack. That's it, let's go to the contact page. Since I want to use a template for this one I click on edit page. Edit with elementor, I click over here then I click over here, select the file, see contact page. Here it is version 1. I open it, insert yes and voila (2:36:16 Unclear) here is our home page. Of course we can change the information, really easily change your address, and change the website of course. This is elephlox.com and the email address, maybe I want to be a bit smaller so I go to style, I can change the width. I click on update, then I go to the dashboards and at page attributes I change this again to the page builder template, update then I go to contact. I go to the forms, to the tab mail and as I said before I've complete tutorials about this and you can change the email address to the email address you would like, but then you should also paste it email address over here at from otherwise it can be that your contact form is not working. So I copy it and I paste it, save it and here it says it's probably not working because I want it to be the email addresses that has something to do with the domain so you should say [e-mail] also here that's one thing I don't like but it's just the way it is. You can also use happy forms. I go to plugins add new, happy forms. I think it's this one more than 10,000 installs, recent updates and when you search on YouTube for happy forms tutorial, let's see yes that's mine, 25 minutes where I show you in-depth how you can create a beautiful form using happy forms, so that's that. Then we go to the services page and I want to import a template but this time not my own made template but one from Phlox Pro. How can we do that? I go to the backend and a new tab, drag this to the left. Then I go to Phlox Pro, the dashboard and then I go to template kits. This is something new. I need to make my screen a bit smaller and then you see everything correctly over here. So we can search templates so if I would say restaurant, I see a lot of restaurants. Let me tell you that they're working all the time to create new templates, so in a month there will be much more than right now so that's a great thing. And I think this can be a game changer because these days everything needs to happen fast. So if they made a beautiful restaurant page for us and we only have to adjust the information that is great. They will take care of the layout they will know what is the best layout so we don't have to figure out everything ourselves, so that's amazing. So if I would say I want to choose something with tech, this one oh this one looks nice. I can download a complete page or a section, so if I would select sections. I go to recent if all those areas over here. So I go to the pages to tech, there it is I can preview it. I like the overlap over here. This looks really professional to me Wow. I like it I'm happy with Phlox Pro, so I click on downloads and I install this plugin. Now it's importing the page content. I will import it to my templates okay. Now I can edit it so if I click over here I can click on edit with Elementor. I think this okay. So I go to the dashboard or I close this page and I close this. I refresh the services page. I click on edit page, edit with Elementor. I click over here, my templates, teamwork and if you can't find it I always take a look at the creation date, so in your January the 7th, insert yes. Well this area we don't need. So I close that and now I click on exit to dashboard and I still want to use my own menu, so I change this back to page builder that means that I will get my menu back and my footer. I view the page, I click on edit with Elementor. Close it here, right mouse click, and navigator. The upper one, style it's this one so I go over here I say stretch the section update. Let's take a look yes so that's how it works. This area we can make it full width. So let me take a look at a few things, over here stretch this section over here, stretch this section and this is something that happens a lot may import something like this. I remove the footer and here I want to see the lady so I click here style. Let me see, so here I say Center right like that, update. Let me see her better and if I think there's too much space over here I can go here, advanced and then margin button until I think it's okay, update so that's how it goes. One more thing I want to do this image over here in the background, click on it style and I want to say fixed or you know but with this one I want to do a parallax update and now when I scroll down you see the background moving. OK so again if we take a look at the back end with the templates, phlox pro, templates kits make the screen a bit smaller. Then we can choose pages we can search for it we can select the category. We can import and configure it or we go for sections and then that way you can build a page really quickly and now our services page is made. Now I want to take a look at the blog page and it says nothing found. If you don't see this then go to the dashboard to settings, reading and here at your home page displays a static page and a post page you can select your blog page and if you have done that then at the blog page you will see all your blog post, but since we have none it says nothing found. So we're going to create a blog post. I hover over new and I click on post. The first thing I want to do now to give this a title and I call this "As A Man Thinks in His Heart" that's the title and I want to write a blog post about it. So we use Gutenberg blog says something new if you don't want to use that, I click on publish for now, publish you can go to plugins, add new and here you can get the classic editor if you don't see that over here. You see a lot of people download it because they probably don't like Gutenberg. I'm not a fan but I want to show you how it works. Classic editor, there it is. If you install it now and activate it. You can go to the post, all posts you can click here and normally you can change between the old and new one. I don't see that so I go to plugins, go to the classic editor settings and here you can say what is the default editor. The classic one or the block one I say the block one. Allow users to switch editors yes that's it, save it. Now we go to all posts, you see you can choose between the block editor and the classic editor. This editor will be active for the next three years so we could use this one but for sake of the tutorial but I believe that the block editor will become better and better, so I will use with the block editor. Here we have the title. What we can do now? I can click on the plus over here or you can start writing, so I start writing. So I have a paragraph over here and if I want to start a new paragraph I hit enter and there starts new paragraph. If I only want to start a new sentence I can say shift enter and now I am still in the same paragraph only on a new line. So if I would say enter I can start a new paragraph or a new title I start a new paragraph so I start typing again. So what happened since I press ENTER for a new paragraph? It created a new block for me, so if I want to change those two paragraphs I click over here and now they are changed and I can bring it back. So every time you hit enter for a new paragraph it starts a new block and that's really handy because in between those paragraphs I want to add an image. How can I do that? I can hover over here, click on the plus and I search for an image but I also see it over here. I'm search for it image, I click on it I can upload it from the computer or I can go to the media library or insert it from a URL. I click on upload, I go to images tutorial block and here is as a man thinks. Let me see if I something else yeah this one, I open it and there it is. If I would update it, I want to preview it I click over here and this how it looks the title, the date, the author no comments and it's uncategorized. The first paragraph then the image and then the second paragraph. If I were to configure this image. What how can I do that? I go to the back end. I click here and I can make it smaller like that. What I want to do? I want to wrap this text around this image. How can I do this by just simply clicking here? What you see now, this is at the left and the text at the right. Right now you don't see it's wrapping around it, maybe if I make it smaller no but if I update it. I take a look at the preview, then it's not the case because the text is not big enough but if I would now you see it now see it yes. If I would copy this, update, refresh you see is wrapping around it. So in that way you can use different blocks and paragraphs and still get this result. I like it, so I will remove the second part. Then I click on enter so I hit a new block, so I start typing again and I say, so over here I have a block and I want to change that block to a title or I select it and I change it here to a heading. Then I can say h2, h3 or h4. I like h2, h1 is not an option because that is the title you can have only one h1 area in your website, so h2 and then below that or between it I want to have an image and I want it to be over here at the right. So I click on the plus, I add an image. I upload it and I go for smiling people, open you know what I want to unlined it at the left like that, make it smaller. I can have a caption if I want to be happy, update and then it's updated automatically over here and since these images at the left I want this one to be at the right, so really simple I click over here, I go to the right. I scroll down and I click on the plus. If I don't see it I just click enter and I say five steps to get a better self-image enter. So I selected over here, I changed it to a heading h2 that's okay and again I can click on the plus I can add an image a quote and gallery, cover. There are a lot of things you can do. Tables, Pullquote, Verse have different columns but I don't want to make it too complicated. I'll also show you what else is possible using a blog post a different way, not with Gutenberg with Elementor because up here you can select to edit this blog post with Elementor but what I want to do now. I want to show you a few things, you can make things bold select it command or control B or click over here make it bold. You can add a link, paragraph link to paragraph.com enter and then you can open it in a new tab and you can make things italic. So if you want to focus on something you can make it bold. That's how you can give extra design to your blog posts and maybe at the end you have a video you want to add then you click on the plus, a video. I search for YouTube, I say as a man thinks in his heart. There's a preacher, I think and insert from URL okay, Dr. Myles Munroe, updates. I think he's not with us anymore but his videos are previewed and this is your blog post and this is not totally correct so I should make this image a little bit smaller, but at the other hand I don't like the width of this area so maybe we can make this smaller but for now it's okay. So that's how you can create a blog post. And now if we go to the blog page. You see this complete blog post and click on read more but this is the whole post. A few more important things. Over here at permalink it says elephlox.com/ as a man thinks in his heart. You can change it over here but I think this is perfect. Then we have categories, if you have a lot of blog posts you can categorize your blog posts, which keeps your website structured. So I would add a new category and I would say inspiration. Then I can uncheck this one, I can also have a subcategory so I can say motivation as a part of inspiration and I say here parent category is inspiration and I add the new category and now you see motivation is a part of inspiration. So if you have a really big website equally tutorials about Photoshop, After Effects, illustrator, WordPress thinking of After Effects, illustrator, WordPress and then as a subcategory you can say WordPress SEO, WordPress create a website and After Effects scripting, After Effects animations. So in that way if you have a big website you can keep structure in your website and it's a really nice experience for the visitor. Then we have tags, so this is about self-improvement and if you make a tag like that people can find you based on the tag. So if you want to use that you can use that then we have the featured image. I use it, I use this one then we have an excerpt and this is when you want to have an overview of your blog post and normally people will see the first Linea, but maybe you can't tell in a few sentences what this blog post. It is about, so I can say yeah this I can use a first a Linea except for this area. So I copy this, I go to document. I paste here okay discussion can people comment? Can people do Pingbacks and Trackbacks? The template yeah default is okay and the editor I use this editor so that's okay. A few things you can do over here, you can say do spotlight mode. So if you work on title it is in color. If you work over here it shows you where you are editing, so that can be nice. I turn it off, you can work in full screen so you don't see the left area since you don't need it since you're creating a blog post. So it gives you more space to edit something. What else you can work with a code editor? You can change things over here but I don't use it. Okay and if you click over here once you remove this area, so if you really want to focus on the blog post, then you can do this and if you want to have a new area, a new block you can just say enter over here and then you can click on the plus and use all this stuff, so that's it, update and let's say look how it looks. Now see the featured image, the title, the date, inspiration and motivation if I click on inspiration and I have 20 blog posts with the category inspiration. I go to all those blog posts. This how it looks. Tax self-improvement, we can share it and we can add a comment. So let's create a new blog post. I hover over new and I click on post and I want to call this the elementor page builder and I click on publish, publish. The first thing I want to do close this and then I click on featured image, set featured image, select the file and I search for elementor. It says 2018 but that's ok. I select it and this is our featured image now. I click on update and now I click on edit with Elementor. So now it looks like this we have our featured image the title and now we can create a blog post using elementor that's what I prefer to do because, it gives you so much more flexibility and the great thing is we also have our Phlox Pro elements, so we can create something beautiful but again I want to keep it quite basic. So I go for a text editor. I drag it over here and I have a text and I paste it and also here you can select things, make it bold, you can even have more options, you can give it a color like that you can drag this to the right, so if more space over here. You can do a lot and here so you can also wrap text around an image and I want to do that, so I click over here. I click on add media. I want to use this one and then I can scroll down and here I can say alignment at the right and I want to link something to this image and that is the media file itself and it should not be too big so 300 by 169 is OK like that. Update, let's take a look. The featured image and I click here and I open it in a lightbox and when I have more images I can navigate to those images. So that's it, then and actually I can use this editor for the whole blog post, so I will say enter and I'll paste the rest like that you see how it looks, then I will scroll down and add one minute template I click over here add media, upload files, select files. I change it to icons and I go for this one, open then I can optimize it, copy it and paste it in alt text. I want this to be aligned at the right also link to the media file. I insert it like that, then I go then I scroll down here, add media, upload files, select files. I use this one, open it but this time I want to align it to the left. Insert it into the post like that, I scroll down also here and below I say enter, add media, upload files and I want to say something about Elementor pro. So I grab the image of the pro element open it and this one I want to have no alignment. So I say none, I want to say full size into the post that looks like that. And also if I have a video over here I just click on the plus or I go to the elements and I drag the video over here below and I search for YouTube. I talked about Elementor pro tutorial, right mouse click copy link address and if you want to thank things to the next level this video is for you. This is one of my best videos. It's about Elementor pro and I'll show you so many great things about using Elementor pro, but since we use Phlox Pro we also have great tools so you don't need it, but if you want to take things to the next level it can be handy. And in the first few minutes I'll show you, what is the advantage of Elementor pro? So I leave it totally up to you. I like it, update and now if we go to the blog page. This is what we see first and this is what we see after that and below that we see the second blog post. Well, we're going to configure this later. I've shown you how to create a blog post using Gutenberg the blog editor. And how to create a blog post using Elementor with Phlox Pro. I will create a few more blog posts and then I'll show you how we can configure the blog page.  So I create a few blog posts. I think five and here you see them, the featured image, the title, the text, the content, Oasis of the Seas, Montana Lisianthus, and Elementor Page Builder and as a man thinks in his heart. What I've shown you before that you can use an excerpt. I've done it over here and we choose an excerpt in a blog post that's the only part you will see of the blog post and then can click on read more. Since I have not used that over here I see the whole blog post. So I can grab this area over here, copy it. I click on the elementor page builder and I can edit it with Elementor or I can edit the post. I click on edit the post click over here, scroll down and then I go to the excerpts. I paste it, I can change it if I want to I click on update. I go to the website then I go to blog and now at the elementor page builder blog posts, you only see this area. But what I see now is that there's no image but no worries because we will configure this so it will all work out perfectly. How can we do that? I click on customize and now we are going to configure the blog page. So I click here on blog, I make screen a bit smaller like that and first I go to the blog page. This is the blog page. How do we want to show it? Well, here you see defaults and you see a big image and then below that she title and all stuff and that is how it is displayed, big image, title the text. If I change that it looks different now everything is in the center. So you can take a look how everything will look and the great thing is it's loading really quickly. So you can navigate really easily through everything or this one, so now it looks like this. I can also say masonry also nice option but then you better work with the excerpt otherwise you have a long blog post like this. Okay let's take this one and then I want to display the featured image and let's configure this. The custom max-width it's okay, I like it that way. Do we want to auto mask the featured image? So it will be square no I don't want that. And how do I want to display the grid layout? Like this, so I have a line around it but this looks really ugly. So I scroll down a bit and I want to get rid of the sidebar and there's over here blog sidebar position, now it is at the right and here we can have sidebar widgets with the most recent posts and a Facebook like box, not on staff but I don't want that. So I turn it off and now I have a little bit more space. So I scroll up again. Do I want to display the post info, all this stuff? Yes. Do I want to display the post date? If you don't update it that much I would turn it off. Right now you see I turn it off but you still see this sometimes that is the case you update something and don't see the result immediately. Then need to publish it close it and then customize it again. Do we want display categories if I turn it off? You still see it so something's going wrong over here I don't know why but I let the Phlox pro team take a look at it. Then we have the number of columns this is way too much, so I say you know what three and then you get some more space. I like this number of columns in a tablet. I would like to say two and on a mobile one, so like this. So this is on a tablet and this is on a smartphone. I go to the screen again, exclude posts without media. So if I don't have a featured image it will be excluded, no because I want to show everything. Exclude quote and link post formats, so when they are in this text they will be excluded, no I can't show everything. Load more type right now we don't see that because we only have five blog posts. This is none so there's no load more stuff. Over here they will load automatically so if you scroll down new blog post will appear or you can have a button or you can go to the next page. Well, I like the infinite scroll. The read more text, read more. We've discussed this already you can also have a sidebar at the left. I don't want to have a sidebar and that's it for the blog page. I go back and I click on publish and then we go to the single blog post. So I go to as a man thinks in his heart. Now we have a sidebar over here, so this is how it looks. You can go to the next blog post, here is the tag. We can leave a comment and we can configure this. So I go to the single post. Do I want to have a sidebar if I say no it looked like this, but I do want a sidebar? I want to have it at the right single post sidebar style. Do I want to have a dark background or light like that? So I scroll down, custom max-width well I think this is really there's a lot of width, so I can say a thousand so there will be a little bit smaller, but I want to keep things the same but I just want to show you what is possible. Content style, this is what I like probably. This is what I like maybe it's too small. Maybe this one because then the text is not all the way from the left to the right because I don't think is nice to read like that. Display post media, this area over here I like that, post info, the date, the author and we want to display the post author is below and if I click on publish and I close it. I go to the back end then I go to a user, your profile. I scroll down and I can say something about myself something like that and then I can update it. I go to the blog page, then I go to the blog post as man thinks in his heart. I click on customize and now you see it's a bit smaller I like that. Then I go to blog again, single post and this is what you can turn off and turn on. Do we want to the like button so all those things over here you can remove them or show them. I like them all so I leave them as they are. Share button, the text here this is what you did not see before. If I turn it on you will see this text over here, so it's all fine Skin for next and previous, well right now it looks like this. We can change it so you see image. I think I like this even more. Comment forms cookie consent, so people need to say that they consent to when they write something that's okay. Comment avatar size right now there's no comment so you don't see that yet, but you can change it over here okay. Then we have the single post title. Display the title bar section I don't see that so if I turn it on it looks like this, so people see where they are home, blog, inspiration and then the blog post then they can click on inspiration or blog or it look like this or like this. So there are a few nice ways to show this. So you see there are a few options but I don't need it so I turn it off. Bring in back then we have the blog slider that is probably when you go to the blog page. This area over here, so let me see if I turn it off it is gone so it is this area over here, and I want to have the default one or the master slider but we need to install plugin for that. It is free by the way. These are the same makers of the Phlox pro theme. So how many slides do we want to have? Right now we can have 10. We can exclude posts, we can include posts if you know what is the idea of a post you click on publish, close it then go to the back end to all posts. You hover over it and then left below you see the post ID, so you hover over it and you see this is 378. So if I want to include it in slider then I can do it that way. I go back, blog customize, blog slider. You can change the order you can also say random and the skin. How does it look? You can also have a dark like that or like this. I like this one, insert post title, insert post meta and grab the image from the featured image, exclude post without the image yes, slide the image width, you can change that and we can have an arrow navigation. So that's what you can do? You can also loop it and make a slideshow. I publish it. I go back, I go to the single post again and then we can change the typography. So I click on single post typography. The post title this area over here I wanted to be in capitals, so I click here I can change the font family and I can say transform uppercase and you see it changing immediately. Then I go to the post content. I like open sans and I can change the line height for instance, and all this stuff you can change it post info, post info terms, post meta all that stuff and if I want to change the Header's over here I can do that by going back, going back appearance, typography and they will custom typography, main titles h1 until h6. And I want to make them a little bit more bold like that. I go back publish. I close it so right now our blog post consists of one great image you can navigate through them to different images. It's also running automatically it's on the width of the website and we have here the blog posts with a nice wrapper around it. You can click on the blog post and then go to the blog post and it looks like that. I really like it. One more thing that I want to tell. If I go to the blog post again. What you see? It says that this is the most recent one 2019 and after that this one. If I want to change that I can click over here. I can edit the post. Right now it's published January the 7th, 7th and if I click on that I can change it to the 5th for instance ok, then I update it. So now if I go to the website to the blog page. You see this one first and also if you scroll down this is the first blog post and it says over here January the 5th near January the 7th. So in that way you can change the date. What you also can do you can click over here, edit the post and you can say you want to publish it for next week. So let's say for the 15th of January so you can make this blog posts before then you can say I want to publish it that way and it will be published automatically. So right now it says schedule. So if I go to the website to the blog page I do not see it anymore, but the 15th of January it will pop up at the time we have set it to. Isn't that amazing? One other thing we can do. I can go to the backend to settings, reading and I can say post page select. I save the changes and I go to the blog page and now there is nothing, because we can configure it ourselves and then we have more freedom than when we work with the customizer. I click on edit page, edit with Elementor and if I want to I can start with a section say blog, so let's do that one like that full width. I grab the gradient the blue color and a blue color but a bit different. I change the angle to 90 and I say the minimum height is 200 and then in that I can say blog, bring it to the center go to style make it white and we've discussed this so that's the reason why I'm doing it quite fast that's how it works. Make it bigger so we can add the content, change the style and do some more things over here. So why not? I go to the section, right mouse click navigator, section advanced and then that entrance animation Pro I say mask from the left, easing, quad out yes. What else? I go over here. I close this and this and then I go to Phlox Pro in general. We can use all this stuff on our page or we can go to Phlox Pro featured or posts. So here we have a few ways to display our blog posts. So if I will grab this one and there it is and of course we can configure it. Do I want to display post media so if I turn this off it is gone. Do I want to show the post title? I can remove it. I can display the post info, display the categories, and display the date, the amount of comments. Then we have a small website I will turn this off, display a like button turn it off. Display an excerpt and this this text over here I can turn it off. Do I want to have read more or the author name by Ferdy Korpershoek and then you can click over here or over here. At content what do I want to show, all categories or only motivation? And there you see only one. I want to show them all. How many post do you want to show? If I would say two I only see two. I can say 50 if I want to. We can exclude posts without media, it has a featured image or a certain format. We can order by date or put it in random order descending or ascending only show certain post with a certain ID. So there's a lot you can do and how can we paginate it, like an infinite scroll or nothing or click on more or go to the next page. And then we have the style. I can say sixteen by nine of the image, I like that. We can have a border radius. We can make title bigger, upper case. I like to make it blue like that. Post info, we can change all this stuff over here and when you hover it you can also change the colors right now it's by default it is blue, but you can also change that. Then we have the excerpt I think it's a little bit big, so let me see is this open sans. I don't think so, no and then I can say weight normal that's better. Line height increase it a bit, so it gives you a lot of freedom to create something you have in mind also for the metadata, but this is one way. If I scroll down I can say blog display one and then here right mouse click. I can say duplicate and I drag this and then right mouse click Navigator. I close everything and I drag this section below, I like that. Then here I say display to go back, close this, and close this and then posts. I can have a grid and carousel posts. So it looks like this and I can configure this I say three columns. I want to have it in a table style like that, full content or box content. So you see there's quite some things you can do or modern style and then box content or full content, I like this. I like this a lot, display and then you can say what you want to display what you don't want to display. Right now it looks a little bit close to each other but if I update it and I take a look this blog display one, blog display 2 and it looks like this. Layout carousel, modern style and carousel like this and then if I update it I can go and click on the bullets. I can adjust all this stuff and of course I think this is really close so I can say over here, advanced margin 50 on top and at the bottom. Okay right mouse click, navigator, right mouse click duplicate and I drag it here below and I say blog display 3. I go back and let me see timeline, also really nice. Look at this and this is something that makes Phlox pro stand out from other themes. What I've done? I've changed all the dates, for all the blog posts so you will see how this will work. I click on it timeline post here a December you see this blog post of December. So all blog posts in December will be shown here and if there's a new month you see it at the other side at the right side, new month left side etc. You can also say I want everything to be at the right side and align the timeline at the left or the other way around and at this play I can say I do not want to show media, but I do want to I can crop the image, preloads the image like that and here you can decide what you want to show. At content we discussed this already, then we have the style I like to have it that's sixteen by nine. We can have a border radius if I would say twenty you see this border over here and this is also something with we discussed already and I like it to be in the center like this and it's a nice way to display things. I update it so there are a few ways to display your blog posts, one two three but there are more of course the great thing is if you have chosen a certain style, over here you can configure it to your wishes. So that's great thing about elementor. It gives you more freedom and that's the great thing about Phlox Pro it gives you even more freedom using those elements which you don't have with a normal version of Elementor. And even though this is a block page we also can make use of all the other element pack elements from Phlox. So over here you have an overview there are so many great elements and we can use all those by just dragging and dropping. So you can take a look at it and if you like something for instance social share, you can just drag it over here. Look at that bring it to the center, change the style. So there are even more elements over here, update and before we go to the portfolio I want to talk about the sidebar and the sidebar widgets. So I go over here I click on as man think in his heart and you see the blog post here at the left but here at the right you see a white area. And if I go to customize and I go to blog single post you see I have a right area. So if I would say no sidebar it looked like this. It also looks really nice but I like to have a sidebar at the right and I want to add a few widgets in the sidebar so I click on publish. I close it and then I hover over here and I can go to widgets or I can go to the dashboard appearance, widgets and here I see the global primary widget area I see nothing is here. That means that all the widgets here if they are in this area they will be shown on all the sidebars in the website. Well, what is a widget? A widget is an extension that shows some information and it can be anything. It can be accordion, it can be a text about the author. So if I drag this over here and I can say Ferdy Ferdy or here about the author, skills, teaching and some info table blah blah blah. Then an image for instance and for now I am this person in a circle, I save it and now when I open this in a new tab command ctrl click. I go to the blog as men thinks in his heart. Here at right, about the author Ferdy teaching some text. So that's the widget. I will remove it and here are a lot of widgets and with a lot of themes there come certain widgets, also with Phlox Pro. Before an author slider, contact box, contact form and a lot more. So for instance I would show the latest posts in a slider or let me see recent post widgets and there are two different ones so I will check which one I like and I can click on it and then I can select a widget area and this is the global primary widget area so if I place it here it will be shown on all sidebars. I click on add to the widget and the other one also but I want to configure this first. Latest blog posts, so this one is from WordPress itself. It's really basic, let me see. This one I add in the widget and the titles also the latest blog posts. I want to show five displaying image, don't display an excerpt, don't display the post date and order by date descending of all categories. I save it and I refresh the page and here's the normal one from WordPress and here's the one that comes with Phlox Pro. I like this one of course because of the images. So the upper one I say delete. So what do you want to show here at the right? You see if I refresh it right now it is gone. What do we want to show here? Well, you can take a look over here, a recent comments if you have a lot of comments, recent post we have it already, search, a fancy search field from Phlox pro, socials maybe we can say something like follow me. I add the widget like I say follow me and I save it and I refresh it and there it is. What I also can do I can collapse them, over here and over here and if I change the order it is also changed over here and we can configure this of course but I just want to show you what is possible.  What else? May be I want to add a Facebook like box and I don't see it here. Then you can go to plugins, you can add a certain widget a Facebook like widget. So I click on add new and I search for easy Facebook like box. I don't if the press enter it will load automatically and I use this one because it has a lot of installations more than a hundred thousand and this one only nine thousand. So I click on install now and I click on activate. I click here, I don't want this. Now I go to appearance, widgets again and now it should be here easy Facebook feed, easy Facebook like box. So click here global primary widget area at the widget. I want it to be on top. I open it, title like us on Facebook or like me on Facebook then I go to Facebook to my page. I copy the link and I paste it here. I think everything is ok. I save it, refresh and there it is. So people can like it if they have not done that you can also like it if you have not done that feel free to do that in that way you support me, so if you do that thank you and that's how easy this you download something and you can use it. So I want to change the order again, first the recent posts, then follow me and then Facebook. So if you want to have Instagram plugins add new and search for Instagram and then again Google on what are the best widget plugins and you also see areas over here. Will take a look at that later. For now I'll leave it at this. I go over here and now it is time to take a look at the portfolio. So I click on portfolio and I want to create a portfolio page over here. How can I do that? I need portfolio item in order to create that I need to go to the back end. I go to Phlox Pro, plugins scroll down and there it is Phlox portfolio. I click on it. I click on install plug-in. It's installing and it says here it's exclusive that means that you can only use this in combination with the Phlox Pro theme and now it's activated. So I refresh the page and if I hover over here I can create a portfolio item. So I click on it and I want to showcase what I offer well I do photography, videography and web design. So what I can do now? I can create a portfolio item for instance a wedding, wedding Daniel and Lia and then here I can add stuff but what I ready to is use Elementor. What I want to do first? I want to create portfolio category which is photography. I add it, you also can have a sub-item, wedding photography. You select photography and you add it. Then we have the featured image I set it over here, upload files, select files and I go to images tutorial, portfolio, photography Denial Lia and I select all those images and you see I've optimizing for Google. I never say 0 0 0 1 always give them a name that's relevant to what you want to be found on but let the image also reflect what you're saying in the title. Open so here are the images I only want to choose one so I choose this one and I click on set featured image, published and if I view the portfolio item, it look like this and we will fix this. So I close this. What I want to do now? I go to Elementor, settings and then here you see portfolios and I want to check this that means that I can edit all the portfolio items using Elementor. So if I go to portfolios again and I click on this one you see it's now with the classic editor but I want to edit it with Elementor and you see how it will look. We can configure this we will do that in a second but first I want to add my area over here. So let's go to for instance gallery and here it says advanced image gallery from Phlox Elementor pack. So I drag it over here and I start adding the images. I select the first one. I hold shift and I select this one and of course need to optimize them removing the dashes and copying the title to the alt text. I create a new gallery. I can change the order I can reverse the order. I click on insert gallery and it will look like this at this moment. I can change the image size to 300 by 300 or too large and then the image height. Well, what I want to do first? I click on update. I want to exit to the dashboard and I want to view the portfolio because I don't want to work like this. So I click on customize. I want to get rid of that sidebar with share and stuff this thing. So I go to portfolio. Single portfolio, I don't want to show it like that. I want to show like this full width and then this area over here I like that. Publish, close, I click on edit portfolio and here below I can say hide featured image and then it is soft (3:37:18 Unclear). So I update it, I view the portfolio. I see the gallery and a share button on related projects, that's what I like. So I click on edit with Elementor so I can configure this further. I click on the element. Do I want to have a masonry that means that if an image is longer for instance it will look like that at this moment no? I like it the way it is like this. Image height I can change it and then I can say I want to have less column so I go to layout. I want to have three columns and then I want to have a little bit more height 200 like that, layout. Do I want to have a gap 5 5? Yes. Do I want to link the image? Yes. Do I want to show the icon here or a text, zoom no icon of course not too big maybe zero because not impressed with it. Do I want to show captions? The text below, no additional options alignment no it's okay. So I go to style, overlay animation. Do I want it to fade or scale up or slide left. It's look like that. I think fade is okay, it doesn't distract. Do I want to have a border? Border radius if I say 20 here I see the curves. Overlay color yeah I rather have it blue and transparent maybe a bit less transparent yes, I want of a gap in the overlay that's nice and then I can make it darker. And then maybe it's better if I go to content, layout to make this bigger, and icon size 40 like that. Style, link style, and yes that's better okay. I like it update. Let's take a look so these are portfolio item. And what I can do now I can go to blog, edit with Elementor and over here right mouse click, save as template and I call this one title area. Save it, close it. I'll close this and I think I need to refresh the page and over here I click on the plus, on the folder, my templates and then go to title area insert yes. I say Daniel and Lia or I can say wedding Daniel and Lia, update. One more thing I go to the dashboard and I want it to be Elementor full width, update. View portfolio and that's, it that's how it works. If I edit this with Elementor I can click here, let's say I want to have a bit more margin at the top, at button and over here I can add something new, let me see portfolio, so I say grid and I want to show four columns, no title, don't display the categories. And I go to content and I say I want to show only photography. I go to settings, display filters No and then right mouse click duplicate, navigator. I drag it here below and then I can say more photography Portfolio items. Make it smaller, change the height to 100 and here a bit more padding at the top and at the bottom. So that's what you can do, update and what I can do now? I can click over here and I say save as template and then I call this portfolio item. I save it, close it. I go to the dashboard click here again, dashboard, if I view this we see the title we see the images if I click on it I navigate to the images, escape and I see more photography, portfolio items right now I only see this one and yeah now I can create a new one, portfolio but this time I want to add a film. So I call this one Montana Lisianthus video and a new category film or videography edit. I want to add a featured image. Let me see I have it here set featured image, template Elementor full width, height the featured image and I click on publish and I click on edit with Elementor. I click on the folder, my templates and I search for the portfolio item. I click on insert, yes there it is but the title is different of course so I can change it here, Montana Lisianthus and this one I can remove and then I go over here and I can drag a video over here for instance. I go to Vimeo images tutorial, portfolio, film Montana, Vimeo link and I grab it here. I copy it and paste it, then its look like that I can say I want to change it to auto play muted loop it, change the colors. I want to remove this and for the rest I like it. I click on update, preview the changes Montana Lisianthus and I can play the video and here I see more photography portfolio items that's not the case. So I change it to more videography and then here I change that category to videography, update.  So that was the second one then I want to do a third thing. New portfolio and I want to show a website. So I say Fitsperfect.com and again a new category web design, add new portfolio, featured image, upload files, select files then I go to portfolio, web design. Its perfect there's an image I've made. I made it with a mock-up you can find it at a viral (3:46:07 Unclear) market, space copy-paste. Set the featured image change template to full width, height the featured image and publish it. Then go to Elementor and import in the template again and change the content, portfolio item, insert yes. I copy this and I say fitsperfect.com. I can have a link over here HTTPS://fitsperfect.com and I go over here right mouse click delete. I want to show an image. I choose it this one, I can also link it to a custom URL HTTPS://fitsperfect.com. Open in a new window update then here I can say more web design portfolio items and here I can change category to web design. If I want to save time I can save this page as a portfolio web design item but it's up to you if you want to do that or not. So I click on the eye to preview the changes. I like it, I click here I go to the web site and then I go to portfolio. And what do we see? We see nothing, so I click on edit page and I scroll down default template becomes page builder, update and I click on edit with Elementor. So let's configure the portfolio page of our website. So I search for portfolio and here at Phlox you see a few different versions, so I use grid portfolio and we see three items, but before we continue I want to add a few more items so I can show you more and better how everything works, so one moment please. So I refresh the page and there they are there are a total of nine. So let's configure in this element I click over here. The amount of columns I would like to have three columns. So I want to display the title? Yes. Do I want to display the categories over here? No. So it looks better in my opinion already, I go to content. What do I want to show? All categories and how many number of posts do I want to show. All of them so I leave it empty. I can exclude post without media to everything without a featured image otherwise you see an empty area over here. Order by date, descending and we can exclude portfolios or include them by ID but I don't want to do that. Then I go to the settings. Do I want to display the filters? Yes, filter by category and then here's the filter button. If I click over here, you see photography but you don't see it over here that this selected. So I can also create something like this or this no just normal one. I'll bring it to the center like that, transition. If I click over here how long should it take, a thousand is one second, delay between review and it's the only portfolio plug-in I know that has these options. Of course you can leave without them but it's nice that you can adjust it. And we want to show Pagination so if I go to all, here you see the pagination. Do I want to show that or not? If I would say I want to show three items per page. I have a few pages and I can turn it off. If I scroll down I can load more or I load them all the time. I like the infinite scroll so you scroll down and you see all of them. Load more label it's not necessary anymore because we don't use it. Then we have the style, the space between all the elements I say 2 really close each other, so I say five I like the aspect ratio of 16:9 and that's also how the images are made. I think that just looks better. The hover type when I hover over it nothing happens, now right now it look like that and the great thing is here you can see videos of how it will look. You can see the title for instance and that's what I like so I leave it a background type. I wanted to be blue like that or maybe green or just black. I like that and we can style the title in the wrapper if you want to, so that's it. I click on update, preview the results. So I click over here and then you see nice animation and here you see wedding photography. If I don't want to show this then the best thing I can do is I go to the backend, to portfolios, categories and then over here I click on delete. I don't use subcategories, portfolio and this how it looks photography, videography and web design. And if I make the screen smaller you see it's from here until here, but if I want to change it I go to elementor portfolio. Right mouse click, navigator and then I click on the section and I say stretch this section and change the content width to full width, update and now if I make the screen smaller see everything will stay totally from the left to the right and I like that to be honest. So that's how it looks and if I click on something I see the title with the animation. I can play the video. I see more videography portfolio items and I can choose different ones, another video or I go back to the portfolio. I can choose web design, there's the same I click over here, Fits perfect I can go to the website by clicking here and I see more web design portfolio items. So we have craved a beautiful portfolio. So what you can do now? If you go to your home page since we have a portfolio and a block page we can scroll down and here create an area with our latest blog posts and our latest portfolio items. I've done this already but with the knowledge I've gained in this video you can do it yourself now.  And then there's one more thing I want to take a look at and that's the footer widgets. I click on customize, I close this first I scroll down all the way, there it is then I go to footer. We have the sub footer. I turn it on and here we can select how many widget areas we want to have. I think three is okay, you can also have four or in a different order. We can change the background color so I would say 555555 apply. I can add an image I think it’s okay for now. I click on publish, close it you see not much yet only in this area and I can click on widgets. And what you see? Sub footer first widget area sub footer second one and sub footer third widget area. So here we can add widgets, a different way to do is going to the home page to customize. I scroll down and I scroll down here I go to widgets and then here sub footer first widget area. And I click on the plus and now I can search for Facebook again. The easy Facebook like box and I can say like me on Facebook. I can paste the link. There it is the text is a little bit dark but do not worry about it we'll fix it in a minute. The width and at this moment it's okay. We can also add a widget below it, so maybe follow social, yes like that also a little bit dark.  Then the second area, I want to have the latest post, latest post slider or recent posts widget, show the latest four this time. So latest blog posts. I'll configure this later and now I go to the third one maybe that's something with portfolio maybe not no. Maybe I want to show an overview of the pages I have my website. So I search for pages, I say sitemap okay I publish it. I go back and I go back and I go to the footer area, sub footer and the background I want to be darker like that, apply and then over here let me see dark skin for widgets. If I turn this on everything is light and that's better much better and you see this is really long in comparison with those two areas so I want to have the three latest blog posts. So I go back to the widgets. The second widget area I click on the settings and I say three publish, close it. So let me summarize a bit.  We created a domain name with web hosting. Our site was live immediately. Then I showed you how to install Phlox Pro and Elementor. We created something ourselves so you could learn how to work with Elementor. I've shown you how to install a certain section. How to work with the Phlox Pro elements like this and we posted here the latest blog post and the latest portfolio items. I've shown you how to create a footer area like this. Then at about I showed you how to import a premade template. If we scroll down you see the sections we have created using elementor blogs and we adjusted it in a few minutes. At services I showed you how to install a premade template from Phlox Pro itself. We created a portfolio where we can showcase what you have made and we have configured it using Elementor. Then we have the blog page where I've shown different styles to show your latest blog posts. And I've shown you how to create an individual blog post using Guttenberg or using Elementor. We worked with a sidebar with widgets and here at the contact page I've shown you how to use a premade template. I want to thank you for watching this video. Congratulations with your website but this is not the end now I have a few follow-up tutorials for you that you can follow. For instance search engine optimization, maybe you want to do something with email marketing. Then I have a tutorial about MailChimp or convertkit. Maybe you want to create a webshop, I have a tutorial about that. So feel free to take a look in the description for more videos I have about WordPress and then I hope you have a great day and you will see me next time bye bye.

Channel: Ferdy Korpershoek

Views: 208,873

Rating: 4.8921523 out of 5

Keywords: Elementor 2019, Website, How To Make A Website 2019, Phlox Pro, How To Make A Website, How To Make A Wordpress Website, Wordpress Tutorial for beginners, Wordpress Tutorial 2019, Wordpress, wordpress for beginners, Phlox Theme Review, Wordpress Tutorial, Elementor Tutorial, How To Create A Website, how to create your own website, Make A Website, Make A Website For Free, Free Website Tutorial, Free Wordpress Tutorial, 2019, How To Build a Website, mobile first, Beginner, Beginners

Id: dpF57hXM_so

Length: 239min 10sec (14350 seconds)

Published: Thu Jan 10 2019