How to Build Really Fast Landing Pages With Gutenberg + Kadence Blocks

what's up guys in this video i'm going to be teaching you how to build really fast landing pages using gutenberg and the cadence blocks plug-in which is my favorite gutenberg extension plug-in that i use on all of my websites i'm also going to be teaching you all of the best design concepts to use so that your pages look amazing on desktop tablet and mobile for all screen sizes and when you use gutenberg to build your pages your pages are going to be so much faster than using a third-party page builder such as elementor which makes it a lot easier to pass google's core web vitals and if you pass google's core wide vitals you'll get a crucial ranking boost from google and so depending on the keywords that your landing page is ranking for you could be bringing in hundreds if not thousands of extra viewers per month on your website and so this is going to be amazing and i'm going to teach you all of the tips and tricks that i use to build landing pages of my own for those of you that don't know me my name is jake from startblogging101.com let's get right into it and really quick before i begin i would suggest watching this video on youtube it's called building pages with gutenberg and it's directly on the cadence wp youtube channel and it was made by adam preiser from wpcrafter and in it he gives a number of fantastic settings and different concepts for designing pages in gutenberg and these are a lot of the same concepts and settings that i use to build my own pages as well so i definitely want to give them a shout out for this video because it's also fantastic so here i am on a brand new website it's a new local website that i just spun up and the very first thing i'm going to do is put the cadence theme on the website because it integrates perfectly with cadence blocks and so i'm going to go to appearance themes i'm going to click add new here and up here i'm going to search cadence and here cadence is right here you can just hit the install button and once it's installed you can just hit the activate button to get it activated and now we have the cadence theme up on the website and you can also install the cadence starter templates plugin here which i like doing this especially on a brand new website because then you'll be able to see a number of all the gutenberg and elementor starter templates that the cadence team has and you can scroll through here and see all of them and you they all have a number of pages that you can put on your website as well and i will actually get into this a little later but i just want to show you that i'm installing the cadence starter templates plug-in because i will be using it to show some sample things a little later so now that i have the cadence theme and the cadence starter templates plug-in on my website the next thing i'm going to do is install the free cadence blocks plug-in so i'm going to go to plugins here click add new and i'm gonna search for cadence blocks and once it comes up here you can see there's a plugin called gutenberg blocks by cadence blacks with that gives you page builder features so i'm going to install this like i said this is the free version and almost everything that i'm going to be showing you is going to be available in the free version but i'm going to go ahead and actually activate the pro version of both the cadence theme so cadence theme pro and i'm also going to activate cadence blocks pro just so that i'm not restricted when i go to show different wire framing pieces and different blocks and all of the possibilities that you can do with cadence blocks and the cadence theme so now that cadence blocks is installed on my website i'm just going to activate the plugin here so here's a page showing all the blocks that you get for free and i'll go into showing you more of these a little later but let's jump right into a home page here and start building out a landing page and show you how you can build really fast pages using gutenberg and cadence blocks so i just created this blank brand new home page which is my front page for my website and i'm going to open this up here and once you're in here this is the gutenberg editor and i know a lot of people when they hear gutenberg there is a plug-in out there called gutenberg but you don't actually want that on your production website and all the gutenberg plug-in is is it's just the all of the cutting edge features that they're working on with gutenberg it usually has a ton of bugs and that's why it's rated poorly in the wordpress repo for all of the plugins but once you're in here this is just using the gutenberg editor and i just wanted to clarify that because that does confuse some people sometimes the very first thing that i want to show you if you're used to other page builders third-party page builders such as elementor or beaver builder or whatever it might be is cadence allows you to go into these page settings here and these page settings can be set for every single page and i'm actually going to tweak some of these to get more of a consistent layout on our page to start with that would be very reminiscent of elementor and so you can see here that you can have the transparent header you have a page title i'm actually going to disable the page title here's your page layout so if you want sidebars or full width or whatever it might be i'm going to choose full width here and you can already see that the text and everything jump to the edge of the screen here and then the content style i'm going to do unboxed the content vertical padding i'm going to disable that and for show featured image i'm also going to disable that and so now that i've showed you guys those page settings i just want to compare this really quick to an elementor page so if i come here here is a page with cadence and elementor added and if you just come down here to the lower left there's a settings cog wheel and if you open that these are your page settings for this page and so a lot of that stuff is very much the same you know you have your title here you have the status you have a featured image that you can show you can hide the title and you have your page layout so if you were using something like elementor full width for your page layout this would be very similar to what we have set in cadence blocks and so coming back here the very next thing i want to focus on is these cadence blocks controls which shows up after you install cadence blocks and within here this is your global color palette and i'm not going to get into the global color palette for this video but these are the nine colors that you can set as your global color palette in cadence within the customizer and it's really really nice because now this integrates perfectly with cadence blocks and you can choose all of your global colors directly when you're editing your blacks and if you ever go to change colors on your website you can simply change your global color palette and it will change all of the linked areas throughout your entire site so that you have updates within seconds rather than going through and manually choosing colors for every single spot so that's super nice but i want to focus on the block default section here and these black defaults give you all of the default settings for many of the cadence blocks that you have available to you and the main one i want to focus on here is the roll layout and the roll layout is the absolute core and foundation of building pages in gutenberg with cadence blocks it is your container block that ends up being a section and then you later drill down which i'll go into shortly here but if we open this up here are different role layout controls that you can tweak and change the defaults if you want but if i come down here to structure settings there's one setting and it's this content max width inherit from theme that i would suggest you turn that on and what that will do is it will take your max width that you have set in your cadence customizer i believe the default is around 1290 pixels and it'll make sure that your content doesn't get wider than 1290 pixels and what that will do is you'll have a nice uniform line all the way down as you're building your page out and so i would definitely suggest turning that on and then you can just save this here and that will make sure that every row layout that we add from here on out will have that setting toggled now i'm going to show you how to create a hero section within the gutenberg editor here with cadence blocks so the very first thing you can do is you can either add a block by clicking this plus here otherwise i like to do a forward slash and type the block that i want so i'm going to type row and that row layout once again this is going to be the foundation for building every single section on your page and so if i choose row layout here that is the top level container that holds all of your columns and content and so the very next thing that you have to choose then is how many columns do you want and for a hero section i'm just going to mimic something that i have similar to on my home page for start blogging 101 and i'm just gonna do a simple two column layout here and once that's added the nice thing is you can sit here and take this and tweak the percentages to be whatever you'd like or you can click this and have these be fluid if you want even more granular control but i'm just going to set this to 50 50 to start so i'm going to add a paragraph that says column one here and then i'm going to add a paragraph that says column two here all right now that we have two columns added and we have content in each of those columns i'm gonna come here and i'm gonna choose this settings wheel and what this settings wheel does is it shows you all of the block settings that you have for the chosen block so you can see that i have options for the paragraph right now but you might be wondering hey how do i get back to my column settings to tweak the spacing or the padding or whatever or even the colors or how do i get back to my role layout for the actual top level container and there's two ways to do that here and so the very first way that i use pretty often is to look down here in the lower left you can see that i'm currently on the paragraph but you can see that before that is a section which is my column and before that is the role layout which is the top level container so if i just click on relay out here you can see that the whole container is now highlighted and you can see that my block settings changed to be the role layout block settings and so now i have all of these settings available to tweak the roll layout and if i open the structure settings here you can see that this content max with inherit from theme option is already toggled because we set that as a default before so that's really really nice and the first thing i'm going to do is then just change the background color of this to be a dark background and then we'll give it some light text so i'm just going to open up the background settings you can set a simple background color you can add a slider image for different images that will slide through the section or you can even add an entire video for a background for your section if you want but i'm just going to choose a background color here i'm going to open this up and i'm going to choose this dark color from my global color palette that i got from cadence and i'm going to choose this and then you can also see that the text needs to be lighter now so i'm going to scroll down and open the text color settings and i'm going to set the text color to be white and so just like that i have a dark background with white text and so say you're in here and you're adding more content right and you notice hey i'm back at the paragraph again but i want to go back and i want to tweak the column or the row layout and as i showed you you can do that with the lower left breadcrumb here but even better i like using this even more now with wordpress 5.8 the list view got a massive upgrade and it's super nice to show you how your page is laid out and that's this button right here which is list view and if you open this you'll get a nice left sidebar and it'll show you all of the blocks that make up your page and you can hover over each of these and you can see i'm hovered over the second section here which is the second column or even the row layout and it'll have all of that highlighted so then i can just easily come in here and i can choose whichever one of these that i want and all of the appropriate settings are then going to show in the right hand side for the block settings now this is extremely similar to elementor if i come back here and i'm just going to come down on the lower left here and open up the navigator and with this navigator this shows you the same exact thing that the gutenberg list view is now showing you so if i just want to look at this section here and i click here you can see that the sections highlighted and if i expand this you can see there's a column and if i click on that that's now outlined here and then within that column if you open this there's intersections and if i click on that all that is is just another row layout in cadence blocks and here is an intersection down here and that's another roll layout and if i open this there's two more columns so here's column one here's column two and within this intersection here's column one here's column two so it's the exact same thing it's very very easy to understand once you can just see the differences side by side between a third party page builder like elementor and gutenberg so i'm just gonna head back to the gutenberg editor now and let's start making this section look a lot more like my hero section for my website to just show you a few more of the settings and the options available to you so i'm going to take this and i'm actually going to turn it into an advanced heading and i'm going to make this say what it says on my website and then on the right hand side i'm just going to take this and i'm just going to delete this and add an image instead so i'll do a slash image and we're going to add an image here and i already added this image to the website and i resized it to the dimensions that it needs to be already but i'm just going to add the image of myself here and so that's there and i'm going to come up here and i'm going to align the center and so now let's make this headline a little more prominent so i'm going to take this and i'm going to come into the typography settings and i'm going to take the weight and push it up to extra bold here i'm going to take the size and choose ems and let's do 2.8 here that's looking good and i'm also going to take the roll layout so i want to get back to the roll layout and make my left column a little bit wider than the right column so i'm going to choose the roll layout here i'm going to grab this and make it 55 45. that looks great it's on three nice lines and at this point i want to stress a really important point when you are building in the gutenberg editor and using cadence blocks you should always get in the habit of previewing your page to see what the live page looks like on the front end and the reason for that is because the gutenberg editor likes to add extra spacing and things so it adds extra spacing because it's expecting a new block and a lot of times even though that spacing is shown in the editor it's not actually going to show on the live page so i'm going to go to preview here and preview this in a new tab and here we have it so far it's looking good we have the headline up here we will have to make sure that that's vertically aligned and then you have my image here and we'll take care of this extra spacing here shortly but i'm going to come back and we're just going to vertically align this headline so back here in the editor i'm going to choose the headline and i'm wondering how can i vertically align this headline well i need to go back up to the section and so i can just hover over the section here you can see the section highlighted on the left hand side there i'm going to choose that and then there's an option here to vertically align and i'm just going to choose align middle and that will put that perfectly in the middle that's looking awesome and then the other thing is we did have some extra space below my image and i want my image to be right up against the bottom of the section and the reason for that is because the roll layout the container itself contains 25 pixels of padding on the top and bottom as a default and that's actually usually a very good thing because you do want some space in between the content and the next section but for this very first hero section i don't want space on the bottom of my image so that it looks snug against the bottom so i'm going to go to the role layout here i'm going to open up the padding and margin and you can see that there's 25 pixels on the top and bottom i'm just gonna come in here and simply input zero and that will take away that extra space even though there's extra space shown in the editor keep in mind that that isn't always going to show in the actual live page so let's just go back and preview this now and there you have it my image is right against the bottom of the section and the headline here is perfectly aligned in the middle and so that is looking awesome and this is a fantastic beginning hero section for any website out there and so building landing pages is as simple as just creating section after section after section within your landing page in every single section within gutenberg and cadence blocks all it is is a top level role layout and that's your overall container that's going to contain everything and then it's a section in there and the section will automatically get added as you add a column so if you add a single column or two columns or three columns the appropriate amount of sections are going to be added and then you just have to add all your items in there you just have to add your headlines or your text or form or a slider or an image whatever it might be and so let's quickly build out a second section here with a lighter background to give a little bit of contrast and transition into our next section so let's click down here i'm going to do a slash and type row again i'm going to add a row layout for this one i'll do another two column section and i'm going to then take the roll layout and just add a really light blue background to give it just a little bit of color so i'm going to come into the background settings and choose background color and i'm going to choose this option right here so as you can see that adds just a really faint blue there and i'm just going to take the text and add it from my home page here to speed things up a little bit and then i'm also going to take my form from my main page and add it here as well i'm not going to show creating that just for times sake but i just want to show you what it will look like with text on the left and a form on the right so now i've added text on the left column and i've added a form in the right column and i'm just going to preview this quick and here we have the hero section up here and you could even add buttons if you want that's very simple using the advanced button from cadence and then coming down here i like how this looks so far i think there could be a little more space in between the two columns here and a little more space up here so let's fix that super quick so the very first thing i'm going to do is go to the roll layout the overall container again so that's this whole section that i'm building i'm going to choose that and for the column gutter that's the amount of padding in between the two columns here i'm going to up that a little bit let's go to wider 60 pixels and that gave a little more space there so that's looking good and then for the padding and margin i'm actually going to up this i'm going to double this for the roll layout here to 50 so let's go 50 on the top and 50 on the bottom and let's preview this quick and there we go we have more space separating the first section from the second section and then we also have more space in between the words in the form here so that's looking awesome and i already have the second section built within a matter of a few minutes for the third section let's really quick make a nice gradient like this using our global color palette to just add a little more contrast to the page and draw the visitors eyes to this piece here so we'll come back to the editor here i'm going to click here again and this time i'll just click the plus button and we'll choose a row layout here this is just going to be a single column now and if i open up the list view again you can see that since i chose a single column there is only a single section here and so i have the option for the row layout or the section itself and i'm going to stay at the roll layout level and i'm going to go to the background overlay settings this time and choose a gradient and for the first color i'm going to choose my very first accent color through my global color palette and the second color i'm going to choose my second accent color which is my hover color for the second accent here and i'm going to take the gradient angle and do 135 then i'm also going to take the overlay opacity and bump it all the way up to 100 so it's fully solid here and then i'm just going to add a quick headline and the text here that i'll just copy over so now that i have the text copied over i have an advanced heading here and then just a simple paragraph there are a couple tweaks i want to make so i want to make the text white so that you can see it and then i want to make the max width of this paragraph and the whole row layout smaller so that it looks more compact and centered within the page so i'm going to come back up to the roll layout here and change the text color and change the max width here as well so let's choose that we'll go to text color settings we'll make the text color white and that's going to turn the headline and the text white and then we also want to take this and go to the structure settings and even though we have this content max with inherit from theme chosen i actually want to override this and make it even smaller than the 1290 pixels because it's just way too wide for just a simple couple sentences so i'm going to actually turn that off and then we can type in our custom content max width so let's just do around 600 pixels and you can see that that condenses that really nicely and if i preview this here and scroll down you can see that it's nice and condensed here and we can even add a button here real quick to just have a nice call to action so let's do that fast so i'll come in here i'll enter down i'll do a slash and i'll type advanced because i want an advanced button which is the cadence button and gives you a lot more options than just the regular gutenberg button so i'm going to choose that and then i'm going to go through and just choose some settings here quick so i've started to set some settings here i'm going to come in here and write subscribe and i'm going to change the hover settings here okay so i've set some hover settings i'm going to come back to normal and scroll down and the border radius i'm going to change to 30 so that makes it nice and rounded and then i also want an icon let's look up youtube here and we'll choose this button here and we can make the icon size whatever we want so i'm going to go into ems here and let's make this 1.2 to bump it up a little and then i can also do the icon location of left and so that'll bump it there and i also want to come in and let's make that bold like that all right and let's preview this and see how it looks all right so the section is completed it says are you a visual learner it has a nice little description and then you have a call to action button and you can obviously go into the button settings and change the url for the button to go wherever you want it to go so there we have it we have three sections that we built in a very short amount of time we have a hero section with a headline and an image we have some copy here that gets people to sign up for a free email course and there's a nice section here with a gradient and it gets people to go to your youtube channel and subscribe or whatever you wanted to do so now that i've showed you how to build those three sections from scratch the next thing i'm going to talk about is mobile responsiveness because you're probably wondering how do i make these sections look good on different screen sizes such as tablet and mobile and the nice thing is that cadence blocks gives you a ton of customization options to be able to tweak these settings for different screen sizes so when you go in to make your landing pages mobile friendly just know that cadence blocks has you covered by using all of these design concepts that we've been using throughout the video and so you're going to be making most of your tweaks at the top level row layout and so if i want to tweak how this section looks here for mobile i'm going to go up to the top level roll layout now click on this here and then over in the black settings you can see that i'm currently on desktop right now which is the default but then there's an option for tablet size and if i click on that the editor resizes to a tablet screen and then there's also options for mobile so if i click the mobile icon that will then shrink down to be a mobile phone and i can already tell that this headline here is going to be way too big for a mobile phone and so the nice thing is that i can come in here and i can tweak the size of this headline only for mobile or for tablet or for desktop so i'm just going to click on this headline here and then over in the block settings you can see there's a font size section and it's very small but you can see that there is a desktop icon there's a tablet icon and there's a mobile icon and the mobile icon is already chosen because i'm previewing mobile right now and you can also do some of these in the toolbar up here if you prefer that it's maybe a little quicker but i like using the black settings over here and so for this i'm only going to specify a different size for mobile and so i had a 2.8 ms for desktop i'm going to bump that down to 1.5 here and you can see that's smaller and that's looking a lot better on mobile and i also want this text to be centered here only on mobile and you can see up here for text alignment i'm still on the mobile icon because i'm viewing mobile and i can just click the align text center here and what that's going to do is it's going to align the text center for mobile here but then if i come back to desktop by just clicking one of these buttons you can see it is still left aligned as i want on desktop and then if i come back to mobile it's centered here and so that's looking awesome and so the next thing we're going to do is preview this to see how this is going to look on an actual device and i'm going to teach you guys a little trick of mine that i've been using with the gutenberg editor for a while now admittedly the gutenberg editor has not been the best at showing what these pages are going to look like on various screen sizes and it's actually getting better with each release and cadence blocks has done some things to make the mobile editing experience a lot better but what i'm going to do is i'm actually going to go up to preview here and you can see that mobile is chosen because we are currently viewing mobile but what i'm going to do is i'm going to switch this back to desktop and i'll show you guys why in a second here and then i'm just going to preview this in a new tab just like we've been doing throughout the entire video and so now that this is loaded up and i'm on desktop one thing you could do is you could actually resize your screen and so you could resize this to be more of a tablet size or you could resize it to be smaller to be a mobile size but what i find even easier is especially if you're using the chrome browser if you just press f12 on either windows or mac it's going to open up your chrome developer tools here and i'm going to hide myself for a second here and if you go to the bottom left here you can see that there's this icon that says toggle device toolbar and i'm going to click this here and what this does is it shows you what your page is going to look like on various devices and if you use this drop down here you can see i'm currently on the moto g4 but you can come in here and you can see what this looks like on an ipad pro so this is an ipad pro in portrait mode you could come in here and you could see what this looks like on an iphone x and all sorts of different devices here and so i'm actually just going to go back to the moto g4 and this is really nice now because you can actually view all different types of dimensions for different screen sizes and it's going to show you a very accurate representation of what it's going to look like whereas using some other methods before with the gutenberg editor was not always accurate and then when you'd go to publish your page and look at it on an actual device it would not look the way that you thought it would and so using this method is my preferred method and what i would recommend you to use if you want to see what your landing pages are going to look like on a bunch of device resolutions so now that i've showed you all of the settings that cadence blocks gives you to make your landing pages mobile friendly the next piece i want to show you are pre-designed sections from the cadence team that allow you to build landing pages so much faster and that is this design library button right here and so if i open this up the very first tab here is sections and these are all pre-designed sections from the cadence team that are fully featured with images and everything and you can scroll through all of these here and you can add any of these sections to your page by simply clicking it and it will instantly be imported into your page and you can see that some of these sections have the pro tag on them and that's why i installed cadence blocks pro from before because that gives me access to all of these pro sections as well and so just as an example say i want to add this pricing table here i'm going to click this and you can see that the pricing table gets added to the page instantly and so that's super nice and then that's just right after my third section here but you could just build an entire page from scratch with these and then if i go back into the design library here the second tab here is called starter packs and these are going to be the same thing you saw by installing the cadence starter templates plugin so these are their starter templates here and what's really nice is you can go into any of these and you can import in a specific page from one of these starter templates so say you want a home page that is similar to this or you want a menu page or an about us or an faq page you can go to any of these starter packs here and you're able to just import in any of these specific pages so if you like one of these and it's similar to what you're looking at you could import in this page and then you could tweak it to be your branding and everything that you need to make it your own and then the very last tab that i want to show you which is new from the cadence team and it's absolutely amazing is this wireframe tab and in this wireframe tab each of these are very similar to the sections tab but they're different in the sense that the sections tab are all pre-designed and they have actual images in there and things like that but the wider framing are just placeholders and so this is awesome if you need to just mock up a landing page for a client or say you just need to mock up a page for yourself you can come in here and each of these sections is just going to show you what it's going to look like and so let's just choose this for example you can see this got added here and it has two columns for each of these sections here and what's really really cool is that it inherits your global color palette from your website and so you can see it's already using the colors that i have as i showed you here in the global color palette for the cadence black controls and so this is automatically going to match your branding right off the bat and then you can just come in here and you could swap out the images and all of the content here to say whatever you want and within no time at all you're going to have a complete section for your landing page and so this makes building landing pages so much faster and they're just going to expand on this even more so this is an awesome feature from cadence blocks and that's the wireframing blocks and so that's all there is to it to create fast landing pages in gutenberg and cadence blocks and when you create landing pages with gutenberg and cadence blocks your pages are going to be so much faster than using a third party page builder the html output that it outputs to build the page is so much cleaner you have way less scripts and css running in the background and you're almost certainly going to pass google's core web vitals and what that will do is give your pages a ranking boost and so if you can jump up on google and have your landing pages ranking on google within the first page or even in the first three positions you're going to see a massive influx of traffic depending on the keywords that your page is ranking for and so i absolutely love building pages with gutenberg and cadence blocks it is so easy once you understand all of the general concepts behind how page builders work in the first place and once you get a grasp of it it's really not that hard i promise you just give it a shot and with full site editing maturing over time from wordpress we're gonna see this become easier and easier with each of the major updates and so i'm super excited for the future of wordpress and full site editing and i hope that you are too now go out there and build some fast landing pages and if you are interested in learning more about wordpress site speed and how to pass google's core web vitals then go to startblogging101.com scroll down and fill out this form that says speed up my site and what this is is it's a completely free seven day email course called the seven days to wordpress site speed mastery and in it i go through all of my speed optimization tips that i use on all of my websites to pass google's core web vitals and i'll go over my recommended hosting i'll talk more about the cadence theme and all of the features that it offers i'll talk about how you can ditch your third-party page builder and start using gutenberg to build fast landing pages and blog posts i then go into how to configure the best caching plugins out there and then as a cherry on top i'll teach you how to speed up your fonts along with the images and videos on your website so definitely go in and sign up it's completely free and i think your website is going to get a massive speed boost by going through it and that's all i have thank you guys so much again for watching i truly appreciate it go out there and build some fast landing pages stay safe and take care [Music] you

Channel: StartBlogging101 - WordPress Without Page Builders

Views: 1,439

Keywords:

Id: Tu17qpQTabA

Length: 32min 57sec (1977 seconds)

Published: Sat Oct 23 2021