The Ultimate Guide to Kadence WP WordPress Tutorial (FREE & PRO Deep Dive)

hey what's up everybody clifton here with clifton wp and in this tutorial we're going to be doing a deep dive into the cadence suite of products we're going to be looking at the cadence theme cadence blocks we're going to be looking at the free version and we're going to be looking at the pro version and we're going to cover everything from a to z so i hope you guys are ready for a great tutorial because you're going to be learning a lot about cadence you're going to learn a lot about the templates that they've been releasing and you're going to be learning a lot about how to build websites with cadence so if you guys are ready let's go ahead and jump into it [Music] okay first i want to start off by saying if you recently subscribed to the channel or your current subscriber to the channel thank you so much for subscribing i really appreciate that and if you've liked any of my videos i really appreciate you too and if you're watching this video and you're new to the channel and you have not subscribed please go ahead and subscribe and hit that notification bell to make sure you get notified when i release other videos like this all right let's just dive right into what we're going to be doing here today so the first thing that i want to show you is that i am in a completely clean install of wordpress so there is nothing else here i've just installed wordpress we have the default theme and all the default stuff that comes with it this is basically what we're going to use to do our deep dive into cadence now for those of you who are not aware of cadence although cadence has become very popular lately cadence is a software that is built by a software company and they're based out of missoula montana and these people are called cadence wp and they actually came to my attention because i was looking for a great theme to support building out websites with gutenberg now i'm very familiar with building out websites with page builders i'm familiar with building out websites just by themselves just with wordpress but i it came it came to my attention because i started noticing that wordpress was embarking on this gutenberg block builder experience and they were not backing off of it they are actually going to proceed and have this be the default editor for wordpress replacing the classic editor so it became very important for me one because i have an agency that builds websites for clients and i like to be on the cutting edge of things two i was very curious as to whether or not wordpress could ship with his own blog based builder built in and what companies what software companies are going to be supporting that and there are several awesome ones that have done it cadence wp is one of them we're going to be covering the others in later videos and i want to do a deep dive on cadence because cadence is probably the only one that i've experienced that has given me the fullest range of customizations with gutenberg because if you've installed gutenberg yourself you can probably tell gutenberg does not have all the customizations that you need that you would get in the page builder for instance with cadence wp and their suite of products you can basically leverage gutenberg in such a way that it can be a full-blown page builder and that's what i love about cadence so we're going to dive deep into it look at every feature and really get to enjoy all the things that cadence has to offer all right so let's go ahead and get started with it okay so if you are not familiar with cadence uh you can go and read all about them on their about page you can either go to cliftonwp.com cadence which is my affiliate link for cadence i am an affiliate and a full-blown owner of all the software or you can just go to cadencewp.com and read it there for yourself so here's our website so if you want to follow along you should have a default install of wordpress to begin and then we're going to now go ahead and start installing cadence the free theme so the free version from the wordpress repository and we're going to install cadence blocks which is the enhancement to the gutenbo gutenberg block builder that they provide all right so let's go ahead and do that right now okay so we're going to go to our dashboard of our fresh wordpress install and let's just do a few housekeeping things so typically what i like to do i like to go to the posts page here and i will delete this default hello world page so just put that in the trash and then go to the trash and we will empty the trash so there's nothing there then i will go to pages and i'm going to delete all this these are this is just what is installed by default this is just the basic pages go to trash and i'm going to empty that as well and then i'm going to go to my settings and i always like to title my site so we'll just call this cadence uh deep dive and i'll give it the ultimate guide to cadence okay just give it a tag line and uh then i'm going to set my time zone and go ahead and save those changes and then next i'm going to go to the permalinks just to make sure that my permalinks are set to the one that i like which is basically the web url and the name of the post or page where the permalink belongs so that looks pretty good and that is the fifth option here and that's that looks good and so now we're ready to go ahead and start installing uh cadence so cadence comes in two versions there's the free version which you'll find in the wordpress repository and then there is a pro version we're gonna start with the free version and then we're going to progress all the way into the pro features so let's go ahead and get started so the first thing we want to do is we want to go to appearance and themes and we're going to click on add new and i'm going to search for the cadence theme so search for cadence here it is right here click on install and activate great next i'm going to delete all these additional themes here because we're not going to need these so i'm just going to go ahead and delete these this is just some housekeeping stuff that i like to do with every wordpress site that i build and it's it's a habit now so i just like everything to be really clean so i know what i'm working with all right great so now the theme is there let's go ahead and take a look at it now and this is what this looks like okay so there's nothing here very plain and already looks better than the default wordpress install the next thing that we want to do here is i'm going to go back to my dashboard and if you come here under appearance you will find the cadence link here under appearance and right here are the theme options for cadence if you click on that it will take you to this page where they say thank you for choosing the cadence theme and then there's some instructions to install the cadence starter templates if you install these kitten starter templates you will have access to some starter template starter websites that you can install in one click but we're not going to do that just yet we're going to actually go through all these features that are here right now so if we come here there are four tabs dashboard getting started change login starter templates under the dashboard you can see all the features that are contained in the free version of the cadence theme so we have global colors where you can change the color palette we'll take a look at that there's branding that allows you to upload your logo and your favicon then topography is where you can change your font family font styles and font sizes then you also get the ability to create different types of headers so there's a header layout element a customization capability there page layouts where you can create the different page layouts for your pages and your posts there's a footer layout similar to the header layout but this is now the footer layout and then below that you'll see all the features that you get with the pro add-on so we're gonna look at the pro add-on a little bit later but right now these are all locked when you install the free version okay so really we're just gonna focus on these six right here global colors branding typography header layout page layout and footer layouts the other thing that you also can take a look at is the getting started link here if you click on this there's a video and it basically tells you about cadence and then you can view the knowledge base and look at additional video tutorials online the change log will tell you the latest changes that they've made and then starter templates is where you can install some starter templates to get you going on your site so but for now we're actually going to go through the customizer and look at all the customization capabilities that cadence has on the front end so let's do that right now okay so from from here i'm going to go to the front end of the website and we're going to click on the customizer which is this link right here when you open up the customizer you will be presented with the customization options for the cadence theme so right up here it tells you the website that you're customizing the active theme which is cadence and then over here are the tabs for all the customizations that you can make so we have the general tab the header tab footer page layout blog post and search results so these first six tabs right here are dedicated to the actual theme itself then you have site identity which is a cross between the theme itself and wordpress this is probably this is where you'll be adding your logo and your favicon to the website menus widgets and additional css in the customizer are these are supplied by wordpress okay so we're really going to be talking mostly about these first six and maybe the seventh one as well we'll talk about all of them over time but really this is where a lot of your changes are going to happen so the first thing that we want to look at is general so each tab that you have here has a set of settings so if i click on general this deals with the overall aspects of the theme that you would like to customize so for instance the layout when you click on layout this will address all the layout aspects for instance the content max width of your website right here this is set to 1290 pixels so this slider right here will allow you to increase that or reduce it and you notice as i drag the slider across it starts to go down right so increase it or you can reduce it and right here is your content area if you make the change and you no longer want this change anymore you can go ahead and reset it by clicking this reset icon right here on the left so if i move this that reset icon shows up and if i reset it it goes back to what it was before and this is all happening in pixels you can also change the units to m's or rims if you want to below that is the content top and bottom spacing so that's addressing the spacing up here and the spacing down here within your content so again same thing if i start to increase this you'll notice that the spacing starts to change let's go ahead and reset that and then the narrow layout content max width so there is a layout option in cadence where your content is in a narrow layout and you can just select that as an option what the width of that layout is is what this setting has to do with and we'll look at that a little bit later same thing with the single post box with its spacing and then you also have a box shadow option and a border radius option and the same thing for your archive grid for your posts okay so that deals with everything that has to do with the layout of your website if we go back here under still under the general settings we have settings for the sidebar a lot of sites don't use sidebars anymore as much but there are some cases where you'll need it but this will basically dictate the styling for that sidebar if you're going to have that on your pages then colors is actually another powerful feature of the cadence theme here you have a chance to be able to select a palette so this this these colors represent the palette of the current site right now and if you ever want to know what which color addresses which thing we can go over that right now so here are what we call your accent color so things like your buttons and your links will take on these colors so if you look over here our link where it says get started here that's this first color right here then this right next to it is the hover color for that so if i hover over this it changes color to this darker blue and so on and so forth the strong text color here is for your headings and bolds and and then the next one is going to be a mid-strong color then this color right here this medium text this deals with your actual text that is inside things like your search bars and your in your forms and then you have an even lighter colored text as well then the last three actually have to do with the backgrounds right so you see this uh color right here this lighter background and then you have a much heavier or subtle background it's a little heavier than this one so if we change this one for instance and let's say we change that to you can change these colors to anything anything you want if we change that here this is actually affecting the page headings you can't see the page headings right now but we'll look at it a little bit later but the best way to find out what color applies to what thing is just go ahead and change the color and see what happens you can always reset it over here okay so if i want to change see what this changes if i click on here this lighter background and i make this change i can now see okay so that changes the main body of the website right so that will change the main body of the website what about this color what does that change okay oh that changes the search bar right so the background of the search bars and the forms and then i can always reset it so you can i can set this as my as my global palette and link these colors to different aspects of the website and that way i can just make a change in one place and it changes it everywhere else go ahead and reset that there are three options for the colors so sorry three versions that you can have so i can select one palette and say let's say keep this as the default and on the second one let's say i want a different palette i want a different color scheme see this little folder right here just click on that and there are some colors that you can select that are already preset for you or you can import your own so let's say i want to choose i want to choose this one in the middle here you notice how my site changes and then i can assign another set of colors to this third one and let's pick something that's more of a change here we go right so this is more of a warmer change right here and then you can still make changes to each palette if you want so it's actually pretty powerful now if you start going down the colors customization section here are the site background colors you can change that here so this is linked to that color right there the content background color so our content within the pages will take on this white color and you can change that as well and then your title above content background will see that in a little bit and then your title above content overlay color which is actually pretty nice all right then here are your link styles let's go back here are the settings for buttons so when you add a button to your website and you want to have default colors this is where you would change that you can also add borders border radius change the fonts paddings add button shadows and create a button shadow hover state globally on your website topography this is where you can change the topography of your website so right now we have base fonts topography and you have heading and these two sections right here change the overarching text and headings on your site but you can also change individual headings for each type of heading font so you can see right here you can set the colors you can set the font families the style and the size for each different heading that you have so let's take a look at how this works so if i click on the system default here it gives me a chance to individually select any type of font family that i want so let's say that i want this advent pro notice how the text changes as soon as i do that then i can say okay well i want everything to be bold now i wouldn't recommend that but let's just use as an example i want everything to be bold and i can go ahead and change the size to whatever size i want right so it's pretty big and when you're done you can go ahead and just reset that so you can start from the beginning again now remember that folder thing if you open up the folder there are actually some preset font pairings that are already here for you so you can have font pairings where you have a non-serif font with a serif font non-serif means that the font has is very plain has very little styling this is a non-serif font several fonts tend to have a lilt or a lift on them so you can kind of see that right here for instance if i select this uh well let's let play fair display and i confirm the change we can see that we don't have any headings on this page right now so you can't really see the serif fonts but it does change it to the server font so if we were to change this to for instance play fair display i could show you what a serif font looks like so pay attention to the to the way that font looks now and let's look at play fair display so i'm going to select that option and now you can kind of see that it's a little bit more stylized okay so it's going to reset that so we can be working with just our system font so we go back here we have the scroll to top option some of you are familiar with that but scroll to the top is basically an icon that shows up in the bottom right hand corner of your site and when people scroll down to the bottom they can actually click that one link and it'll take them right back to the top you can enable that and design that in this in this site you have settings for your four or four pages where you can choose the normal narrow and full width so if you remember we were talking about the narrow width max width when we're looking at the layout option this is what i was talking about here so if you select that right here then it will basically you'll be basically be able to to customize the width of that okay let's go back to normal and here you get to customize your comments whether you want to move the comments input above the comment list or remove comment from the website entirely this is where you set up your breadcrumbs if you're using an seo plugin they actually allow you to make changes depending on which seo plugin you are using for your breadcrumbs social links you can go ahead and preset your social links that way when you pull in a social links module it already has the links for you in there and then this is where you get to make changes to your to your performance things like enabling a light box or loading your google fonts locally okay and all that's contained within the general settings okay so now that you know what to do in general settings let's just make sure that we go ahead and reset everything that way so i think we made some changes to the colors here so i'm going to go ahead and reset this make sure it's all reset and reset so we have it back to the default okay then next now we're going to cover all the other items like the header the footer the page layout and the blog post layout as well now before we do that to make things easier easier let's go ahead and create a page or post in the cadence theme so that we can be seeing that as we're making the changes to the customizer so i'm just going to temporarily get out of this here i'm not going to publish any changes that i've made and we're going to go to the dashboard go to post click on add new and we're going to skip that and we're just going to say this is a sample post and let's go ahead and grab some text so i'm going to go to my lorem just go to learn if some generator on google and you can grab some text there so here's some text right here just go ahead and grab this and we're just going to paste that in here just like that i'm going to go ahead and publish this page and then the other thing that i want to do here so if we go back and we look at the front end you'll see that we have this right here the other thing i want to do is this is a post so the other thing i want to do is i also want to create a page so i'm going to go to new just create a page and we'll call this a sample age okay and we're going to paste some text publish and view the page alright so that gives us a little link right here in our menu so we have access to the sample page and access to the sample posts so let's take a look at our sample page all right so this is our sample page you can see the page header and the page content is right here so now when we go to the customizer we can actually see what it is that we're customizing so let's go to the customizer again and we just finished covering the general tab now we're going to go to the header tab so this is your header right now and to customize this you can do that with the header tab so once you click on the header tab there's this tray that opens up at the bottom here that represents the header and when you open it up at first you will notice that there are three rows for your header wherever you have an element in that row is what will be displayed in the header that you're looking at on the front end of the website so right now in our header we have a logo and we have the primary navigation and over here on the left are the available items that you can add to your header now we're using the free version of cadence so in the free version we only are limited to these seven items so you've got the five that we're not using here and then the two that are in the main row so if we wanted to add more items for instance let's say we wanted to add a button you would just drag that button from the left side panel here and move it over to anywhere you want it on the right so if i add it here it then adds a button for me and i can reorganize this these as much as i want so now the buttons are over here on the right to edit any element that you drag in here simply click on the cog wheel or the settings wheel here so if i wanted to make a change to this button i would click on this and i can go ahead and make my changes if i want or maybe i want to make change to my logo i would click the settings on the logo element here now the other thing that you can do as well is you can actually edit things directly or get to the settings directly by clicking on them so if i go to the header you see these pencil icons that show up that gives me the ability to make changes to aspects of the header this first one right here will give me the ability to make changes to the main row that's this entire row right here so i can select that and let's say i wanted that row to be a dark color i can click here and change the color to let's say a deep red right so now we can see that that's changed and if i don't like it i can go ahead and reset it by clicking the reset link i can also have different colors for different screens or different uh responsive sizes so i can have a color for let's say i want the color that i want for the desktop version is going to be this color and then i can select i can select the tablet option and then change that color to red and i can change the immobile color now you really want wouldn't do this but i'm just showing you what's possible you can actually make responsive changes depending on which screen size you're looking at right so now i've made those changes and if i go back to the desktop version i can see it's this color if i go back to the tablet version it's now a red color and the mobile version is now black right so i'm going to reset all that because i don't really want that and let's go here reset each one back to its default there we go okay so you have the ability to make changes if i wanted to make changes to this button i can go ahead and click on the edit icon here and it will make changes to the button for me so all the settings for the buttons come up the general settings and then the design settings as well so let's go back to our header actually and i want to look at some of the options that are presented to you when you're adding elements to it okay so you find all that stuff under the general tab so we have a general tab and a design tab and depending on which one you're it in you can make changes too so if you're in the top row then the changes you make here will apply to that top row if you're in the bottom row the changes you you make here will apply to that bottom row now what's really great about having these three rows is now you can just put things in those rows so for instance if i want my i don't if i don't want my primary navigation to be in the same level as my logo i can just drag that down to the bottom row and create a navigation this way so i can basically have a navigation that is below the header by doing that i can also have a button on the same level as well as if i drag the button there then the button will come down and be on the same level as the navigation let's go ahead and put that back to where it was so i'm going to go ahead and add the primary navigation back and add the button back now when we get into the pro version of cadence you'll notice that there'll be a lot more elements to add and that way you can customize the header to be even more than what you are seeing right here and in these customizations you have the ability to customize the desktop version and you can go ahead and select the tablet version and you can actually make changes to the tablet version that are different from the header version so that's actually pretty cool here in the mobile navigation uh we have off-campus mobile navigation you can also customize that right so if we click on this and we select the menu you can actually add a different menu to the mobile navigation then you have in the in the regular desktop one as well let's go back to the desktop making changes to the header is really very easy you simply drag and drop items on it now if we scroll down here there is an option for a transparent header this is if you want to set up a transparent header for the entire website you can do it individually per page and we'll take a look at that but here's where you would set up a transparent header for the entire website so if i toggle this on now the header is overlapping you notice how the color disp disappeared the header is now overlapping the page header now and so here i can make all my changes i can even create a different design for it it can have its own logo right so i can choose a different logo for it and i can enable it for mobile only or desktop only or both okay so let's go ahead and actually disable that because we're not going to use that right now and then you can also choose to have a sticky header right so if i toggle this on and i enable sticky header i can enable it on all the rows the main rolls the main row top row of the bottom row so i want to do this for the whole header and there's even more options right you can enable reveal sticky on scroll up enable main row shrinking and have a different logo for the header that is stuck which is pretty cool right so but for now we just want to enable it here you notice the header stays in place as i scroll through the website right i can also say hey i want it to shrink a little bit as i do that so if we do this you notice that it shrinks to 60 pixels and if i want to choose a different logo i can do that as well so we're going to turn this all off you can choose whether you want to enable this for your mobile devices or just have it only happen on tablet and desktop so let's go back here and let's take a look at our footer options okay so if we go to the footer so right now in this footer we're only seeing our copyright and the name of the theme well again you can make changes to it by clicking the pencil here and it'll open up all the changes you can make here so from here i can go ahead and change this to whatever i want so let's say i want to take this out i may want to say design by clifton wp with cadence okay so i may want to say that okay and you can hyperlink this if you want just highlight whatever text needs to be hyperlinked click on the hyperlink icon and then add your add your link and it will hyperlink it for you right okay so this is how we make changes here but what about the actual footer itself what if you want what's typically referred to as a fat footer well you can see here it's similar to how we had it with the heading or the header header section we also have the similar options with the footer section so let's go back to our general options and take a look at what we have there so i'm going to go ahead and go back to the footer so when you come here to the footer you'll notice you have the footer navigation which is a menu type that you could have and then you have your social links so if you remember earlier in the general layout we were setting up our social uh we could set up our social accounts this is the module that you would basically pull in and it would add those social links for you so let's say i wanted to add my social links right here next to my copyright i wouldn't want it there i want it right next to it this way so i added my social links right here next to my my copyright and we can see here you already have facebook twitter and instagram so if i click on editing this this is where you can sort of set up what the icons will look like but these will automatically be linked to whatever you had set up in your general settings okay so let's delete that because we don't really want that and then what about what we just saw earlier with the widgets so this is where you can add widgets to your site and what's really cool about this is i can say okay i want a widget in the middle row and i'll add widget number one there i will add widget number two and let's add widget number three and these widgets you can put anything in these widgets typically how you put in widgets in the wordpress widget section that's what this is addressing so if i were to click on this first one right here it actually will open up the widget areas which now with gutenberg you can actually add blocks into the widget area and it tells you that right here so what does that look like i'm going to click on got it here so here's what it looks like i can add blocks here from gutenberg now we haven't covered the blocks yet but i just want to give you a good example if i click on the plus sign here and let's say i wanted to add a heading and let's say this will be our contact and location okay you can see right here in this footer area it's starting to add that information for me and then let's say we wanted to add our contact information i'm just going to select the paragraph and let's paste in the text that we had here and this and now our text is in place and this is now in widget one i can then go over to widget 2 and do the same thing heading about us and we can add a paragraph and then widget 3 so heading and you can add any block here by the way it can be any kind of block you can add roblox and column blocks and do even further customization and let's say here we're gonna have a connect with this instruction and just for the sake of demonstration i'm just gonna add another paragraph text so let's go ahead and take a look at what our site looks like now so right here are our widget areas and right here is our uh copyright information right so now that i make the changes here i can move these widgets around so what if i don't want it in the middle row i just want it on the top row i can then drag it to the top okay and wherever you put that information is where it will stay right and then if you notice under the widget areas we have widgets four five and six we can add more widgets below here if we want to or even all the way down here as well okay so i'm gonna go ahead and delete these but this gives us the additional ability to add some information in our footer area okay let's go back and next we're going to cover the page layout in the cadence theme you can actually make changes to each page individually and you can do page layout changes globally so in the customizer if you're making the changes there understand that that's happening globally and even though whatever you set up in the global section of it and the customizer you can actually make those changes more granular in the actual page itself so when we go to the page layouts here this has to do with how your pages look so right now if we're looking at the page you kind of see we have this page header with the title there we have the page content and then there's spacing in between that content so the top and bottom spacing and then our content is contained within this white section here and that is a box section so if we look at the very first option here it says page title we can actually turn off all the page titles by default on every page and then you can turn them on in each page if you want or you can leave this on and then turn them off in each page individually so this is where you would control that so if i toggle this off then there will be no page titles for every page that you create okay when i turn it back on then we now have the page title showing up in a page header and then you can choose to have it like a header like this or if you want it to be in content just in the page layout it will bring the header inside of the content area okay i kind of like it above the content area if i'm going to use this and that way i can do things in this area and right here all right the title container width you have standard full width or contained so if i set this to full width then it's all the way across and you may not notice that unless you align the title of the page so if i align this you notice i'm aligned all the way here if i make it standard it still looks the same only because my my page here is really contained within this area and this is the contained version so you can see right here this is the contained version as the spacing right there right so we want this to be let's just leave it at standard and let's center our page title then the title container minimum height so right now we have a minimum height of 200 but we can reduce this if we want so if you wanted something a little more slim you can do that or you can leave it at 200 or you can increase it you can make it bigger if you want to if you have a big image here that you like to showcase on your pages you can do that then the title elements that you can actually see so this is a page right and remember when we talked about breadcrumbs so breadcrumbs are the links that follow a preceded page it's kind of like think of it like a link tree but in a horizontal fashion so right here i can see that we have the home page and this is a child of the homepage of your site right so it creates a breadcrumb navigation typically you don't show this on the page you usually will show this on the blog post so you could but you can toggle it on and off and uh there are different things that you can do here right you can show the post title and bread crumb if you want so let's turn that off though because that's typically not what we'll have on the page and then the meta so if you want to show the author of the page right that will show up there but typically you don't show that either show the author and the date then you have page layouts and here we have five page layouts that you can choose from so this is the normal layout this is the narrow layout right and you can change the width of this in the general settings general layout settings this is the full width layout this is perfect if you're using a page builder cadence actually works with beaver builder elementor and other page builders and it also works with gutenberg if you want and in this deep dive that we're doing we're going to be focusing actually on gutenberg for the page building experience and then if you're using a sidebar you can select the left the sidebar being on the left or you can set it up on the right and then maybe instances where you want to use a sidebar for instance if you have an opt-in that you want to showcase or if you're doing a ecommerce website and you want to showcase additional products on the sidebar you can utilize that for the most part i tend to only to never use a sidebar on the pages because i really build focus pages but that's entirely up to you and then here is the selection for the default page uh sidebar you can assign bar one right so let's go back to let's look at what that looks like so if i look at here and i want sidebar one or i can have sidebar uh two right so there are two sidebars that you'll find in the widget area and you can select which one that you want to show as a default okay but again that's if you're using sidebars let's go back to the normal setup here then your content style so do you want it boxed which is how it is right now or unboxed so notice unboxed it is completely contained within the content area and the content area is flush against every other area or if you make it box then you will have this sort of padding going across it and the content is now boxed within the page okay you can enable this vertical padding right here so you see have padding up here and padding right here you can disable it entirely so that it's flush against the page header or you can choose to have it on the top only or only on the bottom and then the other thing is if we had a featured image if i toggle this on it now shows my featured image on the page and you can see how it's contained in the full page and what i'm going to do here just so we can see this well is i'm going to select the narrow version so that we can see this very well so you can see here the content and here's showing our featured image and then you can actually put it behind your text which is pretty cool so you kind of get this layout by default without having to do any kind of styling and customization and remind you guys this is in the free version of cadence okay uh let me go ahead and toggle off the title here so that it pushes it up a little bit but you can see have a really this really beautiful layout when you do it this way it's one of my favorite layouts to do and you can do it below now what the below does is it actually puts it in kind of a boxed area like that so it doesn't it's not that it's putting it below your text below your content that would be strange but it just puts it below the content area in here right so behind to me is the best best looking one but of course the choice is entirely yours then you can actually choose the featured image ratio so do you want it to be one to one where it's almost like a square four by three which is kind of this nice layout here three by two which is the default that it comes with 16 by nine this is what people are used to when they're having a more landscaped type of image and then two and one is even narrower right so i tend to keep it where right here okay this is totally fine and then you can choose to toggle on comments on your pages or not that shows us how we use the featured image i'm going to go ahead and talk a lot of this what about the design options okay so if we go over to the design tab so remember in some of these customizer options there is a design tab if you go to design tab this is where you can make changes to all the different things that you configured in the general tab so your breadcrumb colors fonts meta colors the site background and the content background and what's great about these backgrounds for instance so i'm going to go back to the general i'm going to toggle on the page title here and let's go to design and if we go back here right so if we go back here to the page backgrounds you'll notice that the page title you have the option of having a color so i could say well i want this to be a red color right or it could be a gradient which is pretty cool so i could say okay i want it to be a gradient so i'm going to select a gradient color let's choose this color and let's just leave it like that that looks great right so you can choose to have a gradient or you can choose to have an image right so you come here you select your image and let's select that and now we have an image right there right and then you can now go back on your page title fonts all right so let's close out of that go back on your page title font and i can then add oops a color i lost my image let's go back put that image back so image okay right so now we have this uh this classic type of header style where you have the image on the background and you have the title on the foreground okay and this looks really nice right so and then you can do an overlay color on top of that and what i love about the overlay color is i can actually choose to do a gradient overlay color if i want right so i can click here and let's say i like this color right here this is my overlay now you may be thinking well i can't you know i did the overlay and i can't see i now cannot see that image well that's because our overlay is at a hundred percent so if i click here and notice when i set to that color i can reduce that and it will start to show the background color in the background with the overlay on top of it that is actually pretty nice right there okay so you can also have a border on your page title and then the site background you can change that and you can change the content background so remember the site background is pulling from the default palette right now but you can come in here you can change that background i can make it black so you can see now the background is black and the content background i can change that to a different color as well i can just make it kind of a beige color okay so we're going to reset all this because this looks very ugly now but you can see the customization capabilities are endless and very you can create some really nice stuff just from the global settings that it has so i'm going to set everything else back to where it was before and that concludes making our page layout changes so you can now see how to change the pages and customize them globally using the customizer next we're going to look at our blog post then our search results and then we're going to start building stuff all right let's move over to the blog post okay so let's head back to our customizer options and this time we're going to select the blog post now the blog posts layouts are fairly simple and to make this easy let's just go ahead and let's exit out of this and let's go to the actual blog posts so we can see it i'm going to select it here and then i'm going to click on the customize and we're going to select blog posts as a customizer option so that when we when we toggle some of these changes on and off you can kind of see it real time in a natural blog post so this is your blog post and this is the current default layout that it comes with when you install cadence so if we click on the single post layout option this will help us change our layouts to be however way that we want so right here you can see that the post title is always toggled on and this is typical in a blog post however you can turn it off if you want to and you will not have a post title you can also change the post title layout so right now the default layout is within the content area but we can actually create a page header type of blog post where it is on the very top here and has a page header of its own and then you can choose to align it align your post title in the center and you can align every single one of these items in the center so kind of like right now the breadcrumbs are aligned sorry the meta is aligned to the left we can fix that so right now what i'm going to do is just make sure that everything is aligned in the sender this way okay then the same thing as in the page layouts in the post layouts you can also increase and decrease the size of the page header if you're going with that option now right here you can choose what you want to show so by default the breadcrumbs are not showing so sometimes you may want to do that for seo purposes and have our breadcrumbs show up in our page header and you can even change or reorder how these are presented right so i can actually move the title to the very top because that's how i would want it right and then i may want my breadcrumbs to be all the way to the bottom so you can just go ahead and drag and drop that anywhere that you want which is pretty nice next you can make changes to the post layout itself so right now we kind of have a narrow post layout but you can actually make this wider right so there are five options that you have here so i can do a wider post layout where it's more closer to the edges of the screen with padding on the left and right you can go back to the traditional default layouts there's also a full width option for your layouts and then you can have layouts with right and left sidebars if you want and then same options apply that were in the page for your default sidebar for the sidebar one and two so you can choose which one that you want and then the content style so right now naturally you have a narrow content style but you can also consider this as a box style and this here would be an unboxed version right so in the unbox version the white part of the content area extends the full width of the page you can also remove the vertical padding and you can choose to have that on the top only or on the bottom only i like to leave this as is on the blog posts and then the same thing with the featured image thing that we did before right so if you choose to show the featured image then you can have an image that's behind below and above similar to how we had it with the page and then your featured image width now this is what's unique to the post layouts uh you can have that stretch to the full width and or stretch wide so let's go ahead and demonstrate this i'm going to go ahead and exit out of this real quick and let's add a featured image to our post so i'm going to click on edit posts and let's go to the featured image and we'll select this image here there and update and then when we view the post we now have our image featured here in the sample post go to the customizer and let's go to blog posts and if we look at the single post here and let's scroll down to the featured image you'll notice that we now have a wide featured image option and it's behind the post right so we can also make it above and you also have the option of having it within the content area below the below the title all right but i like that i like it behind i think this is a really cool layout and then if you want it to stretch full so you notice how it's kind of box in here we can click on stretch full and it will stretch the full width of the blog post page and then what you can do to is eliminate this padding at the top here if you want to have it look more aesthetically pleasing so i'm going to go ahead and disable that and now we have our blog post looking like this right so this is really really nice and by disabling the content vertical padding you now have this looking a lot more aesthetically pleasing now don't confuse this with uh the header option because you notice that the the headings excuse me the heading option is inside of the content area right but we'll cover that later so below here we have uh the featured image ratio same thing you can change the ratio of the image to your liking and then here are additional options for setting up your post now if we had more than one post in this install then right below here we would actually have the related post columns and you can have two three and four columns or you can choose not to even show columns at all and then you also have that your post navigation will also be here on the bottom you can also disable comments on this or showing comments if you want or you can leave it on and you can show the common date or toggle that off as well now back to what i was talking about so you notice that the title right here is on the inside of the content area and we have the featured image showing here at the top but i didn't want you to confuse this with a page header or a post header for the post so let me show you something real quick let's go ahead and toggle this to be in the center so that everything's in the center and i want to show you the post layouts also have a page header option right so now we have the page header option at the very top here with the page header and we have the featured image and then we have the content so within the featured image there's no capability of you putting any information in here right so we don't have a way for you to be able to uh to do that in cadence however you can put a featured image right here in the post if you want to and eliminate this one if you want so this is just an option it's not something that you have to do but let me show you i'm gonna toggle this off okay so now we have just our page header and what i'm going to do is under the design options for the single post layout i'm going to find my post title background okay so if we scroll down right here is a post title background i'm going to select that and i have the option of selecting the image to be the post title background the other way to deal with this is you can also just toggle on use featured image for background here and if i do that then that back that featured image automatically shows up here so you could have posts where you upload a featured image add your other images within the post itself and have your the background of the post title uh background area be the featured image that makes any sense right so now you have a whole nother layout that you can also play around with and of course you would change the you know colors on that on the text on the title and all that stuff is is possible here right you can just go ahead and toggle that and see everything that way you'll be able to see everything that you're putting in here so lots of design options for your posts to make them look really nice let's go ahead and just reset all this and i'm going to turn this off and if we go back to the general settings and we toggle our featured image back on and then we also can set our post title layout back to the way it was all right so now you can see that you have a lot of great options for designing your posts just with the free version of free version of cadence and without using a page builder or any other kind of thing at all so it's actually pretty power packed and very good attention to some of the design details that you may want to use straight out of the box uh with the install of the theme all right now there is one other thing that i do want to cover so let's get out of this and let's go to our archive layout now if you want to see the archive layout here their options are similar to what you have with the single post page layout but this is regarding the archive layout so to see that let's go ahead and close out of our customizer i won't save any of the settings that we've put so far and what i'm going to do is i'm going to go to the front end of the website so when you look at the front of the website if i had more than one blog post here we would have multiple blog posts showing up here and this is the archive layout for that so basically an archive is a collection of all your posts put together and the customizer setting controls how that is laid out so to make this easier for us to understand we're going to go ahead and create two more additional blog posts that are identical to this one that way when we're making the changes to the archive layouts you can see what that looks like [Music] great so now when we go to the front end of the website we'll see we have now three posts okay awesome so now if you click on the customizer again and we go to the blog posts archive layout this is what we're looking at here the archive is actually this so the archive is the category okay it's the category and when you click on that every different category will have an archive like this so you can set up your global settings for all categories so right now the category is uncategorized because that's what comes by default in wordpress but we could change this into anything so now that we're looking at it this is what this area controls everything you see here so the same thing we can have in content title versus a page header i like the page header option with the title there and then all the alignment options are here the container minimum height right so i can make this big or small just leave it just where it is right now and you can choose to show breadcrumbs i choose to to not show breadcrumbs and you can have a title in the description and then your archive layout right so not right now i have the normal layout which is perfect because this is just a just a traditional layout if you wanted to make this more narrow you could but then your text would be narrow and full width is also good because now you have a much bigger more prominent layout for your archive and i don't recommend the left sidebar or right sidebar although you can do it and that the option is there so if you want to do that you're welcome to do so same thing with the archive default sidebar but now i want to point out to this content style so right now we have the content style and the box version is selected you can have an unboxed version right and then you can also choose the pose archive column so right now we have this set to three but you could have set it we could have set it to two if you want and you can even set it to one if you want as well so you have these huge images here now if you did set it to one that could justify you having a narrow layout but i think three is good it's standard and it's what you'll see everywhere else then what about the elements that show up in each archive post so we've got the featured image that's what these are and you can actually toggle these on or off so i can turn i if i don't want to show the categories i can turn that off if i don't want to show titles i can turn that off or you know might as well leave it on um and then there's the meta and then the excerpt and then the read more you can turn this off and on if you want to now under these some of these have additional options so for instance right here if you don't want it to say read more you can change it to something else like some people like to say continue and the default the default is read more then you can also deal with the content how much the excerpt how much of the extra do you want to show so what if you only want to show 25 and then uh on the meta you can choose what options uh portions of the meta you wanna show uh on here so we have here the author and then we also have the date and then enabling the link and all that you can turn all this off you can hide the author if you want to and if you only want to show the date then you can show the date right you can also add a date label right so i can say showing date and we can click turn this on it says post it on or we could say written on if you want right if you want to have some different text there all entirely up to you lots of customization options to make everybody happy right um and then you can also choose a divider so let's let's turn this all this back on and let me show you what the divider looks like so right now we have this divider as a dot but you can also have it as a slash a dash an up and down slash or a clock very nice and then in the categories you can also customize that as well and then a featured image you can choose what how you want your featured image to display right so i can have these be 16 and 9 or 2 and 1 or if i want it to be square it can be square just lots of great options here for everybody to be able to use so you can see the options the customization options for the archive is actually quite extensive all right so that will conclude the portion where we take a look at the customizer and we look at all the options we have for blog posts and for our last two we're just going to run through these really quickly so let's look at the search results so when people do a search on your website you can tailor how you want those search results to appear and you'll notice that a lot of the settings are very similar to the settings that you have for your category archive so your results will show up like this when people do a search if you look at the site identity this is where you add your logo and where you can add your favicon favicon is the item that shows up right here by default it is the wordpress logo but you can change that yourself by going into the site title logo and here if you see where we have the logo aspect of it you can go ahead and click on the cogwheel here and you can add a logo of your own you can choose the logo layout so if you want just a logo by itself it will take away the text you can have a logo and title it will have the title and you can have the logo title and tagline right so we can have our tagline right there if we want to and then you can change how these are ordered right so i can have everything to the left hand side i can have it on the bottom so if i had a logo you'd see that actually showing up there i don't have a logo to show on this one for right now and then down here is the site icon so if i click on the site icon i can then select an icon to replace this here and then your site is pretty much ready and at this point you would have covered everything that has to do with the cadence free version of the theme right so everything else is pretty much standard that concludes everything that you can customize with the free version of the cadence theme next what we're gonna cover uh now is we're gonna cover the pro version we're gonna cover adding cadence blocks both the free version and the pro version of cadence blocks and we're gonna do some really cool things with the theme including installing starter templates and actually working with an actual website so let's go ahead and get into that right now so there are two companion plugins that you'll want to install with your cadence theme that will pretty much give you full range of all the development capabilities that you need and they're free there are also pro versions of these plugins as well and i'll leave the descriptions for everything for the pro versions in the description of this video below so feel free to go there and check out the pro versions and we'll talk about the pricing and and the differences and the benefits of those things in a little bit here but i want to show you those two plugins and how to quickly install them and start benefiting from them right away so first let's go ahead and go back to we're going to exit out of our customizer now we're going to leave all our settings at the default so we're not going to save any of those settings that we made and we're going to go back to the dashboard i want you to go to plugins and we're going to click on add new and from here i want you to do a search for cadence blocks when you run this search you will find gutenberg blocks by cadence blocks and this will add page building features to your cadence theme that are based on gutenberg which is the default block builder for wordpress so let's go ahead and install that now we're going to click on activate and now you'll notice that we now have these cadence blocks so the blocks that this comes with and the free version is the row layout the form advanced gallery advanced button icon space divider advanced heading tabs info box accordion icon list and testimonials and these are kind of like a super powered version of the gutenberg blog editor and let me show you exactly what i mean if i go to a let's go to a page and let's look at a page that we've already created i'm going to click on this page here so now that we're in this page the way gutenberg blogs works is that it works with taking each page or post and building it in a block based fashion so everything becomes a block so for instance your text here is a block right so this is a paragraph block and to see all the blocks that are available just click the plus sign right here and you'll see all the blocks now because we've installed cadence blocks we now have these new additional blocks so here are your traditional blocks and now we have these 18 new blocks and some of them may look like replicants of existing blocks already but let me show you the difference so for instance we have in the normal default gutenberg block uh editor that comes with wordpress we may have headings and what you can do is you could just drag this over and drop it into your page and your heading is now in uh place whoops actually i don't think that dropped in let's go back i want to drag in this heading so let's add that right here below this text so here's our heading block that we have added to our page and if you look here to the right you'll see some customization options and if you look above here there's a toolbar with additional customization options so for instance i can change this heading i can choose to have this be a h1 or h3h4h5 right i can align it to the center of the page if i want to and then below here are additional options for me to use with this heading and then over here on this on the right are customization options so i have font size line height color right i can change the color and i also have text settings where i can create a drop cap out of my heading so let's just make sure this is a regular gutenberg let's call this regular good burger heading okay so you can see all the options that it uh comes with i'm gonna align this back to the left all right and then there's the advanced breaking out html anchor and that is it that is really all the options that you get with the traditional gutenberg now let's go ahead and add a cadence blocks heading okay now mind you this isn't a free version so i'm gonna go here and i'm gonna select advanced heading and i'm gonna drag that over and put it right below the gutenberg heading and then we're going to label this this is the cadence blocks heading okay and they look pretty similar but i want you to notice the difference the first difference that you'll notice is that the options you get in the mini toolbar here are vastly different in the cadence version than it is in the traditional gutenberg version so on this one we have the ability to change the type of h tag it is to be able to change the alignment right of where the heading will go bold it italicize it and hyperlink it but with cadence blocks we actually have the ability to change same thing the type of h tag it is but we also have the ability to change typography settings right in here we have the ability to change the color right in here as well alignment settings and we can also copy the styles we also have the bold and italicizing and then if we move over to the right where we have all the additional customizations you'll notice that we have way more customization options heading color heading background color font size line height additional topography settings highlight settings right so if i wanted to highlight a portion of this i could go ahead and click on highlight and just a portion is highlight that capability is also available in the traditional one as well so i can come here and change the highlight but when i highlight this and i click on that i want to i want this to be highlighted it actually highlights the background of it right this actually highlights the text on cadence and then here's a question i have for the traditional gutenberg one where do i change the color of the highlight right so there's no option here for me to change that color at least i'm not seeing it okay so but in in cadence everything is just so clear and carefully taught thought out and there are so many options so right here if i wanted to change my heading highlight highlight settings i can just come here click here and boom i can change it to any color that i want right i can make this a bright blue if i want and now my heading highlight color is here okay so the cadence blocks heading uh advanced heading is far more superior to the traditional gutenberg one and that's why i like cadence blocks it just enhances everything else and gives you more customization options so let's look at the rest of the blocks that we get in cadence blocks so we have a space divider advanced button row layout so the row layout is a is what allows you to be able to set up a structure in a page so if i drag this in here i can now create different rows similar to what you would do in a page builder right so now i can create different rows that will have columns and then i can put different blocks in each in each column here okay so i can go ahead and click here and i can add an advanced heading in that block if i want to or if i don't want to do that so let's go ahead and remove remove that i can just drag the one that i just created here and drop it right into that into that column just like that okay so it's a really really nice setup to be able to create columns very easily now gutenberg does have its own columns capability right here right so you can create columns in gutenberg but again if you look over here to the right okay we will notice that your options for these columns are very limited right the column settings you can change the width and that's about it and the color and that's about it but with cadence blocks row editor here so with this row and we can see what we have here by opening up the layout tree by clicking these three buttons up here but when we look at the rows option for cadence you will notice that hey i'm going to go ahead and just move this out of the way so that we can just put that right there all right great so with the row on cadence with recording grading cadence row layouts we have far more options we have responsive options layout options padding margin background settings overlay options dividers text colors structure settings it's just so much more it's just so much more dynamic so you're going to find that you'll have a much easier time using cadence blocks to build out your pages than you will using the traditional gutenberg plugin as of now right traditional gutenberg plug is still in development um but it but the cadence blocks editor and there are many other uh gutenberg block editors coming out but it's just far ahead of the curve for what gutenberg has to offer okay so cadence blocks is going to be your uh your go-to if you're using cadence as recommended go to to be able to build out your pages okay and i can say the same for many other blocks that they have and a lot of cool blocks icon blocks my favorite is the info box block which when you drop that in there you get an info box and you get to be able to have an icon or an image a title and some text all in one block already grouped together and ready for you to use all right so but there is something else i do want to show you about cadence blocks that you get so you'll notice that when you install cadence blocks you do get a few new uh items the first one is this design library tab okay now when you go to edit a page and let's just go ahead and get rid of everything that we have here real quick i just want to show you something so i'm going to highlight all this whoops how about everything we have here click delete when you install the cadence box plugin you get the design library from cadence and what the design library is is basically pre-created sections and packs and even a wireframe capability for you to install in your pages or help you build out pages a lot faster and these are really really cool now the wireframe option is fairly new but i'm going to start with the wireframe and then we'll go back and look at all these different sections later and the reason i like to start with the wireframe is because the wireframe gives you a way to quickly build out your pages um without any styling right so you start with a wireframe so you know what you're building and it contains a series of blocks and layouts that you can use to be able to do that when you first install the cadence blocks uh plugin and you go to use the wireframe option it'll tell you to go ahead and subscribe for access so just go ahead and accept the privacy policy click subscribe for access and you'll have access to these wireframes and these are some really cool wireframes you can have a website laid out in no time with these wireframes and let me show you exactly how this works this is a lot of fun so first when you come here you can look into the category and you can see the different categories so we have content promotional pricing table footer gallery portfolio card testimonial countdown and form so let's go ahead and lay out a page here really quickly so i want to create um this why don't we create a featured area right so we want to create a featured area i'm going to select the content version so to kind of filter this down a little bit and you can see different areas here where you can have a content area so which one works best for a content area look this looks like something for a content area any of these would work good but let's just pick something traditional that we're used to so let's click this one and now we have this content area so next we may need somewhere to describe some benefits right so again i'm going to go back into my design library and i'm going to select something that will lay out some good benefits for me so for instance we may choose ah here we go some benefits right there so one two and three okay this is great and then next let's add some more so let's just add add a bunch of these uh to the page you can add anything you want in any layout you want so here's a really good layout here and i'm going to go ahead and grab this looks very interesting right there and then let's grab a couple more so let's grab a let's grab a let's grab this one and then i also want a pricing table which would be very nice to have so choose a plan and then i'm going to grab something for say frequently asked questions so faqs right so let's see if we could do a search if a there we go frequently asked questions all right and then i'm going to click update and so when we go now and we view this all right we actually have a fully built out page for us that we can then replace with our own content right so if you already know the layout of what you want to create you can use a wireframe feature to go ahead and do that now the other thing that i want to show you is if you look at this now this is our sample page and we've got this page header here and all this padding let me show you how to fix that if you go to edit page at the very top here are different options this option controls the page and block access okay right here will control the page settings so those similar settings that we saw on the customizer we can now apply to just this page by clicking on page settings and i'm going to do a couple things here so on the page title i'm going to disable that because we're using the page builder functions of this i'm going to make this a full width page then i'm going to go to the content style and i want this to be unboxed and then i'm gonna get rid of the vertical padding here and then everything else i'm gonna leave alone i'm gonna update this and if we go and view the page you'll notice that now we have a full blown page already built out okay and it actually looks really nice all we need to do now is just add our colors and add our own content and in just a few minutes you have a full page already built out so that's what's really awesome about using the wireframe capability in uh in cadence all right let's go back and let's look at some of the other tabs that come with the uh block the cadence blocks design library so what i'm going to do here is i'm going to just select everything here again and get rid of all of this and if you ever want to get rid of things really fast a really good way to be able to do that is if here we see these three dots click on this go to the code editor it turns everything into code highlight everything ctrl a and delete or command a for using a mac click delete update your settings then come back here put everything back to the visual editor and you now have a blank slate that you can use again all right great so now we're going to go back to our design library and now we can look at sections so what i just did with the wireframe you can now do with sections now these are a little bit more fleshed out so this will these will look a lot uh a lot better so let's look at some areas let's look at the hero area and i do have a tutorial where i show you how to build your own custom hero areas i'll link that in the description below uh check that out you can create uh some of these amazing hero areas from scratch so we're gonna come here we're going to select the hero area and i'm just going to select uh i'm going to select this one i like this right here because it's got the buttons in the middle so you're going to create your hero area right here and then you can same thing you just keep adding different sections based on what you are trying to build out anywhere where you see there's a pro label means that you need the pro version of the cadence blocks plugin to access those but to be honest with you there are so many different layout options that are available already for free so you may be able to just build out your pages without having to go and get the pro version but if you do want to get the pro version i do recommend it i have it it's absolutely amazing anyway so let's go ahead and add some sections so i'm going to add this section here and then i'm going to go back and i want to add a team section as well and i'm just picking random sections at let's add let's add a contact form that looks good and let's add one more section let's add one more cool section here let's see here what is good let's add this one this is nice and i saw one more that i really like i think we'll go good with this one okay so we now added our sections so now our section is now added and if we look at the website now we now have a website uh fully built out now you may think oh some of this kind of seems out of out of order and it looks like this is another team section maybe you don't like certain sections that you have so what we can do is we can just go ahead and open up our layout tree find a section that you don't like so if i come here i like that section and let's see do i have i like that section uh let's see what about this section right here these are panes so right here maybe i don't like this this accordion section right here so i'm gonna select that click here click on remove block and now that section is gone and then i'm gonna look here and then maybe we have this contact section right here i can shift that down so that it's all the way at the bottom and this section right here where it's showing the benefits this row layout here i'm going to select that this row layout and i want to shift that all the way to the underneath the hero area now this looks great so i'm going to go ahead and click update i'm going to close out the layout tree and view the page and now we can see the website that we have put together right so this looks pretty cool all right now we're going to go back edit the page and we'll look at that last tab which are the starter packs tab and i think this part is the most exciting part of what cadence has to offer so and this is the remember we're still talking about the free version of cadence here so i'm going to do the same thing that i did before come here go to the code editor it's just easier to just select everything click on update and then revert it back to the visual editor and uh update that and now we're going to go to our back to our design library and we're going to look at starter packs so starter packs are basically layouts in pages of templates some of these are full-blown websites that cadence has built and you can basically install these on your website and there's one for different categories of websites so this is one for restaurants here's one for an event here's one that's an e-commerce version one this is on their pro side on the pro side they have a membership version they have one for apps they have one for freelancers attorneys web designers real estate agents there's just a ton of huge amazing value in here even if you have an online course you could set one up for your online course and it's already laid out and designed beautifully for you so let's go ahead and install one of these and then explore what it looks like so when you click on one let's say we like this events one i'm gonna click on this events one okay it shows you all the pages that are contained in this pack and you can go ahead and install them individually right onto your site so for instance let's say i like the i really like the home page so i am looking for the homepage here's the homepage click on that and now that homepage is now installed fully into the site okay the entire thing i'm gonna go ahead and update this and let's go ahead and view this on the front end and you can see we now have the home page in okay and everything is built out you just need to put in your own information add your own colors and add your own images and you are ready to go okay so this is how adding these starter packs work and all the starter packs are available um in the free version of cadence and there are some pro starter packs that are available as well but you'll need a pro license to be able to get that to get those in but this is this actually is already looking good and you notice when you install it it takes on the it takes on the color scheme of the site so whatever color scheme you set up is what it will take on all right awesome so that covers cadence blocks so get in there play around with it it's a lot of fun uh it works very well i'm gonna go here and edit this page and i'm gonna reset everything back by going to the code editor selecting the entire code deleting that and now i want to show you the second plugin that we're going to be exploring let's set this back to the visual editor there we go and update and i'll i'll show you the second plugin that we're going to talk about that plugin is going to be the cadence starter templates it's very different from the design library the design library gives you access to individual packs individual pages individual sections now the cadence starter templates that gives you access to full blown websites so let's check that out okay so let's go to the uh dashboard now in the dashboard when you install the cadence theme it'll tell you to install the kit and start a template so we can install it from here or you can also go to plugins because it is a plugin you can go to plugins add new and you can search for the cadence starter templates there if you want so if you're not seeing this here maybe you close it out or something like that you can always get to it from here so i'm gonna go ahead and install it from here and this is again a free plugin so you see here the only two plugins we have installed are the cadence blocks and the kit and starter templates and then if we view the template library okay it asks you to choose a builder and currently the templates work with gutenberg and elementor and because i like to focus on gutenberg uh simply because i just gotta get better performance out of it i'm gonna select gutenberg and it'll show you all the layouts that are available now these look similar to what we saw in the in the blocks cadence blocks design library the difference between those and this one is that in this case you're looking at installing the entire website right not just installing uh a page here or installing an about page you actually are have the option to install just a single page or the full website so what does that mean that means that the header right and the footer will also be included in this install along with all the pages should you choose the full site all right so let me close out of this here and let's just select any anyone a different site i want to select one that's a little bit more uh dynamic so that i can show you all the differences of what happens uh when you select these so you have a lot to choose from but let's choose something that will help us demonstrate the power of the cadence start template so let's select this one and when you select it over here on the left you'll see where you can change the color scheme of the site so right now this has its own default color scheme which looks really nice i believe it's this one here in the middle but i can also change this here and take a look at what it looks like with a different color scheme i can select this one here and you have all these different options of color schemes that you can use which is really nice you can also choose a dark mode right so if you want a dark color scheme where everything is on a dark side you can do that and there are two options there right so this one's this one really pops this is really nice all right and then if you don't like any of these you can just reset it to its default color scheme the other thing that you can change as well is the font family so i can choose some predetermined fonts if i want in here and if i want things to be a little more stylish i can do that or if i want everything to be just nice and plain i can also do that as well and then you can also reset these then the other thing that it's going to say is it's going to ask you it's going to let you know that it's going to install some plugins for you that go with this with this website so again this is a full-blown website so what is this this is a course website right it's a course that's training people how to build web design skills so if we click on the course page here right you can see that it has the learn dash plugin installed and that's what it's using to display the course the about page is already built out and the contact page as well is already built out with a form and everything so it since we don't have learn dash install it's telling us hey we're going to install learn dash in order for us to install this theme all right great let's look at a couple of different other ones as well let's look at this advanced one that we looked at before so when you select this you'll notice that this has a transparent header and a button call to action over here so this is pretty cool but again just like the last one we can go ahead and change the color scheme right and you're noticing that the button colors are changing here right that one looks really cool um and we can select any color scheme that best suits our design preferences and you can set your own color scheme you can change this after you've selected it if you want right so let's go to dark mode dark mode here and then we can reset it so that it's back to the default color scheme that it came with same thing in terms of changing the text pairing the font pairing you can change that here as well okay so very very nice layout over here as well now what are the options there are no other options that are imported with this one so all you need here are the cadence blocks which is already active and so it will import that for us automatically let's look at one more and then we'll go ahead and import one so the one that i want to take a look at here is let's see here let's see something really cool this one right here okay so this is a really nice one and i like it because it's got this changing slider effect on the back with a image here on the front and same thing i can change the color of you know the highlighted items if i want right so you can see all that is changing and i can also change the font so let's go ahead and reset it to what it was before and then import options or just cadence block so let's go ahead and import this one and play around with it so what you do is once you find a layout that you are happy with you can go ahead and choose import just a single page or the full site i want to import the full site so when you click on that it will tell you full site importing design for new and empty size with no content so we definitely fit the bill and then here are some import details to let you know what's being imported you can choose to import the customizer settings and import the content i want to do all of it and then here we go you can subscribe and start important so i'm going to go ahead and subscribe and give it a few minutes and it'll go ahead and import the entire website okay so now we're fully imported and we can go ahead and view what the website now looks like and you'll see now that the full website is now imported uh in here let's go ahead and refresh this here all right and so when we when we come here you can go ahead and let's say we edit this page um and oh it looks like this didn't import correctly that's easy to fix so we're gonna attempt block recovery and that is now imported correctly now okay so now you can see all the elements that are imported uh here's what i recommend click on the layout list view here and you can see how they have laid out this page this will give you a clue and an idea on how you may want to layout some of your pages right so everything here is laid out for you and looks really really nice and well organized so you can pretty much navigate to any area of the website if you have a question if you maybe you want to know well here's a good question how do they do this um slider thing right here right so how was this done where you have the images are sliding around or changing while the forefront is staying in place well the way to do that is you click on that section and you see here that the section is now highlighted and i want to click on the row layout and now that i've clicked on the row layout i'm going to close this out i'm going to open the settings here so i can see what's happening with this row so i know this is a background of some sort so i'm going to go to background settings and i can see that they have a background slider so this is really just a slider and you can see all that there are three sliding images sliding around and when you click on edit image it will show you what those images uh that are sliding are so it looks like those images are right here so here's one of those images right here here's another one here's another one and here is another one so you now know how they were able to create those uh that these capabilities of having everything slide like that really really cool feature really really neat layout and you can do the same thing for all the other portions of the layout so back to showing you that this is a full-blown website so i'm going to click update here and we're going to go back to the front end of the website here so when you look at the website you can see now we have this custom header right it still has our information here but now there's a logo and there's our information right here all right so now you can go ahead and start customizing so let's say i want to customize this header i'm going to come here i'm going to go to my header right here and maybe i don't like the way this is set up so i can click on the logo setting here and we've got a logo i can replace this with my own logo but maybe i only want the logo to show up so i'm going to select just the logo only and now i only have the logo showing up okay the navigation is already set up here and you know maybe i don't like the colors of uh this navigation so i can come here to design and maybe i want to swap this around so i want my navigation color to be that and i want my hover color to be black and then i want my active colors to be also black okay so and then i can go ahead and publish this and now you notice that this is now changed right let's go ahead and reset that back to what it was because that was actually fine the word that it was all right so same thing with the footer right i can make changes now to the footer if i want to so i can come over here go to the footer layout and i can see how they have the footer set up so i can see here we have widget one two three and four and you can see how they have these all uh set up for you and then we have the they have the social uh social icons right there as well and so in here we can go ahead and make changes to any one of these that we want simply click on the gear box right here and you can see what they have used to create uh this footer and you can just simply go in there and make your changes yourself all right so this is a full-blown website and you installed it in just a matter of minutes we can look at every single page every single page is already fleshed out just need to replace it with your own design or your own colors your own images and your own text but everything is here nicely laid out for you we have accordions laid out for you really nicely and so on and you can do this with a number of pages now one thing i do want to tell you is say you install this one and you decide well i really don't want to use this one i really want to use something else no problem simply go back to the dashboard go to appearance under hit under cadence select starter templates and from here you can select the one that you prefer so this is a new one that i know they just released so go ahead and click on the burger one so maybe we want this burger one and i think i like it just the way that it is right here i'm gonna come here i'm gonna say go ahead and install this full site so when you click here it's gonna ask you do you wanna delete the previously imported posts and pages the answer is yes delete all that information i'm going to accept the privacy policy and subscribe and start importing and then now it's going to import so now it's fully imported the new website let's go ahead and view the finished version of the site and you can see the old site is now gone and the new restaurant website is now in place and this is a very very nice layout so as you can see the cadence starter templates is very powerful with the templates you can basically install and really build out full-blown websites very very quickly the only thing you need to do would be to just swap out the content for your own content now personally i like to build my websites from scratch but i have to say that cadence has really gone the extra mile and making sure that people can sort of set up websites using the free version of the theme so it's a lot of value even in their free stuff all right so next up what we want to do now what i'm going to cover with you now is what comes in the pro version if this is what comes in all their free stuff all the free aspects of cadence what do you get when you get the pro version of cadence well there's a lot of great value that comes with that and i'm going to show you that here next so so far in this deep dive we've been looking at cadence theme the free version we've looked at the cadence blocks the free version and we've also looked like looked at cadence starter templates the free version so now we're going to switch gears a little bit and start taking a look at the pro version of the plugin now you can use the free version to really build out really cool websites and it's probably more than enough to do many things that you would want to do for yourself or for a client the pro version is for people that want to take things a little bit further and who want to have more customized features there's a lot of benefits that come with the with the pro version of cadence for instance the ability to have dynamic content uh is something that's relegated to the free version of cadence blocks and also how about the ability to have extra elements and hooks hooked in have modal windows and so on and we'll look at all those different things here as we start going through the tutorial but one of the things that i want to do really quickly is i want to explain to people how do you get the pro version of cadence themes so if you go to the cadence website and you look under products you will see a link there called the cadence theme so this will actually point you to the pro version of the theme what's interesting is that the pro version of the theme is not actually a theme but more of a add-on so it is a plug-in add-on it is not an actual uh theme itself so that add-on basically gives you certain types of benefits so if i click on the pro link here right it gives you premium features so let's just take a look at what these premium features are one is that you get 20 new header elements to choose from so remember in the free version you only had seven now you get uh 20 new elements to choose from and some of these elements include having extra html areas extra buttons widget areas dividers account icons and so on the next thing that you get is you also get hooked elements now hooked elements are the ability for you to add certain blocks or layouts to existing layouts right so you can display them in any location we'll do a demo of this as we go through the the pro version here you can even replace your header and footer entirely so if you don't want to use that header and footer section that we had and you want to completely customize header and footer hooked elements is how you're going to be able to do that then the other one is having a mega menu right so if you want to have a mega menu capability then that's in the pro add-on then you'll you can also have fixed elements so we have fixed footers or showing certain elements by device or fixed banners that is also in the pro version you want to be able to add header and footer scripts then you'll need the pro add-on for that and then there are woocommerce add-ons as well that are included in the pro version in the pro add-on so the woocommerce ones you get to be able to open a side cart uh you can build a custom shop page and you can toggle on and off a shop widget area it's some really really nice stuff that comes with the pro version of the thing so what is that that's about six capabilities in total with several sub-capabilities included now if you look at the cadence pricing cadence does their pricing in bundles now one of the things i love about cadence and these are indicative of all the plugins that i subscribe to is one they allow for use on unlimited websites for me this is very important because i run an agency and in my agency it's important that we have tools that we can use across the board for all our clients they're one of the few houses that actually allow for unlimited websites a lot of theme companies a lot of page builder companies are going the route of saying that you will have 99 you can have up to 99 installs or 25 installs but in their case you get to be able to use all their tools on unlimited websites no matter which bundle you subscribe to the lowest cadence pro pro plug-in theme add-on is 59 for you and that's a year 49 a year so that's less than five dollars a month uh for you to be able to use all those elements the essential bundle is 129 for the year and that allows you to include the cadence blocks pro so the cadence blocks pro gives you additional blocks and capabilities so let's take a look at that real quick so if we look at the cadence blocks pro you get these premium blocks you get an image overlay video pop-up the modal post grid carousel portfolio grid carousel product carousel you can be able to have split content where you're showing content on one side maybe like a before and after and you can kind of slide that content around you get an advanced slider so you can create sliders right in the block editor and any block can be placed in the slider this is huge so basically you can put anything in your in your block row and then turn that into a slider user info uh being able to display information about the currently logged in user in case you have a membership site then you have pro gallery add-ons pro countdown add-ons and pro form add-ons things like automatically adding your subscribers to mailchimp services middle light and things like that so there are a lot of great next level premium features that that come in here are some of those premium features you can animate on scroll you have custom icons dynamic content which is huge i'm actually making a tutorial on dynamic content and i'll be demonstrating that using the cadence pro add-on and then custom fonts premium design library so some of those designs that we didn't have access to in the free one you do get access to them here and then you can also have page specific scripts just all in all the cadence blocks pro is better canons blocks is very good but cadence blocks pro is better okay great so enough about that but if you want to um subscribe to this if you want to get the cadence uh blogs pro i have you can use this link right here or there's a link in the description below cliftonwp.com cadence and it will take you to this website and that is an affiliate link it doesn't cost you any more to get it but i do get a small commission for you picking up any one of these bundles i highly recommend it especially if you're going to be building websites for clients but even if you're building it for yourself these tools are really really helpful the full bundle is 199 dollars and this also renews annually for this now cadence in the full bundle you get a host of their other plugins but cadence also has a lifetime bundle where you pay one fee it's 599 that's something you have to think about for yourself i personally am subscribed to a lifetime bundle for cadence so i get access to everything that they have plus any future plugins that they release and so far everything that they've released has been top notch all right great so now that we've covered how to get into how to get the pro version of cadence blocks and the cadence pro cadence theme pro add-on let's go and actually see how this thing works okay so let's go back to our website and what i'm gonna do is uh we're gonna go back to the site and we're gonna switch away from this burger website to a different website so i'm gonna close out of this and the one that i wanna utilize is this membership website template that comes with the cadence pro theme so we're going to install this and there's a reason i'm using this one because it has a membership page that we're going to utilize to demonstrate some of the features of the cadence theme pro add-on so let's go ahead and install this one just click on full site and this will start to install and it looks like it's already installed here so let's take a look at it from the front end okay great so now we have this website that we're going to be working with and this will allow us to demonstrate some of the features in the cadence pro theme add-on alright great so now let's go back to the dashboard i have already gone ahead and installed the pro pro plugins so we have the cadence blocks pro extension and we have the cadence pro premium add-on for the cadence theme and i got that from my account here where you can access your api downloads after you've purchased the add-ons so and remember you can purchase cadence blocks pro by itself so you can go and just purchase it by itself or you can get the essential bundle where you will get the blox pro and the cadence theme pro and pro starter templates as well or and you can also purchase just the cadence pro theme by itself right so that's 59 for the pro theme and 69 for cadence blocks so these can be purchased individually just so you know but you also can get them as a bundle so once you get those though you'll now have access to your downloads here and from here you can go ahead and download the plugins and then upload them to your website so i already have these installed and we're now ready to go so let's take a look at what has changed so if i go to uh if i go here to appearance and we take a look at cadence we'll notice that we now have an elements sub tab here this is going to be for hooked elements but just let's take a look at the whole of everything that has now been added in the pro version so remember in the free version you get access to these top six pieces of functionality right here in the pro add-ons you now get access to an additional nine so we have header add-ons and additional elements that we can add to the header we have conditional headers which will allow us to display different headers on different pages conditionally we have ultimate menu which will allow for mega menus header for the scripts hooked elements where we can add any content anywhere into the site conditionally we have woocommerce add-ons so we have new options added into the customizer for woocommerce stores infinite scroll local gravatars and archive custom page title backgrounds if we take a look at cadence blocks and see what has changed initially we had access to all the stuff that you see up here so everything here all these 12 add-ons up to testimonials now we also have an additional seven add-ons seven blocks that have been added so we have image overlay split content post grid carousel modal product carousel video pop-up and portfolio grade carousel so we're gonna be demonstrating some of these uh in this tutorial so that you can see the benefit of using some of these in your work so let's go ahead and take a look at the first thing that's been added which is in the header of the website so if i'm going to go back to the website here and we click on the customizer all right and now we're going to select our header so if you look at this header we've got a search icon a logo we have our navigation and then a button so nothing unique here but if you look to the left you will notice that there is an increase in the number of available items that we can use so we've gone from seven initial items in the free version to over 19 in the pro version and some of those include having multiple dividers so we have the divider one two and three and then you also have multiple navigation so we have up to four different navigations that we can add to the website now we have an ability to add a cart we have the ability to add an account icon to the header and so on and so forth so a lot of good things that we can add but the one thing that i really wanted to show you guys is how to add conditional headers so right now this is our standard header for the website so every page has this header um attached to it if we go back and we now look at the headers here and we scroll all the way down you'll now see there's an additional option here called conditional header if you click on that you'll see that you now have the ability to add multiple different headers and these can be assigned to different pages conditionally and we're going to do one right now so let's go ahead and get started so i'm going to leave this alone so we have this extra header that comes here by default and you can configure this and use this if you want we're not going to do that right now what we're going to do is we're going to create one ourselves and we want to we're just going to start from basic so we want something blank extra header too and then what we need to do so that we can see what that header looks like is we need to tell it to please preview this header so i'm going to go over here where it says default and i'm going to select extra header 2 i'm going to confirm and save the settings so that it knows to start featuring that header that i selected and now it's doing it so you can see right here saying preview header extra header two so you can see here the header has changed to these elements right here okay so now when i make changes in the header header section right here those changes will only reflect for this particular header while our main header is still saved so the first thing that i want to do obviously is i want to change this information so we're going to create a header for our member dashboard right so that when they're in when they're logged in and they go to the member dashboard they have a different header than what the public sees so obviously the first thing that i would want is i would definitely want to keep our logo in place so i'm going to come here and grab the logo okay and then i'm going to configure this to remove the text and then we're going to make this logo a little bit smaller okay the next thing that we're going to do now that we got our logo in place is we're going to add some additional items here that are only specific to members so i'm going to get rid of this primary navigation i don't want that and we're going to go back to our header and what i want to do is i want to add an account icon right so sometimes if you're logged in you'll want to have an account link right there so from here we can go ahead and select the account which is this one right here i'm going to put this all the way to the right then i'm going to grab a divider and put right next to it to create some separation there we go right you can see everything happening up here as we're doing this okay so now we have a divider now we have an account and then the other thing that i want is i want a button so i'm going to grab a button there we go and now a button is in place and let's go ahead and style this button make it a little bit nicer so i'm going to go ahead and select this and we'll go to design and uh we're going to have border radius let's increase the body radius to 4 and let's change some of the colors here actually let's make it make this a smaller button well actually let's just do a custom button here okay great so now i want the top to be 12 and the left and right will be 24 bottom will be 12. all right that looks good actually let's reduce this to 10. make it a little bit slimmer all right that looks great then the next thing i want to do is i want to change these colors so i want the text color to be the dark green and i want the hover color to also be dark green and when i want the background color to be a lighter green like that and the background color to be even lighter once you hover over it so let's actually just grab an even lighter color like like so something like that all right great so now when we hover over this yeah and that pops out like that looks really good all right our button is actually done so now we have the button now we need to change it from saying button we don't want this to say button so i'm going to go ahead and configure the button here we're going to change this to let's say my courses all right so let's say the accent they're accessing their courses through there all right great so this now looks good now the next thing i'm going to do here is i want to configure this uh i want to configure this row so it's lit i think it's a little bit too wide so i'm going to select the cog right here just for this main row and we're going to reduce the size here all the way until everything's touching all right then the next thing that i want to do is i'm going to go back and under the conditional header option i'm sorry we're already on this specific header so under the sticky header option i'm going to turn the sticky part to on now when you enable sticky header in a conditional header it only applies to this header it will not apply to the other one and i'll demonstrate that in a minute here so i'm going to come here i'm going to say yes only on the main row i only want the main row to be sticky so that's sticky right there that looks really good the next thing that i want to do is i want to change some aspects of the design so i'm going to come here sticky header background i want that background to be a little bit darker so let's make that a little bit darker see if that color looks good let's go with something more beige there we go okay so this is going to be our sticky there you can see that once i start scrolling it starts to change color right that's our sticky header background okay let's actually get much yeah that's better more in tune okay so now we're done with our sticky header uh let's go ahead and take a look and see if this works now the one thing that we do want to do though is want to go back to our conditional header all right and we want to come here under this extra header too we want to set up the conditions for this okay so the display settings where do we want this to be displayed well we want this to show on page on on a page right so we're going to come here and we're going to look for single pages then we want to select the page that we want to use we're going to select individually and then you click on select items and the page we are actually looking for is the dashboard page i'm going to click select all right and now that rule has now been added and there are additional rules you can add you can even add it by you know who is going to be visible to logged out users logged in users and then the different roles that you have available so there's a lot of great things that you can do over here but for now we just want it only available on this one page so now that we are completely done with that i'm going to go ahead and publish this all right and then i'm now going to go back to conditional headers and because this is only applying to one page what i want to do here is when i go back here go to header i'm going to go back to conditional header under the preview current previewing i'm going to change that back to default and then i'm going to confirm and exit preview mode and what that's going to do is going to reset everything back to how it was before so now my main header is back on my home page and i can now go ahead and exit the customizer so let's go ahead and test and see if our new header actually applied to the page that we wanted it to apply to so if i go ahead and scroll through here i can see okay my header is behaving normally but if i go to the dashboard page right here i notice that now i have this new header right here right and if i start to scroll you can see now the header is adapting the behavior that i have applied to it which is that it has a color to show that it's a it's a header and then it has the button and the account link okay and this is how custom headers works so you basically can create a custom header for any page that you want now what if as you're looking at this you say well i can see the the header but i really can't it really is not showing very well it's kind of floating in space by itself and maybe we should add a background color or maybe a border to it or something like that very easy to do just go back to your customizer go to header scroll down click on conditional header we're gonna change the preview to extra header two confirm and save this way we can see it ourselves so that's the header right there okay and then the next thing we want to do is we want to impact the design of that header so you just click on design and right here where we have header background we're going to change that color to a color that we want once we're done publish now if i go back to the dashboard page you can now see that that header is now clearly separated from the content page here and as we scroll the header stays in place allowing for the call to action to still be in place there and that is how you work with the conditional headers from the cadence pro theme add-on so now let's go ahead and take a look at the additional capabilities that we've gotten with the cadence blocks pro we're going to be specifically looking at the modal pop-up and hooked elements okay so let's go back to the dashboard and under appearance here where it says cadence we're going to select elements when you click on this you'll be given an option to create a new element and now element is basically something that you can hook on to anywhere on your website so it could be anything that you want it could be a section of a page it could be a pop-up it could just be a sidebar it could be a header it could be a footer it could be anything in this case for this specific tutorial i want to demonstrate the benefit of having the cadence blocks pro and some of the add-on blocks that it has and using that in combination with the elements feature of the cadence pro theme add-on so let's go ahead and click on add new and here we're going to set up our element type of element we're going to be using this and this one is a fixed element and all that means is whatever element we create will be fixed to a specific part of the website okay you can create a default element which where you can put it anywhere that you want or you can use html editor to create something really custom for this specific tutorial in this example we're gonna do fixed okay great and we're gonna call uh this one food pop-up so we're gonna create a food pop-up or recipe pop-up how about that next we're gonna start adding some elements so the first thing is i'm going to open up my [Music] blocks here and the block that i'm looking for is the modal block modal will allow us to create a pop-up and this is only available in the cadence blocks pro so click on that and you have this model here i'm going to go ahead and close this so we have more space okay so this is what's going to pop up when somebody clicks this button so this is just the default setup now we're going to configure this to look exactly the way that we want it to look so the first thing that i want to do is i want to start modifying this link and so if you look here over to the right we're just going to go from top to bottom modifying everything so let's go to the link settings and i want this link color that means the color of the text in here and let's change this text to uh let's change to get this now so this link color i want to change that color to be a dark green i want the link background to be a light green and i want the link border color to be dark green okay and then on hover right now the link background is set to be a dark color so right now this looks fine i'm going to leave this exactly the way that it is i'm going to go back here and i'm going to add a icon to it so let's scroll down and there's an opportunity to add an icon i want the icon on the left and select icon and we'll just pick any icon we want so i like to do the gift icon so now we've set up our link and the link looks great the next thing that we're going to do is we're going to set up the content of the modal all right so in here where it says create awesome you can actually add any block that you want in this case we're going to add a row block we're going to add an image and we're going to add a subscribe form so i'm going to go ahead and click the forward slash and i'm going to select the row layout i want a two column row layout and now that i've added that those two columns i want one side of the column to be smaller than the other so you can actually bring your mouse cursor right here and you can drag this to be however you want so i want forty percent on one side sixty percent on the other side over here on the right i'm gonna eliminate the column gutter so the spacing between the the column i'm gonna go ahead and eliminate that and then i'm also going to give it a background color so i'm going to come here background color and i want something light then the other thing that i want to do i'm going to come here to the padding and margin i'm going to set the top to zero the right will be zero the bottom will also be zero and the left will be zero okay and then the next thing that we need to do now is need to add our elements to it our blocks to it so i'm gonna go ahead and select the left side and we want an image to go in there now you could use the image you could use an image block that comes by default in gutenberg but i actually want to use the advanced gallery the advanced gallery from cadence blocks is a way for you to create a gallery or portfolio in this case i only want to have one image it actually works very well for adding just a singular image so i'm going to go to my media library i already know the image that i want which is image of a book right here i'm going to insert that in there you notice how the image comes in really small well i'm going to fix that by changing the column settings so the default column settings is 3 we're going to change that to one and now our image is right here okay the next thing i'm going to do now is i'm now going to add a form so i'm going to come actually before we do that right here you see this gutter i'm going to turn that to zero because i want this image to be fully flush against my row on the second column i'm going to go ahead and add a form i'm going to add a cadence form so i'm going to click on the message one i don't need that and then now i'm going to configure this form to look the way that i want it to look so first i'm going to select the name field i don't want a label there i want it to just have placeholder that says enter your name and then we'll do the same thing for the email field and then for the submit button we want to say get access now and i'm going to go to button styles here and i'm gonna make this a small button and i want it to be full width and then we're gonna go back to our back to our field styles here so over here you have field styles and i also want this to be small for both fields okay so now that looks good now we need a little bit of text to tell people what to do so i'm going to click here select advanced heading i want the paragraph version of that and here we're going to say get instant access to 10 power food recipes okay we're going to scroll that up so it's above the form and let's close some of the gap here so i'm going to go into the topography settings i want to set a size of 18 and a line height of 26 actually 24. there we go all right it looks good now i noticed that there's a little bit of spacing here so i'm gonna go ahead and configure the spacing so if you select this select this text this heading on the right here we're looking for spacing settings and on the bottom margin we're going to make this 8 pixels so it's not so big all right so now everything looks good now this is a little bit too close together so what i want to do is i'm going to select the row here and you can always open this up in the layout tree that way you're selecting the right thing i'm going to select the section that contains the form and now that i've selected that i'm going to come over here to the right and under the customization i'm going to add padding of 20 pixels across the board all right so then the next thing that i want to do is i also want every everything to align in the center so i'm going to select the row the total row and i'm going to align it to the middle so that it's in the middle of the image okay so so far this looks good now if you notice our modal has this background here i want to get rid of that background i just want my own uh row modal to show up so i'm gonna select that we're gonna go to select make sure you selected the modal again you can open up the layout tree and select model that way and then on the right here we're going to go to modal box styling and here we have model background color i'm going to select it it's already set to white which is fine just leave it as white and then we're going to make it transparent all right so now we can see now that that background is now gone and then now we need to style our close button here okay so i'm gonna close out of this we're going to go to the model close button and then from here we're going to set a color to white and then we're going to set the background to green and then on the hover it would be the color will be green and the background will be light green now there's one other thing that i want to do here um on this is i'm going to go to my model again and under box styling there's a 30 pixel padding going on here so i'm going to change that to zero so let's see how this looks so far all right before we do that let's go ahead and set up how this is going to appear on our website the way you do that is you come over here to this little page setting here that normally is the page settings for pages but we're on the elements now so this is our element settings we're going to select that and what i want to do is i want to place this fix to the bottom after scroll no space below the footer okay so i'm going to select that then the next thing i want to select is on the width i want it to be fixed i'm going to leave this at 300 but the position is going to be to the left so that means that this button here will be to the left of the page and let's give it some space so about 20 pixels from the edge of the screen to the horizontally and 20 pixels from the bottom of the screen okay the display settings i want this to show up on every on every page so display settings basically saying where do you want this to show up i want to show i want to show it on the entire site you can also set up user settings device settings and you can even set up a time for when it does show and when it goes away but we'll leave all that alone all right the next thing that i need to do is because i set this up as fixed bottom after scroll with no space below the footer it's actually going to be outside of our website and that could create some problems because now it's outside of everything so what we want to do is we want to go back to the modal here and i'm right here it says advanced i want to load this content after the footer that way it loads my form correctly all right so so far everything here looks looks really good i'm going to go ahead and publish this all right and now let's go ahead and view the element so what i'm going to do is i'm going to open up the page the site on a new page here and when we refresh our page we're not seeing our form so let's see we probably did something wrong ah i see what happened scroll down distance to appear so whatev when we when we left this at 300 this actually won't show up until we start to scroll and then it shows up well we don't want that what we want is we want it to show up right away so i'm going to change this 300 here to 0. update and then we're now going to go to back to the page refresh and now it shows up right away it's right here okay so that way no matter when we scroll it so notice it's fixed to the bottom because of that setting that we have all right now when i click on this here's our model right it shows up really nice now let's make this a little bit nicer okay so i'm going to go back we're going to select the section that is that contains the image here and i want to make sure that i'm selecting the actual section so i'm going to open up my layout tree i'm gonna grab the section here and over here to the right we're going to turn on the box shadow so you can now see there's a subtle shadow going around it right here and then the other thing that i'm going to do is over here on the margin settings i'm going to add a negative margin of 25 pixels on the top and a negative margin of 25 pixels on the bottom and then i'm going to go ahead and update this and now when we go back to the page we're going to refresh and we're going to click on our our button so when you click on this now you can now see that the image now overlaps the form uh column a little bit and it looks it gives it that sort of that 3d feel and then we now have our form here on the right where people can go ahead and fill out their information and subscribe to getting the 10 power food recipes and with that that will conclude our deep dive into the cadence theme pro add-on and also cadence blocks pro i hope you guys really enjoyed the tutorial and i hope you learned a lot of really good tips here on how to do great things on your websites hey if you're not subscribed to the channel please subscribe to the channel and if you like this video smash that like button if you have a comment or question feel free to leave that in the comments section of this video i promise you that i do read them and i do respond if there's anything that you want to know how to do using the cadence theme or cadence blocks let me know and maybe i will make a tutorial on that all right thank you very much for watching this i really appreciate you those i've watched those who have watched and i look forward to seeing you in the next video [Music]

Channel: CliftonWP

Views: 3,854

Keywords: hero section gutenberg, gutenberg blocks tutorial, kadence blocks tutorial, wordpress tutorial, wordpress tutorial for beginners, cliftonwp, kadence theme, kadence blocks, wordpress tutorial for beginners 2021, gutenberg wordpress, kadence pro tutorial, kadence blocks pro, how to build wordpress website, conditional header wordpress, wordpress popup plugin, kadence elements, kadence pop up, kadence starter templates plugin, kadence starter templates

Id: jqcw3kJdv5Q

Length: 125min 56sec (7556 seconds)

Published: Sun Sep 19 2021