Full Gutenberg WordPress Tutorial + Kadence for Beginners

hi in this tutorial i'm going to show you the brand new way of building a wordpress website from scratch using guttenberg so that it can be super fast so the search engines like google will love it and of course that it looks fantastic across all devices i am jack with jack in the net and i've put my money where my mouth is i've actually redesigned my old website that was built with elementor and i've designed it the new way using gutenberg and i'm going to show you exactly how i've done it so whether you're a complete beginner or whether you're a designer who wants to sell websites to paying clients we're going to be looking at how you can put together potentially hundreds of different websites all in this one video and i've got timestamps so you can go back and re-watch any bits again if you need to and of course you can skip ahead past any parts that you're already familiar with now just before we dive in let's take a proper look at exactly what we're going to cover in this tutorial so in this video i'll show you where to get a domain name and the best places to get web hosting from depending on the type of website that you're looking to build we'll look at installing wordpress free ssl certificates how to create staging websites backups and more and we'll be looking at designing a website with gutenberg and cadence blocks you'll learn how to create hero sections like this and how to insert content anywhere on your page including multi-color headlines like this and cool call to action buttons i'll show you how to add in overlays to your images and also add in dividers like this we'll learn how to add in animations to your website so that it really stands out and catches the attention for your users and how and where you can get pre-built designs in order to put together an entire web page in a matter of minutes i'll also show you how to get an inbuilt contact form and entire crm system inside of wordpress so that you can get more subscribers create different campaigns and track it all from one place we'll also look at how to create a cool header effect just like this so that our logo changes color when we slide down the page and it also reduces in height for the header overall we'll also look at creating a blog how you can style this up and add in sidebars if you want to and how we can also style up our individual posts themselves adding in content videos images and more it really is made all very easy thanks to gutenberg and cadence for example to change this header is simple we could come up to customize go into header and preview how we want it to look in desktop and also on tablet and mobile i'll show you how to create trigger menus as well and change the content that appears here we'll take a look at all the options that are available to you including both the free versions of cadence and cadence pro as well we'll also check out where you can get things like free logos and icons and how you can actually upload them and edit them inside of wordpress adding to that extra things like taking control of your website on a global level so that we can simply and quickly change our colors across the entire website or do exactly the same thing with our typography by the time we're done you're going to understand how all of this works and be confident in using it so with that said let's get to it okay so the first thing we need to do is get a domain name and web hosting now if you've already got this feel free to skip ahead using the time stamps now there's three places you can get hosting from and which one you choose depends on what type of website you're going to be building so the first one is jackinthenet.com forward slash n h stands for name hero the second one uh you can put in jack in the net dot com forward slash sg that is siteground and the third one is jackinthenet.com forward slash kinster now the one that you should choose depends on where you are starting if you're just starting out and you are looking for the cheapest possible web hosting that's still really good okay because you can get dirt cheap web hosting that just isn't reliable at all and is frankly just awful but if you want web hosting is actually going to be good and you're still going to have a fast website but it's cheap go with name hero if you're willing to pay a little bit more but obviously get a bit of a better service and an even faster website then go with siteground and if you're already an established business then check out kinster okay you are going to pay more of a premium it's at the more expensive end of web hosting but it's also the very best wordpress web hosting you can get so you're very much getting what you pay for now i have videos on both kinster and name hero but for this we're going to be sticking with siteground we're going to go with the middle one so have a look through pick the plan that you want and just make sure that you're going to get things that you actually need for example on demand backups or things like staging websites which i'm going to be using in this tutorial so choose the one that you want then do the normal thing when you buy any product you go through the checkout process no matter which one you do choose you'll have the option to pick either a new domain name or an existing one so if you haven't got a domain name yet you can choose the extension that you want for dot com put in a domain name address whatever it might be obviously this is just complete gibberish but then click on proceed now if you already have a domain name that you've registered elsewhere again just put it in here so i would have jack in the net.com and i would click proceed you've then got the normal checkout process so just go through enter an email and a password put in your billing details obviously your card details and just bear in mind that with all of these you are getting a deal so you get almost 70 off your initial purchase with siteground for example and obviously the longer that you purchase that for the longer you're going to be able to get the discount for i always recommend getting domain privacy when you're buying a domain name that means that people can't look up your personal details they can't get your email address for example because then you're just going to get loads of spam but anything else with these you don't need you can always add them on later when you've done that then obviously confirm terms and conditions and just click on pay now when you've done that you'll be taken through to your account section and you also get sent an email so you can come back at any time and the same goes if you're using name hero or kinster as well as i said check out my other videos if you want to see those in action what we would then do is come on up here to websites any existing websites that you have you will see down here otherwise you need to go ahead and click on new website now we've just done a domain once you have registered an account you can always do a new one at any time or you can simply select an existing domain choose it from the drop-down list and then click on continue click start a new website and then we're going to choose our application now we can add in things like woocommerce at any time later on so for now we're just going to go with wordpress and the last thing that you need to do is set up your login details this is how you're going to log in to wordpress in the future so put in your email address create a password or get it to generate one for you and then go ahead and click on continue again don't worry about this just click on finish and it's gonna start creating our wordpress website and i do love siteground for this because it only takes a couple of minutes there we go we're all done so you've now got two options you can either access the wordpress admin area or we can go to site tools now we're going to be checking out wordpress in just a second but for the moment let's go ahead and click on manage site under the site tools option this is the site tools section this is what people can refer to as the cpanel but siteground has styled it up quite nicely for us now we'll be taking a bit more of a look at this in a minute for now though i want to introduce you to staging so underneath the wordpress option we have down here the staging section now when you create a staging copy of your website it means that we can design it all up and it won't affect the front end of your website not until we've told it to deploy now for those of you who are starting a brand new website this won't matter but for those of you who have an existing website already you don't want the uh the website to start being messed around with for anybody who might be visiting it so just for example i'll show you my current website it doesn't look very good i'll be honest i don't know why i designed it like this i did it with elementor and it's too colorful and i don't like it to be quite frank with you but hey ho it's what it is at the moment but what i don't want to do is have this messed up while i'm in the middle of creating a new website because anybody who then visits it is going to get a bad user experience so because of that i'm going to be creating a staging copy so everything that we're going to be doing during this tutorial nobody will see on the front end until i have told it to to deploy the staging website so you're going to see how to do that i'll show you how to do it so i'm just going to call this gutenberg because we are redesigning the website purely with gutenberg now click on create and it's going to set that up for me so there we are that just took a minute and now the staging site is complete and it's saying that i should password protect this so we're going to go to protected urls it tells me that this is what it's just created so if i now click on protect that has now password protected it so again if anybody happened to have this url address they wouldn't be able to access the site without a password so now it's time to log into wordpress itself so underneath my staging copies all i need to do is come on over and here on the right it says login to admin panel now if you're not using a staging site you will find this exact same option over here underneath the install and manage option you would just click on that it will show you your website and you can come on over just here and click on login to admin panel now the very first time that you do this you will probably get something like this saying the connection is not private do not worry all we need to do is come on over to advanced and then proceed to the website okay so if you've password protected it you'll be asked to put in a password i also have on a two-factor authentication this means that in order to log in i have to have my mobile with me to generate a code in order to log into the website for extra security um i will show you how to do that later on in this tutorial let's not get ahead of ourselves for now i'm just going to pop in my code and here we are we are now in the wordpress dashboard now yours is not going to look like this and i'm actually going to pause the recording and i'm going to come back on in just a moment and you're going to see it as you will see it but i just wanted to show you this because as i said at the beginning of this video i'm redesigning my own website so i've currently got a load of plugins on here um i've got elementor on here at the moment and not what i'm going to do now is go through and i'm going to delete all of it i'm going to get rid of it completely and we are going to be starting from scratch okay so this is what a completely fresh installation of wordpress will look like let me take you on a quick tour so that you get used to it and how it works first of all we do have a website already if you come up here and hover over where it says my wordpress you can click and visit the site and obviously there's nothing here but this is what it looks like and it's pretty poor i think you'll agree but throughout the editing process at any time if you want to check it out on the front end that's what you can do you can come up and hover up here and to get back to your dashboard you do the same thing come and hover up here and click over to the dashboard now another way of also logging in to wordpress instead of going through your hosting provider you can simply come up to your url bar and then you can put in your website so for example i've just switched over to jackinthenet.co.uk but then you can put in forward slash wp admin okay you don't need to worry about this bit after it we can get rid of that if you just put in wp admin it will take you through to your login page so you just put in your email address put in the password you created and then you will come through to here so this is what is called the back end of wordpress the front end is what we just looked at up here when you visit the site and before we start adding content the way that this looks is controlled by wordpress themes now you can change your theme by coming over here and under appearance you'll see you've got the themes option click over to themes and by default we have the 2021 theme activated now notice that if i come over here and i choose this one 2020 and i activate this it will switch it over for us so now this one has become active and if we go back to the front end and click on visit site we'll see that it's changed it's exactly the same default content that was already loaded on there we've not done anything to it yet but it looks different automatically simply because we've changed the theme now the theme that you want to choose is going to depend on the type of website that you're building i've done a couple of videos on this including one very recently on the top three themes that you can use when building a website with gutenberg which is of course what we're doing in this tutorial now i'll put a link to that video in the description below so you can have a look through but i'm going to be using the cadence theme for this tutorial and the reason for that is because i'm building my site with online courses and i think cadence is currently the best thing that there is when you're wanting to build an online course website but we'll get onto that in a couple of minutes first let's continue the tour around the back end of wordpress up here you have posts now this is where you can add in a blog post which we'll be looking at later on you've got media which is where you can upload photos or videos to your website then you've got pages which is what makes up the main part of your website and as you can see we've got a couple of ones that have been put in here already as default now if you want to delete any of these you can click them individually or we can click up here and that selects all of them and then i can come up here and i can say i want to move these to the trash because we don't want these pages so i can apply that and it moves them to the trash and then when we go over to the trash we can do the same thing bulk select them up here and we can permanently delete them so i do this click apply and that's it those pages are gone now you can add in new pages simply by clicking up here but again we're going to come on to that in a couple of minutes down here is where you'll find comments so when you do write blog posts people can comment on those posts unless we turn that option off in settings as you'll see in a moment but when you do get comments you can come in here and you can obviously approve them or you can delete them or obviously get rid of any spam comments if you get them also under appearance we have the widgets option now widgets are what you can generally put into things like your footer area or your sidebar if you're wanting to use one of those and then we also have a menus option so your menu is what appears up here in the header so when we view the front end of a website like up here we currently don't have a menu but as you know from when you visit any site for example apple we have here the header up at the top now i'm going to show you how to create headers of course but the menu area of wordpress is where you can actually put in your menu items that link through to different pages and then down here we've got plugins plugins add in functionality to wordpress there are literally thousands of them but you do want to keep these to a minimum just remember that the fewer plugins that you need to use the faster your website is going to load straight away i don't want to have the wordpress starter so i'm going to deactivate this and i'm going to delete it are we sure we want to delete yes i am so that gets rid of it now because i'm using siteground it comes with the sg optimizer plugin don't worry if you don't have this because later on in the video once we've done our designing i'm going to be showing you what the best optimization plugins are to speed up your website and improve caching just over here on the right though you'll see that you have the option to enable automatic updates if you want to turn this on it means that you won't have to manually come in and update your plugins it will just do it for you the next option we have is for users so this is where you can see who manages or has access to your website you can always add a new user anytime so if you have a web developer who's going to be doing some designing for you you can click on add new and add in their email address and then they'll be able to log in and obviously get in to your wordpress website you then have the tools option which for example means that we could export a website once we've built it or if we had a pre-made website that we'd built we could import it in and then you have the settings menu so let's quickly take a look at this if we go over to the general option you see here we have a site title and also a tagline now this can be anything you want but try to keep it something relevant for example i could put in jack in the net and then i could put in wordpress web design tutorials just remember once you have made any changes come on down and click on the save changes option we then have a few other options which we'll be looking at throughout the tutorial but one that's important to look at now is here under discussion i just mentioned to you about making comments if you don't want people to be able to do that you can untick those options here and just a little tip for you i suggest that you untick this option here allowing link notifications from other blogs pingbacks and trackbacks okay this will slow down your website potentially so i tend to turn it off again once you've done that come on down and click the save changes option the reason we're doing this is because we want our website to be a clean slate okay we're optimizing things and making it clean to use for example here under my dashboard i don't want to have all of these different options they're not going to do anything for me they're not telling me anything that i want so if you want to get rid of things you can just collapse them down like this but you'll see that they stay there if you don't want them at all come on up to screen options and then we can simply untick what we don't want and you'll see that it gets rid of them and of course don't worry because if you ever want to get something back you can just come back up here start ticking and they will reappear but i don't want them i want this to be nice and clean so that it's easy to organize one thing that you might like to do is actually personalize wordpress for yourself so if you come up here you've got the edit profile option here you can change things like the appearance of wordpress you can see it's changing the different colors i'm just going to leave it on default and when you come down here you can change how you appear so i can put in my name i can also choose a nickname and then what you can do is select here what you want to be known as so i will simply choose jack in the net and you can see up here that's changed it's no longer my email address it says howdy jack in the net and then you've got profile picture so you can change your profile picture on gravatar all you need to do is go to gravatar.com and it will take you over to here and it's completely free you can just sign up and then you can upload a photograph and that will follow you basically around the web so when you post comments on other wordpress websites and things your image will come up and it will also appear here for you once you've made the changes that you want to do simply click on update profile and it's done now the final thing that we want to do before we start installing our theme and designing up the website is to make it secure because at the moment it's not secure and if anybody tried to visit the website they would get a warning from the likes of google okay people want to see the secure padlock it's very very important one for user trust but also to keep your data secure now you can get a free ssl from let's encrypt so simply search for let's encrypt and it will take you through to here now you can simply get started and it will take you through the process of getting a free ssl certificate for your website you do not need to buy them and web hosting that tries to sell you them as an add-on is a scam okay and there's some big web hosting companies that try to do it i won't name them but don't fall for it thankfully the ones that i have already told you name hero siteground and kinster all come with the setup for free ssl certificates all you need to do is come back over to your site tools area come underneath security and down here you'll find ssl manager simply make sure that you've selected the right domain in the drop down then come on over and select the ssl that you want once you've chosen the one that you're going to be using it will come up as saying active and then you can come on over here and from the little dots it gives you the option to enforce https so make sure that you turn that on and then when you've done that come on back over to your website and you'll need to refresh it if when you refresh it it doesn't automatically change it over simply come on down to settings and then go over to general and at this point it's doing it for me so i'll re-enter my password okay but if it doesn't do that for you simply come on over to settings and you can change this over to say https come on down save the changes and it will automatically ask you to log back in so when you do that you will then find that you now have the padlock up here in the url bar so if anybody visits the front end of the website it is secure it's a secure connection nobody is going to be warned off using the website so that's all the sort of boring little setup bits out of the way now it's time to start the whole designing process and have a little bit of fun so i'm back over on my staging website and it's time to add in cadence as a theme so come on under appearance and go to themes then come on up and click add new now you can obviously put in whatever theme you want you'll still be able to follow along with most of this but cadence is one of the very very best themes that is available certainly for gutenberg so i highly recommend it simply click on install and then when it's done that come on over click on activate and then what we can do is clear up our website a little bit more by getting rid of these old ones so simply click on the theme details and down in the bottom right you've got delete so we can get rid of these options because we don't want those anymore now what we want to do is add in a couple of plugins the first one is automatically recommended by cadence and that is their starter templates so this is a way to quick start your web designing and it's something that complete beginners can use but it's also something that experienced people can use as well even if you're running your own web design business because this is going to save so much time we want to choose the page builder that we're going to be using we're going to be going with gutenberg which is at wordpress's very core which is why we can build super speedy websites and that gives us a list of templates that we can choose and pre-install onto the website but just before we do it we want to add in another plugin so the way that we do that is by coming on over here to plugins hover over it and then click on add new come on over to search for plugins and go with cadence blocks what you want to look at is this one here there's already over a hundred thousand active installations last updated only two weeks ago that's amazing so click on install and then activate when it gives us the option there we go so what that has just done is added in extra blocks so with gutenberg the way that we build our website is using blocks things like adding in a contact form block or adding in an icon or a button it's so that we can simply click and drag things into the page as we will be doing in just a few minutes time but the brilliant thing is you can deactivate anything that you're not going to be using for example if you are never ever going to use any testimonials on your website you can simply deactivate them and then that means that they're not being loaded that means the website is going to be faster okay speed is really really important you can access this at any time by coming under settings and going down to cadence blocks just remember that google's new core web vitals mean that the load time for your website is a ranking factor so we want to keep this light that's one of the main reasons that i'm switching over from using elementor over to gutenberg so the website will be faster for now i'm going to leave all of these active and we're going to install one of those starter templates but there's one more thing that i need to do before doing that now this is a completely optional step if you're not going to be building an online course website you do not need to do this bit but this is a plugin that i need to be adding in so you can come on over to learndash go on over to pricing and then you can choose the option that's going to best suit you depending on how many websites you actually need you can choose the one that you want and then you would go through add to cart and that basically allows us to buy this premium plugin that you can use to create courses now i already have this so i'm simply going to go to the part where we upload the plugin on wordpress i'll show you how you can upload premium plugins that you've bought um but yeah obviously if you did want this just go through the normal bit go through can't go through checkout just like you would if you're buying something on amazon it's exactly the same thing so in order to install a premium plug-in or a plug-in that you've got from a third party come on over to where it says plugins hover over it and then come on over to click add new then instead of choosing from one of the many plugins within the wordpress repository or searching for plugins up here as you normally would instead come on up here to where it says upload plugin click on this and then it gives us the option to upload a zip file so when you've purchased a plugin for example learn dash as we were just looking at you get to download it to your computer so you can simply choose the file or if you've just downloaded it simply click and drag it on into the page when that appears simply click on install now and then to finish click on activate so that was the pro panel from learndash that i just installed which gives you sort of more in-depth analytics that we'll have a look at a little bit later on so once again i'll go back to upload plugin and then i will install the learn dash plugin itself install now and once again we will click on activate now when you've done that most third-party plugins will ask you to activate your license so you can simply click here and then you can put in your email that you signed up with and your license key and when you've done that click on update license now that i've done this optional step it's time to install the starter template that we're going to be using so i can close this down up here and get rid of those then come on back down to plugins if you have any updates you can either enable the auto updates as i mentioned before or you can just click them to do them manually and that will update them and now what we want to do is come down here to the cadence starter templates now i'm using cadence for this website so i'm going to be using one of their starter templates but if you do want to use a different one one of the best if i put in starter templates up here under our plugin section is this one over here so this is by brainstorm force i'll install it so you can have a look at it and these are the makers of the astra theme so that is another one of the top themes to use with gutenberg i will put the link to the video that i did on the top three in the description below so make sure to check that out but once you've installed that you can simply view their starter templates so you can go through and simply take a look at all of these you can also come up here and choose the type of website that you're looking for and there's just so many options here you can simply click these and install them and you've got hundreds of different website templates that you can look at but i don't want to use this i want to stick with cadence for my own website so i'm simply going to deactivate that plugin that i just installed and then i'm going to delete it coming back up here to the cadence starter templates we can click on template library now they don't have as many but they are very very well made you can see we've got different types of businesses listed here and you can actually view any of these at any time if you want to get a feel for what they look like simply come up to a new tab go to cadencetheme.com and then come over here to start a template and again we've got them all here so you could just actually click on one and it will take you through to that pre-designed website you can have a look through you can see whether or not you like it this one's actually uh looks like it's got some courses on there as well so that could be a possibility and if you want to see how well it's been built go to google page speed page speed insights and then you could simply take their template website that they've put together and run it through google's page speed test now obviously what you're going to be designing will be a bit different because your content is going to be different but i do like to do this because i think it gives you a nice feeling of confidence to see that something has been well made before you even install it on your website so look at this we've got a score of 93 out of 100 on mobile and 96 out of 100 on desktop for that template so i think that's quite cool feel free to have a look through those and choose one that you like the look of as for me i'm going to keep this nice and simple for you there was one down here that actually said it was for a design course so seeing as that's what i'm going to be having on my website i'm going to choose this one so straight away we have a pretty cool looking website that we could just import we could import a single page or we could import the full site so you can see there are different pages that they've put together for us on here and what i really love is that we can choose the colors and also the typography before we even import it so if i wanted this to be in blue i could click up here or red we've even got dark mode options which changes the whole feel and look of the website but i do really like this one in the orange i've used orange a lot in my brand colors before so i think i'll go with that and again as you can see if i click down here it changes the typography now i'm going to show you how to do this in a different way in just a minute because then you've got a lot more different options but for now i'm just going to choose this one and if we look down here it does tell us what plugins we require in order to import this particular page or this particular website so it needs cadence blocks which was free that we did and it also needs learndash which is the pro add-on that i just added but don't worry if you don't have this because you can still import any of their designs if you don't have the plugin it's just not going to import the course page obviously the one thing it will always need is cadence blocks because that's what it's using to build the website but that's free so there's no reason that you shouldn't have that so i'm going to go ahead and click on full site it just puts up a little warning to say make sure that we're importing onto a clean install of wordpress there's nothing there already and then go ahead and click on start importing there we go that's done it in less than a minute so now we can click finished view your site and technically this is our website we could publish this make it live and everybody would be able to see it now obviously we want to change the content on here make it look a little bit different but i've got to say i love this how clean does this look especially for beginners you can just install this and already you've got a pretty amazing place to start from and i'm going to be honest i'm not going to change this around too much for my own website and i'm a web designer but i think this looks fantastic now i'm going to show you how we can actually set our home page and also a blog page if you've got one this is our pro panel from learndash now obviously it's not displaying anything at the moment because we've not set up any courses or got anybody signed up yet so i'm just going to collapse those down and i'm going to go over to pages and on here we've got the home page the contact page and the about page these have been imported for us and it's automatically set the home page as the front page now i also want to have a blog page so i would simply come in click add new give this the title of blog i don't need to worry about designing anything on it just yet i can come up here and click on publish now it will give you this pre-published check it's asking are we sure we want to publish if that annoys you and you don't want it click on the little dots up here and then come on down i think it's to preferences here we go it says include pre-published checklist so if i turn that off now when we click publish it just does it so choose whether you want that or not then come on back up here to the w and now to set what page is your blog page and what page is your home page come on down to settings and under reading click that and up here you'll see this your home page displays either your latest posts or a static page well we want a static page or i do if you want your blog posts choose that and then it asks us what page is the home page so you can choose any of the pages that have been created i'll leave this on home and then my posts page is going to be the blog page that i've just added and we don't need to worry about any of this for now just come on down and click on save changes now what i want to do is set the colors for the website and also the typography so come on to the front end of your website and then click up here where it says customize so this is the customizer all themes have this but it will look slightly different depending on which theme you're using i do love cadence because it gives us a lot of options even in their completely free version of the theme if you click underneath general you will find the colors option so if we click on colors these are the colors that we just chose you've still got different palettes so we could click through and you'll see that it changes it or we can click into each color in turn and we could then change it and that will save it just bear in mind that when you change a color here it will change that color all the way across your website now when we are designing the actual page i'm going to show you how you can change an individual color by itself but if you want to change the global colors so that everything on the website changes this is where you would do it so you can just come on in and you can say actually i don't want these to be this orange i can change it and you know we can make it i know a green and then it will change it all over to the green and that will do it everywhere okay so just be careful on how you use that i'm going to set it back to orange and then if you did want to change the typography down here you've got the typography option so when we first imported this it didn't give us that many options here is where we can change them so down here you've got the little arrow which gives you a preview of what your different fonts look like but it will also change it on the page so i don't think that's necessary as you can see there are absolutely loads of different options here i'm going to go with one that i like which is poppins so that's now changed the typography across my website we do have a different base font we can see that this font down here is different to our headings if i wanted this to be the same i could do that change it over to poppins and you see that that changes as well so i'm just going to leave it like that for the moment come back again and once more and then this time we're going to come down here to site identity you're going to be familiar with all of these by the end of the tutorial but one step at a time site identity is where you can put in the site icon so you can see it's saying that that's what's displayed up here it's what you get up here in the tab so you can see over here i've got siteground open or the site tools section of siteground hosting that's their little logo this is the temporary one that this particular template cadence imported for us is putting in there but this is where we can change it so i'm going to click on change image and i'm going to upload one myself so there we go i've just uploaded one and we can see that it has changed now you're probably wondering where you can actually get these from and i will show you that but you also need to know where to get an actual logo from for up here so this is the header section and if we click under header you'll see that one of the options is a logo so if i click onto logo this is where i can change it from now there are a couple of places that you can get completely free logos from i will tell you a couple of them one is called logo make r it's not uh it's just an r at the end for whatever reason so this gives you a free logo it gives you a little walk through video on how it works so free fill to watch that and then you can find different graphics add in text put in different colors put in shapes and then simply add them on into the page and another place that you can get it from is one called canva go to here and it gives you the option to create a logo and again there's a whole load of templates that you could start with if you wanted to you could simply put something in you can come over here on the left and then you've got things like elements you can put in or we can put in text simply click it or click and drag it and that takes it on into the page anything that you don't like you can simply backspace and delete and of course you can click things and come on up and change their colors once you've done that and you've got a logo that you like simply come on up to download and make sure that you download a png option if you want super high quality then you do need to pay for it but frankly the free version on both of these is absolutely fine you're going to see a little bit later in this tutorial how to actually edit down pictures inside of wordpress anyway i'm going to show you how to do that so you can crop them nicely and they will display beautifully on the website of course this is just a free way of doing it naturally if you have some premium software like photoshop or affinity photo then it's best to design up a logo for yourself in there but that's where you can get them from i'm going to leave it like this for now i will add in my own logo when we get to the stage of designing our headers for now once you've chosen your colors and the typography that you want simply make sure you click up here on publish and if you've made changes that you don't want to save then you would click on the x button and that would get rid of everything you've done i want to keep mine so i'm going to click on publish and then now that it's gone gray it's okay for me to close this down now the first thing that you may notice is that up here in the header area we have the different pages that were automatically imported for us but that blog page that i added in hasn't actually appeared so how do we add things to our menu come back over to the dashboard and then come on down to appearance underneath appearance you will find the menus section simply click onto menus and then up here you have an option of different menus now the reason you have this is because it's been imported by that starter template we used if you weren't using a template you'd have nothing here at all but all you'd need to do is click on create a new menu if we come over here you'll see that this one is the primary menu so i would choose this and then i'd click select and then i can see how it's been built and the reason that it's been made the primary menu the most important one is that it's been clicked here and it's also been clicked under mobile so that anybody viewing this on a mobile device will see this as their main menu now if there was something that i didn't want i can click the drop down and then i have remove so i'll remove this and it disappears and if i wanted to come back i can come over here where it says contact click on it and then click add to menu of course these say most recent i've also got the option to view all and if i do that you'll see that the blog has appeared so now if we click this and then click add to menu that blog page that we created just a minute ago has now appeared in our menu and we can also reorder things so i could drag this up and then my blog would be the second option in my menu or i can have a sub item so if i drag blog blow about and then bring it over to the right you'll see that it becomes staggered and it is then a sub item so if i save this i'll show you what that means come back over to the front end of the website you'll now see that a little arrow has appeared underneath about and when i hover over it you then have blog appear it doesn't look great and we'll look at how to design this properly so it looks nice when we're actually designing our headers but that is what a sub item is and we could keep doing it we could have sub items for the sub items and that's how you can order your menus so that they make more sense for people for now i'm going to simply go back come back to appearance go to menus and i'm going to take this back over to the left i don't want it to be a sub item and i'm actually going to put it down here there's also something else you can do if you want to have items in your menu that don't link to pages and you can do this using custom links for example i have a web design business so i would want web design to be one of my options in my menu however because that is a completely separate website i don't actually want it to have a page on this site that i'm building so i would put in the url to my other website and then when anybody clicks this on the menu it will take them through to that completely separate website or if i had an option that said youtube and i wanted people to go through to my youtube channel then i would just put in https semicolon the forward slashes then i'll put in youtube and the link to my page and then when somebody clicks on it it would take me through to there okay so you can put in any website url that you want to in here and when somebody clicks that menu item it will take them through to that website rather than a page on your own website and one final thing that you can also do is actually just put in a hash sign or a pound sign if you're from the states and then what that means is that when we have this in our menu somebody can click on it and nothing will happen because it's not actually directing to anywhere the reason you might want to do that is because i might want to have sub items underneath this so you can have a custom link save the menu come over to the front end and now if somebody clicks on web design it doesn't do anything it won't go anywhere but they do have now the options underneath it and when they click that it will go through to that particular page okay so if that's something you're wanting to do in your designing that is how you can do it really nice and easily as for me i don't want that i'm just going to leave it as it was and i'm also going to change this over so that it says courses instead of course and that is good enough for now so save the menu you can come back here and make edits at any time we are now at the point where we can start designing and for our designing we are going to be using gutenberg so i'm just going to create a test page for the second and this is what editing with gutenberg looks like you start with a completely blank slate unless you've imported one of those starter templates so before we do start our editing let me show you around so that you know where to find all the different settings if you want to add in a block with gutenberg there's a couple of ways that you can do it you could come down and we could press the little plus sign here and then it gives us suggestions of different blocks that we could use or we could search for a block or we could click on browse all if we click on browse all it opens them up here on the left now up at the top we have cadence blocks that was the third party plug-in that i installed it's completely free and that gives us extra blocks that we can use we're going to come on to those in a minute but down here in black are all of the default gutenberg blocks that you have you've also got widgets and there's lots of embeds as well so things like twitter youtube facebook etc we can use all of these things if you have installed learn dash you've also got those options as well and we can click something and add it on into the page or we can simply drag and drop it on into the page when you've done that you can obviously start writing your heading now the other thing you can do press return to add in a block another way instead of pressing on the little plus sign we can use the forward slash and that automatically brings up again a list of different blocks and if i start to type something for example page break or whatever it might be it narrows the list down and then you can simply press that and it puts it in for you if you have put in something that you don't want you can press command z or control z i think on a pc instead of a mac and that takes you back a step if you want to delete something completely simply click on the little options menu here and then down at the bottom you've got remove block so i can click that and that will get rid of them and we're back to having a blank slate again you also have the option of pressing up here this will also add a block but this time it brings up the main list of blocks that you can just choose from straight away and as you can see when you hover over things it does give you a little preview on most of them as well which is pretty cool the other area that you need to be familiar with is just over here so you've got a cog we click the settings cog this brings up the settings for our individual blocks so if i put back my heading block that we had just a moment ago you'll see over here it says that we are currently editing the heading block you then have the option up here for the page if i click over onto the page we can make changes to this for example its visibility is currently public anybody who happened to visit our website would be able to see this page or we could make it private so that only we can see it or we could password protect it so that anybody can access it providing they have the password you can even backdate things as well so if you want to for example make a blog post you can put it into the past or you can set it to be published for a date in the future then you have permalinks so a permalink is the url slug i've just called this test so that's why it says test in here if we went to our home page the slug would be home okay the slug the url slug is everything that appears after the forward slash that comes at the end of your main website so this is the url slug this section up here you then have a featured image now these aren't the images that we'll be inputting on the page okay you'll see how to do that separately in a minute the featured image is important for a different reason whenever you share your page for example on social media okay you wanna you wanna share your page on facebook when you put in the link to your page okay this being the link up here in the url if you want it to give you a preview of a nice image this is where you would set the featured image so you can just click on that and you can choose an image from your media library or upload a new one more on that in just a minute you've then got the discussion option whether or not you want comments to be allowed okay if you want them to be allowed make sure the box is ticked if you don't want them make sure it's unticked and then we've got page attributes which we'll look at a bit later you don't need to worry about that now so we'll simply close that down so that is where you find the key things that you need in order to create a page with gutenberg over here on the right for your settings where you can alter each individual block and over here where you can choose the block that you want to be adding to your page to begin with so let's go ahead and start editing and by the way if you are really serious about putting together the best website possible then check out my gutenberg master class course i'll put the link in the description below i go into each and every block in much more detail it's sort of a pro version really of this tutorial and you'll be able to create amazingly advanced websites so check out that course link in the description below for now let's get back to this and start changing how this all looks so this is our home page and the very first thing that we have on a home page is our hero section okay a hero section on a website gives you generally an image and also a call to action let's pop back over to apple again here is the hero image okay they are currently promoting their ipad pro so we've got the hero image and we've got the call to action just up here at the top so it's one of the most important parts of your website okay it's the first impression people are going to be getting when they visit so this is built using a row layout block that's one of the cadence blocks so let's just recreate this quickly so you can see how it's been done i can come up here and i'm going to choose the row layout block and it says here select your layout so we've got two sections here one on either side so i'm going to choose two you can have it split 50 50 half and half i think this looks like it's over a little bit so i'm going to say this actually wants to be probably around 55 and 45. just up here on the left this option here it says change alignment so if we click this we can choose how wide we want this to be going across the page so for example i can choose this to be full width i want it to go right from one side of the page over to the other and now what i need to do is add in some height and of course an image so to do that with this selected you can see it gives us the outline if i click up here it outlines this one i click down here it outlines this one i come on over to our cog that we looked at a minute ago and straight away it tells me that we are editing the row layout block it tells me that we've got the two columns that i chose we could change this here if we wanted to or we could change the layout make the one on the left bigger or vice versa or we could stack them vertically if we wanted to so i want to put in a background now to do that i come to background settings and we've got a couple of options i could have a single image i could have slider images where it asks how many images do we want so we could then change the number of images and then they would automatically slide across the page or we could even have a video if we wanted to i'm going to stick with a single static image and the reason for that is although a video looks great or sliding images look great so please feel free to use them i don't need that for my website a static image is fine and if you can get away with just having a static image not a video it's going to make the site load quicker okay which is obviously better so i'm going to go with that select image come to upload and i'm just going to find one quickly i don't know what i want to use yet but i'm just going to go with this one so once you've uploaded your image it appears here now i already have several in here from previous blog posts and things and you'll also have some from your starter template you imported but we can ignore those for now simply choose the image that you've uploaded click select and that will add it in now obviously what we see over here on the right is not what we see on the page itself because this doesn't have any height in order to add that in all we need to do is scroll on down and you'll find structure settings now this gives us the minimum height that we want it to be and in order to make this optimized across different devices instead of doing it in pixels we can choose vh or viewport height and don't worry if you don't understand what these are i have a short video that explains it which i suggest you watch because it helps you with how to optimize your website for mobile devices i'll put the link in the description below it's only about 10 minutes long and it explains for you how to use these properly but having selected vh i can then increase the minimum height and i want to choose 100 because that means it's going to fill 100 of the screen now that i've done that you'll notice that these little things up here are stuck up at the top i want them to be in the middle so over here it gives us the option to vertically align so i click that and i choose align middle and that moves them down to here so now we have our image and if you don't have one of your own that you want to put in there's a couple of places you can get them from for free there is pixabay that gives you free images just search for them you can use them you've also got pixels and there is unsplash okay so those three give you uh free photos there's also some free videos as well that you can put in and of course if you're wanting to stand out a little bit more from the crowd then you can go for uh premium photography from places like shutterstock or um adobe that sort of thing but the very best thing of course is to have pictures of yourself that you've taken yourself i really don't know what i'm going to use we're just going to go with this one for now post in the comments what you think i should have as the picture for my website i've got no idea at the moment i'm very much winging this so post in the comments what you think but there we go once you've got your imagery put it on in and if once you've done so you're not happy with how it looks you can actually edit your images inside of wordpress so let's look at how to do that quickly come on over to media select the image that you're wanting to edit and over here you've got the edit image option so when we click this you can rotate it round you can flip them vertically or horizontally or you can crop them which is probably what you want to do now i've already uploaded this in 16 by nine dimensions which is 1920 by 1080. okay 16x9 looks fantastic on website so what i suggest you do is you come down here to aspect ratio and you put in 16 by nine what that means is that now when we click and drag i can't just free form this into any old shape okay as we click and drag it forces it to stay in the ratio of 16 by nine you can see that as i'm changing this it's automatically changing the pixel sizes down here so we could do that reposition it we could then crop it and save it but i don't want to do this i've already got it in 16 by nine 1920 by 1080 as you can see so there's no reason for me to do it but if you need to that's how you can so let's go back over to pages back to home so now what we need to do is add in our overlay that we've got here to here and obviously add in our content so to do that i would click again onto our row layout and this time i want to come to background overlay settings and i want to choose an overlay color so i click on this i can choose any color that i want to up here or we can choose one of our preset global colors and then when i've done that i can increase or decrease the opacity i could also have a gradient and then what you can do is choose a color and you'll see that it automatically gives you something like this now if we scroll down a little bit it gives us the option of the gradient angle so we can start adjusting this round now they've sort of got it at pretty upright it's just a slight slant probably something like that if we were wanting to copy what we have up here and we can then change the location so you can see as i move this it sort of makes it more or less blended i can move that one back over to the left and this one back over to the right so by doing that let's try and line it up with sort of where they had it probably somewhere around there i think and then we can click onto this uh second color that we've got here and we can just get rid of that we can make it completely transparent and then of course you can just play around with the overall opacity on that side over here and i think they're actually using either the lighter gray or the white so let's change that over probably to the white and i'm going to make this one a little bit see-through maybe around 80. so that's how you can get that effect you can obviously move it all around just by using these different location options and you don't have to have it linear you can have it radial which means that it centers in the middle instead then you can choose whether you want it to be in the center or up in one of the corners or something like that but i'm going to leave it as linear so that is the row layout block and that's how you can quickly put together a background hero image with an overlay and of course have different sections inside it that we can add more content to of course when you have just imported something like this from one of the starter templates you can click into any of them and go to background settings and simply change the image that they've put in there for you so we can edit image change over to this one and that would then put it in here for us and i could go and find the background overlay settings and now simply bring this down to around 80 and we can now see that i've got the same image above as i did below so i'm happy with that remember we can just click on something at any time click on the little menu and then we can remove it the other thing that's good to know is that we could move this up or down so this one here that i've done at the bottom if i click the little down arrows you'll see that it moves it down the page brings the other content on the page above it or we could simply bring it back up again stick it right at the top if we wanted to really easy way to move things around i'm going to remove it so now we have our background image we've got our overlay as well but let's have a look at adding in a cool little divider down here so still with the row layout selected you want to come down and find the dividers option now you can stick these at either the top or the bottom i'm just going to put it on the bottom for our hero image because i don't want anything funny going on up at the top but we could always add a divider in at the top of the section below it if we wanted to sort of blend it in a little bit let's take a look at that so underneath the bottom section we've got a lot of different shapes i'm gonna go with this one i think i like the look of that now you can also change the divider color so obviously here i have this gray just below it so if i wanted to sort of blend it in a little bit more i could switch this over to the gray i think it's that one there you can see that blends in now very nicely and we can obviously adjust the height just make sure when you are doing this you do want to make it look good on mobile as well so if you come up here to the little preview button we can have a look at what this looks like on mobile and it's looking okay whoops it's going to need a different image behind it that's not going to work very well but it's not looking too bad however something that doesn't look right is that divider down here so just make sure that you're doing it so it looks nicely for both you have your size controls for desktop tablet and mobile of course if we just adjust it on the desktop it's going to automatically carry over to the other devices as well so i reckon probably somewhere around 80 and let's just change that width maybe make it around 150. that looks pretty good let's take a look on desktop there we go i do like that that's quite nice and subtle and then if you feel you've got a little bit too much space up here we can click into this section and then you see that as i hover over it it tells us that we've got 120 pixels of space if i simply click and drag this down it will reduce that so let's make it probably around 50 and that looks a lot better to me now one thing that i do suggest is that instead of going through and designing everything on desktop and then coming back to try and do it on mobile do it as you go along so for our background we could click into it come on over to preview come on down to mobile and then we can actually come down to the mobile background you've got the mobile background overlay as well we can set a custom image for mobile because the one that's we've got for the desktop just isn't working here it doesn't look right so i don't have another image yet but when you've got one you can come on in select it and that will then apply it to the mobile background and obviously you've got your focal point that you can alter down here as well so i just suggest that you get into the habit of as you design each individual row you actually come in and make it look good for mobile as well we'll go into that a little bit more when we get to the content part in a minute but let's have a look at the content blocks themselves so first thing we've got up here is a heading block now this is different from gutenberg's default heading block whoops which is just here okay the cadence advanced heading gives us a few more designing options so as you can see we've actually got two different colors going on here this is currently set to h1 which means that it has priority on the page you should only ever have one h1 per page that you're designing okay this is your main message and then h2 has the next level of priority and then h3 is below that and so on and so forth until you just get down to normal paragraphs which is exactly what this is here so you can see if we click over here we can actually transform this if we wanted to i could turn it into a quote i could turn it into an advanced heading we can do that with any of these we just simply click on this icon on the left and that gives us the option to change the block style you can choose the heading option that you want and as you know you can move entire sections up and down we can do the same thing with individual blocks just use the arrows to move them up and down or you can actually click and drag just over here and bring it down somewhere else if you want to it's just this little drag tool up on the left next along we have the typography settings so when we click into here you can change the font family so you saw how we chose the typography for the global site settings inside the customizer earlier you can change things individually for each block just here now i'm obviously going to leave this on default but you'll notice that down here once again we have the sizing options you've got the desktop you've got the tablet you've got the mobile and you'll also notice that you have the option to choose whether you're using pixels em or rem again check out the 10 minute video link in the description below where i showed you exactly what this means and how you want to be using them to design a mobile friendly website okay you don't want to be using pixels because it's just not going to adjust in size properly when you look at it on other devices next along we have this which is our heading color now this will change the overall color for everything if you want to get two different colors just like this then you need to use the highlighter and the way that you do that is you click and drag highlighting the text that you're wanting to change to a different color coming over to the little drop down arrow here that says more and then you've got this option which says highlight so you can see by clicking that it turns it off if i click it again it will turn it back on if we come on over here to our settings cog on the right this will give us the option to choose the highlight settings so as i scroll on down here we see that we've got highlight if i open this up that is where it gives us the highlight color so we could change this if we wanted to make it gray make it a darker orange lighter orange or any other color that we want you can also put in a background color or if you wanted this to be in a border you can apply a border color and then obviously choose your border style and the width of the border as well going beyond that you can even change the font size and the line heights and the letter spacing for your highlighted text and we can even transform it we can make it capitalized we could make it all uppercase or all lowercase and it's all doing it from within the same heading so that's a really really cool option i love that in fact you can even change the entire font family if you wanted to coming back over though to our little toolbar we've got some more options this is obviously the alignment so we've got our text aligned to the left we can put it in the center or over to the right i'm going to leave it on the left here we have the copy and paste styles now this is awesome because once you've actually designed this the way that you like it if we had something similar further down the page we could simply copy and paste the styles so if i click this copy styles come on down choose this one here come on over click paste styles that converts it over and all you need to do is obviously highlight the text that we then wanted to change color come on over click highlight and in a couple of clicks we've got something that looks the same as what we had up here now i'm going to undo that because i don't want it but it's a really useful feature to have then just like you'll be used to on pages on microsoft word you've got bold you've got italics and we can also put a link in here if we want to we'll have a look at that in a little bit more detail later on in the tutorial but the idea is that again if you highlight a portion of the text we can click this link option and then you can put in a page or a url to a completely different website if you wanted to and then that would turn this text into a link so when somebody clicks it it will take them to that location you saw the more options that we had here with more styling options or the ability to put in code which we're not going to cover in this tutorial but again if you want to learn things like that check out my guttenberg master class just head on over to my website jackinthenet.com and then lastly we've got this the options panel so here we can actually duplicate the entire block this is a really useful feature and it's not just for this block we can do this with anything whether it's paragraphs whether it's buttons it doesn't matter you just select something come on over to the little dots and it gives us the option to duplicate it and when you've duplicated it like i have here you can then move it around put it somewhere else in the section or if you wanted to you could click and drag it down to a completely different section of your page so we could bring those buttons and put them down here if we wanted to so duplicate will save you a lot of time if you've designed something up and you then just want to obviously copy that and put it somewhere else on your page as you know we've got the ability to remove the block which is what i'm going to do now but just bear in mind that you can add this to reusable blocks we're going to look at that in a few moments okay so just remember that it's there i'm going to be showing you how to do it with an entire section but you can add individual blocks to reusable blocks as well okay it's just in this little drop down menu more on that in just a moment so this is our advanced heading what i would want to do is actually have this different on mobile so if we click on over to the mobile option just here i can align this to the center and now when we switch back over to desktop that is still aligned over to the left but on mobile it's going to be in the center now i want to do the same thing with our paragraph text now what i could do if i wanted is change this over to an advanced heading i could then come on over and instead of having this as a heading switch it over to a paragraph and now that i've got it as a paragraph i can do exactly the same thing i can choose the mobile option and then i can align it into the middle but when i switch back over to desktop it's still aligned over to the left if the text is too small just remember again come on over to typography settings and choose the size that you want it to be i'm going to make this probably 1.2 em take a look on mobile that looks okay so pretty happy with that sizing now let's have a look at the buttons so we've obviously got our buttons that they've designed up for us here if you're wanting to start from scratch again we press the little plus block section choose a button and you see that it adds it in here now we can start to type so let's just call this test button and then when you actually click on it it gives us the prompt to add in our link for the button so again you want to be putting in here the page that you want it to go to so if i wanted this to go to the blog i could start typing in blog and it comes up with a list of prompts so up here is my actual blog page it's also given me a load of posts that i have which i could link to if i wanted i click that and it puts it in one thing you do want to be careful about when you're doing this though is linking specifically to the staging site if you're using a staging site when you then push this to live you want to make sure the links transfer across so when you are putting in links you actually don't always need to put in this part at the beginning i could actually just leave it as forward slash blog and then it will just automatically insert the url that i'm using before it so you don't always have to put in the entire url into these things unless you're obviously linking to an external website anyway put in the link and then we can start styling up our button we can always add in another button if we wanted to we just press the little add button here that adds more in when it says button inherit styles we've got the theme option which will automatically style it up to our theme colors or we can just leave it on default and then you can manually adjust what it's going to look like so we can change the font size of the button change the colors that we want so we've got our normal color we can change the text color so i can make this white we've got the background type so we could have a solid color or we could even have a gradient if we wanted to so i could go with sort of an orange here we can go with the darker gray you see that gives us a nice gradient button and then we can change the locations of the two colors so you can see that's forcing the orange to come down more across the gray or vice versa so we want a sort of a blended effect and then you can change the actual gradient angle that's if you're using a linear type of gradient if you go with radial it gives you the sort of circle in the center which is obviously quite nice and then you've got border color option as well if we just bring this back to solid for a minute you'll see that those were the colors for normal if we now switch over to hover then we can start changing this around we could make the hover text color go to black and the background color let's just make that go to white for this example and now when i hover over it you see that it's turned white in the background and obviously we've got the black text so that's where you can choose all of your colors when you're making a button from scratch you've then got the option to add in a box shadow so if we do add that in you obviously need to choose the color of your box shadow and you can then start changing the positioning so you see as i move this over it's moving it more to the right and the y index brings it up and down so that's obviously very extreme but now you can see it more easily you can also increase the blur and the spread which makes it go out wider you see it's sort of making the edges bleed out further and further that's how you get a box shadow if you inset it it puts the shadow inside the button instead of on the outside probably not going to use that as much but there are a couple of times when it can look quite cool you can then manually adjust your border widths and the border radius which will curve the corners just like this let's bring that border back a bit that's rather extreme and then you can also add in an icon if you want to you've got loads of different icons that you can add in you just need to choose one and that will add it over here you can change the icon size just like you did the font and then again we've got things like icon color for normal and hover change the icon padding or we can move it over to the left if you prefer change the gap between the two buttons down here basically style it up any way that you want to however if we just want to have these being the same style as these up here what we can do is click onto one of the buttons and in the top left you have this copy and paste styles so if i click this i can copy the styles then i can come down click on this button once again come on over but this time i choose paste styles now that will change the style of the button but it won't change the other things that we have added ourselves okay we added in the icon we forced it to become bigger so it can't change that if we just had our default button that we started with however we click into that and paste the style over you'll see that it looks a lot more similar that is how you can very quickly make things look the same but it's still a little bit different and the only way you can ever duplicate things exactly with gutenberg to save yourself a whole load of time of having to go in and tweak it is by using reusable blocks so again i'm going to show that to you using the entire section but we can do it with individual blocks we just choose the button that we want or the text that we want whatever block it might happen to be and you can click add to reusable blocks so let's do it let's show you what this actually does i'm going to delete this okay so this is our entire heading section now apart from changing what it says i'm pretty happy with that so if we select this come on over to the drop down click add to reusable blocks it has created it for us now let me update this it's going to ask if i want to save my new reusable block that i just added so yes i do and now i'm going to actually come on over here click the drop down and this time i'm going to go to manage reusable blocks this is where you can actually import and export things when you've designed something up if you wanted to then upload that onto a separate website that you have you can export this and then you could simply go over to your other website come into reusable blocks and then you could import it so if you've got several different websites but you're wanting to carry your brand across each of them you can design it once export it and then come and import it into the new site and when you actually click into it you can see that it brings it up we can edit this some more if we want to and then update it and that would simply update our reusable block and of course we can give it a name so i'll just call this hero section update and now that i've done that if we head on back over to our page so back to pages back to home if i wanted to add this in again i could come on down let's say i want it down here click the little plus button up here at the top left and you'll see that we now have reusable as an option i click over to that tab and we have our hero section it gives us a preview of it i click on it and it inserts it into the page now i've done that with the entire section as a whole but as i mentioned we could do it with each block individually so once you've designed something once and you're happy with it save it as a reusable block and then you can reuse it anywhere on your website not just the same page absolutely anywhere and it will look the same that is such a brilliant feature with gutenberg most other page builders that we used to use they had to have their premium versions and things in order to do it okay but it's inbuilt into gutenberg and it's such a brilliant feature so make sure that you play around with that and get familiar with it now let me get rid of this and there we go so that's my hero section i am now just going to change what this actually says by clicking into it deleting what's there and then retyping it i'm going to do that and i'll be right back with you okay so i've changed what it says and now let's preview this and see what it looks like on the front end because our editor gives us a very very close match to what it's going to look like but i always do like to double check so come on over to preview and preview in new tab and there we go there is our hero section i hope you like it i certainly do i think it looks absolutely beautiful mainly because of this gorgeous guy that we've got right here don't know who he is such a good looking fellow i must remember to add modesty to the top of my list of skills so this looks good but now let's have a look at how to actually get rid of something that we don't want and add in a completely new design layout so i can close this down back to editing our page scroll on down a bit and if we have a look at this part here i might want to have something up here i'll have a think about that but i definitely don't want this so if there's something you don't like simply click onto that section and again come on over and remove the block that gets rid of it but what if we now wanted to add in something else well obviously we can design it all from scratch or if we come on over here come back to row layout you've got the option for design library you'll also see it just up here on the left okay so feel free to click from it up there but you can also do it when you choose your row layout block clicking into the design library brings us up a whole load of options these are pre-designed sections by cadence blocks so if there's something that you want to add in you can come on up here have a look through the category maybe we want to have pricing tables and it gives us these different design options you've got some free ones you've got some pro ones which obviously you'd need to upgrade for but even the free ones look fantastic so just go through and have a look at what you like you then also have the starter packs so this is where you can re-access these anytime and then we could click into something say this one over here and we've got the individual pages for each of them so if you were to have a look through and you say i know i really like the look of this for example you know this sort of contact page you've got the google map at the bottom you love the lookout the look of it you could actually now import this into the page again you can also connect up your libraries but for that you do need to have the pro version so we'll have a look at that a little bit later on for now i just want something simple three hover boxes will do so something probably like this i can click that and straight away it puts it into the page so just the click of a button look at this i've now got three hover boxes and as i hover over them we've actually got a really nice light hover effect i like that it's not too heavy i even like the colors actually and again if you want to adjust the margins and padding you can simply click here drag it up to bring it closer or you can come on over open up our little settings cog and you've got the margins and padding here so you can adjust the top and the bottom from here so let's bring the bottom so that it matches the top as well i change this over to 40. that brings it down even closer i'm probably going to have to change this part down here but we'll get to that and obviously we've got these each being the same width but if you did want to adjust that you can click and drag and move them into different sizes as well or you can come up just here where it says layout and then you can start changing them like this and that can be a quick way to get the design that you want i'm just going to leave it on the default i think that looks absolutely fine i think actually this wants to be maybe 20 and then let's have a look at how we've actually got this hover effect so if we click into one of these this is an info box okay it's an info box block you've got a few different designs that you can choose from some presets that they've set up for us which look really cool again we can add in a link and you can choose whether you want this to be on the entire box or only on the learn more text so if somebody clicks on the whole box will it take them to that link or do they specifically need to click the learn more you can choose that you have container settings so our border radius and our color is what you can see around the side here the container padding is what gives us the space around the outside you've got the background color being white and of course we have the hover effects as well so if you wanted to change the whole background color when you were hovering over it you could do that here if you wanted to down here you see you've got the container shadow and it's got enable shadow on so if you're doing this from scratch this would obviously be off you wouldn't have the shadow like you do on this one you'd need to come down to contain a shadow turn it on and then you've got your normal and your hover options so you just need to switch between the two choose the shadow color that you want and then increase the blur or the spread or the offset like we looked at a minute ago with the button in order to get that hover effect when you actually bring the cursor over the box and it's good to throw in a few of these little subtle effects it just gives a bit more depth to the design that you've actually put on the page looks really nice now something else that we could do is actually change the hover effects for our learn more text down here so where it says learn more settings at the moment it's got the text color if we go over to hover we could change this so i'm going to change my text color over to orange and now when i hover over it that adds a little bit more depth in again and then if we want to change our icon we come up to media settings and you'll see here it says media align to the top we could actually move it over to the left or the right if we wanted to i'm going to leave it up there do we want it to be an icon or an image or even a number if it was an image you can choose that and then you obviously just need to upload an image or choose one from your media library and that's going to put that up there instead i'm going to leave it on the icon and i want something to do with the courses that i offer on my website so i want an icon that's got something to do with learning or graduating yes this one looks great so i simply click on that and it changes the icon over for me and of course you can change the color of your icon exactly the same as you can for your title so you just choose the title or the icon all the container option that we just looked at and then find that color and that's where you can actually change it from so if i wanted this to be orange or any other color i would just choose it and it will switch it over for me i'm going to leave it as it was because i do like that blue actually and there we go now we have some cool hover boxes once again i'm just going to change the content make these two match up and i'll be right back with you okay so i've made my changes and i'm pretty happy now with how that looks we've got the nice little hover effect and the change of color down here at the bottom as well and thanks to the cadence blocks layouts able to do it in just a matter of minutes so next up we have this bit and how this is created we've obviously got two sections one with an image on the left we've got our heading and our text on the right let's personalize it to us so back on over to our page if i click over here you'll see once again we just have a row layout we've got the two columns you can always add more any time or take them away just bear in mind that if you do that it will get rid of the content so you'll have to undo command z on mac or control z on pc you'll also notice that up here you've got your undo arrows or your redo arrows you can always do it from just up there as well now if we were designing this from scratch really simple we would just come on in row layout two sections and then we would press the little plus inside of here and we would go for an image or an advanced gallery if you go with a gallery then you can actually have a carousel or a slider what you would do is come on into your media library choose all the pictures that you wanted if you selected one that you don't want you can just untick them or clear it completely from down here i'm just going to go with the one for now then we click create a new gallery it'll give you an overview of everything that you've selected and if you've forgotten anything you can simply come back and add more to gallery i'm going to insert this into the page it gives you different options for example the number of columns that you would want ie one two three i just want one column you've got different gallery types is it a masonry is it a grid is it going to be a carousel where it will simply slide from left to right or fluid carousel or just a normal slider so you can have a play through and choose the one that you would like now obviously i don't actually want this i just want to have the background image on my section but for any of you who do want to have a nice carousel of images or a slider that's the block that you want to be using okay the advanced gallery make sure to subscribe to my youtube channel because i've also got free videos coming up which will go into each and every one of the cadence blocks in detail so you've got a good amount of time to go into each of them and see how they work for now let's get rid of this remove the block if we click on our section over here we can see that the section has a background image what i want to do is change that image over so i click on edit image choose one of me put that into the page we can change the focal point probably somewhere around there and then over on the right we've just got the normal text so i will change it on over now what i want to do is actually have some space on the right over here so this text is brought down further and is more in line with my image a couple of ways we could do it let's have a look at the actual spacer or divider block so if i click in here press the little plus button let's search for spacer we could just have a spacer or we could have a spacer and divider the difference being that under spacer and divider you've actually got a line in there so if you want the line you need to have enable divider ticked and then you've got a different choice of whether you want it to be solid dashed or dotted obviously what color you want it to be the height of the divider how wide it's going to be etcetera etcetera i don't want to have a divider so i'm just going to turn that off we can then just choose the height of our spacer let's go with around 100 pixels and i can move that up above my text and that's now moved it down roughly in line with where i want it to be if i come down to the bottom here i've obviously got this space which i'm not that keen on so i'm going to bring that down to zero but i do like this little call to action strip that we've got down at the bottom i think that is quite nice so what i'm going to do is click onto it and go to background settings i think i'm going to make that the slightly lighter orange change what it says by coming over here clicking on this and writing something in supercharge i don't know your online success something like that something corny like that will do uh right there we go update and once again let's preview in a new tab and take a look at what we've got pretty good need a little bit more space up there that's too narrow a little bit less space there but otherwise that's looking okay so we come back come over to here increase this up maybe around 60 pixels come on down to this one make that zero update again and let's preview this once more that's better more sensible spacing and that's better as well i could bring it up a little bit further maybe bring the text down a bit more but you get the idea that's looking pretty good i do like that and then obviously as we go down the page they put in stuff like this to do with the learn dash courses if that's not applicable to you just delete it or add in a different picture testimonials are really useful on a website but there are a couple of different ways of doing it and i actually don't think this is going to be very mobile friendly having them all side by side like this so let's take a look at that okay so that is in a grid if we look at it on mobile come on down yeah that doesn't look right at all okay so having them side by side not very good we could change the number of columns we could bring it down to one but then that's quite a bit of scrolling i think on a mobile having it like this so what i would probably personally do is leave this on two columns come on back over to the desktop view so that it looks different on mobile to how it does on desktop and there's sometimes when you're designing websites that you cannot no matter how much you fiddle with it make something look right when you're trying to play around with the margins and padding etc for both sometimes you need to use responsive design so that you have one thing appear on desktop and something else completely appear on mobile and obviously you don't want them to be able to see both versions you need to be able to to hide something on desktop and only show it up on mobile and vice versa so let's have a look at doing that first of all i'm going to duplicate my my row layout so we've now got two versions of this okay um i don't want this that can stay the same on both so i'll just remove that get rid of this spacer as well so we've now got our grid testimonials up here and down here we've got the same thing but this time i am going to change it so instead of having a grid layout i'm going to change this over to carousel now this looks pretty good because you can just go from side to side and it'll slide across but remember that if we were having this on mobile having two columns still isn't going to look right it's going to look too cramped uh having that side by side it doesn't look right so what i would do instead is have this as just the one column we could still have four testimonial items so that when it slides through you've got four showing up you can obviously have as many as you want just bring up the uh the slider or bring it down you've got different carousel settings so for example auto play that way it will just automatically play people don't have to click the little arrows you've got the auto play speed which is obviously how quickly it's going to change across bear in mind this is in milliseconds okay so 7 000 milliseconds is seven seconds you've then got your transition speed that's pretty fast so if we made it 500 that is a half a second okay 500 milliseconds half a second because there's a thousand milliseconds to a second and what i would now do is come up to our uh our row if if by the way you're never sure what your what you've got selected just up here on the top left you've got the outline so if you do this it tells me that i'm currently editing the testimonials block if i want to get to my overall row layout i can simply click that and you'll see that it outlines it for me now what i can do is over on the right find the visibility settings which are there and look at this we now have the option to hide this on desktop or tablet or mobile so this one i just want visible on mobile so i'm going to hide this on desktop i don't know what it's going to look like on tablet we'll just hide it for now and look at this you've also got the option to hide things depending on user visibility this is really really awesome so let's say that you've got something on your page that is wanting people to sign up a bit like me i'm going to have people signing up for my courses now i would only want that to be displayed to locked out users okay people who are visiting my website they're not currently signed up i want them to see my promotion okay my sales pitch whatever it might be however i don't want to have my existing subscribers my existing users to have to see that every time so i could hide something from logged in users okay this isn't just for testimonials remember we're doing this on the row layout so we can do this for absolutely anything we could do it for this we could do it for our even for our hero section if we wanted to you can hide things for logged in users really powerful useful feature but what we're wanting to do for now is just hide this on desktop and tablet and then of course what we need to do is come up here and do the same thing so select our layout come down to visibility and this time hide on mobile so if that has all gone well and according to plan if we now preview this we shouldn't see that carousel option on the desktop view we should just see there we go the grid of thought we can't see the carousel and obviously if we were viewing this on mobile we wouldn't see this we would just see the crows option so that's how to make things responsive across devices by hiding certain bits of content when and if you need to so that is enough for the home page let's move on to designing other parts of the website and let's start by having a look at the header and also the footer area to start editing your header first of all coming up to customize just up here like we did before and then under the header tab you get given this layout so you can alter this with desktop and also tablet and mobile we're going to start with the desktop one and you'll see that we've got these different rows the top middle and bottom row now at the moment everything is lined up in the middle row but if i wanted to have some social icons up here on another bar i could simply come over grab the social icons and drag them over onto the right hand side and then you see we get this up here and of course if we wanted to have maybe a search function we could grab that and put it up in the top left and we'll see that that appears up here and we could do the same thing putting things on a bottom row as well but we'll leave it like it is for the moment if we wanted we could have our navigation over in the center that moves it into the middle and obviously move these around as we want but i'm going to leave it over on the left what i want to do is create a sticky menu and one that has a transparent background that becomes solid when i move down the page now we can actually do this in the free version of cadence so to do it first of all we come on over to where we have our options for transparent header and sticky header so if we come over to transparent header we can turn this on and it actually gives us the effect we already had because we're working on our home page but we also want it to be like this on our other pages so you see over here it says disable on pages well that's not great because we want it to be see through on our other pages as well not just the home page so i don't want it to be disabled on pages but you might decide that you actually want to have it disabled on posts and courses as well you have the options there to choose which ones you actually want to have the see-through heading on now to make it sticky we can come down to the sticky header option and here you'll see it says enable sticky header so yes but we've got the option for the main row or the top and main row as well or the entire header so if i did the whole header now when i come down you see that it changes over to white and it remains sticky and we've got everything involved if i do the main row only now when i scroll down this top part is going to get left behind so only our main row has actually stayed as being sticky so you do have those options up here i actually don't really want a top row on this so coming back to here i can get rid of my search i can get rid of the social i've just got the main row and now back under sticky i can go sticky main row only and there's a couple of different options here the reveal sticky on scroll up is quite a cool effect now it's currently in experimental mode with cadence but i'm sure they're going to iron out any creases very quickly other top themes like bloxy have already got this down to a t and what it means is that if i turn this on when i'm scrolling down you'll see i don't have a sticky header but as soon as i start to scroll up it will reappear it's just a little bit slow and i think that's why it's sort of still in that experimental stage with cadence but hopefully they'll get that sorted out as for me i don't want that but i am going to turn on this enable main row shrinking so look at the difference at the moment as i scroll down it's a little bit big i think and it sort of stays static if i turn on enable main row shrinking now as i come down you see that it actually drops it down in size you can play around with the size that you want i think that looks pretty good personally so i'm going to leave it as it is you do have the option of having a mobile sticky menu but i don't like this i think you've obviously got such a smaller screen on a mobile to have it taken up with a sticky menu at the top doesn't look right so i'm going to leave it off on mobile but what i of course do want is a different logo so let's start by uploading our main logo to do that come on back and under the header general settings find the logo come on down and click change logo and obviously i showed you where you could create some free logos before now what's really cool is to create one that is one color in this instance i've got one that's white and then i've got one that is colored and i'll show you why i'm going to choose the white one for now select that don't need to crop it that's uploaded it it's obviously very small so i'm going to bring this up to around 200 pixels but of course if i now start to scroll the white disappears with the white background so to change that i can simply come on back go down to my sticky header and this time i'm going to have a different logo for the stuck header so i turn this on then we need to choose our image so click select image i choose my colorful logo put that on and there we go it's now appeared so it goes from white changes over to color and it also shrinks down in size as i'm sliding down the page that looks brilliant now we've obviously got our button over here if i want to edit this hover over it and you get the little pencil icon i click that and we are now editing the button so i can change this from saying purchase to join now i've got the url that it'll take people to it's automatically put that in here from the starter template that we imported i don't have a url yet to put in there so i'm just going to replace it with the hash or the pound sign and then we've got our options for how we want the link to react so do i want it to open in a new tab when somebody clicks it and it'll open up a new tab up here do i want it to be a no follow link this used to be a big thing in seo if you were linking out to an external site you would always make it nofollow rules have changed a little bit we'll touch on that later on i'm going to show you a great seo plugin that you can put on which is completely free but for now i don't want to have this on because wherever i'm linking to it's going to be a page on my own website anyway so i would want it to be a follow link because that way the serps the the search engines when they have their little army of robots crawling around our website it's going to be able to follow the links and that's going to be better for our seo purposes so i'm going to leave that as it is a sponsored link if you're ever linking to content on a third-party site you've been paid for you'd need to turn that on obviously not applicable here or if you've got something that somebody's going to download like a pdf or something when they click something you can set it to be a download link so all of those options are fine we've got a couple of styling options for a button we could just have an outline or we can have it filled like this and you can choose if you want your button to be visible to everybody logged out only or logged in so again if i'm asking people to join up i don't want them to see this button once they have actually joined up and are logged in so i would have this as visible for logged out people only now the problem with that is it's obviously going to disappear for me because i'm logged in while i'm editing so that's something that we would choose after we finished designing up our button for now i'm going to leave it visible so that i can actually see it we can then come up to the design tab and here you can play around with the the padding which will change the size of the button if you see if i do this it's going to increase the top part of that button i'm going to bring it back to how it was and then of course we've got our colors so if you don't want to stick with your theme default then you can change the background colors and also the border color here however little top tip for you here it really does help with conversions if you happen to have your call to action button being the same color as the color of the title that you have on your page and also a color within your logo don't ask me why it works but it's been proven to time and time again it's something that we use a lot in my own web design business it gets more conversions for clients okay so have your call to action button matching the same color as your title and your logo wherever possible so i'm pretty happy with how that looks on the desktop then we want to come on over and go to tablet and mobile now again i obviously need to change my background image as i've already said because it doesn't look right on here but it's fine for now so we have our trigger over here okay we can have a whole mobile navigation if i pull that in it's not showing up well because we need to change the colors but you can just about see that it's put in my menu here down the middle doesn't look good even if we changed it from white over to black it's not going to look right so what we currently have over here is the trigger now if we press this at the moment we've got our little toggle menu up here we open this up and it just gives us that purchase button well we don't want that so what we need to do is under the trigger you've got this little cogs setting now you can actually change the icon from here as you can see it's going to change what it looks like i quite like probably this one actually a little bit thicker looks better you've got the container options and this is where we can choose how it's going to appear so do we want it to be full width or a side panel we've currently got it as a side panel and it slides out to the right we could have it slide to the left if we wanted i'm going to leave it like that we can choose where to align our content so whether it's going to be in the middle and also whether we want it to be in the middle vertically or at the top or at the bottom now because we don't want to have this call to action button showing up when we're actually opening our trigger what we need to do is come on back and down here you see it says off canvas and we've got this button showing up well we don't want that so we can get rid of the button and instead we want to drag in the mobile navigation that puts it over there so now when we activate our trigger by pressing the mobile pop-up menu it appears here just like this oh and to actually change the way that this looks you've got the design tab over here so you see that it's gray and then i hover over it and it changes to my orange you can do that just from the design tab up here so we've got our trigger colors there you can change the color of your navigation background when it's open as well obviously the padding and we've also got the icon size so if we wanted to make it a little bit bigger we could do that maybe 25 pixels you've got a border option as well if you want to put a little box around it so just have a play around see what you like the look of and this is obviously the tablet view when you are checking what it looks like on mobile just down here in the bottom left you see you've got the little mobile option so click over to that and we can just double check that it looks okay still looks good to me obviously we can click the trigger check that it comes up all right and then when you're done simply come on back and let's take a look again at the desktop view so that is our header oh we've got the button still too big i need to put that back to how it was and when you're done simply click on publish and that's going to save the changes so that is our header now let's take a look at the footer so come on back to our main section here click footer scroll on down and let's take a look at what we've got okay so this is our footer made up of some widgets some social icons and we've got a copyright signed down here this is what again was imported from our template but we can change this around you'll find the design tab up in the top right just as we did before this is where you've got your overall color so we can change our footer background if we want to make it lighter make it darker i've got to say i'm a fan of how they've got it to be honest they've done this so well you have got the gradient if you want to all you need to do is choose whether you want a linear gradient or a radial gradient you can put that in obviously change the location that's going to bring the colors further across if we click on a color we can then change it so for example let's say we like the blue but we wanted to have the purple as our orange we can click on this change over to orange choose one and then we can simply move the location back again that's pretty cool we've got our angle as well so we can move this up and down that's going to move the angle around on the gradient or if you don't want that we could have an image instead just obviously select your image from here but i think that's a bit unnecessary in a footer so have a play around i'm going to leave it on the gradient for now for your social icons in order to set your links and this goes the same for if you're putting them up in your header just come on over to the social option and then you've got the ones here so you've got the little drop down you've got the choice between an icon or an image again if you want to put one of those in and it even gives us different options when it comes to the icons so you've got a few that you can have a look through and choose if there's one that you don't like you can obviously just remove it and if it's missing any come on down and click the add social button so for me i would definitely want youtube on there obviously a key one for me with my tutorials and then i can drag it up to the top and that will put it first in the list now if i don't like the hover effect on this because the orange over the orange doesn't look great i could come up to design then we've got our colors so color one is our initial color which is the white that we see and then you've got the background color which is obviously this gray so if we hover actually over any of these you'll see that it comes up and it tells us what they are so this one is the initial color this one is the hover color if i click on this i could come on over choose sort of a blue and now when i hover over it you'll see that obviously changes to the blue the reason we can do this is because we're not using the brand colors if we click yes you'll see it automatically change this over to the brand colors by default or if we wanted we could do on hover only so now when i hover over it they become the actual brand colors i really quite like that i think it's pretty cool so i would have that in place of our background colors i think that gives a nice effect and of course we also have the ability to change border radius as well if you're wanting to play around with that that will curve the corners more turn them into circles so just have a play around and find what you like the look of and naturally we can also increase the size of our icons just bear in mind that the bigger you make them the more you're going to have to increase that border radius okay if you're wanting them to be circular so let's just have these back at maybe 1.2 maybe a little big 1.1 that's pretty cool i like that that looks good to me so once you've done that you can come on back then we have our copyright and obviously the widgets so we've got a whole load of widgets that we could choose from what you basically do is click into a widget it tells you what they are so we could add in a widget for example and there's loads of things we can have archives which are basically our blog posts calendars categories courses because i'm using learn dash obviously but you can add lots and lots of different widgets so a bit like plugins you can actually download these and add them to wordpress and another place i'll show you where you can find them let's just go back to the dashboard a moment another place you can find them is down here if you hover over appearance you have widgets so this is where you can add them in to your sidebars if you're going to be using a sidebar or to your footer like we were just looking at and the ones that you will have here will just depend on the theme that you're using uh the plugins that you've installed and obviously any widgets that you've installed as well so as i've said if you're not using learndash for example because you're not building a course website you're not going to see these things about course progress bars and all of this stuff okay so this is pretty much always going to be unique to uh you know each individual website but feel free to edit them from here you see that we've got footer one navigation menu footer two a different type of navigation menu for our resources for the three for the four etcetera etcetera you can do it all from here or you can do it from the front end under the customizer in that footer section completely up to you i quite like doing it from here because obviously it gives us a visual a visual representation of what's going on now i should mention here that you can add in more things like footer scripts and also header scripts and more options like extra buttons etc using cadence pro okay but i think you can admit that for the free version we can do so much already especially things like this sticky effect and the transparency it really is amazing but i will show you a little bit later on when we go into some of the pro aspects of cadence how to do things like the mega menus and how to add in extra things into your header but for now this is how you can create a really good looking free header and footer with gutenberg and obviously cadence you can also edit your copyright section so come on down here click into it we can now edit this so i could actually write the word copyright beforehand if i wanted to we get the little copyright symbol by putting it inside the brackets same with the year if you do it like this rather than actually writing the year like that then it will automatically update okay so when it switches over to 2022 that's gonna automatically switch over for us um i'll keep in the site title obviously theme credit i'm sure they'd love us to keep that in but we don't need to so we can get rid of that choose how you want to align it again you can do that for desktop tablet and mobile and the same for aligning it vertically i'm happy with it being in the center so we'll leave it just like that and then to change any of these over here because we're using widgets obviously the widget that you choose will be displayed but if we come over and click the little pencil icon you can also do it from here so you've got the title we can change what that says so if you just wanted it to say menu you can do that and it'll switch it over and then you've got a little drop down for the menu here as well so is it going to be a main menu primary menu contact menu the menus that we want can all be created from that appearance section in the dashboard so i know we looked at it before but just to remind you coming over to appearance come on down to menus and then here is where you've got your list of menus you can create a new menu at any time just click on that give it a name so test menu create it and then when you've done that you can add in all of your existing pages any post that you want to add in any courses you've created and obviously the custom links that we already looked at and then you can display it as one of those widgets in your footer if you want to now if you don't want any of these menus then you can obviously just delete it and i would do this okay i would actually go in and i would probably get rid of most of these because i wouldn't use them but for now i'll leave them in gives you an idea of what you can do but the next thing i want to show you is really really important we're going to be creating our contact page but we're not just going to create a contact form because i also want to be able to collect subscriber information now there are loads of different email marketing systems places like mailchimp or convertkit that you can use and there are crm systems okay customer relationship management systems that you can use as well things like um hubspot you can get a google chrome extension for that as well and that's a place where you can basically keep track of all of your subscribers all of your customers all in one place however if you don't want to be signing up to a load of different third-party systems and you just want to keep everything on wordpress i'm going to show you how to do that as well so let's start just by going down to the contact section our contact page and take a look at what we've got doesn't look very good it looks pretty horrible so let's get rid of it i don't want this we will remove the block and this is a form that they've set up for us which is again a cadence form block you can use that if you want to but i'm not going to so we will remove it and lastly we'll remove this as well so we're starting with a scary blank white screen but of course as we know we can get some inspiration by coming up to our design library we've got our different sections we could have a look at for example forms gives us a few different contact form ideas or we have the starter pack so we can go down and take a look at any of these and get an idea of what the different contact form sections are like so i'm gonna have a quick look through and see if there are any we can use and then i'll be right back with you okay so i actually uh chose these sort of real estate one that we had a quick look at earlier but we need to edit it up to make it sort of fit in with the styling that we've got going on so first of all i'd want this to be full width so we can click on it come up here change this from being aligned center over to full width we can then open up our cog setting go into background settings and obviously change the image that we'd want change the focal point as we looked at before in our home page this bit i don't know why that's in there doesn't look very good so i'd get rid of it this i don't like i don't think that's very good so i'd get rid of that get rid of the spacer and then this entire section i don't actually want that so let's make this two columns and then this is where we're going to input our actual form in just a minute i don't need this text down here so we'll delete that and this down here is trying to give us google maps i don't need that nobody can actually visit me so we'll delete it i say you can't you probably could but i don't want you to i like being unsociable we will get rid of that and i don't need pictures either so we can get rid of this so we've basically just got a image up at the top i can put in my hours of work down here and instead of having this address which obviously is made up you can just change this and say something like get in touch just something basic is all i need for a contact form and again we've got our social icons do the same thing click into these you can go into each one individually for the settings and then you can change the color from normal to hover and obviously you need to input the link so if i want the youtube one to go to my youtube channel i obviously need to put in the url for my youtube channel in there and the same for the others and again do we want it to open in the same window or do we want it to open in a new window well i recommend when linking out to your social media accounts open it in a new window because otherwise if somebody clicks this it's going to replace your website and then you've effectively taken them off of your website and yeah i don't suggest that okay keep your website open and make it open it up in a new window that's gonna help you keep better retention okay so now what we need to do is add in a forms plug-in so the forms plug-in that we are going to install if we come on back over to the dashboard and come on down to plugins go to add new search for fluent forms and you're looking for this one the contact form plug-in fluent forms by wp manage ninja so simply install that and then activate it now having a forms plug-in is great because it means that you're going to be able to get people submitting forms it'll send it through to your email and then you can simply reply back to them but what you really want to do to get a successful website is be able to build up a whole list of contacts and be able to manage your customers into segmented lists that way you can send out different email marketing campaigns uh you can also separate people who have bought things from you it can be really really powerful and the way that you want to do that is with a crm so come on up open a new tab and go to jack in the net dot com forward slash crm okay stands for customer relationship management jackinthenet.com forward slash crm that will bring you over to here okay fluent crm made by the same people as fluent forms this gives you email campaign management content segmentation email sequencing and marketing automation all of these things basically mean that you're going to be able to separate your different subscribers your customers into different lists and you'll be able to target them send out email campaigns and this basically replaces the need for things like mailchimp or hubspot okay you're going to be able to have your your email marketing and your forms all in the same place inside of wordpress and as you can see it also partners up with major other integrations including things like woocommerce as well learn dash of course and also member press which are the two that i'm using and other things as well like restrict content plural etc and you can connect it with even more things uh with the likes of zapier so it's really really useful and i suggest that you get that it actually works out a fantastic value because this way you're not going to have to pay for whole separate different third-party things it's all going to be in one place so go ahead and get that and also they do a free sntp plugin i won't bore you with the details of this but sometimes with wordpress when people submit your your email forms the emails won't come through to you or if you try and reply to them or send email through wordpress it just goes to people's junk folders spam folders etc okay so this plugin which is free basically uh gets rid of that problem for you so go ahead and download that as well and i'll meet you back over at the wordpress dashboard so once you've downloaded the plugin from fluent crm simply click and drag it on into your add plugins section under the upload plugins as we did before and then click install now when you've done that then click on activate plugin and then what we need to do is add in our license keys i'm just going to deactivate the smtp for the second so that we don't need to worry about configuring it straight away and when you've done this you'll now see that you've got fluance crm and fluent forms have appeared over here on the toolbar on the left now the first thing you want to do is come on over and go to the settings section and then down on the left you want to find license management from here make sure that you paste in your license key which you get from your account section when you sign up put that in and then click verify license now we have a crm system and all of your contacts subscribers customers and everything else can appear here centrally inside of wordpress and of course because we've just installed it we've got that very disappointing load of zeros but you're going to find this such an asset in your website and your online business having this we're going to touch on it in this tutorial you're going to see how i set up the forms etcetera but make sure to subscribe because i'm going to do a few detailed videos um on fluent crm and fluent form specifically but also on how you can actually go about increasing your conversions getting more subscribers and obviously getting more sales as well we're going to do a few focus videos on that so you can actually start getting results hopefully that's going to really help you guys out all right so what we need to do is create a contact form but just before we do it we need to create a list and some tags because that's how you can create different types of forms and organize them properly so what we'd want to do is hover up here over contacts and first of all come on down to lists so lists as it says here are categories of your contacts you can add lists and assign contacts to your lists for better segmentation in other words when you've got different lists we can send different campaigns to different people you don't want to necessarily bombard everybody with the same campaign so create a list i'm going to call this one pre-launch guttenberg because what i'm going to do is i'm going to create as you'll see in a second a subscribe form to do with my actual guttenberg course so i'll be launching that um a little later on in the month so i'm going to do a sign up now and basically get early access to all the free content but also get a discount off of the premium content as well if you subscribe early so that's why i'm going to call this pre-launch gutenberg that's going to be my list click confirm and then the other thing we want is tags so tags are just like lists but you can basically filter down inside the lists even more so you can basically create a tag you could call this something different again i'll just call it pre-gutenberg launch i know what i mean but you can put in anything you want here is purely for your own organization okay so when you've done that and you've got a list and you've got a tag don't worry about the other bits as i say i'm going to do a separate in-depth video that goes into this properly it'd be too much in this one but once you've done that come on over to forms and this is where we're going to create our first form so click on create new form you've got a couple of different templates here we're just using the free version of fluent forms you can upgrade to the pro version i think you get more of these as well but the free version of fluent forms is actually fine it's all we need for this it was really just the pro version of the crm that was important so i'm going to go with a subscription form again this will be the pre-launch gutenberg form i will add this to my list so when i click on here it comes up with the list that i created obviously if you've created more you'll just need to choose the one you want we can choose our tag as well double opt-in confirmation no i don't want that that means that when somebody subscribes they then get sent an email and they have to confirm it again blah blah blah don't want that so your form has been successfully created and you've got a bit of short code here but if we wanted to we could go in and we could edit the form so now we can obviously uh personalize it up a little bit so you've got your different fields over here on the right you can basically drag those in any that are faded out you would need to um upgrade to the pro version of forms but this is fine for now if you've got something like this button that's already over here you can click on the little edit section and then you can change what it says you've got some default different styles that you can change it to for example it's orange i can center it up put it in the middle and again we've got some advanced options down here so if we need to put in any css classes we can do that as well i'll cover that in my other video so like most form fields you just drag in what you want basically then we've got settings and integrations first of all we've got confirmation type do we want it to display a message do we want it to redirect people to a particular page or to a custom url i.e if we were sending them off-site well i do like sending people to other pages that can be a great way of processing people through a marketing sales funnel but to keep this simple at the moment i'll just have a message showing now i turned off that double opt-in so i don't want to tell people to check their inbox i'll just put something like thank you for subscribing my gutenberg masterclass course will be coming very soon watch your inbox for early access to free content and your exclusive discount to the pro course as soon as it's launched so that's fine that's all i need to say here you can style up the form a bit more so for example the asterix is on labels that have to be filled in by people so where do we want the asterisk to be if you're putting any tool tips just like this so you've got the little pop-up help boxes where do you want those to appear error message etc and the label alignment is um for example name or email where do you want that to appear so i want that on top of the field that's absolutely fine you can also choose whether or not you want people to be logged in or deny empty submission boxes so these can all be quite useful and then we've got some more advanced features as well so that all looks good to me next i want to come over to email notifications now because this is just a subscription form i don't want to be emailed every time that somebody fills it in but if you had a different type of form that you were doing obviously you'd want to enable an email notification put in your email address and obviously then you can send it to yourself and know that you've had a message put through you've also got short codes just over here and if we add this in for example all data very simply all the data that people put inside that form it will just email over to you so you can then get that in an email in your own personal inbox and you'll just be able to reply to it and it will go back to them so that's really useful i don't want that though so we'll get rid of that you've got other confirmations as well you need the pro version of uh fluent forms for that so we won't worry about it i'll show you in a separate video but this is quite useful one of the main reasons to upgrade you can basically put in advanced other forms of confirmations make it do lots of other things integrate with other systems it is really cool you can put in custom css down here if you need to won't be covering that now and then we've got marketing and crm integrations obviously we've got the fluance crm that it integrates with you can add in a new integration as well but we'll leave that alone and then lastly up here we've got entries so nobody has completed this form yet so obviously it's blank but when people do actually subscribe you're going to get it all appearing in here for you so then up here you'll see it says preview and design we can click that and it gives us an idea of obviously what our form is going to look like and naturally it's trying to upsell you to pro here with other things that it does but don't worry about that that's fine it's all i needed so i'll close that down so what we need to do is insert this into our page now if i come over here where it says all forms we could click on this and if we'd created lots of different forms it's going to have them all in this list here for you naturally we want this one so couple of ways to insert this into the page first of all we can click to copy the shortcode so i'll do that we've got our shortcode copied now we want to head back to pages so now what i'm going to do is put in that little form that we just made somewhere down here in fact i'm going to replace this section with it so first things first what we want to do is click in here and i want to get rid of this button we don't need that so click on it and remove the block do the same with the button and now what i want to do is add in the form just here so i can press the little plus button we can search for the shortcode widget and then what we can do is insert that just copy in that bit of short code and it's going to appear or what we can do instead is search for fluent forms now that we've got that installed it appears as its own block we can click on that and it's going to ask us to select a form so obviously if you've got lots of different forms that you've created there'll be a drop down list you can choose from we've just got the one at the moment so we're going to click that and that will have inserted it just here now that i've done that let's change the title i'm going to make this say something along the lines of gutenberg masterclass gutenberg masterclass and let's center it up that looks good and then again i will change this text here so i don't want the icon list let's remove that and instead let's put in we'll put in an advanced heading again but instead of it being h2 we'll just change over to a paragraph and then i've got some text that i'm just going to paste in maybe that will look better centered as well i don't know we can play around with that and then lastly we're obviously going to change the picture on the left here now just as a little tip for you we can change this picture to absolutely anything but obviously the current dimensions of this picture work quite well we've got sort of this portrait vertical style picture and i don't think that a horizontal one you know a landscape picture would necessarily look as good here so if we open up the uh the settings menu over here we can take a look at this and we can see that this is currently being displayed in a large image size and the width is 921 and the height is 10 to 4. now if we go to full size we can see that that increases but we don't need that large is absolutely fine so without boring you senseless here just a little tip when it comes to inserting your media into pages okay unless people are going to be viewing the the website on you know large retina screens you don't need to have high quality pictures when they're like this this is a pretty small area it doesn't need to be high quality okay high quality is for stuff like this your hero image obviously you need to try and compress it down that's why you want to be using things like photoshop if you have it or the free google squash i've got a separate video on that google scrooge is really useful i'll put a link in the description below it's completely free to use you can just drag in your images and it will compress them down and obviously as it's by google you know that it's going to be doing it to a good standard for use on the web but here's the thing when you upload different pictures wordpress creates different sizes of that picture it basically multiplies it you've got thumbnails medium large etc full size you can go into the dashboard and into the settings menu and from there you can actually change what it's going to create but here's the thing if we know that we only want it to be displaying at this particular size it's actually best to just upload the picture with these dimensions to begin with that also helps your loading speed because again if you were to for example load a full sized image but then resize it down to the size that it was before yes you can do that but you're sort of making the website do more work okay which naturally is going to slow it down we might only be talking milliseconds but if that has to do it for every picture etc then that's what adds up to slower performing websites so when you do run it through google page speed or you know gt metrics pinged on that sort of thing you're going to get slower results so best thing to do is actually if we like these dimensions which i do i'm checking them out i'm going to upload a picture that is just 921x1024 straight out of the bag and then it can be displayed as a full-size image now you can obviously alter the dimensions inside of wordpress as i showed you earlier on but if you've got something like photoshop or affinity photo which quite frankly can do almost everything photoshop can for a fraction of the cost then it's best to just upload things straight away so that's what i'm going to do we'll replace this i've already got one uploaded just something that i've mocked together so i'll pop that in and you can see here full size medium brings it lower thumbnail brings it much lower again if i keep it on full size that is the 921x1024 that it was before so we can delete this and there we go that looks pretty good let's check it out preview in a new tab there we go i'm happy with that i just want to add a little bit more space underneath here but you'll see that we now have in our contact form section so somebody can put their name and addre name and email sorry in here and then they can subscribe and the reason that i've done this is because you know this website is going to be live probably about two weeks before all of the different courses that i have go live on here so for those two weeks i might as well be collecting more subscribers they get something out of it and obviously i then get a uh you know a database of people that i can contact giving them this offer um you know and that's helpful to me so i suggest that you do the same thing if you've got something you want to offer make sure that you're going to add in a subscription service like this even if it's a completely free product you're going to be gaining email subscribers which is always useful so i think that looks good let's put in a spacer here spacer divider don't need the divider height probably 30 pixels i reckon this i think is a little bit too much of a gap actually so let's click onto this one go to spacing settings come to margin and then let's go minus maybe 10 actually i think it's probably going to be -15 let's update that and take another look where's it gone uh here it is i think that looks good i i'm personally very happy with that you know again we're just using something that's a cadence section that's already been put in there but we've completely changed it we've changed the text we've input another uh block completely and we've changed the image if we wanted to we could obviously change this background color if we wanted a different color so we've made it our own but we've just cut down the time it's taken to do it i think that's brilliant and quite frankly that's what we would do with all of this i'm going to replace these testimonials with ones that i have my own which is a simple case of replacing the tech so i will do that off camera i don't need to bore you with that this bit here i probably wouldn't keep i'd get rid of it completely common questions this is great frequently asked questions gives you this accordion i'm going to keep this i'll obviously just change what it says if we look at it quickly really easy to uh change this up you've got the title icon settings so this is where you can select your icon from whether you want it on the right or the left hand side you can change your typography here inside of it as well and if we click on the overall accordion tab this is where you can see that you can choose whether you want panes to close when another one opens so that means obviously when one opens the other one closes i don't think it doesn't work on the back end here but on the front end you can see when i open this one it closes the other one so that's what that is referring to if you want we can start with all the panes collapsed and then people can just open them and then you can choose which one is initially open so obviously the top one makes sense for me and as you can see you've got title color settings that's the gray that we've got here we can have different hover colors if we wanted to when we were going over it a different active color which is the one that you've currently got open so this is gray because it's open when the other one is open it changes color that is because it's an active color so you can choose that from here again we've got our icons you can change for everything uh as a whole obviously what you just saw a second ago you could change each of them individually and then you've got things like the title spacing font etcetera these are all really obvious but that's basically what i'm going to do just to change the look of this a little bit but i think you've got the hang of that by now so let us move on let's start looking at some things like adding in animations to our design here and adding in more content to our headers and our footers so to get cadence pro go to jackinthenet.com forward slash cadence you guessed it and that is going to take you through to here okay cadence pro really is amazing as you'll see in just a second i just wanted to let you know that this is my affiliate link jackinthenet.com forward slash cadence what that means is you won't pay any more but i get a small commission that really does help me out with making these free tutorials so i'd really appreciate it if you use my affiliate link hopefully you're getting value from this and so you'll want to help me out too hopefully you think that's fair thanks very much and now back to the video cadence membership gives you an awful lot first of all you can use cadence pro on unlimited websites okay this isn't like you know uh elementor or whatever where you can only use it on one site or three sites or whatever it is now they've changed it okay unlimited websites and here's the thing this includes all of the themes and plugins if you follow this link this isn't just the theme itself it isn't just cadence blogs this link i'll put it in the description below as well takes you through to the suite of products okay so you are gonna get the cadence pro theme you're gonna get cadence pro blocks and look at this you're also going to get accelerated mobile pages which is epic with google so you're going to be scoring top ranking scores on the mobile for google if we're using woocommerce which is going to be a separate video that i'm doing please subscribe to that one then obviously we can create more types of products with this more advanced galleries extra widgets special pricing tables that we can use if you're wanting to offer a subscription service and more things as well woo template builder extra sharing icons page transitions so that we can animate transitions across pages which is going to look really cool whoops and then we've got the cadence slider we'll have a look at that as well vertical sliders etc etc etc so basically you get so much stuff with this you can choose whether you want to have yearly access here's the thing if you are wanting to stick with your idea if you are determined to succeed then i suggest you just go for it and go with the lifetime axis i will tell you why i do not know for sure but i very strongly suspect that pricing will increase with cadence okay it is becoming extremely popular especially with gutenberg and as more and more people realize that gutenberg is the way to go to get the best possible website more and more people are going to be coming over to this it only makes sense okay that this yearly access is probably going to go up considering how much you actually get so i would suggest that you lock yourself in now and have access to all of it for unlimited websites and of course if you're planning on designing websites for clients this is a no-brainer but choose the one that you want click on purchase and go through the checkout procedure okay i already have this so i'm now going to show you how we actually upload again the plug-in to wordpress i will just show you under your cadence account once you've signed up you'll come through to here and this is where you can come over to product downloads and this is everything that you get okay you can download all of these separate plugins the ones that you want to have and then to grab your api keys which you'll need after we upload them to wordpress which i'll show you how to do in a second you will find those over here under the product api keys so what we need is the cadence pro plugin let's download that bad boy we want cadence blocks pro as well and we won't worry about woocommerce at the moment or the accelerated mobile pages that i'm going to cover in a separate video but as you can see there are lots here you've even got classic uh plugins and themes too if you want such as slider pro and transitions and you've also got child themes too i'm not using any of these so we obviously aren't going to cover that in this tutorial but i will go over those in several videos now that we've got those downloaded we want to head on back over and on our website on the dashboard come to plugins come to add new and then once again come on over here to upload plugin then what we can do is simply drag and drop in the blocks one okay so this is the pro cadence block so we're going to install that that's installed so now we can activate it okay now we want to install the next one so upload plugin grab cadence pro drag that on in and click on install and there we go so now we can activate that okay so once you have those activated all you need to do is put in your license key which of course you find from the account section under cadence so put that in there activate it up and then one of the extra things that i downloaded from cadence out of all those different plugins was the page transitions as i know that some of you will be interested in this so page transitions you've got a few different options here for example overlay slide in slide out you can change the duration etcetera how long it's going to take you can also change different colors whether or not you want to have a loading spinner whether you want to have it on mobile really suggest you do not do that but let's take a look at this it's very simple easy to use you just put in the options you want click save changes and then if we hop on over to the front of the website and refresh it you see you get that sort of um well transition really that's exactly what it is it's a transition between pages so when you click between them it switches back and forth between the two and you've got different ones that you can have a look at now if that's what you're after fantastic then it's a great plugin for you i don't want it so actually i am going to deactivate it straight away i think it's unnecessary and actually could just slow things down for people but that's just my personal preference i don't need it on my site obviously if you want it sticking on there it's a really easy one to use as you've just seen what would be good though is for us to have some other types of animations on our actual page so if we pop on back over to the home page okay so let's introduce some form of animation uh for example let's say that i want these to sort of fade in and up when the page loads so we can come on over you need to make sure you have your section selected for your actual block okay so for example this is the info block it's within its section i've got the section selected and now over here on the right we should be able to find this new option that's appeared because we've obviously now got the pro version so animate on scroll i want it to possibly fade up let's have a look there's loads of different ones here let's just try a couple of different out let's put this one at zoom in and up you've got animation duration animation ease so we can make it ease in you can add in a start delay if you want before it's going to take effect and obviously how many times it's going to load and then lastly you've got the option of the offset so how far how many pixels down the page the offset do you want it to be before the animation begins okay before what triggers the animation so i think we'll just start by taking a look at the defaults on all of these but let's do the next one so click over to it make sure that we are editing its section come on down animate on scroll and let's do this one as just fade up so we've got zoom in and up and fade in and up we'll have to remember this so we can decide what we like best and last one animate on scroll what shall we have i might just go with slide up i'm pretty confident i want it to come up onto the page so let's take a look at this and preview it okay so get ready here we go that was too fast i'm going to let's concentrate on one at a time here so on the left we've got sort of zooming in and up then in the middle fading in up these are all too fast we have to slow them down and then slide up i quite like the slide up i like this one at the end the red one i think that looks pretty good so let's come on back over this was the slide up so animation duration this will be in milliseconds so two thousand milliseconds is two seconds i reckon this wants to ease in the start delay we'll leave for the moment i don't know whether i want this to do it just once per page load we'll leave it alone for the moment have a think on that right come back to this one same thing again select the section come on down animate to scroll change this to slide up make this uh 2000 milliseconds get it to ease in and we'll just do the same thing again do it a few times then you can obviously get used to what you're doing quite quickly 2000 ease in start delay right update let's take another look at this too slow now okay so too slow and i forgot to change that one over i thought i did that but there we go so i reckon we could halve that okay i know i could cut this out but i get things wrong as well so we will leave it in there change that to slide up right let's make it one second then and do the same for this now i will say that i'm obviously doing this slightly backwards because i've had to show you um you guys sort of how to do this without cadence pro and now we're just coming on to it i will say here it's actually better if you start with it right from the beginning because of course if we'd done this right from the beginning that when i was first designing these i could have got the animation right and then i could have just copied the styles over to each of them like we looked at obviously i can't do that now because then it's going to change the colors of each of them so that's why you know realistically if this wasn't a tutorial and we were actually doing it you know completely for yourselves um it's better to do it right from the beginning because it's going to save you time um but obviously we're having to do it this way for the video so let's have a look at this i swear i just changed that am i going mad what is going on did i not just do this right animate on scroll i did okay what have i done slide up one second ease in slide up one second easier that should be the same interesting and yet it isn't okay well maybe you guys have seen me do something wrong here feel free to post in the comments and tell me i'm an idiot i don't know what i've done wrong that so tell you what let's just take this off make it none update it okay it must be caching hang on let's come back out get back in section animate slide up just as right update let's have a look at this again there we go it's fine it was caching the wrong thing panic over i'm not completely mad okay so we can see that we've i would say simply but there was a bit of confusion there um added in an animation and i think it looks nice i don't know if the timing's exactly right but maybe slightly long on the delay could do with being slightly faster i think but actually i like it okay it's a good little animation maybe we should do the same thing to the title so we can come over to our title and once again we've got the animate on scroll options so this time let's go with maybe just zoom in give this one a zoom in uh animation duration i know 750 animation let's ease it in again don't need a start delay let's take a look at this one oh yes now i like that that's got a nice effect now with the title then we've got our info boxes sliding up that's good so we've already got our little light hover effect adding to that just those couple of bits of animation and suddenly that's making the page really come alive so we can do that anywhere we could do it with our titles up here if we wanted to or we could make our buttons come in don't want to do it too much but i'm sure i could probably add it in down here somewhere as well maybe i want to get the title sliding in from opposite sides you know this one coming in from the left that one coming in from the right you know just have a play around with it but that is where you can add in your animations okay so that's a big reason for getting the pro version of blocks just for having that animation on scroll option it's really going to be more eye-catching and get more interest from people so now you know how to do animations let's take another look at the headers and footers and see what extra things we can put in as for the additional blocks that you get with the pro version i'm not going to be using many of them on this site you know things like a modal pop-up or a video pop-up which are really useful or obviously woocommerce product corrusals i'm going to go into each of these in detail in my actual cadence series of videos which are coming out soon so obviously keep an eye out for those um but you do get them as well as part and parcel of the pro package but i really do think that the animations are a great reason just to do it i think it adds so much to the website but let's head on over now to customize again and if we come back up to header so straight away we can see that we now have look at this a lot more items than we had before we've got extra navigation options we've got an account option i would use this for example because i want something for people to be able to log into okay when they've signed up to my website so an account section is really useful you also have look at this button two so for those of you that want to have a couple of different buttons you can do that we could come over here click button two and then you have two different call-to-action buttons you obviously just need to style them up differently as we've already looked at but i know that's a frequent um thing that people ask for how do you have two buttons in the header well that does it for you pro version makes it easy so take a look through these and then obviously anything that you think you want to add into your header pop it on in and the footer is very similar come on down to the footer scroll on down to it you can add in footer scripts as well as additional items and one other thing that i forgot to mention right back at the beginning under the general section okay this isn't this isn't to do with pro you can do this right in the free version under general you have this scroll to top button so if we turn on enable scroll to top you will get a little button appear just down here you can change the sort of look of it you can also change the size whether you want it to align on the left or the right how much of an offset you want it to have so we can move it across the page like this you can also do the same thing and move it up and down and then you can choose whether you want it to be visible on mobile or tablet just desktop etc and then you've got the design option so you can add in some colors so for example we could go ahead and make it orange give it a different border color if we wanted to i think i like this orange a little bit better actually so we'll go with that and then when somebody clicks it uh on the front end it will take them straight back up to the top so that's another useful little thing that it can be quite good if you've got a lot of page for people to scroll down so now that we've looked at that let's come out of there and now it's time to take a look at adding blog posts and styling up the blog so come back to the dashboard now all of your blog posts are here that under the post section i already have a bunch of things in here so as you can see you will probably be starting with a blank slate but this is where you would add in a blog post you come up here you click add new and then you've basically got the same sort of style again you would give your blog page a title and then it's time to start adding in blocks now traditionally with a blog post you don't worry too much about the styling as much as obviously basically pictures video and text so you'll pretty much just be looking at having advanced headings images and videos so you would put in your blog post here you can still change the blocks as you would normally and then importantly you've got the post section so you can choose whether you want it to be immediately visible and whether that's going to be visible to the public or whether it needs to be pending review if you've you know got somebody else writing for you or something and you want to review it before it goes live you then have the permalink which it will usually take from whatever you make the title so if i made this test blog post then when we update it it's going to change the permalink over to that but at any time you can change it from here as well just obviously be careful if you've linked to things because then you could get broken links okay if you've already linked to it and you then change it you're gonna need to go back to wherever you've linked from and obviously change it from there you've then got categories so for example i've got a web design category if you are i'd know let's say you've got blog posts about cooking and you've got a blog post about makeup okay you know let's say you've got a blog about both you can have a category um for one and then you just add in another category for another or if we wanted i could maybe have a category on web design and then i could have a sub category just on wordpress so i could put that in here and then i could choose its parent category as web design so you can do that as well if you want to you can also manage your whoops you can also manage your tags as well so you can add in tags here your featured image for your post really really important okay so you can put in as many images on your blog post as you want to but the featured image you know if it gets shared on facebook or twitter or wherever this is the image that people are going to see before they click the link so very important then you've got your blog post excerpt okay if you want to give you know sort of a preview to people again that's going to appear when it's shared you can put that in here and of course whether or not you want to allow comments and ping backs and track backs you can turn that on from there as well so that is where you would add your blog post from but here's the thing adding the blog post is the easy bit let's actually take a look at styling it up so if we come over to the blog at the moment this is what it currently looks like i've done some with some images and some without so you get a difference i can see what they look like and it's you know it's okay looking for a blog it's not bad but if we wanted to change this up come back over to the customize option then what you want to do is come on down to blog posts and you've got the option for single post layout or the archive layout so this currently is the archive this is the overview of all of our different posts so we come up to the archive you've got the title which is up here so we can have it in lined with the content over there or we can have it above and then again you've got full width or standard as an option then we've got the overall layout so at the moment we've got this on normal view if we change it to narrow you see it's going to squish everything down like that full width is obviously going to do the opposite and it's going to stretch it from one side of the screen to the other you then have an option for sidebars so if we do this we would then get a sidebar over here on the right now again this looks pretty poor at the moment but i'll jog your memory again on how we can make that look better in just a second stay with me for now over here it gives us a content styles of boxed or unboxed so let's just get rid of the sidebar for a second so you can see what it looks like a little bit more easily so we've currently got this boxed if i unbox it that disappears you can see the difference i quite like the boxed one personally and then you've got a choice over columns so uh at the moment three columns looks fine but obviously if we brought that sidebar back it's all getting very squashed and squishy so you probably want only maybe only one column or two at the most so at that point we can switch it over here i think the sidebar one column is probably enough now you've also got item image placement do we want it to the side or above our different posts i'm gonna set this back to three and i'm gonna get rid of the sidebar again and then we've got the the way that these are laid out so what this is saying is that up first we have our featured image okay we then have the category that it's in we then have our title the metadata the excerpt and the read more button so if i wanted to change this i could re-label it so it doesn't say read more the excerpt we could change the amount of words if we wanted we could change the whole content or if i click this little i then it makes it disappear and suddenly we don't have an excerpt anymore so you can choose whether or not you want to have that on exactly the same with the metadata whether or not you want to have that i probably don't actually so i'll take that off if you do want it you've got an option over dividers uh obviously the author etc title only makes sense that you have that on really categories again you've got a divider a couple of different styles so you've got the what they call the pill style which looks a little bit like a button or whether you just want to have it underlined i'll probably leave it on normal and again the featured image so what ratio do we want these featured images in well i would want mine all in 16 by nine and that's because that's what all of my images have been uploaded in so it only makes sense then to be displayed that way and then when you've done that we've got the design options so here you can then change the global colors for the title the description and overlay colors for the whole archive page you can also change your fonts if you wanted to so again you've got the post item title font and you've got this for the categories and the metadata as well so once again you can customize everything and that way if you want to have your your blog archive page you know having a different font from the rest of your website or anything else you can do it okay you can do it all from there the next thing is to look at individual blog posts so if we just click into one what we can then do is instead of choosing the archive layout we go to the single post layout so again look at this we've got a couple of different choices when it comes to how we want to display things do we want to have this sort of front and centered do we want to have it in line again the order of things that we want to have it in do you want to have a sidebar again on your individual posts you can do that if you want to make it full width make it narrow just like we looked at before and then you can do little things like whether or not you want to show the featured image where the positioning of the featured image will be so at the moment it's behind if we change this and make it above that moves everything down which i think i prefer again the image ratio i'm going to change mine to 16 by nine as i just said and then you can once again control what meta content you want to be shown and related posts how many columns you want to have down here so we've currently got three showing up whether you want to have comments showing and the data those comments so you can just style up how each individual blog post looks from here and that basically means that once you've done it once every blog post that you make will automatically adopt this styling okay so you're not gonna have to worry about going in and styling up everyone individually as you're writing it you literally can just concentrate on writing the blog post sticking a featured image in there and then the design bit it takes care of for you it's all done for every one of them automatically so that really does make it very cool now just to jog your memory we mentioned the sidebar again there don't forget that under appearance and under widgets this is where you can choose what you want to have displayed in your sidebar do you want to have images in there a gallery maybe particular pages or blog posts a separate navigation menu or in my case whether i want different courses to be shown up there just drag and drop them in and then that is what will appear inside your sidebar now something that is going to be useful for you when it comes to writing blog posts is having a good seo plugin so if we come on over to plugins come on up to add new you've probably heard of this before certainly if you've watched previous videos of mine so rank math is completely free you've basically now got two two major seo plugins for wordpress one is rank math and the other one is yoast okay yoast has been around for many many many many many years and you just don't get as much okay in the free version rank math gives you so much more click install then click activate and we'll take a quick look at it okay so this is rank math and i've actually got a separate video that sort of goes through all of this and how to set it up so i won't bore you with that here but what i do want to show you really important is this come on over to posts okay so now that we've activated this you'll see that over here on the right we now start to have uh scorings okay for our different blog posts so if we now click into one come over here and we've got this as an additional option rank math so it gives us a scoring out of 100 and obviously the closer to 100 you are the better it's going to be it gives you a preview this is really useful because when you click into this basically you can give it a particular title by default it's just grabbing what we've got up here but it tells you what maximizes your seo so we don't want a title that's over 60 characters and you can see here the closer it gets to the green the better the same with our permalink this is actually too long okay it shouldn't be more than 75 and the same with our description it then lets us go over and preview this for mobile or desktop in the search results and then we want to look at the social options so you can see a preview for facebook and also twitter and then you can give it a different title and also a different description for here as well because obviously this is a really bad example actually because this doesn't make any sense it cuts off nobody's going to be able to see this on a preview so that's not very good so it'd be much better to shorten down that description and then people are going to be able to see it that much better you can also set your focus keywords you can choose if it's pillar content if you tick that it basically means that it will prompt you to link to it with any future posts and pages because what you're trying to do is get search engines to be pushed towards particular content so if you've got really strong content that you think you can rank for it's best to do that and then it just gives you a load of information on good practices okay remember this is completely free so it's telling us that we're using our focus keyword in the title we're also using it in the meta description data it's used in the url description uh the url slug as well it's used in the first 10 of content and it's also saying you know the content is pretty good it could actually be longer if we wrote this more there's a more full article had more information in it we'd get a a green tick here and would actually get a higher score it's telling us there's an error under additional which is what i'd already noticed the url is too long it should be shortened and it's saying that keyword density is a little bit low that could even be bumped up as well but on the plus side we are using things like the keyword in our subheadings down here and also in the image alt attributes okay so remember when we uploaded our image we had that alt attribute field that we could just put in the title into that's why it's important to give your images proper titles and put keywords in there because it all helps with seo we are linking to external content some of it has a do follow which is now quite good you no longer want to no follow everything and we're linking to other resources blah blah blah which is good title readability you get the idea here we're using power words don't worry if this doesn't actually mean anything to you because that's the whole point of this plugin okay so it's telling you what you need so if you don't know what a power word is don't worry okay because it's telling you that you don't have them you don't know what it is you click on the little question mark it tells you okay power words are tried and trusted words that copywriters use to attract more clicks i've been doing this for so long that i just know this automatically but for you if you didn't know what power words are just google it literally google list of power words and then you could take a couple and insert them into your titles and your content and then you're going to get a higher score for keyword ranking so yes they have a pro version as well yes it does add in a lot more don't worry about it literally until you've got an up until you've got your blog up and running and getting people coming and viewing it there's no point because the free version is great anyway okay so don't worry about that for now but rank math that is the first really important plugin you should have the next one is a speed caching plugin something that is going to speed up your website everybody wants a fast loading website that is kind of the point so for that we want to go to jackinthenet.com forward slash rocket and that will take you through to here wp rocket and by the way their website is also built purely with um gutenberg i don't know if they're using cadence but again just a really nice simple website looks very clean and it loads really quickly they should obviously know about that they are after all all to do with speed so simply click on wp rocket you've got a couple of different options here single site license if you're using one website that's obvious if you're designing sites for other people this one's obvious okay buy it you've got a money back guarantee if for any reason you don't like it in 14 days but it really speeds up your website you don't need to know more than that that is enough and if you want to see how to actually set this up and what the best settings are i have a video i've done for that already i'll put the link in the description below okay but get this and then install it on the website like we've looked at already before just to give you an idea this is what wp rocket actually looks like once you've installed it you can come in and you've got lots of different file optimization that you can put on whether you want to minify certain types of scripts whether you want to lazy load media optimize your database or even link up to a cdn which is a content delivery network now again i've got a separate video on this you can check it out i'll put the link in the description but cloudflare is a completely free cdn you can head on over to cloudflare and set up a free account and then it's basically going to serve up your website to people geographically so let's say that you're based in uh in america you've got somebody who's visiting your website from india then basically this will actually serve everything up to that person from a server that's geographically close to them which means it's going to load the website faster there's also a whole bunch of added security things in here as well so again it's free go and get it it's really useful but it integrates excellently with wp rocket and that's going to speed up your website now don't worry if you are using a different host but if you have gone with siteground like we did in this tutorial you can also use the sg optimizer and basically that gives you a load of settings which again i've gone through in a different video so i'll link to it but you can use that with wp rocket as well it's actually the only one that officially pairs up properly with siteground and their own sg optimizer so when you add the two together it can create some really powerful speed boosting to your website now the next plugin that i suggest you look at is a security plug-in and the best one comes from ithemes so once again go to jackinthenet dot com forward slash i themes i themes are a very well respected wordpress company who have been around for a long time and what's more they've very recently paired up with cadence so you know that their other tools are going to work excellently with your website now what you want is ithemes security pro and you also want to have a backup plug-in okay these are the last two things that you want security is really important because it's going to stop people from actually getting into your website and hacking it unsurprisingly i have a separate video which has already gone into this and shows you exactly what the benefits are and what the dangers are of not having security done properly so check it out you can guess where the link to that is but this is something that so many people try to skip over okay they wrongly think listen to me here they wrongly think that because you are starting a small website that nobody will try to penetrate it steal your data attack you corrupt things okay no you are very wrong over 100 000 websites get hacked every single day okay do you think that of those hundred thousand websites all of them are large successful websites no they are not okay you need a proper security plug-in go and get this okay you can either get it as an individual package to protect your own data your customers data and everything that you're doing or you can get it as part of their plug-in suite which is what i have that basically gives you access to everything including backup buddy and other top things like restrict content pro okay if you're wanting another type of membership website and selling restricted content to people this is another excellent one okay but the other one that you do need which is included in this bundle is backup buddy okay or you can get it separately if you want to backup buddy makes it really simple so that you can take all of your content and have it backed up for you okay this is what backup buddy looks like you've got lots of different backups that can go into there and it means that you can create a backup at any time you can set automatic backups and you can restore things so if you do lose things if something goes wrong if you do get hacked whatever it might be you don't then have to start from scratch without anything you can just reinstall things and get back up and running really really quickly so i do very strongly suggest that you go and get yourself back up buddy and also i theme security pro there are loads and loads of things that this can do including things like the two-factor authentication that i spoke about right at the very beginning of this video that you can set up and that is going to keep the website safe and secure for you just to give you an idea look at this on back on the 15th of may there is apparently four brute force attacks against this website two there one there okay they do happen this is actually quite infrequent i've seen them a lot more frequent than this take my advice and go and get yourself those extra plugins okay rank math is free wp rocket is very cheap an exceptional good value for money and ithemes security pro and backup buddy you shouldn't be doing without okay if you're wanting to be successful and stand a chance of actually having your website do something for you you need to give it the tools in order to do the job properly so there you go those are the plugins that i think you absolutely need to have in order to get the best chance of success for your website and as you can see we've now put together something really super simple but it looks great and we did it relatively very quickly i know this video is a couple of hours long or whatever it is now but actually doing it once you're up and running it's so quick to put these sections together okay you've got those starter templates you've got those sections by cadence as you've seen you can very quickly make 100 different unique designs just by putting things together so if you are looking at making multiple websites it's really really simple to do now with gutenberg and with cadence it's replacing page builders it is the new way forward for wordpress thank you very much for watching this i really hope that it's helped you and you've enjoyed it if so smash that like button okay help me out hit that like button that does help me with the youtube algorithm and of course if you've got any questions post them in the comments below i do try to respond to as many as possible if you haven't already hit that subscribe button and of course the bell icon to turn on those notifications because i've got lots of other videos coming up very very soon i've had a bit of a break from them because i've been putting everything together but now they are all on their way i've got the cadence set of videos coming up we're going to look at every one of those cadence blocks individually and in detail and things like the animation so we're going to go into it a lot lot more there's woocommerce coming up as well with gutenberg and the actual uh learn dash courses that i've been putting together while doing this so you're going to see how to put learn dash together member press together and we're probably going to have a look at the likes of restrict content pro as well okay so there's loads coming and just finally on that note as you saw i've been putting together the courses on my own website there are some exclusive ones coming so they're going to be coming out within the next couple of weeks head on over there now jackinthenet.com and subscribe okay because you're going to get access to a bunch of free courses but you're also going to get an exclusive discount off of the premium ones that i'm releasing which is just going to take your web designing to the next level as for now thanks very much again for watching i look forward to seeing you on the next one you

Channel: Jack in the Net

Views: 20,534

Keywords: gutenberg wordpress, gutenberg, wordpress, wordpress tutorial, wordpress tutorial for beginners, gutenberg wordpress tutorial, full gutenberg tutorial, kadence tutorial, kadence blocks tutorial, kadence, kadence pro, wordpress kadence theme, wordpress kadence blocks, kadence wordpress tutorial, wordpress gutenberg kadence, gutenberg wordpress editor, gutenberg wordpress blocks, wordpress block editor tutorial, wordpress tutorial for beginners 2021

Id: YAzaEtnvuu4

Length: 176min 14sec (10574 seconds)

Published: Mon Jun 14 2021