Setting up GeneratePress with GenerateBlocks

hey everyone this is Mike I want to show you really quick how I use elements to set up layouts so I can use generate press with generate blocks I use generate blocks on my pages now and usually on the home page here oh and I'll show you how I use the elements to set up the various page headers for the pages that don't use the blocks and it might give you a better idea of how you can set up all your customizer settings and your generate blocks container padding so that everything lines up on desktop and mobile and it all looks the same alright so I have this new site that I'm starting service and I figured I kind of stripped down certain parts of it and I figured this is a good place to stop and make this video because it kind of shows the way I use blocks and elements without going into too much detail so this is the home page and you'll see here this the home page header is done in generate blocks basically this is one big generate blocks container that's merged to the top and sitting behind the your logo and your navigation and then the Styles page is using a regular header element where this is the h1 using the post title tag and then the blog is the same and then I created another header element for all my blog post that also has the the meta information and then what I did is I built the actual blog post using blocks that way I can get you know the columns and have a little more control over the design alright so first I'll jump into the customizer and show you how I set everything up so that everything looks even as far as alignment and different devices so my container width is set the default 1200 two separating space it doesn't apply because I'm using one container and the difference basically if you've used this as separate containers treats the content on the page like if I clicked on the blog the one container padding is basically controlling everything around the entire page content and the separate containers is gonna cause stuff in the sidebar to be separate as far as what's over here in the body so if you notice now I can control the separating space and now it's affecting because it's set to separate containers but I'll go back to one container I found most the time it worked because I usually work on white backgrounds most of the time separate containers might be good if you're using a colored background with different colored sections around your content and you can kind of create more of like a grid type look I have the container set to text for that same reason because this text here I want it to align with everything on the left edge of the site and let me jump to a page where I could show that so you'll see here and I'll grab you've probably heard me I always use these Mac stickies just because they help you to quickly look at see us up a line and they stay on top of your your browser which is cool and you can see through so I've got everything aligned here if I were to set this to the box instead of text basically the content here whatever your padding is it's going to push it in so if I had a color background it would I could have it aligned to this edge and then the text would be inset a little bit so if you choose box you'll notice that let me just jump you refresh that you notice that everything comes in a little bit that's because now there's a little bit of space around this photo and this and if I did have a background color you would see it so basically your body color would show around the image in this text but since I don't and it's just white then I'm gonna set it back to two texts all right so my content padding I've set to a hundred pixels on the top and bottom and 20 on the sides and I keep that the same for mobile as well just because I like to have a kind of a consistent padding and white space throughout the site now because I have this set to 120 120 I'm going to do the same thing basically on any of the pages I use the blocks on so if I went back to the styles page which is built with the blocks yeah my internet just live there we go all right click Edit Page now you'll notice I'm using the header element so that basically this is being controlled through elements and then everything with the blocks basically starts with this here so if I go here get rid of that and I click on that outermost container controlling all this page content and I click on the spacing I have it set to 120 120 as well and this is so that any pages I build with generate blocks are gonna basically be the titles gonna sit in the same spot and it's going to have the same spacing as the pages that are built with generate press and then tablet and mobile I leave empty and basically so that these values will trickle down and I'll have consistent padding on both block pages and regular generate press pages and so if I go back to the customizer okay so if these notice here I have the home page which is a generate blocks container merged to the top and then on the other pages I have a regular generate press header as far as spacing when I go into my elements this is where I'm going to show you how to kind of how you can kind of align everything no matter what you're using okay so here's my home page element and all this is is basically a home page header that I've set as the front page location only so this is only going to affect the home page and what this does by adding this blank comment here it's basically going to that blank comment along with merging the header and displaying it only on the front page is allowing me to use generate blocks as my hero that goes all the way to the top of the browser so it's gonna go all the way to the top sit behind the navigation sit behind your logo this is what you would kind of also want to do if you're building a landing page and you just wanted to build the whole thing with generate blocks you could just do this it's kind of what you used to do with page builders if you wanted to use a page builder for your entire page you would set it up this way as well so you need this empty HTML comment here or it won't work so you could write whatever you want in there so it doesn't matter so I've got that set the front page I've got the header set to merge and like I said that allows me to build out my hero section in generate blocks now when I go back to my elements that's gonna be my home header I have two more headers I have a header that's basically going to be global for every page on the site except for that front page and except for the post because I built a separate page header here for just post so basically there's three page headers there's the home page which is basically making it empty and then the blog posts have their own header and basically that's going to be the same as the page headers but I also added the amount of information here and you'll notice my page headers and blog posts headers I have this CSS class and all that is is I made this gradient use The Container gradient in generate blocks and I wanted the same gradient on all the pages so I just recreated it with CSS and assigned it that class so that all the other headers have it as well and then the site header is set to merge and then this one is for the blog post so it sets a post all post all right so if you look here as far as spacing to get all these headers up behind the navigation you have to merge or are you going to end up with the page header sitting below your header where your navigational logo are now I have this set to 110 on both devices and the way I got that 110 is I basically took the top and bottom header padding along with the height of my primary navigation and that equals 110 so if I'm in the layout section I click on the header I have 40 pixels on top and bottom which is here and here and that's 80 and then when I go back to my primary navigation on desktop it's set to 30 so basically I add that up and I get 110 and that's how you figure out your offset side header height so I've got that set and it's identical on the blog post header and on the global page headers which is just the post title same exact set up I have the same padding I have the same 110 and the reason I set this padding to 60 pixels on top and that's on both mobile and desktop it's because that 110 pixels here and then this top padding of 60 makes 170 okay when I go back to the site basically when I click on this first hero section my top padding is 170 okay so I I built this originally and then what I wanted was I wanted not only the hero but all the pages I learned all the headlines to basically start or sit at the same spot so you'll notice the blog post the page headers my hero section all the text is kind of right there so that's how I ended up with 170 because this has 170 pixels and then the two headers have 110 off-site plus the 60 pixel padding so you can mess with that as far as getting everything to align between any pages you've built the header with generate blocks and then also the generate press header elements that's how you kind of get everything to line and that'll basically go across through mobile as well because I left those container padding settings at 100 pixels on desktop and mobile so if you go through the site you're going to notice that all the headlines basically are going to sit in the same spot and that's how you can kind of get consistent padding using between the generate press pages and the generate blocks pages alright so those are my three headers that I set up the home page the post and then the global pages and you'll notice I set the global pages to be everywhere which is entire site - the front page and - the post because post has its own header and the front page is using the generate blocks right here the home page header now you'll notice I have two layout elements this first one is going to simply be my blog post with so the only thing I'm setting is I'm setting the content to 800 pixels wide and I'm displaying it on all the post and the reason I did that is I like the articles to be basically 800 pixels wide because if you've ever seen an article that's the full width it's hard to read so I kind of narrow it down and I set that there now this article this page header here this is my header element for the post that has the meta and then the actual article is done using blocks so when I click to the outermost container actually on this one I showed this is a good example of when you wouldn't use a container basically my first block is going to be a headline so I'm not wrapping these and if you saw the other video I did I usually wrap everything in a container to have more control over the top and bottom padding but a post is probably one of the scenarios where I realized I you don't need it because you're always gonna start off your post usually with a headline and you can control obviously the top padding on that and then because I'm using that 800 pixel element I don't have to worry about controlling the width using a container block so basically I'm controlling the width with an element and then I'm just adding I'm just adding blocks so here's a header block paragraph and then I added a grid here to get these two photos and the reason I added a grid is because obviously I needed two columns and the reason I put the grid in a container which is here is so that I could add some top and bottom padding above and below the photos because when I went from paragraph to grid the photos were kind of close to what's above and below it so by putting the grid in a container it'll it allows you to go ahead and add a little bit of padding on the top and bottom to give a little breathing room between your photos and the text so then I have another generator box header I have a Guttenberg paragraph and then another image down here so building out your post in generate blocks is it's actually a lot better a lot easier than using the classic editor or anything like that because obviously you can do columns and you can get a lot more if you've used the Gutenberg for your post they have that spacer block which is how you get some so you don't have to use the spacer block anymore if you ever want to have use space just wrap whatever you want to have some space in a container and then you can just add some top and bottom padding that way all right so the other that's my blog posts with element the other layout element is basically for every page that I'm going to use generate blocks on because when you're using generate blocks usually you're gonna want to add like a full width row or a full-width background photo and so basically I assign that to all of the pages so if I click on full width I don't have any of these set except I'm changing this to full width that allows me to run a photo the full width of the browser like if I had a background photo across a row or even just a color like a full width color and the display rules are going to be basically all the pages and if you're if you're not super familiar with elements all pages doesn't mean every page on your site all pages means actual pages so everything on your site would be entire site like when I use the entire site earlier that would be every every page on your site pages post archives page all pages is basically just keep in mind it's just your pages so as I'm building pages with generate blocks that every page I build would basically get this full width layout and then I also added the front page because that's separate from pages they treat the front page as its own kind of entity so I've got that set so basically on the front page and then any page I add it's going to be full width which is going to allow me to basically like this hero so here's the homepage this is using that layout element and you'll notice I have the photo the full width of the browser so that's how you're going to get that so this home page is one container up here controlling everything in this little hero section I've got a headline it's using the the highlight option to where I can get that like one colored word and then it's got another headline below that and then I've got the button which is using both buttons in that button container and obviously you can make them different and then below that I have another container here so basically this is my separate container and what I did is I added a little bit of negative margin to this container to pull it up on top of that first container and then I just rounded the corners a little bit 12 pixels on the top left and right and then I use CSS to give it a little drop shadow around the container just to give it a little instead of it just going from white to white right here you get a little bit of shadow there so it kind of gives it a little more better overlay effect and then obviously I've got a little two column grid here for this content that I added and I'm gonna continue building out this page with some other containers and and blocks that I have saved to build out the the rest of this little services demo so that basically I hope that helped I think once you alright say you were building a website that was gigantic you know hundred pages that's where I would highly suggest that you're gonna have a global page header because if you don't set a global page header you're gonna have to create a generate blocks header on every page of your site so if you think about like archives like if you were on the blog and you clicked on like here like my name and it went to my archive of all the articles I've written if you don't have a global element header this is just gonna basically be blank so you got to think of it that way you got to think about the pages that you really don't ever touch like archives you know even categories like here's another archive page if you didn't set up a global header all of those pages that you don't really think about even like your 404 page it's not going to have a header so that's why I didn't tire site so basically any page that I don't manually want to affect the header it'll apply this header to that page so I don't have to worry about it all the archive page is everything and that's why I'm excluding the post and the front page all right so I hope that gave you a better idea of how you can kind of use elements to to get your little kind of get like a template going to get generated press and generate blocks pages especially responsive wise to get everything looking cohesive that way if you go to one page and then you go to like a page built with generate blocks you know the header is not up here or this one's looks completely different that's how I kind of get everything to look like it was all done using the you know the same method all right if you have any questions feel free ask below and if you want to subscribe go for it I'm going to start doing a bunch of kind of short on the fly generate clock generate clocks videos like how to build stuff super specific kind of short videos like I might just build like a pricing table on the fly or I might build you know a landing page on the fly stuff like that just so you can kind of see a little bit more how I generate blocks works live kind of in a production environment alright thanks for watching and have a great day

Channel: Mike Oliver Design

Views: 16,871

Keywords: GeneratePress, GenerateBlocks, Gutenberg, GeneratePress Tutorials, Gutenberg Tutorials, WordPress Blocks, Block Editor, GeneratePress 2020, Generate Blocks

Id: w6bkxoPu5_c

Length: 21min 40sec (1300 seconds)

Published: Tue Feb 25 2020