How To Build A WordPress Website With Elementor and WooCommerce

today I may be taking you through the typical process I'd use when working with a client on their website now for brevity the process that I'm going to show you is stripped down to the key skills that you need to get under your belt now be taking you from set of scalable cloud hosting with cloud ways of kindly sponsored this video right the way through the key areas of using elemental Pro WooCommerce and later we'll be delving into advanced custom fields and custom post type UI to create some custom sections to lists exhibitions and art classes now if you're ready to go behind the scenes and see some of the key tools and techniques that I use when developing client sites join me as we get stuck in so in this first section we're gonna be setting up our hosting now we're going to be using cloud like I've already mentioned and setting up a cloud-based server a cloud-based host is a little different to what you may be used to if you've used normal hosting things like SiteGround or things along those lines but don't worry there's nothing complex about this it just works slightly differently now I'm gonna cover the basics in this video but if you want to learn a lot more about using cloud ways I've already created three dedicated videos on the whole process of setting up your account configuring things setting up all the different things you want including backups migration and all those really cool things I put a link in the description below so you can check those out if you want to get up to speed and exactly how to get the most out of cloud ways happy and sad let's take a look at setting things up so the first thing we would do is we would say start a free trial this will allow us to test things out make sure we're 100% happy with it and then we can move on to paying for this as we normally would so you can set this account up in a couple of different ways we can go through and set up using LinkedIn we can use github or we can use Google or we can just use an email address and our name and password and so on and that's exactly what we are going to do in this video so I'm gonna do is I'm gonna put in my name and we'll just put in my surname and then we can go through and set everything up for email and password so I'll do that quickly now way to put those details in we can just fill out the rest of the info is required so I'm gonna say I'm a freelance web designer my monthly hosting spending is and we're gonna put you know the low figure in there for this particular example it doesn't really matter too much if you've got a promo code you can drop in May I'm gonna say we'll agree to the cloud-based terms and conditions as always make sure you read through these and the privacy policy to ensure you're happy with anything that you're signing your name away to once we've done that we're gonna click on start free that will then take us through and set everything up in the next stage so you can see now we've got welcome to cloud ways we'll really excited to have you on board it is that simple to sign up for an account couldn't get simpler than that really could you okay so the next I'm going to do is tell it how we want to use this server so let you say this is where things differ from something like SiteGround so what could the cloud ways gives you some information about what you're gonna get we'll say start now now before we can complete this stage we need to do one important thing and that's confirm the email address that we've associated with this account so what you need to do is wait for that email to come in once that come in click on activate account once you've activated your account you're then gonna be in a position where you can set up your server now don't be put off or daunted by the fact it says set up a server it sounds way more complicated than it actually is we just need to configure some very very basic things and then we're good to go so let's forget about this top section where it's got application server details we'll come back to that in a moment what we're interested in these five sections underneath digitalocean Linode etc etc this is the location or the cloud service you're going to be using so effectively all we're doing is using cloud ways to be an intermediary between us and the server the cloud server so this gives us a nice simple way of setting things up now digitalocean is the most cost effective option you can see based upon this basic parameters we've got at the moment with the default settings it's gonna cost us between about three cents and I will here eight and then about twenty two dollars a month if we choose some likely node you can see that's a little more expensive vulture little bit cheaper than the Linode option AWS a lot more expensive because the Amazon servers are a slightly higher grade so when you move up and you want to get more options available maybe AWS is going to be a better option for you if you have a lot more resources required for your site then you've got the Google cloud platform which you can see is a little bit cheaper than AWS we're gonna keep this down to the digital Oshin option next up we've got the server size in other words how much space do you want to use on it how much is the server good and require you can see when we hover over this little dot it's going to give us two gigabytes of RAM 50 gigabytes of SSD storage so it's already gonna be super quick 2 terabytes of transfer and a 1 core processor what we're gonna do though is we're going to drop that down to the 1 gigabyte option it's a little bit less in the storage and so on but the core the process is still 1 quart just a little bit less ram now for starting off this should be more than enough unless you're going to be doing something with a ton of traffic or very complex sites but the video of using cloud weighs and use it this way is that we can simply log into our account and we can change any of the server set in sizes so we can scale this in a super simple fashion where we don't need to go and rely upon anybody else to scale it beauty of this is you could easily if you know you're putting out for example a range of advertising and you think you're gonna get a big spike in traffic you could come in you could ramp this up to give you more overhead and then when you've had that spike of traffic things go back to normal then you can drop your resources down and reduce your payment so that flexibility is an incredibly useful thing anyway with that out of the way we leave it at one gigabyte you can see that's gonna cost us roughly $10 a month next thing is the server location so what you need to do is make sure you choose the server location that's nearest to you or nearest to where your main audience is going to be so if you know that the majority of your audience are based in the US and you were based in the UK like I am it would make more sense to choose a US based server location because then they're gonna get a much quicker sort of result much quicker load times on the site can be much more beneficial to you so just bear that in mind it's not a case of choosing the one nearest to you choose the one that's nearest to your audience I don't leave this as London because my audience for this example is going to be more UK based then we can come through we can choose the application and server details now realistically the application is what software do you want to pre install in there like WordPress or Joomla or something the application is just the name you're going to give it the server name is just something that means something to you and the prod is just a way of grouping all your applications together not complicated so let's just start this off your application is going to be our site because that's what we're going to be creating the server we're just gonna call this WP tuts art and the project well we can give this a name as well so we're gonna call this clients for example doesn't really matter too much now underneath the WordPress application we want to install you can see if we click and open that up we've got a ton of different options obviously I could say we are working with WordPress but we have a couple of options there as well we've distort the normal version of WordPress 5.3 which is the current version we can install it with the current version of WooCommerce we can set up a multi-site option or we can choose to install a clean copy of WordPress with no cloud where's optimization now this basically means that any plugins to the use for optimization that automatically installed won't be installed up to you which way you want to go about this choose the option that works best for you I'm gonna choose the version 5.3 with no optimization because I like to have control over that myself so I'm going to click on that and then we've done everything so they say it wasn't complicated it's very very simple and straightforward we've now configured everything I'm gonna hit launch now and that's going to go ahead and create our server set of our first application and everything else we need to do and there we go there's our application and server all set up it's going to take a few minutes to complete everything so as likely say with everything to do with this because they are an intermediary you're gonna have it slightly different where it takes a little bit of time to talk to the cloud service set things up and then come back so I'm just gonna pause here and we'll come back what if everything's set up and we'll take a look at the next option so now that everything is completed let me give you just a very quick run around exactly how to use this so we've got servers and we've got applications servers because you could have multiple servers set up and associated with your account are where all of your applications reside - in other words a server can have multiple websites associated with it and websites have basically referred to as applications in cloud waste week so if we take a look at that you can see there's our server it gives us the information is the wptouch arts server one gigabyte which is what we set up the IP address with the location of the server and the data was created on the right hand side we can see we've got the number of applications installed on the server and then we've got the projects associated with this server if we click on the little three dots to the right hand side we can do things like stop restart delete add an application or if we had multiple servers we could clone the server to get an identical copy of it we can switch over to applications by using this option at the top and that'll show us any of the websites or applications that are associated with the server so you can see that we've been told we've not created any projects yet creative projects are very easy and complete the optional and legs is just a way of grouping things together if we click on the arts site we can click and go in and take a look at all of the details for that particular application so you can see on the left hand side we've got all the different options like access details monitoring domain management accept accept accept we've then got the application URL which is a temporary URL as associated with your account and when you're ready you can then actually associate the domain that you want to use with your account and then it'll have a little bit of time it'll migrate over and do everything it needs to do now I've covered that in its own video which like I say other videos to do with working with cloud waste so I'll use that link down in the description so you can see how you do that it's a little bit beyond what I want to cover in this so we've got the application URL which is the site and if we click to open that up you'll see we now have just a basic clean install of WordPress at the top you can see that's the full URL to it come back in you can see we can set up ssh and SFTP if we want to use an FTP client to get in there you don't need to do that the admin panel so this will give you the URL to that and the username and the password which obviously you'd want to change afterwards then there's a database information so if you needed that for anything you could take a look at using that we can also apply a free SSL certificate to this account so once you've mapped your domain to Etsy I would recommend that you use this SSL management come in and set up a free account or a free SSL I should say which like I say all that information on how to do all of these different things will be in that playlist down below so make sure you take a look at those and we've also got things like backup and restore so we can make sure we come back up before we do things this logos won't tell us any backup information we've got any backers who created and so on so I might take a couple of moments to fresh then we've also got migration tools application setting so you can come in and you can just configure this anywhere you want so this gives you tons and tons of options on how to set things up like say I just bare minimum we've done everything we need to realistically have a site set up and ready to start working so all we need to do come back to our access details and we'll simply click to go over to our log in and then we can come back into here and we'll just click to copy our login details and we'll just paste those in there and we'll come back in I will just click to copy the password and do the same paste that in it will say remember me and click login and that's basically everything set up now for our demo site ready to start building things now we've got WordPress installed we need to do a little bit of housework before we start installing all the plugins and the tools and the themes and things we need to start working on so first of all let's take a look what we need to get rid of so first things first let's set up the permalinks to make sure that we've got nice urls throughout the entire site we need to do is simply come into the settings option come down to permalinks and from there we're just gonna set this to be post name hit Save Changes that's that side of things done next up we will come into the post section I'm going to all posts and we're gonna get rid of anything that's inside here so you're gonna trash that they're the same name of the page you go to all pages and we're just gonna select these two and we're gonna just send those to the trash so we have nothing in there next up with having two appearance and themes we don't need all these themes we need one in here at the moment until we installed this theme you want to work with but for now let's get rid of all these other ones no point in keeping things that you don't have any useful on your site they're just gonna end up taking up space for no particular reason so get short of them clean things up start off with a nice clean slate okay so we'll leave this with me for now they come into the plugins section checking your store plugins and see what's in there normally when you install WordPress you're gonna have these two Akismet anti-spam and Hello Dolly again we're gonna just pin those off so it's gonna delete those and apply that okay I'm gonna deactivate breeze now breeze is basically just a caching plugin that's part of cloud ways you choose to set up your application in cloud ways you can choose to have a completely clean in a store and that would mean that breeze wouldn't be installed it's up to you if you want to use this if you use in cloud waste for now I'm gonna deactivate cuz I don't want any cash in plugins gonna be active while I work on the site because I can just call it mayhem when you're trying to check updates and then things don't show up because of that cash in plugging plugin okay so we've now cleared all the junk out that we don't need the next thing we need to do is start adding the things that we do need first of all let's come into appearance and themes we're gonna add a new theme in now because we're gonna be using elemental pro we're gonna be using the Hello theme now this is just a bare-bones theme that allows us to keep WordPress happy but we can create our own pages our own layouts and all those kinds of things directly inside elemental without worrying too much about the actual plug-in itself also got the theme itself so let's just search for holo once you've done that there's the holo theme we're going to install that now if you're gonna make any changes to the actual theme itself I'd also recommend downloading and installing the hello child theme however for this tutorial we're not gonna be making any changes to that so they'll activate this and then we can do is we can simply come into the theme option for 2020 and we'll just go with the theme and we'll delete that one so we end up with just the theme we want to use now the next step is gonna ask us to install elemental because this theme is meant to work without a mentor so for ease we'll just say install that will let that go ahead and install and then we'll take a look at what other plugins we need so we'll activate Elementor we'll just come back then into our plugins section and we're gonna install a couple more so I don't particularly like working with Guttenberg it's entirely up to you if you want to work with it but because we're just going to be working with WordPress itself and we're gonna be using elemental it doesn't really matter but you can if you want to install the classic editor I just prefer that over guttenberg but that's a personal preference next step we're going to add Commerce when they say add new and we're just going to search for commerce and then we'll just download that now I'm not gonna worry about activating it just yet because I don't want to go to the process of setting all that up I just want to keep this really simple set of the things that we need and then we can take look at it now I'm going to keep this fairly streamlined because I don't want to go to the whole process of showing you how to install SEO plugins because let's be honest there's quite a few different options and I'm sure you've got your own personal preference for me if you were going to be using one he didn't want to pay for it I would recommend taking a look at rank math or the free version of SEO press if you wanted to look at a paid option I would look at SEO press Pro I certainly wouldn't take a look at installing Yoast because they want to charge you for everything and this would have been some various different things that I don't necessarily think makes it the best SEO plug-in on the market will that being said we won't worry about that we do need to go and get elemental probe the elemental pro is something you have to pay for so I'm going to download that install it and then activate it so we've got that activated on the site ready for start using it okay so there's our plugins we've got everything installed and we're now ready to move on to the next stage which is going through and setting up some of the basic theme Styles you want to use now the theme Styles is basically a way of setting up global options that's part of Elementor and it just makes the whole process of updating things like fonts colours and so on wait easier again I've got a dedicate your tutorial on this which I'll put a link in the description if you want to take a look at this in a lot more detail we're going to go through it quite quickly just to sort of show how you set some things up so you can see how much of a time-saver this particular option actually is so let's take a look at setting these theme Styles up what we're going to do is we're going to come in and set up some settings first that we need to do inside element or to make sure this works so difference in elemental and settings from there we have disabled default colors and disabled default fonts to check both of those I'm going to hit Save Changes now even though we're using the holo theme which is a pretty bare-bones theme if we don't disable this will tend to find we will get some errors when we try to create a theme style so I need to set that on there and you are then good to go so I'm gonna do is we're going to just create a basic theme style set that we're going to use a template for now to make this process much easier I've created a template which you can download with a link in the description below that simply has all the key elements your headings ones who say it's your body text all those kind of things you can set up currently so the style cares or the theme styles so it gives you one page you can just set everything up make sure it looks the way you want and then you can just delete that template if you want to so we're going to use that as the basis so it'll come in first of all where there come in and add a new page and we're just gonna call this just close this down we're just gonna add this is gonna be a demo page so doesn't really matter we're just gonna call this theme style test we'll just publish that page and we'll set that to be private so on log do people can see it we're gonna delete it later anyway so it doesn't really matter too much so we've done that we're now gonna edit with Elementor once we've done that we no need to go in and just upload the template file so let's open up the template option I'm formerly we're gonna come into my templates and you can see we've got no templates at the moment so we can do is we can just install one of them ourselves so we'll say import template and I click on that and then we just simply gonna drag and drop this file in for us and then we go see my style preview like I say this is freely available to you there's nothing special about this it's literally just some text boxes and bits and pieces so let's insert that let's say yes to that and you see all it really does is drop in some basic placeholder pieces of text information and so on all the things we can style now to get to our theme Styles option we need to go over into the little hamburger menu in the top left hand corner I'm going to come down to theme styles I'm gonna click to open that up and that will now give us the theme Styles panel now if you hadn't set those options that I've just shown you inside the settings panel for Elementor you'd have a message on here telling you that you may have a problem if you don't set those things up so that just alleviates that problem okay not like I say it's not gonna be the too much detail about all this but it's pretty self-explanatory you've got these different sections which we can customize and set up the rules for we can override those on a widget level if we want to but this is kind of your global styling for these various different parts we've created all those different parts inside this page on the right-hand side so now if we do something like come into the background and click on there and change the background color to red for example you can see now red will be the background color for every single page we create so we can globally assign those different elements let's just clear that and close that will leave that as it is we're not gonna touch the back run on them more importantly we've got things like typography so in sage here we can now set the body text we can also set the link text for the normal and the hover and also all the h1 through six all of your headings can be styled inside here so we're gonna start off with our body text so let's set our color first of all we're gonna set it to this nice gray color and then we're gonna just choose our typography is we're gonna click we're gonna open our typography options out so first thing to do is search for the font we want which is open sans you can see that now changes everything including your headings because the body is kind of the global sort of text styling and then we can override that on a heading level and so on afterwards so once we've done that next I'm gonna do is set the size of the font we want to work with so I set this to be 16 pixels and then we're going to come into the weight we're gonna set this to be 300 and that looks pretty good all we need to do that is set the line height I'm gonna set the line height in this example to 30 pixels now it's up to you what values you want to work with you can work with pixels you can work with M's Ram's or VW whatever you think is the better option for simplicity I'm gonna stick to pixels because a lot of people will still be using that is it the best option not necessarily but for now it's okay to say with that so that's the first part done now we can go through with the links a little later next thing you did you know is go through and set our different headings app so what we gonna do for that when it come down to h1 first of all and we're gonna just choose a slightly darker gray you can see h1 now which is the first one here gets a little darker once we've done that we can then come in and edit the typography for it we're going to click scroll up a little bit now change the font this time and we're gonna have a corresponding font types we're gonna use muli for this so it's only a complementary font style now it's up to you how you want to style things from there we're gonna set the size of this to let's go for something like 80 well it's cover so like 45 pixels that looks okay maybe a little bit larger it's go for 50 there we go I guess it's a nice size heading and you can see that our title at the top is also being increased the same size because that's using the h1 tag wait again we can set this to whatever we want so if we want to create nice thin heading we could do that if you want to set something a little thicker we could do that over to that's what we want to do so we're gonna do is we're gonna set this to be let's go for something like 300 again that looks quite nice that's a nice sort of compromise now the next thing with this is that we can set this on a widget level so when we have different sections on our site that we think we want to make these stand out like the hero section at the top on our homepage we obviously want that to be much larger so we can override what we said inside sure with using the widget level settings and again like say we'll take a look at that when we create that section so now all I need to do is go through all these different headings setting all the different values up inside there we're not gonna bore you with that I'll come back to that a little later before we move on so next up we've got the buttons option if you click to open that up you can see I've got a couple of buttons on the screen in front of me so now we can go through and set the styling we want on any of our buttons we've got the normal and we've got the hover State so we can control exactly what each of those states is going to look like and again you can set these on a widget level if you want to override anything yourself when you're creating things so you have a lot of control a lot of functionality over how all these different things work so first of all let's change the typography and we're going to go from default and we're gonna set this to be Moody just so we can to keep in line with our headings we're gonna set this to be something like will try 16 fix let's see what that looks like and actually just go a little bit large let's go to something like 18 that looks good we're gonna set this to be 400 so it's a little maybe 500 you see not all fonts will support all of the different weight values some fonts will have all of them some will have fewer so you may see no real changes when you jump between some of the values on there so just bear that in mind transform we're gonna set this to be uppercase you can see now that gives us a much larger actually I think 18s were a bit too big let's go 60 and there we go so anything else you want to set you can set that inside there we're gonna start off first of all with the normal so this is the normal state that you'll see the button in so first of all we're going to set the text color we're gonna set that to be dark gray background color we'll go to set to be white and once we come into that we're then going to come down and we're going to choose to put in a drop shadow so I'm gonna click on box shadow you see that now shows us our shadow we're just gonna make this blue a little larger we're gonna set this to be a lot more subtle by dropping down the opacity so it just gives us a sense of the button being a little dimensional okay so we can set border radius Nick so we just at the border radius to be zero the padding we can control that as well so this won't affect anything this sort of set to be full width like the send button there but the click here you can see that will change accordingly so let's just say we'll unlink these values and we're gonna set something like try 10 not a hundred ten at the top ten at the bottom and then we'll just like 50 not 550 for the left and right actually there's called a little bigger on the top and bottom let's try something like 50 and see what that looks like that's a little better okay so we've now styled DOS I'm gonna come back and just tweak a little bit with the box shadow just make it a little darker cuz it looks a little too subtle there we go okay so now we've got the button effect we need to do something with the hover effects we can click on there you can see we can now change anything we want so we want to change the text color on hover we could do that so let's just say we'll change that to be a lighter gray or maybe actually it's got black see what that looks like you can see it gives us subtle kind of thing what we can also do is adjust the block shadow on this so we could say we'll keep all the values we will make the box shadow just a little darker so you see now when you go over you get this effect that's a little too dark let's just drop that down there we go so we now get a subtle hover effect you know you can set this to any way that you want to so that's basically all that you're doing so now you can repeat the same kinds of things for your form fields for your images and so on so all the values you set inside here will then become the default global values and if you wanted to make changes to those afterwards you can simply come back into the theme style section tweak and adjust and if you want to override anything like I say we can do that on a widget level which we will take a look at but that's the basics of setting things up to the theme styles I'll quickly go through and set everything up so it's all consistent and then we'll move on so I've set everything up now all the headings are set up the body text forms on hover for the form buttons you thing I haven't style is the image because I want to leave those completely untouched so I have full control over them where I need to well they do now is click on update we've now set up our global styles so we can come out of this and if we wanted to we can exit out of this particular page with exit our dashboard and then we wanted to we could simply delete this page it was there just to set things that just we've got nice visual way of seeing the changes we make as we make them on screen so other than that we're now ready to move on so in this section we're going five-minute Photoshop taking a look at how we can create much more realistic mock-ups to present the artwork in a much more appealing fashion now there are tons of places you can find these kind of mock-ups you can find free options you can find commercial options for me I just find it easier to use inventory elements I've got a subscription to this and I use it for tons and tons of things stock images and things like this to do mock-ups will have been said I found one that I like that we're going to use and if we click to open this up and take a look at some of the examples you can see we've got this nice sort of in situ image with the frame we can go through we've got things we could use for the hero image if we wanted to you can see we've got a ton of really useful options some more so than others for what we're trying to achieve but we've got a great starting point they say you can grab some free ones to do pretty much exactly the same as what we're gonna do here so I'll go ahead download this apply a license to it and then we're going to use this to start creating things inside Photoshop so once I've done with the file and registered it with the license and then ready to start working with it it's going to put this into a separate folder and we're going to open that up and then we've got our mock-ups if we open that up you can see we've got six different mock-ups including a user mind you want to tell us exactly how to start using these now I'm gonna be using Photoshop for this example but you can use affinity photo to start working with any kind of image in Photoshop that uses smart objects now I'm gonna come up what smart objects are we'll just go through and use them inside Photoshop but if you want to see how to use them in an affinity photo I'll put a link in the description to the video tutorial that I've done coming exactly how to do it with a very similar kind of mock-up file so I'm gonna do is just going to drag those out of there we're gonna put those into your own separate folder and then when you start opening those up in Photoshop start creating things we start off with this one we're going to use for the sort of hero image on the website now the process for all of the other images is going to be exactly the same we've got the image opened and if we take a look on the right hand side the way this is set up is we've got various different objects which can just turn on and off should we want to use them or remove them so for example we may want to turn off the plan box we can click we can remove that from our layout so we've got a nice simple way of creating unique markups disabling the things that are not relevant to us and so on next thing I want to do is go in and actually insert our image into this your design hue section and this is where the smart object side of things comes in if we expand the frame option we will see inside there we've got several different layers now if you're not used to Photoshop layers have basically just imagine them like a piece of acetate with some content on and as they you get stacked one on top of the other you'll see through all of those until you get your sort of full image that's kind of what's happening where you can see this little checkered box that's basically transparent anything else is part of the image okay so let's just take a look at what we have here you can see we've got frames masks and so on but what we also have is your design now if we double click on that that will open that up that's a smart object which is basically one image placed inside another image and the beauty of this is you can have Photoshop files placed inside Photoshop files so as you can see we've just opened this smart object up and inside there this for individual layers you've got the glass reflection the actual outside frame the design we're going to put in and a background image so if we didn't want this outside edge we can simply click on there turn that off and that will then be taken out of this design we can have a larger image obviously if we want to keep that in there which is what we're going to do we'll leave that as is then we've got this your design so that's effectively the layer that we go to put information on but you don't have to put on there as long as that layer you're working with sits underneath the glass reflection and the past certainly the border around the outside edge that's all that matters because we can see through anyway so we're gonna do we'll open up the first image that we go to work with so if I just open this up in Photoshop well drag that onto his own page you can see there's the image you're going to work with so now all we need to do is drag that into this set you know make sure it's in the right layer so come over here it make sure you've got a move tool selected then drag that up until we go over the image we want we'll drop that inside there and you can see that now positions it where we need it to be it's too big that's what we need to do is resize this so let's just zoom out we'll press ctrl + T to switch into transform mode and then we're going to transform that so it sits inside the boundaries of the image will zoom back in a little bit now just using keyboard shortcuts for this but you know if you come to a photo show up all these kinds of things are going to be pretty much second nature to you so there's our image in place we're going to hit the Enter key to confirm that transformation and now we can just go back we can save this and we can go back into our original image and you can see there is our mock-up with our new piece of artwork inside it all done through that smart object so it's super simple to do and like I say if you're working with affinity photo it's very similar in how to do it and like say if you want to check that video out take a look in the description to check out that link now obviously this is going to be way too big because currently you can see the image is three and a half thousand pixels by nearly two and a half thousand pixels that's way bigger than we actually need it so we can now resize this in Photoshop but the first point of resize so you could go and do this a couple of ways you could permanently resize the image which I would not recommend doing alternately you can just go into file and we're gonna say save as I say we're gonna come down to export and we're gonna say save for web this will open up the save for web window now as this name suggests this is where you can optimize your image and you can check it out to see what kind of degradation you're gonna see when you're optimizing things so a quick overview of this top left-hand corner we've got the original which is the uncompressed and saved version we were optimized which is where you'll see the optimized version based upon any settings you choose on the right-hand side and then if you want to do a comparative you can do - up which will give you a side-by-side and you can switch those views over if you want to all we can do for upper we can just try different ways of reducing the size of this to see what looks good you know you can kind of play about with this until you get exactly what you want - May the quality and the file size are going to be exactly where you want it to be we're gonna do the two up version actually that's just got optimized we're gonna do is we're gonna resize this now it's up to you how you want to work most people are not gonna be on a screen resolution that's over 1920 by 1080 which is sort of full HD and even then chances are you're not gonna have full width so it's up to you how big you want to go with this but for argument's sake we're gonna keep this to 1920 and we can leave it at 1280 that's perfectly fine it doesn't matter too much now obviously we need to zoom in a little bit to find out what the quality is going to be like currently this is using a quality setting of 80 and you can see if we take a look at the bottom left this is going to give us a file size of about 350 kilobytes which is a little bit on 450k which is a bit on the large side so we're going to do is we need to find that happy medium now between the quality of the image and the file size so we're gonna do is we're gonna set this to a baseline of 40 first of all let's see what now comes out like so there we go we set that a 40 that now gives us a file size of just under 120 K you want to check this out we're gonna come in and we're gonna set this to the zoom in a little bit well you're a little too far there and you can see this is kind of where we're gonna see it this is looking at it's close to 100% and everything looks pretty good on me because I'm gonna put an overlay over this image anyway it doesn't matter there's a little bit of pixelation but that's a good starting point so what we're gonna do now is we're gonna just save this out from here so we gonna click on save and then we can just choose where we want to see so I've already got a folder structure set up and all we going to do is we're gonna save these into the relevant location and we're going to call this hero image and we'll say save so we've now done all the things that we need to do to make sure we've got the image where we want to be the next thing we can do if you want to is try to optimize these and we'll quickly use an online service and see what kind of result we get from that so for this we're going to be using a short pixel this is the free service you don't need to have the paid full service to use this we're gonna come it to compress I'm going to do is we're gonna drag and drop that image into the uploader once that's done we're gonna let it do its little but a job we're gonna say we're gonna let two lossy and see what we kind of get there then we can just check it out to see what the quality is like so that's telling us that based upon using lossy we should get about a fifty fifty four percent reduction in file size we want to make sure that the quality is good enough we can click on the little eye icon or we can see the before and after so you can just mouse over to see the differences and in all honesty there really isn't much difference in quality whatsoever and like I said because we got to put an overlay over this that will generally hide some of the artifacts that you may see in there anyway so I'm happy with that that looks pretty good so what we need to do is just download that so we download that to our computer and then we'll just overwrite our original version because I could say the compression isn't making that much of a difference but the file size is a decent saving so what I'll do now is I'll repeat this process for all of the other images using the various different mock-ups that we've got I may choose a couple more markups so we've got a bit of variation on the site but for now that's what I want to end this photoshop in it's compression session and we can just move on to the next stage so let's take a look at that now so now we're ready to activate WooCommerce now I'm gonna quickly run through the wizard I'm not gonna go in detail on how to set this up it's all been covered and again there's a playlist in the description below if you want to see how to go through the entire wizard and how to set the basic set of WooCommerce so this is gonna be a pretty much of a whistle-stop tour of it so let's activate that once we've activated it the first thing you're gonna get is this nice simple wizard so we say yep we'll go through the process of that so we're gonna first of all we've got our address so we're gonna drop in some basic filler information will continue all right would say no we don't do that we don't wanna work with that in which industry does your store operate we'll just not worry too much about that although we can say art and music they continue we can just choose now various different things what we want to do how do you want to set things that we're gonna say this is physical goods only I will continue honey product you plan to display and we can say well we're going to put in 11 to 100 currently selling else we know you can then if you want you set up some options like to market on Facebook use MailChimp and Google Ads I'm going to disable all of those because I don't want those up but obviously if you do choose those and go to the relevant settings will hit continue you see we can choose a theme when we've already done that side of things so we don't need to worry about that we could basically skip that step if you want to so we say skip this step st. enhance your store with jetpack I'm gonna say no thanks because I'm not the biggest fan and we'll just say continue okay so once you've gone through that now we've got a couple of different options we can add our first product personalize our store set up shipping set of tags set of payments now obviously you would need to go through each one of those this is more a case of a design tutorial as opposed to how to set up bull commerce tutorial and I've gone ahead added a couple of very simple products next thing I wanna do is just quickly set up shipping set of payments so you can see how that's done so we say setup shipping you can see our prefilled out address details then we can just choose the shipping costs and so on so we can actually continue we were set up just standard free I say standard fixed-rate shipping so we're gonna say we got a fixed rate or 395 if you want to send this to rest of the world we can click to enable that we can set a shipping inside there and I say this is very simple shipping options I've got tons of videos on how to set up shipping which again you can check out in the description below so you can see how to set things up there but we leave the rest of the world out we'll say we're gonna just sell to our own country which is the UK will hit proceed and say enable shipping labels if you want to do this this is going to install extra software or actual plugins and maybe link up the services I never say no thanks to that I don't want to do that I'm not gonna worry about tax bills we're gonna just assume that this is not a taxable business but if it is you can run through the process of setting up whether it's v80 or regional tax or whatever it is set up payments we're just gonna keep this really really simple we're gonna say that we want to have cash on delivery and we're just gonna say ok to that if you were going to use stripe or PayPal PayPal probably the most obvious one most people will use you can hit setup on the fill out the relevant details which is normally just some basic info including something along the lines of the email address that's going to be used for your PayPal account receive payments and a couple of other things if you need help with that drop some information in the comment section below setting up a video to show you how to set up PayPal and all stripe if you want to use that for now though we're going to leave this to cash-on-delivery just so we've got a payment option set up inside there we'll hit done I will say there's the basics of our site setup okay so we say skip store setup now we're going to be taken into our store we can take a look at some overview information on WooCommerce itself if we come over and take a look at our products I'll just show you what I've setup inside there we've got probably about eight products set up if we click to go in and take a look all I've done is set up a couple of categories for the products that organize things put a description in put in the product image which you can see I've done using the same method as I said you're on in Photoshop then we've also got the price and so on and the short description so it's really really basic setup there's nothing complex in there at all so we've got everything set up inside WooCommerce now so we're ready to move on to start creating the layout for our site okay so now we've gone through all the boring stuff we're now ready to start getting creative and building and designing and do all those kinds of good things first of all let's go and set some basics up as part of the holo theme we're going to do is going to come into the appearance section either come down to customize now the holo theme is very very minimalistic there's only a couple of things we can set in there but they make our lives a little bit easier first of all site identity we're going to change this title to something there's a bit more in keeping so we're gonna call this art site now get rid of the tag links I don't want that inside there we'll say select a logo and we're gonna upload the logo that we're going to use so we'll just give that some alt text and we'll just say select the logo so there's our logo we're gonna skip cropping now you can see that now drop some logo into the top section come back out of this menus you can see currently we have no menu set up so let's just create one so we've got something we can use and reference until we want to put the actual pages we're going to create into it so say create menu and we're going to call this main menu we're gonna set this to be the primary menu and we'll click on next and then we can add item so we're just gonna add some basic information in so we've got like the home page and so on so we say we'll have home we'll just pop in cart a will pop in shop will reorder those people the cart at the end and will leave as it is okay so that's looking good we'll hit publish and you can see that now puts our navigation in the top right-hand corner will amend that a little bit including the colors and so on come back out of this exit out of this come in to your home page settings and later on we'll set that up so we don't need to worry about that now same goes for commerce and we don't want any additional CSS so we can close out of this and we've set up the basics now we can go in and start creating our templates so the first we're going to do is the header template come to the template section and down to theme builder this is then going to take us into elemental pros theme builder section where we can create all the key template files that we need for our own custom theme so the first thing to do is say add new we're going to select the template and we're going to just choose header from the options and we're gonna call this default header so this is the header this could be applied to the entire site click on create template once you've done that that'll open up the elemental editor and it'll show us all the blocks for the headers now you could use these if you want to as a starting point if you're not confident to create something of your own you could use it as is and just change the relevant bits and pieces over the styling and so on or you can use them as a starting point and then edit them to get something a little more unique however we're gonna just close this down and we're gonna start from scratch so we're gonna do is we're gonna click to add a new section at the top and this is where we're gonna house our logo so you know come back over to our widgets on the left hand side and search for logo we'll drive the site logo option up into the top and you can see because we set the site logo inside the hello theme it automatically pulls that in for us so there's our logo section at the top we can set that up we can configure it and do whatever we want to make sure it works how we wanted to so it's a link is custom URL it's up to you what I got to do when you see it says site URL but you could take that if you want to and set it to go anywhere or no way so with that all setup we're worried about the height and all those kinds of things in a little bit the next thing we're gonna do is just add in a new section so we're gonna add another single section and this is where we're going to put our navigation so come back up door widgets for navigation and you can see we've got navigation minute we're gonna drag and drop that over in today and you can see that now pulls in I wouldn't have met him we can now go through will configure this how we want so we can choose what menu we want to use so if we had multiple menus on here we could choose which one we wanted we've only got the one so that's perfectly fine you can set a horizontal or vertical layout and then even adjust your alignment so we just say we want place this in the center you could if you wanted to stretch it you can see however many items are on there it'll always make it go the entire width of the design that you've got we'll leave this to be centered that's perfectly fine we mouse over you can see that's the effect that we currently get and some to you if you want to create that effect whether you want to change it you can do pretty much whatever you want you can see the pointer tells us what's gonna happen so we've got none under line over line double line frames back row and so on so we chose background for example when your mouse over you can see you get this background effect if you want to change the color of that which obviously would make sense we can come into the style section and you can see we could adjust things like the typography the hover the active and so on so we can change different sections that drop down the toggle button we can control every aspect of this go in now what we're going to do is just set this to have the point to set to underline and we're going to use this kind of style we're gonna call to our Style section and we're going to change your typography slightly we're just gonna make it a little thicker because it's going to be used as the navigation and I want to stand out a bit better than it currently does it says click and you can see we can come down and we can adjust the weight on there we'll try some like 500 that's fine and we'll also transform this to it's all uppercase we'll adjust the color and we'll just make that just ever so slightly lighter so we'll adjust that to get it where we want none of up with a that's fine and you can see we've now created our navigation so there's our header basically in place we click on publish once we've done publish you can see it comes says what's the display condition you want to apply to this now display condition is just as its name suggests way and how do you want to apply this particular template we will click on add condition and then we can choose to either include or exclude so you can set up individual different display conditions it's up to you you can see at the moment says include entire site which is exactly what we want you can click to expand that you can see you've got some additional options inside there so you may want to use this navigation on all your site except for WooCommerce which may have slightly different options all your archives or your singular it's up to you and you can stack these on top of each other by added extra conditions in a zone where needed we're gonna keep this really super simple and set this to be entire site and hit save and close so we've now created our top navigation our logo everything is set up and that's gonna be applied to every single page on our site so next step we're going to repeat the same process but we're gonna go and do this for the footer so we're gonna exit to a dashboard back to our theme builder all we can do now is we can come over to footer and let me say add new footer and we're gonna call this one default footer create our template and we're gonna repeat the same process now to create the footer you can see we can choose from a library of predefined layouts if we want to or we can start completely from scratch so I'm gonna just go and do this I'm not gonna take you through with me because it's exactly the same the only thing that changes is the condition so I'll come back to you once I've set the design up and then we'll look at the condition option for the footer okay so there's the footer created all we need to do is hit publish now at our condition entire site is perfectly fine hit save and close we've now created our footer section so let's just take a quick look now what we've got on the page we can see how these things are working and all set up so there we go there's our header section with our logo and navigation there's our footer section all ready to have some content placed into it so let's just jump back into the dashboard and exit out of all of this and we're gonna come in create our first page we're gonna add our new homepage in so we're gonna call this home page we'll publish that that's perfectly fine we'll publish we'll edit with Elementor and we're now ready to start building this page out first things first this gets shot of this title at the top so we haven't settings and we're going to come to hide title that gets rid of that so we're gonna do now is we're gonna create a new section so we're gonna add a single row column section there and this is where what our hero image is going to be placed so we're going to do is we're going to set this up to be the way we want to look so what I'm going to do is first of all we're going to come into the style option and from there we're gonna add in an image so I click to add an image we'll click on the plus and we're going to use the hero image that we created earlier inside Photoshop so let's just simply upload that image to our site once that's uploaded we'll just give that some alt text and we'll just call this hero image and we'll insert that media so that's now put the image inside there we just need to configure the way we want this to look so what we need to do is just set the few parameters position we're going to set to be a center Center we're going to set this to be fixed so it'll sit in the background and scroll up as a nice window through we're going to set we don't any repeat on this because we want just the image to be on the one time we're going to set this to be cover so it'll contain it inside the port that you can see and if that gets bigger or smaller then it'll adjust accordingly okay so the next thing we need to do is just put an overlay over this so we can make sure that our text we're going to place on top we'll just sit there and look really nice so classic that's perfectly fine we're gonna choose the background color which is going black and then we can just adjust the opacity so we're gonna set this to about 0.4 it should be pretty good and well so you can't really see much of it at the moment so we've got a couple of different ways we could work with this I'm going to come back to the layout option and we can now set the default height if we want to so where it says height we're gonna click on that set a minimum height and we can adjust that to whatever we think is fine so start off with about 500 and adjust if we need to okay so the next thing wanna do is drop in some content that makes a little bit of sense this is where we're going to drop in our headings so we're gonna do is we're just gonna pull in a new widget to record our headings drag and drop that into this area gonna paste in the text we want to use we're going to set this to be H of 4 so in the hierarchy of things it's not as important as the next section I'm gonna set is to be on line to the center now you can see at the moment this is pulling in the style that we set up as part of our theme of style and as I said when we were doing that we can override these things by simply using the widget style so we can override it on a wood level and that just basically means if we make changes to various different parameters in size you like color spacing font size and all that it'll only apply to this specific instance which gives us a lot of design flexibility okay so we've configured things we just need to come in a style in so we're gonna come back into our styles now we don't need to change the font style because we're using muli which is the font style that we want to use we are going to change the text color first of all to set that to be white so that now stands off the background a little better we'll change this to be a size 16 so we're just controlling the size of this the weight we're gonna set to 200 and then we're gonna set this to be uppercase and finally we're gonna just the letter spacing to make this just a fair bit wider so we're going to set this to about seven there we go so that means we've got this nice little sort of section at the top that gives us the information about who the artist is and so on okay so with that done the next thing you need to do is pull in another heading so we're gonna come over we're gonna drive another heading in and drop that underneath there and we're going to do pretty much exactly the same again we're gonna drop in some different text now drop in the type of art that it is we're gonna set this to be h1 because this is going to be the primary text we want on this particular section we're set this to be center-aligned and now we need to go in and style this differently because at the moment it doesn't really stand out too much so to do that we're going to come up with a style section there change the color to white again so it stands out typography we're going to come into there and we're gonna set this up so muli is just going to be using the default that's fine with a set of font size too pretty large with a set this to 110 pixels we're gonna change this to make sure that it's nice and big and bold and if we hadn't put this in in capitals just to make sure that if we make any changes we'll set that to be uppercase as well so we've now got our section in there we go a subheading or main heading without finally gonna drop a button in underneath it so we're gonna drag and drop a button in position that what we want and again you see this is gonna pick up our default styling so we set this to be centered if we want to make any changes so obviously we do we're going to just change this text to shop the collection so there we go I don't want the hover of on there I don't want to sort of drop shadow so what I can do is I can simply come into the Style section come up the block shadow and just make sure there's nothing apply in there so we can just set the blue it would take that off to make sure and we'll do the same thing then with any box shadow so it means that we don't have that styling applied to that so there's our top section I'm just going to make this a little bit bigger against gonna select it we've got a minimum height of 500 we're going to bump that up a little bit just so it has a little bit more visually impact so we're gonna go to something like about 650 that looks pretty good okay so we've now created our top section as you can see is a fixed background so that looks pretty cool we can see the artwork through this gives a nice visual representation of the artwork kind of in Scituate the artist was working on it using that design that we set up as part of Photoshop so there's the first part done the next thing I want to do is some information about the artist underneath so we're gonna scroll down we're gonna add a new section again we're gonna set this up to be two columns this time we're going to select two columns we're going to put in some padding and spacing around the outside of this we're gonna come in we're gonna unlock these two and we're gonna try we'll try 72 the top on the bottom and again like I said with everything like this if we want to make changes we can easily do that gonna grab a heading section and drop that in on the left-hand side and we're gonna put the artists name in there so we're just going to put that in we'll just paste that in there we'll set this to be h3 and we're going to adjust the aligning to make sure this is on the right-hand side and again if we want to make changes to this we can do we can set any kind of styling we want and we come back to that in a moment next thing you want to do is just put in a small divider in between and then we're going to just drop in another heading underneath so we're gonna come in drop a heading under there and we're just going to put in whatever artist years which is a botanical artist we're going to drop that inside they set that to be right aligned as well okay so there's the info in it let's just say that's a H for the infos in there we can worry about styling that in a moment because we've got the next section we want to put in so we're going to come over and we're going to choose our widgets and we're gonna grab a text widget drop that inside there and we're going to put the text we want to use in for the artist so with that in place we can drop in one more thing which is going to be a button at the bottom which we're going to change to read more now obviously you'll come back in and link these once you've created all your page structure but for now this is a perfectly fine starting point no the next thing I want to do is adjust the alignments on these two different sections and also the size of them so I want this section on the left-hand side to sit centered with regards to the right-hand side so it means that doesn't matter how much content in the right-hand side this will always be centered on the left now to do that it's super easy we're gonna click on this column I click on this top left-hand little icon that pops up from there we can adjust things like the horizontal align or the vertical align column width and so on to set this to be middle and I can see all the content will sit in the middle of that particular section we're also gonna make sure this is selected we're gonna set this to be we'll try it 40% that'll be okay so you can see now this takes a little less space up this gives a bit more space on the right hand side okay next thing you want to do is adjust the text on here as well because at the moment it's a little too small we want to make it stand out and make it a bit more prominent so what we need to do is select this come out of the Style section and from there we're gonna adjust the typography so we're going to set this up to be about 80 pixels maybe got a lips nice and tidy and large we're gonna change the weight on this to make it a little thinner now obviously like I said oh you want it depends on the font you use in to whether it's actually supporting the font with the setting next up we're gonna just our little line on there we don't want that to be full width we're gonna adjust that I'm gonna set that to be probably around 20 percent will adjust to go to the right-hand side and we're going to do is we're gonna change it from solid and we're gonna call it dotted come in to our style and we can do is we can either change the color or we can change the opacity so I'm going to drop the opacity down so it's a really subtle little separator line and then gonna come to the botanical artist and that's perfectly fine the size that that is I'll leave that there what I'm gonna do is make it slightly lighter so it's not quite so prevalent on the page we're gonna drop that down a little bit like so there we go and I just come into this and we're gonna adjust the gap on there versus like there we go that looks pretty good okay we no need just to make a bit more space between this left-hand section and the right-hand section so you can do that in various different ways what we're going to do is we're going to click on the left hand column come on to advanced and check the padding options and then on the right-hand side of that we're gonna set something like we'll try 50 pixels that looks good click on the right hand column and do the same thing come to advanced we're gonna uncheck the piling options but this time on the left we're gonna set 50 pixels in there so you've got a nice space in between the two sides so that's all looking pretty cool there's one more thing I want to do just before we sort of finished this little block section I want to change the background color ever so slightly I want this to sort of be just an ever so slightly pale gray so select the section and come over to style from the just make sure that that section said set go come over to the background section click on classic and formerly we're going to drop in the color you want to use which is a super light gray and you see that just assigns that little bit of grayness to it finally we come to the border then uncheck those we're going to set a border of solid and we're going to set the bottom to be one pixel when I simply drop in that light gray color we just chose so we can reference that and we're gonna just drop it down a couple of shades so it's really really subtle okay so you probably want to see it right now but when we finish the page you'll see that separation there okay let's add another section this time we're going to just create a two column section and this is where we're going to have two nice ways up going through to into the shop or into the portfolio for the artist first they want to do again is come in to advanced and we're going to put some padding at the top and bottom you want to keep it nice white space between each of these sections just so they stand out from each other and they don't sort of encroach upon each other's spacing now we're gonna use on here is we're gonna just come in and we're gonna set up some call-to-actions and the reason we're going to do that is because we can create some nice simple hover effects that just adds a little bit of motion to the site when someone interacts with these different sections it's a nice visual cue to show people that they can do something like interact with this and go to a different part of the site so let's come over and we're going to search for call to action and then we go this have a call to action so we're gonna drive our first one drop it into the first column and now we can go to the process styling this and setting it up how we wanted to look so you can see when we mouse over we get this sort of interaction of the placeholder image zooms in a little bit and rotates ever so slightly that's a good starting point we're gonna change that over to something else so the first thing I want to do is change this to cover that gives us a nicer looking image click to change our image we're going to choose the image we think it's going to work well and I'm going to pull this one up because it looks a kind of interested image that's not just focused on the actual artwork so click insert you can see that now drops the basic information in there for us and I will just go ahead and start styling things so image size we can set that so whatever we think it's going to give us the best representation so we'll go for I'm gonna go for full cuz these are sized they're not too big we're gonna go to content from there we can now set the content up on how we want things to look first thing to do is type in the title for this which is shop for prints we don't want any description in there so we're going to select the description and remove that from there the title of h2 is perfectly fine and then we going to change the button text to start shopping so we give it a call to action for where they need to go and then the link for our shop is basically just four slash sharp four slash apply to button only ribbon well we don't want a ribbon on this so we can leave that as it is okay we're getting somewhere now we're starting to get where I want beat let's go to the style tab and let's just configure this so we've set the height on here we want this to be about three hundred and sixty pixels so there we go the alignment center that's fine we're gonna leave that as it is come to the content section and we start styling things in if we need to so you can see we can change the colors the title of color and so on we're going to change the title of color I'm going to set that to be white to make sure that we control exactly what that's going to be the button we're going to come out to the button section and we can just configure that again inside there so you see at the moment it's white on white so we need to change that text color and we're going to set that to be a dark grey and you see that now stands out immediately from there now if we go over the button you can see that I actually shows transparent which doesn't look good so we're gonna do it jump to the hover section we're gonna set our text color to be that same gray color we set our background color to be white and we're not gonna worry about the border cuz that's already set so you can see now that just allows us to keep that white button all set up inside there so we're nearly there we're getting closer to the end effect that I want click on hover effects and this is where we can control how this looks when we hover over it so gonna do hover animation we're gonna set to be none hover animation for the background zooming is perfectly fine but we've got to set an overlay so we can make this white text stand off a little better so going to click on there we're gonna choose black and then we're going to adjust the opacity to taste so we're gonna set this to be quite light but it allows us to see the actual text of the shop footprints option okay so that's the basics they all set up and there's one more thing I want to do to this hover effect I want to switch over to the hover option and inside there we're gonna set a CSS filter now set that to be blurred so what happens is when your mouse over you can see the background photo will blue so it gives a nice effect it allows us to see the shop footprints and the start shopping button just that little bit clearer that's looking pretty good but there's one thing I'm not too happy with and that's the image that's being used in this so what I've done is I've gone ahead and I've changed the aspect ratio of that because currently this is a portrait image and that's kind of why you're seeing it looking a little zoomed in so we're going to do is we're going to come back to our content section we're going to change this image and I would also recommend if you find that you're setting things that when you're not happy with the way things look adjust them make changes make sure everything looks good because these are important things when you're working with a client so now drag and drop in the edited images so these are the same images that are going to use they've just been set to be portrait as you can see there's the one I've edited and click that was the original one so we'll insert that media and you can see now that looks infinitely better because the aspect ratio works much better so that's the first one that's the shot for prints one all done next thing we need to do now is basically duplicate that for the next one so we're gonna come over we're going to click on this top right hand corner we're going to right click on there and we're going to say duplicate then we can just drag that over with the right hand side and now what we need to do is just come in and make changes so we'll change the background image for the image that I want as they insert that there we're going to change the button so if we come over to the content we can say shop for prints we want to say view my work and while I'm at it I'm also going to come in and change some options on this so let's just take that link out until we know what link we're going to use no change the start shopping and say start browsing there we go now we have to come to a style section we're going to come into our content and from the we're going to just make sure that our title is set up to be capitalized so because change the transform to uppercase that looks a lot better and we're gonna adjust the size on there I'm gonna set that to about 26 now let me just show you a quick way now of copying that over we're going to right click I'm going to say copy go right click on this one we're gonna say paste style and you can see now that picks up all the styling we've just applied so we now have our two sort of called action sections I like the view work or short for prints both are animated both give us a nice visual representation when you interact with them so you're a couple more things I want to do we're going to put in a featured work section which is going to be a link through to the sales section on the shop so we're gonna do is gonna add another section in like we've done before we're going to just set this up to have plenty of space around this we're gonna come in and we're going to set the section into advanced we're going to set sections to have 70 at the top 70 at the bottom to give us a lot of nice white space and again like I say this is things you could adjust as you go along to fine-tune and refine the overall design we're to drop in a heading section in here and we're going to drop in the title or for this which is going to be a featured work h2 is perfectly fine because this is going to be an important section and we're going to come into the style when I come into our typography and we're just going to set this to be uppercase okay so that looks good I'm going to drop in a divider underneath that and we're just going to quickly configure that we're going to set that to be dotted centered we'll change the size of this to be about 20 percent again we're gonna come at the Style section we'll adjust the gap on there to tighten things up a little and we'll change this so it's a little lighter they say it's all about subtlety when you're working with sites like this the images should be the key focal point whereas the actual pieces of content need to sort of fade into the background a little bit to allow those images to sort of shine through okay so we've set that up the next thing we need to do is drop in our featured images okay so how do we do that well let's come onto our widgets and we're just going to type in woo and from there we're gonna grab the products option to grab that drop that underneath our little divider and you see this now pulls in a range of products what we can do now is we can adjust and configure things on here so at the moment it says columns 4 which is fine that looks quite nice however we only want to have one row because we going to show one row of featured products and that's all we're going to show now we don't need pagination because we are literally just showing a couple of products that we say under featured we want to make a bit of space around this though before we go any further so let's come into our Advanced section and check this at the top we're gonna add in 30 pixels and the bottom we're gonna add in 30 pixels there as well again if we want to adjust those we can do we're gonna select those select our blue products under content you can see we have query now this is set to be featured work at the moment is showing the latest products so we're gonna do is we're gonna choose featured and all our products may well disappear if you have that they do disappear all you need to do is go into the dashboard into your products and set some of those products to be featured I'll show you that in a moment now you see it says include and exclude if you want to filter these out we can ask you different categories or tags and things or we can include only specific tags and categories up to you how you want to sub filter this we're gonna leave it as is we're just going to choose the top four featured images or products order by date order by descending up to you again you can choose title price popularity whole range of different things you can even randomize this so each time someone lands on the page they'll have a different set of options to choose from okay so that's the basics of dropping that in there we can now comment the style tab and we can configure different things now you see it says your theme style of widget is often affected by your themes and plugins well because we're using hello theme doesn't really style much so we're pretty safe with that however you can't see some things don't really fit in with what we're working with like the prices being in green things being aligned to the left hand side so let's adjust those kinds of things let's set the alignment to be Center and that immediately rectifies that problem they know we can do is we can come down if you want to apply anything to the images we can do that we can also adjust the rows and the columns to increase or decrease the spacing but I kind of like the way it looks straight out of the box that looks okay titles what we're gonna do and they was gonna make those just a little bit heavier so we're gonna click and we're gonna just adjust the weight on there and we'll try 400 and that looks bit better okay star rating well we're not using any ratings on here at the moment we're not too worried about that we are gonna do though it's gonna come down to our price and we're gonna make those darker so we're gonna set that to be dark we're also gonna adjust the typography so we're gonna set those to be 400 at least let's go for 500 so a bit heavier we're gonna do is we're gonna adjust the size on those so they stand out just ever so slightly four year old 15 there we go let's just set that like that actually there's got a little bit stronger again let's try seven 700 okay that looks good so we've now set those up now we can adjust the button so we're gonna set the button color to be white we want this to stand out from the rest the things we want to buy no button or add to basket button to be very prominent very clear to see so we set the text of white the background we're going to set to be this dark gray border color we're not gonna worry about a border on it typography well we need to change that a little bit we're going to set that to be uppercase again and we also going to change the weight on me so set those to 400 we'll set the size to be in keeping we'll set that to about 15 transform those to uppercase so they no stand out I'll just make this a little heavier again let's try 600 kind of just make them a little smaller or fourteen okay sounds pretty good I like that and if we want to we can adjust the text padding and the spacing and all those kinds of things so you can see now we've got our Add to Cart button we can change the harvest if we want to as well so we could say we wanted to set the color will set white on me I will do is we will say the background color will change this blue color will try that then we go in your mouse over you know get some visual notification that you going to be doing something okay border-radius zero I like the nice square edges if you want to adjust the text pattern you can do that so we still have tons of other things we can change on you if you want to the box as flash sales ORS kind of set those up as you see fit however what we've done is now we've created a great-looking homepage let's update this page and let's just hop over to our test site and take a look at this page in action and see if we think anything needs to be tweaked a spacing any wording anything at all okay so there's our homepage let's take a little look at this now a navigation top is all working we've got our nice hero section at the top Oh buttons information about our artists then we've got our nice call to actions with the animation effects the Blues and so on then we've got the featured artwork for each of the featured products and a footer at the bottom so everything is looking tidy now I would 40 go through and tweak a few things on here adjust the spacing above these call to action reduce it a little bit underneath maybe so I'm gonna go and quickly adjust those things and then we're gonna come back and take a look at how we make sure that everything works on mobile devices then making sure your site looks fine on mobiles and tablets is something is super important an elemental pro and Elementor makes pretty much super easy what we need to do is switch between the different preview modes to do that we come to the bottom we've got responsive mode which is that little icon that looks like a computer screen we click on that we have three options currently desktop tablet and mobile if we switch to tablet view you can see now our screen will change over to show us the tablet representation of what our site will look like at which point we can now come in and find to you in anything that doesn't look right now the important thing to consider here is what you change on the tablet view will also scale down to the mobile view but you can still adjust the mobile view independently but if you don't whatever you change on the tablet will cascade down to the mobile it always goes down it never goes back so in other words if you change the mobile the changes in the mobile will not have any impact at all upon the tablet or the desktop it only works top-down so what we can do is we can adjust the way the things look on mobiles not on tablets I should say first of all so we can click on this we can adjust the size of the text for example so at the moment that's probably a little too large let's just that should adjust the size make sure everything looks good there we go around 80 on there we'll adjust the line height as well just to give us a bit more breathing space on there so that's adjusted that now for tablets but what we can do is we either come back down to the responsive mode option at the bottom and switch it into phone mode or we can use this little symbol next to the size and anyway you see this now you can adjust the settings on those devices so lion height might letter spacing size and so on so we click on there we can choose to go down to mobile you see now that will switch to mobile view and we can adjust the size on there accordingly so we'll change that over so that looks good as well so we're just the botanical ardour see let's just put out the two lines doesn't matter so much come to the first section the sort of subheading I would adjust the text on there as well so it doesn't look quite so squashed apps will adjust that will adjust the line height bit of breathing space if you want to adjust the padding and the margins and so on you can do that so we can select this section and you can see we've got the minimum height so we can adjust the minimum height now for the mobile device and so on so we can adjust that on there till we get what we want so we'll just say we'll set that to about 400 there we go and now you can keep on doing this going through these different sections to make sure it looks good on all the different devices you can do the same for your headers your photos to make sure all those are in line and the nice thing with us now we're the latest version of Elemental as you can see we can now edit inline currently we're editing the page content but if I want to edit the header I can simply come over and you can see you got this little yellow symbol that says edit header I can click on there we'll say save the changes we've made to this page and you see now we're working with the header so we can do is we can select the for example and we can make that smaller so we could come over and adjust the size on there so you can see we can set the max on width the maximum width on this wheel adjust that to get what we want so it isn't quite so in-your-face there we go and then once we finished with that we could simply come back over our page section click the yellow edit page hit save and we're now editing the page so we can go through like I say edit all this to make sure it looks good on all the different devices just using these simple techniques to style things to make sure it all looks exactly as you want it to so with a little bit of time and effort tweaking you can see this is our desktop view everything is looking nice and neat and tidy chilled or tablet view you can see that now adjusts to compensate for the smaller viewport that we have you can see our products now change to be in two by two instead of four by one and if we jump over to mobile view finally you can see we adjust even more so so we've got everything is laid out nice and neat and tidy so that's how we go about setting things up switch it over to mobile switch over to tablet and making sure that we've set everything up to look as good as it can across all those different devices and that's the home page pretty much covered off the final thing we need to do is just set this to be the default home page so let's just switch this back to desktop view we'll click update to make sure whether we've saved any the changes and we'll just hop back out of Elementor from there we're going to come back into our dashboard down to our settings and down to reading and from there we can set the static home page in a slate home page choose the home page to be homepage hit Save Changes and now we come back to our test site and refresh this home is now on a home page all set up nice looking good okay so we know we done that the next thing we're going to do is we're going to move on in the next section to take a look at how we can work we've set it up our default shop page so the next thing we need to do is create the shop page now there's a little bit of a problem with this I want to demonstrate to you if we jump over into the site itself and we come over to the shop page by default WordPress and WooCommerce will set up a typical shop page for you and that's perfectly fine but we can't really do much to this we can't edit it because if we cut Michael at the dashboard or we go to our pages we'll find us a page called shop if we go into edit that we can up the page up and we can see we can access the shop page if we click and edit with elemental will open the page up and we'll get this error saying the content wasn't found it's because it's being used as a template that's predefined as part of all commerce so how do we get around this it's not as complicated as you may think let's come back out of this page and what we need to do is forget all about that shop page for now we're gonna come into the template section and down into our theme builder from there we're gonna come in and we're gonna go to the product archive so you can see once you install WooCommerce you'll have these two new sections single product and product archive so in a click on the product archive and we're gonna create our new archive so we're gonna call this product archive actually let's put default to the beginning of that so we know what we're doing with it so it's a create template and then we can create our own custom template now you can if you want to use on the predefined template as a starting point entirely up to you for this example we're gonna X out of that and we're just gonna come into the page itself now what we have on the left hand side are our different widgets that are specific to the WooCommerce archive page so you see we've got archive title products archive description and we have some generic WooCommerce options underneath now what we need to do is just grab that archive products and drag and drop that onto our page and we now have pretty much exactly the same as what you saw on the shop page however because this is being done inside Elementor we can now control all the different aspects of it like we did with our featured image or our featured products so what can we do what we need to do now is basically match this up style-wise to what we have in this section so our text so I add to cart or find out you know the amount of money was gonna cost the styling and so on so the easiest way of doing that is to copy that information over to do that I've opened up a second tab and I've gone ahead and loaded in into Elementor the home page so we've got this section we we can now use the easiest thing to do is to copy all that information and what have you I copy it I don't mean open this up and then go through all the different settings we can do is because we use it a very similar type of widget we can simply come up to the widget sort of handle in the top right hand corner click on that and we gonna right click and choose copy I'm going to come back to our archive page we're going to come back at the same place with a right click and say paste style and you'll find then that'll pick up the spacing it'll pick up all the styling for the buttons for the text for everything and we literally just saved ourselves ten minutes worth of work by just simply copying and pasting that over okay so if you wanted to tweak anything we could do that if we wanted to add any more widgets in we could also do that so you may want to put in breadcrumbs for example well you can drag that drop that into the site and you can see there's our breadcrumbs for the site we could either go through and style those accordingly entirely up to you what you want to do on there for this example because we're not dealing with many products I got to take that back out because this is a very simplistic kind of site so what else could we do well if we wanted to we could put a nice big banner heading across the top there to make it known that it's the shop so let's say it make our lives a little easier let's come back over to this section we're gonna scroll back up to the top we're gonna use this as an example so we can do is we can just do the same again we can copy this come back over scroll down the page so we're outside the actual widgets we have created already into this area where we can create a new section right click and say paste and that will paste in that entire section block now we could drag this up from here but if you have a long page that could get a little bit awkward so what we can do is we can easy use the navigator click to open the navigator up we get this little floating panel in the right-hand side and this will show us all the different sections if you want to keep on using this and you don't want it to sort of overlap your information you can just drag that over to the right-hand side your screen let go and it'll dock to the side so now we can do is we can easily come down these different sections expand them out see everything that's inside every different part of this and we can just grab this column and drag it to the top or we could undo that and we can just grab the entire section and drag that above so now what we've done is we put that title section inside there let's close don't navigate it down and let's just tweak this a little bit so obviously it's a bit big and imposing and we don't need to have all that on there so let's quickly just tweak that to make a little more sense well select it will adjust the height on this because you don't need to be anywhere near as big as this we'll drop it down to about 320 somewhere on there we'll change the size of this as well because it's a little bit on the imposing size we'll just change that typography we'll drop that down a little bit maybe to 80 and we'll take out shop the collection because well we're already shopping the collection so we'll just delete that from there and we now have a nice fixed header we could publish that and we get take it through to the add a condition again now the conditions are important at this point so it'll tell it exactly where to use this template so we say add a condition and you can see it says all product archives click to expand that out you can see we have different options to what we had with the first template we looked at what we've said and things like the headers and footers so we can do is we could set this for the shop page all product archives the search results product categories or product tags now it's up to you you may want to have different layouts for different parts of your site however for this example we're working with all product archives it's perfectly fine because if someone's searching for a product you know how the results are the same kind of page so we'll say that's perfectly fine and we'll say save and close we've now created our own custom shop page let's take a look at this in action we're back onto our test site and as you can see if we come through no to the shop page click on there it now takes us through to our new custom design shop page with our custom header and everything styled to look the way that we want so it's not as complicated as you first may have thought and it gives us a lot more control over how this all looks now if there are any elements on the page you may think that you want to style you don't have control of those maybe insight element or you could if you wanted to target those directly with custom CSS code I'm not gonna go into that class probably it's a bit too complicated for war on a cover in this particular tutorial but those options are there should you want again a customized things even further now that we created our custom archive page for our shop what about the actual page for each individual product if we take a look currently it's using basically a default layout this part of WooCommerce the buttons don't match up to what we want you know there's a few things we need to tidy up inside you so let's take a look at how we can create our own custom shop single post page it's basically to do the same kind of thing as we've done before gonna come back into a theme builder section this time we're gonna choose the single product we're gonna create our first single product now call this default single product and we'll say create template now from this point we could do one of two things we could choose one of the predefined layers and use that as the starting point or we may want to just use it and use it exactly as it is it's entirely up to you and that's what we're gonna do today we're just gonna take a look at making our lives easy by using what's already available to us so we've already got a couple of different options they really are quite limited in what you can do but like I say you can use these as a starting point and then edit them to your own heart's content to get exactly what you want throughout your design so let's just choose this first one we'll say insert that that will then download all the assets and you can see that now inserts the layout now obviously there's a few things that are wrong with this things like the font styling it's not necessarily what we want to set up because the template and the widgets are overriding what we want to set up so we can rectify that quite easily all we need to do is come over any of these elements so for example this section of the top which is the sort of breadcrumbs to this particular product and we could right-click and we can say reset style and that will then take off any widget styling and just reset it back to the default style and so it'll pick up the fonts that we've used that we set up through our theme style or style kit you know kind of thing same with the head in we could right-click we can say reset style and that enough starts to pick up our formatting so we can just quickly go through reset all those different elements making sure that everything is back to what it was originally we do the same thing with the buttons and so on so we can change all those however I think I'll leave that as it is because that's pretty much in keep into what we have so we can quickly just come in reset everything and then adjust it to our taste once we've set everything up so let's just do this final section by we'll reset our styles there now obviously that looks a little bit on the terrible side but that's easy enough to rectify it let's start with this related product section if we click to take a look at it you can see it's edit product related so this is the related products and it's just at one of the widgets you have inside elemental pro what we can do is because that's just using a very similar grid to what we set up for the archive page and also on the home page for the featured images or the featured products we could come back and do the same again so we can just right click copy this jump back into our template right click and say paste style and you see that now picks the styling up from there and we can just quickly change this we don't want four columns we're going to set that to two and that now immediately looks a lot better it's also in keeping with the design aesthetic that we've set up for a home page in our archive page so I'm not going to go through tons of different settings inside you I just want to show you how easy it is to edit all these different sections and just assign it anywhere you want so for example with this we may say that we want to change this from heading 1 to heading 2 and it'll pick up and continue with the styling that we set up on there so we've created a custom single post page or single product page we can now click on publish and we get taken through to the add condition options again so we say add a condition include products click to expand it you can see it's very similar to what we have with the archive we can choose products which is the global range of different products or we can filter on down through and if you look at this there's a hierarchy being used here products is the very very top levels this applies to anything that has to do with a product next up you got in a category so any products in a specific category so we click on that you can see we've got all categories or we could filter it down to different categories then if you go through to in child product categories it filters down another level and so on and so forth so you can use this to control exactly what happens in that level and below so we've said back to products that's fine and we'll say save and close we've now created our custom single product come back over now to our example page and we'll refresh this and then we go we now have our styling setup now there are no related products on the one because there's nothing actually selected inside you but you can see that it's very easy to take the basics of a predefined template and use those as your starting point and then you can just tweak and adjust to get exactly what you want inside them and what are the other important parts of any online shopping experience is the account page and as you can see the account page inside sure because we use it in the hello theme it's basically unstyled we've got all the different elements we need in me but that's pretty much all we have but we can edit that now I'm going to give you a very very brief overview of how we can set this up if you want a much more in-depth tutorial on how you can create a much more customized my account section I'll put a link in the description to a video I just released doesn't take you through to create much more unique much more feature-rich and comprehensive account sections for your WooCommerce store now when you install WooCommerce it adds in several different pages we've already seen the short page but also adds in things like my account so what we need to do is go in and edit that no it's not as complicated as a bit first may seem you can see if we come into the pages section we've got my account so we can edit that but we can also then edit it with elemental because what happens is it basically puts a simple shortcode in which is this what you can see right here so if we go in and edit with elemental elemental will automatically just insert a new section and then that'll drop in the my account information and that's what you can kind of see right here so we could use this to just tidy things up a little bit you could get creative if you wanted to it's entirely up to you and like I say the other video that I've created will show you in a lot more detail how you could do just that but just for simplicity sake I just want to show you how you can make this look a little bit better and just take out that sort of horrible look where everything just sort of butts up against the headers and the footers and all that kind of stuff so let's just tell you things up just a little bit now the first thing I want to do is you can see by default it pulls this shortcode into the text editor and that's not necessarily the best way of doing it so what I do I'm going to cut that out of it and we're just gonna simply delete this when I come over we're going to search for shortcode drag and drop the shortcode into there and I'm just simply paste the shortcode in and it brings the same thing back up might just be me being a little bit OCD bit nitpicky but I'd rather do that way okay so there's our basic layout all the things we want in there and again if you want to style this with CSS you could get stuck in and get as creative as you want to but we're going to keep this really really simple and clean so we're going to do is just make our account a little bit more logical first of all we're going to come down to the settings in the bottom corner I'm going to turn off the title we're going to do that manually next step we're going to do a new section so one of you is just click to add a new section make this a single row and column and position that above the actual content select that commit to style what we're going to do is we have set a background aside your way to really really pale gray something like this maybe a little paler again there we go okay we're going to make a bit of room underneath where we've got one of our links and everything so we do like we did before we're going to put in 50 pixels of padding top and bottom and then we're gonna come in and we're gonna grab a heading drop in there we're gonna send to that I'm gonna set that to h3 and we're gonna change that to my account and once we've done that we're gonna come back and we're going to come to our widget so when to do a search for breadcrumb and we're going to drag in the wool breadcrumbs and drop that in there and the same again we're going to center that now I need may need to make this background just a little darker because it doesn't look like it's showing anywhere near enough so let's just darker that here we go that's better and we'll just add in a little bit of extra spacing around this section so we'll select the section we're going to do is we're gonna come back to layout and we're gonna come into our column gap and we're going to set those two extended just so we have a little bit more room we're going to select this column section and we're going to set the vertical align to middle just to make sure everything lines up nice and tidy okay so we'll hit update on there now we'll come back in to what we had originally will refresh this and we now have at least something that's a little bit more interesting a little bit more professional like I say you could get as creative as you wanted to with this and I would highly recommend you take a look at the dedicated tutorial on how you can completely nightly customize the my account section in your site but just before we leave this section let me just show you why I put the bread crumbs in you can see it says home and my account now home is basically right back to the beginning of the website but if we go into one of these endpoints is is called like for example we go into orders you can see that updates the breadcrumbs to show us exactly where we are within our structure of our account so you think it's a nice way of making people see exactly where they are what they're looking at in a nice visual but simple fashion so before we finish this section that we just need to go ahead and put the my account link into the navigation otherwise people are not going to know it's they to do that we're just going to come back into appearance into menus and from there you can see we've got pages my account will select that added to a menu and position it where we want then we'll just click to expand that and we'll just put a capital for the a which isn't really necessary I suppose because we capitalized everything but my OCD like I say we'll just hit save on the menu and we'll come back to our site just to test it out will refresh and we've got my account which we can go into and everything is laid out as we'd expected to as we just set up so that's where we finished with the my account section and obviously there are more pages you can get in and customize and edit and style and the process is pretty much exactly the same you know most of you commerce is all controlled via short codes so you could simply go into the cart page you can get the checkout page any of those and then edit things customize things so everything looks the way you want it to if you want to get in really down and dirty you can get stuck in and start changing things through CSS there's a whole world out there of what you can do to this to make it truly unique I wanted to show you the basics so you can get a ground it in it and this up to you how far you want to take this so now we're ready to create the portfolio for this particular website now there's lots of different ways you could create portfolios you can create something fairly simple which is what we are going to do or you could get really complex and start adding in multi levels and tons of different things it's up to you how creative you want to get but like I say for this example we're going to keep it fairly simple because the key aspect of this is more the shopping side of things and you're just going to see the portfolio with some examples of work nothing more than that really okay so what we're gonna do is we come into the pages we're gonna add a new page and from there we're going to call this portfolio we'll publish this and then we'll do it will open up element or like we've done in the past now with this open first thing gonna do is get rid of that ugly looking title at the top of the page and then we're going to come in we'll come into our widgets and we're gonna do a search for gallery now you could use the portfolio if you wanted to create individual posts for each one of the gallery items all on the portfolio items like I said we're gonna keep it fairly simple for this example we'll grab ourselves the gallery widget and drop that into our page now from here we can create a single gallery or we can create multiple galleries now if you want to create multiple galleries you can organize different types of artwork into different galleries so you may have some like watercolors you may have sketches oils acrylics whatever you wanted all you need to do is choose the type at the top and just choose between single or multiple now we can use dynamic images if we wanted to and if we were going to link this suit is suddenly advanced custom feels you could do that as well but like I say this is a fairly simple method I'm going to keep it to one single gallery and we're gonna do is which is gonna click to add the image we want into it now just for this to keep it simple I'm just going to choose the same images that we have inside the shop just because it makes my life a little easier than uploading a ton more images will say create a new gallery we'll insert the gallery and you see that now loves the gallery in at which point we can now go through and fine-tune the layout so you can see it says order by we've got default we could randomize that if we wanted to you can also set this to lazy load so if you have a large gallery and you're gonna have people sort of scroll down the page and lazy load would probably be a very good option because then it means the images are only gonna be loaded in when they're required if someone stays at the top of the patient doesn't scroll down you're not loading tons of images in and having a slow sort of loading page then we've got the option for the layout we've got grid justified or masonry so if we just switch to justified you can see and I just puts them in currently as squares we come into masonry if you had different size images different scale images they would sort of show up in a different scale so that's very good if you've got a layer of images that could be portrayed landscape square different aspect ratios masonry is probably gonna be a good Cynthia we're going to set this back to grid we're gonna set our columns to be three so we can have bigger representations of our images we can adjust the spacing if we want to between each one of those images we're going to set that to 20 and we can do it then we can say what do we want the two you want to link it through to a media file no link whatsoever or a custom URL so if we leave it set to media file it should open it up inside a nice lightbox so that's a nice way of viewing those images but obviously inside up to you how you want to do it then we've got the aspect ratio so where we're using the grid is resizing things we can change that aspect ratio between quite a few different options if we wanted them square we could just say one two one and you see that now pulls in the square version if you wanted to create something like sixteen by nine so you could do that and set that so obviously it comes down to the kind of images you want how you want to lay your gallery up all those kinds of good things so we're gonna set this to be one to one because these images are effectively square where we've loaded them in next up you've got the image size now currently this is set to medium which is 300 pixels square now obviously you can see they don't look the best quality so we need to up that to another level so we'll try it this option and that looks immediately better then you've got the overlay so you can see when we take our mouse over we get this nice overlay effect which again going back to the home page where we created those different call-to-action sections this is a nice way of giving some visual representation when you mouse over them that something can happen and what you can do is you can set that back on or you could set it off so you disable it then nothing will happen when you mouse over say for me I prefer to have that on there but what you can also do is you can drop a title and/or a description in so you can see if we open that up we can choose from any of the different data you can assign to any kind of image inside the media light bit as part of WordPress so we set the title for example if you decide the title when your mouse over you'll see that title will come up on the screen if you wanted something else like the alt tag you could do that and you'll see the alt tag will pop up now for me it's the same on each one if you want a description if you put a description in there you could do that so depending upon the type type of gallery that you create they could be very useful for me I'm going to disable those I don't need them I think visually it's more interesting to see the images and not worry about the names of them in this example then obviously you've got the style and you can adjust things like the border colors the overlay the contents you can adjust the size of the text the style of the tags padding and all those kinds of things so you can configure this any way you want to make it look as good as you want to but with that being done we'll hit update and we've now created a nice clean and simple portfolio of images the final thing we need to do is just add this into the menu so I've already gone ahead into menu section choose portfolio add that we're going to just put that next to the shop and we'll save our menu so we've now got our art site we've got a portfolio of a shop next thing we need to do is add a couple more things in we're gonna add in a list of exhibitions so the artist can create their list of exhibitions so people can see those keep us up to date we're also gonna put in the ability to add a list of the classes that they teach because they actually go out and teach which i think is quite cool so we've got two more things to do these are gonna involve some extra tools that we haven't installed yet and this is a purely optional step if all you want to do is design something similar to this if you want to you can leave it at this point however if you want to see how to create something a little bit more customized where we use advanced custom fields and so on then stick around for the next two sections because I think these are going to open up some extra possibilities if you're creating a site like this best of all they're pretty much free now to create these two new sections we need a couple of extra plugins now we're gonna be using three plugins for this advanced custom feels a custom post type UI now if you are new to this and you've never seen or used these plugins before just bear with me because we're gonna have a very brief overview how you could create something similar to what I'm gonna do now but if you want to learn more about this I've got tutorials that I'll put a link to in the description that'll take you through the very very basics of both of those tools to get you comfortable to where you could create these kinds of things without any kind of problem now advanced custom fields has a pro version and if you want to use some of the pro features for example you wanted to include a gallery you'd need to have the pro option but we're not doing that so the free one is perfectly fine now first thing I do is create a new custom post type now what a custom post type is is it allows us to create or group together a set of posts so for example we're going to create exhibitions so we're going to create a custom post type called exhibitions so to do that we're going to come down until we get to see ptui an inside day we're gonna go add edit post type from there this might look a little daunting but don't be put off we only need to put a couple of little bits of information in there maybe change a few settings other than that we can leave most of it set to the default so the slug is going to be exhibition in other words the name of the custom post type that we're going to create plural exhibitions and then singular we'll just copy that and put a singular label so there's the first part we could if we wanted to leave it there however we're going to just drop down a little bit and take a look at some of the other options now these additional labels are what you kind of see inside the left hand side at the dashboard things like add all pages add new you know those kinds of things you can customize what you'll see under your custom post that if you want to and all of these are fairly self-explanatory underneath will tell you exactly what they're talking about but you can leave all those as they are we're to scroll right the way down until we get to the settings section now most of these again you can leave as they are but we are going to do though is we could just just gonna change a couple of things first of all we're going to say has archived if we don't do that we can't create the template inside Elementor Pro and we can't create the listings for our exhibitions so we need to do is set that to be true then we're going to scroll down and you can see that we've got hierarchical now hierarchical sounds very complicated and very grand and all it really means is that you can have these with a top level for example exhibitions then you could break those down to subsections and you could have local exhibitions national exhibitions you know those kinds of things it's just grouping things together for this example you can leave that as it is but if you wanted to set something at where you wanted to just categorize things in a little bit more logical fashion you could set it up to be hierarchical if you wanted to okay so we scroll right the way down menu position you may want to set that to specify exactly where this it's inside the left hand section up to you show in menu just basically means it'll show up here it says new and you can have it inside a new exhibition for example and then if you want to use a menu icon you can use a menu icon and you can see you just using the dash icons if you click to open that up you'll see the website with dash icons and it's free to use or you can just choose your own image I'm going to leave all those values as they are not to worry about them then we've got supports what kind of features does this particular custom post type support the title is the name of the exhibition the editor is basically where you can put the content that you want in the same way you would with a normal post in WordPress and the featured image as its name suggests is the featured image for that particular exhibition so we're going to leave those three we're not gonna worry about any of the other ones we'll leave all those as they are and then that's pretty much it what we need to do now acts on amis let me just quickly say what that is if you create a taxonomy you can assign it to your custom post type now you may be thinking what exactly is a taxonomy well all it is is a way of grouping information together so in other words if you are used to working with posts in WordPress and you've seen tags and you've seen the categories they are taxonomy tags and categories are just taxonomy so you can create your own way of grouping your custom post set together by creating custom taxonomies I cover that in this other video that I've talked about that'll be linked in the description so if you want to see more about how to use this in more in depth please just check that out it's going to get you up to speed double quick time okay so we've got the basics the things we need and we can always come back and change anything if we've left it out what we're going to do is say add post type and there's our new post type called exhibitions and you can see all exhibitions and add new so now if we go into all exhibitions nothing is currently listed if we click on add new all we currently have is the title the sort of main area text and we've got the featured image we've got nothing else inside there so it's not really that useful right now we could just use a post type to do this but if we come back out of this and we'll leave this page we're going to come down to custom fields and we're gonna come in to add new now custom fields is a great way about an extra fields and they could be things like your title and your featured image they just feels inside your post types we can add extra ones and we can assign those to any that we want so we can now make our exhibitions just a little bit more feature-rich so we could do things like our dates in their locations for addresses and so on and then we can use those for other purposes should we want to so let's just create exhibition details once you've done that we're going to leave with a skip over the fields a moment because the next thing the most important thing is the rules and this is just to say where this particular group of fields this custom group of fields is going to be associated so we need to do is which says post type is equal to post which is just the default WordPress post we're gonna change that and you can see inside there there's our custom post type exhibition we've just created now click on that so now any fields that we create will only display inside the exhibition's custom post type simple as that nothing more complicated you can leave all the settings underneath as they are you don't need to touch any of those what we need to do now is add a couple of extra fields in I'm gonna keep this simple we're gonna just drop in just two fields and a dress and we're gonna drop in a date that's worth bearing in mind that these two new fields we're gonna add will be added on to the existing feels the title the featured image and so on that's part of that custom post type and you'll see what I mean once we add these so we say add field so we leave this a field label so we're gonna call this exhibition address we click in the field name you see that automatically populates that based upon the field label but you can change that if you want to just make sure that any spaces are separated by an underscore then we've got the field type and this is where we have a ton of different types of fields we can use for this all we do is leave it set as text we're gonna just drop a single address line in there do we want to make this required up to you I would generally say yes but you don't have to then you've got placeholder tags and a pre pen and a pen and the character limit you don't need to touch any of those you can leave those as they are it's going to close that down gonna add another field in and we're just gonna call this exhibition date click underneath and again pre fills that out field type we're just going to come in today and we're going to scroll down until we find the option for date picker there we go we could use date and time or just date picker so we'll say date picker and you can see that underneath it says again is this required and what format do you want to output this in so you can choose whatever format you want from this you can see day month you you month day blah blah blah blah all those kinds of things and then the return format as well how you want to display these so we'll set that nice option there and we'll do the same there so its bit more readable for most of us other than that we're done so we've now created our custom fields we've assigned them to the exhibition custom post type it publish and now if we come back into exhibitions and come into add new you'll see now have some extra fields inside there so we've got some data we can drop in and we've also got some placeholders that had that extra data in so I'm going to quickly just add some basic text in the title some filler text some addresses and some exhibition dates just so we've got something in there to work with when we build the templates so created a couple of exhibitions now nothing special just the text location and so on so next thing we need to do now is create a template to display these we need an archive template and we need to have a single post template much the same as we did when we created and set those that was part of our shop so we're going to do come into our templates and into our theme builder and from there we're gonna come in first of all and say we want to create our archive so click on archive we say add new archive we're gonna call this default exhibition archive click on create template and then we've got all the normal tools so we could if you wanted to use one these predefined layouts but as before we're gonna close that down we're gonna create our own so you can see we've got archive posts which we can pull in if we want to or what I tend to prefer to do is just use the post widget because that just gives us more control them a bit more sort of styling options so you can say posts will drag and drop that over onto the page and you see what'll happen is it'll try to find just a normal default post which we don't have any in me but we come to query you can see source is set to posts however we can change that and choose exhibitions which they were custom post type once we do that you can see that now pulls in those exhibitions with the name the date the date it was created at least and also the information and a read more and so on now if you want to keep things really super simple this is probably the easiest way to create it and I got to show you how to do this and create it using this method but I'm also gonna show you how you can use a free plugin and create a custom layered for these different loop items these different exhibitions you can see on screen right now so let me just quickly whizz through and show you how we can use this option obviously those dates are the date that was posted which doesn't make a lot of sense so we can do is let's just change first of all the image the screen displayed we can change the skin to something a little bit more modern we can just come down there and we can just change any settings on here we want to just configure it so we just don't want data we don't want comments gonna close those down read more is perfectly fine or we could change that to view exhibition details whatever you want it to we're not using any any taxonomy so we could really get rid of that completely and we could disable the avatar so we've created a very simple layout which we could use it's perfectly fine but it doesn't give any information like the date or the location of these particular exhibitions so it's fairly limited but like I say if you want to go down this route you could leave it at this point and just stick with what we've created however let's do something a little bit more unique well publish that just so we can save this out we can come back and just make a simple change a little later once you've created the design we want to use for our loop let's add a condition like we've done before now you see this says all archives and that's not what we want if we set that now every single archive in the entire site would take on this design we need to do is change that we can come down you can see we've got tons of different options and different hierarchy of different things like I've showed you with WooCommerce what we want though is the exhibition archive so we're to click on exhibition archive and that now will only apply this design to the exhibition archive save and close we've now created that custom archive for this section like I say if you wanna leave it at this point you skip to the next section this detail is down below for the timestamp so you can jump through to those different sections however if you want to see a bit more of a custom way of doing this stick with me so let's just exit out of the dashboard right now come back into our attempt or plugins and add new from there we're going to choose to search for a plug-in called elemental cuss skin now this is a completely free plugin it does a simple job incredibly well and I use this over and over again on lots of different tutorial so this isn't your first tutorial you see me creating this type of content you've probably seen this before and again I've got dedicated tutorials on how you can use this if you want to check those a link is in the description below okay so now we've done that we're gonna come back into our template so we're gonna come back into the theme builder and we've got a new section called loop let's click to open that up and let's say we're gonna add a new loop in so we're gonna call this exhibition loop and create a template once we've done that we're taking it to elements or we can close out of this we don't need this preview window so now we've got a page ready to start building our template so we're gonna do is we're gonna just do exactly that we're gonna create our template so we can just choose any of the different items that we want now you can see this is being treated like a single post so we've got the post title post excerpt post content or so on a featured image we can just use those to build up how we want this to look so let's just drag in this featured image we'll drop that in there and that's perfectly fine now you see nothing is being displayed because it doesn't know what to display so we can come to the settings option and a preview we can click on there and expand this out say we want to use the exhibition option now we'll say apply and preview and we should then see that we'll get a new item in it now if you don't get an item in there what you can do is come back into the preview set and so you can change that from all and we'll just type in something like so the word is going to be used in there and we say Cardiff gallery and apply a preview and there we go there's the preview of our image now because we're gonna use these as part of the loop we can make things a little easier to see how things are gonna scale will select the actual section itself we're going to come over then to the content width so we're gonna adjust this to be we're gonna go for something like 500 somewhere around there there we go so this means now we're going to just get a better idea of what this would look like on the page and we can adjust that any point we want to so our featured image is in there that's perfectly fine come out door widgets and we can just pull in our post title which will be the Cardiff gallery we can then set the HTML tag we'll say that doesn't like h3 we could style that if we want to as well so obviously it's a little large where we want our there but I'm using h3 because I think it's an important piece of information on the page so we'll adjust that to be something just a little smaller maybe something like 20 somewhere around there make it a little more punchy there we go you can style this anywhere you want you can do what you want with it but now what we can do is we can come in and we can add in some custom information so let's just say we want to drag and drop the text editor in there from there we're gonna come and choose our dynamic tags this little symbol in the top right hand corner that you'll see in tons and tons of different sections and widgets inside Elementor Pro this is a pro only feature you won't see this in elemental free we can click on there and we now have a ton of information we can pull in we're going to choose the post summary now this is a feature that's added as part of elemental custom skin and this allows us to do pretty much what you can do when you create a normal post layout like we saw in the first part of this section it will just pull in a brief snip don't vision of the post content and this is doing the same thing we've been coming to style if you want to install everything about that so we can say well that's looking okay what I want to do is just tighten up the typography a little bit the line height just a little bit tighter because it's gonna be a smaller section there we go so like that okay so we could leave it at this point if we want to but then we've done nothing more than just copy what was on the other section but this is where the beauty of using that dynamic data comes in and come back out whena choose text editor again we're going to drop this just above the content we've got it'll sort of snip it going to choose dynamic tags again I'm going to scroll right the way down until we see a CF field I'm gonna click on a CF field and a click to open Anna and then we've got the option for the key the key is just basically the name of the meta field we want to reference click on that we've got a exhibition address and exhibition details let's click on exhibition address that will pull up the address inside there for us and we can do now is we can just come into the Advanced section and we can just say location and then we'll have location placed in front of it and the actual location for the exhibition we can even use some hasty mail calling you if we wanted to so we want to make that bolt which stands out a little bit we'll just drop in strong we feel that refresh and there you go and you can style that now so obviously we want to make that just a little bit smaller we might want to make it darker let's just say we're gonna set that to something like 12 we're gonna set it to be a little darker like 600 there we go and we can adjust the line height if we want to and you can fine-tune as the spacing on this kind of thing just using padding and margins and so on and then finally what we can do is we can do the same thing against let's just duplicate that American lines a little easier so just duplicate that section we're gonna do now is click on that come back up to the ACF feel the little wrench in the corner change that to exhibition date and there we can change the label before that and we can just say date we've now created a custom loop item we want to do finally is just select this and we're just going to make it so it'll stand out a little bit so we're gonna come into style in the border we're gonna set a solid border we're set this to be pretty light somewhere like that I'm gonna say it to be one pixel I even put a border radius all those kinds of good things you can do all that so we'll hit publish we don't need to set a condition but if you want to you can add a condition and you can say where you want to use this so you may set up a different sort of style for this particular loop item to only be displayed in one particular section well you could do that if you wanted to for now we're not gonna worry about that we're just gonna say save and close now once you've done that we can just come back at if you exit to our dashboard go back to our theme builder and from there we're gonna find our default exhibition archive and edit that with Elementor once that's done you can see we've still got what we originally set up and we're gonna use that anyway so gonna click to edit this post section we recover the skin where it says cards now click on there and we're gonna say custom which is a new option now we've got Elementor custom skin installed click on that you can see now a ton of new options open up the first thing we only thing we really need to set is select a default templates gonna click on there and there's our exhibition loop and I click on that and we've now created our custom loop including our location the date and everything else that we want now there is a pro version of elemental custom skin drop a link in the description for that so if you want to check it out you want to use more of these options like masonry in same height and sliders and so on you can check that out it's pretty cool plugin it's not expensive it's one of those plugins that I think is definitely worth its weight in gold if you creating this kind of thing and you want those extra features now the beauty of this is it's still fully editable we can come in and edit these without any problem so let's just update this we've created it we've set everything up but the problem we have is we've got nothing to click on to go and take a look at the actual actual exhibition itself so tip rectify that we're gonna come back under this exit to our dashboard go back to our theme builder back into the loop we're gonna edit that exhibition loop item and from there we can just choose the featured image we're gonna set the link to be custom URL because this link is gonna change with every single item we need to click on the little dynamic tags option click on there and you can see we've got post custom field post URL and so on so we're gonna say post URLs that'll take us over to the actual URL for this specific custom post type click on that that's done update that save and close we've now updated that so now let's test this out let's see it all working now come back out of this éxito dashboard and from there we're going to just go into our navigation so you know go to appearance into menus and we're gonna add in a new section so you see at the moment we don't have any way of referencing the archive so it's pretty easy to do we called the custom post at exhibitions so that's basically the URL we're going to use we're going to create a custom link and from there we're just going to do a forward slash exhibitions forward slash I'm gonna put the text in exhibitions add that to our menu and just position that next to the portfolio hits save menu and now we're ready to go and take a look so let's just open our site up let's just visit our site there's our exhibitions gonna click on that and there's our custom exhibitions now if we click on one of these we're going to go through to the default page so we'll click and we've got a rubbish looking page that doesn't even include most of the information so we need to create that custom single post so a custom scene template I should say let's close this down go back to a site come back into our templates back into a theme builder and this time we're gonna just choose to create a single add a new single and we're going to call this exhibition if I could type today single post okay change that to be exhibition so single exhibition exhibition single pole to the name create our template and now we can choose to create it from scratch or if we create a previous templates we could use those however we've got nothing to choose from you're going to close that down and then we have on the left hand side all different widgets that are associated with creating a single post template so the thing like the post title pokes the excerpt featured image and so on so what I'm gonna do is I'm just gonna quickly put together something really really simple but it's up to you how you want to implement these features because it's more what the skills we're covering than it is about the design aspect so I'll do it keep it really simple we're gonna create a simple two column section and from there we're gonna come back to our widgets we're gonna grab ourselves the featured image drop that into the left hand side we'll just position that a little smaller about 40% and we're going to do is now the image looks pretty good in the we could set a link to that if we wanted to if you could link to the media file so we could click and open it up and see a nice lightbox effect I say yes to the lightbox come back out of this and we're gonna do is we're gonna grab the post title and drop that to the left hand side we'll change that to be h3 come back over we're gonna grab our post content drop that underneath there we go there's our post content come back to our widgets and we're going to do is we're going to just create a nother set of ACF feel some custom fields to show the date and the location so again we're gonna do the same things we did before go grab that text editor drop that over there click on the dynamic tags scroll down until we get the ACF fields click on the little wrench icon click to open up the address and then you know that will just put location like I say you can style this any way you want put Cole on a space in there and we'll just duplicate that now for the date and we'll just make those and it's like we did the last time so exhibition date expand that out and we'll just change that to data so we created that custom setup for this note as well no like say get a creative as you want to with something like this let's just select this come back in and give it a bit of space at the top so we put 50 at the top 50 at the bottom I don't click on publish no we're taking through to those conditions again and you can see because we've set this that when we chosen exhibitions to be the custom posts that were going to be or the post template we're going to be creating you can see it pulls that include exhibitions or so all of our exhibitions on a single post will be displayed using this that's perfectly fine so we can say save and close we've now done that so we're gonna come back to our site come back out and come back to our home page jump into our exhibition section from there we're gonna open up the Cardiff gallery then you can see there's our custom post M plate all later a nice neat click we get that nice large version of the image so now with a little bit of time and effort you could tidy that up to get it to look absolutely amazing but hopefully what you've seen is these are the key features and these are the key tools you need to be able to create something a little more unique we're now going to kind of go through to the next stage which is all about the classes now this is going to be done in a very very similar fashion so stick with me I'm going to show you how to do that right now now with our classes section we're gonna take what we learned in the previous section run exhibitions and we're going to expand upon that with some extra little things so I'm going to go through quite quickly what we've covered in the first section and just take a time and explain what I'm doing with some of the extras so the first thing we need to do is come to our custom post type we're gonna add and when you custom post type in like we did before this time we're gonna call this classes then we've got the plural label so you'll report class is a singular class scroll right the way down we're gonna just come down and say we want to make sure that we've got house hierarchy it's tell to true and we want to make sure that this is also set to hierarchical set to true and one other thing we need to make sure that it is all done has archive is true as well okay so most of those things are setup we're not going to worry about positions and so on we're gonna leave the title editor and featured image like we did the last time and other than that we're going to just say add post type so nothing too different to what we did the first time but we want to organize our classes now based upon their levels of beginners intermediate and advanced makes a little bit more sense then because people can sort of like take a look at the level to do that we're gonna come in and create a taxonomy if you remember back to the last section I just said taxonomy is a way of grouping things together like categories and tags and so on so we're gonna do is we're gonna call this level or difficulty difficulty let me go I'm gonna just copy that and we'll just set that for the you will able to paste that in there capital in and do the same then below now you see this is very similar to what we did when we created our custom post type we've got a couple of differences and I'll go through those now attach to post type in other words where is difficulty going to be associated now because we want this to only be associated with the classes we're just gonna click on classes again you've got all those labels if you want to change those and if we scroll down to the bottom you can see we've got a lot of the same things again so we're gonna set this to be hierarchical and we're gonna come down and just make sure everything else is right so we're gonna say show an admin column because it makes it easier to see what level the class is inside the admin column and you'll see that shortly I'm gonna say show in bulk and quick edit which just means that instead if we wanted to change the level of a class we could easily just come in and just change that from the quick edit inside the listing for all the different classes well that'd be indented we would say add taxonomy and that's now our taxonomy created so we look on the left hand side we've got classes and we have the section called difficulty whereas if you look under exhibitions because we have no taxonomy associated with that we only have all exhibitions and add new if we come into classes and we say all classes you can see we have title which is the name of the class the difficulty and the date that we added it so difficulty has been added in so let's just create a class let's take a look inside this we add new and you can see like before we've just got the class name we've got the featured image and the class details nothing more so we need to add a couple of custom fields into this so can come out the custom fields add new I'm gonna do is we're gonna put in class info set this note post type is equal to class and then we're going to do is we're gonna add in some extra fields so we're just going to put in there the fill field label is just going to be class location and we'll set that text is perfectly fine and then we're going to do is we're gonna add another one in which will be start date set that this time to be the date picker again and we going to do the same as we did before set the both formats for both the return and the display format and finally we're gonna add it another one that's just start time so if you look at see exactly what time the class is going to start I'm gonna scroll down until we find the option for time picker click on there and then we can choose the time that we want to work with we're gonna put the 24-hour clock in for both of those it makes a little bit more sense okay we'll hit publish on me and we've pretty much done everything we need so now if we come back to our classes and add new we've got all the same information before we've got the class location start date the start time okay so I got to do the same as they did last time I'm gonna add a couple of classes in and then we're going to come back and take a look at creating that archive and the custom post layouts and so on now because we've added as extra features in let me just quickly show you how they show up inside you you can see because we created a custom taxonomy we now have a new section and document called difficulty click to expand that out company there's no difficulty set up so we can add a new one in we're going to call this beginners add new difficulty and you see now there's beginners all set up because we set it as hierarchical we can now create that hierarchy we want so we could have beginners and we could have different sections inside that we could have intermediate and different sections inside there but there's another reason why I like set it is hierarchical even if I only want to have beginners intermediate and advanced for example and that's because I find it a little bit more user friendly because when you say it's a hierarchical it'll show you the little check boxes like you can see now for beginners however if you don't set that it doesn't show anything other than an empty box where you've got to start typing and I find that a little bit not user-friendly should we say so I just said it's a hierarchical just specifically for that even if I don't want a hierarchical structure okay so class location we're just going to put this I'm gonna worry about put a full address in there we'll just put Cardiff CF 11 start date we can click on there and you can see that we're going to set this to be Saturday the 30th which scroll down we got start time and we can set our start time in there so unfortunate you can't see it very well on here because it's scrolling down below the screen so there is our start time date and so on so we'll just hit publish on the publish and we've now created our first class now I'm going to Casey quickly go through and set up a couple more classes so we've got those to work with so we now have three different classes all set to different levels and as you can see the levels are now listed on the middle section inside this area okay so we now need to just quickly go through and do like we did the last time which is create both the archive page on the single page and also the template that we won't be use for this individual loop I done so I'm not going to spend too much time doing those I'm going to quickly run through them just to cover off we need to do those things so let's just come back into a theme builder into a loop section we're gonna add a new loop in we're gonna call this default classes loop create our template I'm gonna do the same as we did before close this down gonna set this to be about 400 pixels wide so let's just set that she does this to make it to 500 just so it's easier okay we're going to just drop in the featured image we'll drop that inside there we'll do like we did the last time was sent to this will set the link to be a custom URL I will choose the dynamic tag and say post URL so you can see once you kind of got used to doing this kind of thing it really is just repeating the same things over and over again let's choose our preview settings we're gonna say this is going to be the classes and we're just gonna choose where we got the life drawing one loop last life Troy apply and preview so we've got some data in there now let's just drop it cause title set that bh3 will make it a little smaller so we'll do is just set that now I can't exactly what I set these two but you know you kind of get the idea with it's not that important right now it's more like I say with any of these things it's all about the techniques that you're learning and not necessarily just following along with what I do once you understand the techniques you can kind of get as creative as you want and go off as far as you want you know really getting stuck in and creating truly unique look insights so I'm going to quickly go to this I'm going to speed this section up and then we'll move on so that's creative we're gonna jump over to the theme builder again we're gonna just come into our archive section I'd new call this default classes come on I've create our template and like we did the last time I'll close this down we're Sileo to come over and do a search for posts and we're gonna drag our posts option in there make a bit of space at the top and bottom so we're just gonna set that to 50 and 50 and then we're gonna do is select how we're gonna come in and change this to custom change this now to our default classes loop scroll down and we're just gonna just set the query on the change that from posts and we're going to just choose classes from that section and you can see there's our classes now this is one of the problems you have at the moment is that because we have different scale images then you're gonna see that you're gonna have this little bit of a discrepancy between them you can easily rectify that by come into the layout section if you use the provision and then just set it to be the same height you could do this various different methods but generally I would say you're probably gonna put the same scale images in if you're not it would make sense to do that just with the continuity of your design but you can see this is very very simple how to set this up we'll hit publish on this at our conditioning change it from all archives are going to come down to classes archived click on there I'm gonna say save and close and we've done that side of things now with those basics in place we can come back in a few and the last thing we need to do is set up that final template come back into a theme builder into single and from there we're going to just create our new single template so you can say add new select this and we're gonna choose class and we're gonna call this default class single create our template close this down and again I just gonna go through and speed through this there's a couple of things I might want to show you as part of this that'll show you how to do a color bits and pieces but I'm going to speed through most of it just to save time okay you're probably noticed this something missing and that's where we set things up to show the difficulty level we haven't listed that well that's very easy to do we're going to come down to is choose this option on the left hand side we go grab the post info I'm going to drop that underneath the title and I see by default that drags in the normal metadata like the author and date and so on we're going to get rid of those first couple will change this comment section I'm going to come down and choose terms and from there you can choose a taxonomy so if you remember the difficulty was just basically set up as a taxonomy so we can come down choose difficulty that now shows that as being advanced all we can do is we can just say class difficulty now : then we can just say we don't want to link that we're going to get rid of the icon inside there and then what we can do is we can just come in and style everything the way that we wanted to we can drop in a divider if you want to know what kinds of cool things we've now created the details for this specific class including the difficulty level which is that custom taxonomy that we set up and associated with our custom classes post type now out of the previous section there's still plenty more you could do to fine-tune and refine this design to make sure it sits perfectly inside the rest of the overall design setup before we go through and finish this off I'm just going to quickly go through now and show you how we set up and publish this and then also linking this into our navigation structure and then we pretty much created the entire site so let's just publish this as again you can see classes and all which is perfectly fine it's intelligent and enough to know that we're associating it to those particular custom post ed however they say if you want to you can change that if you need to save and close we've done that side of things so now I'm going to come back out of this just go back into our appearance into our menus and like we did the last time we're gonna come down and create a custom link and from the we're going to create a custom link by putting in for class classes with my misspelling and the forward slash and they will do the same thing will actually spell this right there we go add that oh man you thrive that next to our portfolio save that come back into our site and refresh and there's our new section register we click on classes and that'll take us through to a listing of all of our classes click and take a look at our critics class and you can see difficulty intermediate and all the details so that's how we can create all these custom pages these custom sections custom post has all those kinds of cool things and create an artist based website is it finished no there's still plenty more we could do to this like I say it just takes a little bit of refining and adding some extra things in there just to get it to be in perfect the way that you want to be but you've seen the key skills now to be able to create a site very similar this in any kind of topic that you want like I keep saying the core skills are the important thing the implementation is entirely up to you so now that you've seen a lot of the key techniques the tools in the way that I would tend to work with the client on a project this should give you all the key skills you need to start working on your own projects and with your own clients hopefully you've seen some really useful things inside this video and as always I'd love to get your feedback in the comment section below let me know what you thought the video anything you think you'd like to see expanded upon and if you created content use in this video drop some links in the comment section so I can check those out as always all the applicable links are in the description below so you can check those out some are affiliate links and if you use those cost you know more money but does help support the channel moving forward as always managing policy this is Ben W Peterson until next time take care

Channel: WPTuts

Views: 39,775

Keywords: WPTuts, build a wordpress website with elementor, make a wordpress website with elementor, build a wordpress website 2020, build a wordpress website for beginners, create a wordpress website, make a wordpress website, wordpress website tutorial, how to build a website, elementor page builder tutorial, elementor pro, elementor pro tutorial, elementor tutorial, elementor website, elementor wordpress, elementor wordpress tutorial, wordpress elementor tutorial, create a website

Id: Np5EsaQLKm8

Length: 140min 59sec (8459 seconds)

Published: Fri May 08 2020