Make A Wordpress Website Using Elementor Pro 2019

After Watching Video , Get the Best Wordpress Themes in the World  ( Download Now )

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