Custom Blog Post Layout with GenerateBlocks

in this video i'm going to be showing you how you can create a custom blog post layout using generatepress pro with the elements feature and generate blocks pro with all the dynamic content options this is going to be a real quick walkthrough to get you up and running creating your own custom blog post layouts in no time so with that let's go ahead and dive in as you can see this default post layout is not really the look i'm going for so what we're going to do in this video is create a custom blog post layout using generatepress and the elements feature inside the pro version and generate blocks with their dynamic content options so we're going to hop back here into the dashboard and under appearance we'll go to elements and we're going to create a new element so we'll click the add new element button and we're going to choose the block as the element type we'll go ahead and hit create and we'll have to give this a name we'll just call this blog post layout something simple now the element type here we're going to want to change this to a content template and then we have to choose the location we want this content template to be displayed in so in our case we're going to use this in post all post so you could go down here and drill down to individual post or post within a category but for the purpose of this we'll just stick with all posts now i usually go in here and put all users as well but you could have this different for logged in users logged out users etc so we can go ahead and hit publish on this now just out of habit to make sure everything's saved and now we get to start designing our blog post layout so what i'll do here first is drop in a container this would be the hero section of our blog post so let's give this a little bit of space maybe we'll say 60 pixels of padding on the top 24 on the right and left and just so we can see it here let's give it a really light gray background color all right that's perfect for the hero section background now we will probably want to drop in the post title the categories and the featured image in here so what i'll do here is we'll start with the post title so i'm just going to go and grab a headline block from generate blocks i'm going to change this to an h1 we'll center it here for this design and now we need to bring in the dynamic content which is the post title so i'm going to go ahead and click here under dynamic options and choose title so now this is going to bring in the post title of the post dynamically depending on which post you're looking at so that works perfectly for me we won't worry too much about styling everything in here one thing else we might want to add in this section is the categories so i'm going to drop in another headline block change this to a paragraph tag center it and then i'm going to use the dynamic options again and i'm going to check i'm going to pick a list of terms so the term i want to use in this case is category so you can change your terms separated here you can add something before like i could say category with a colon and then have the category show up in there totally up to you on that i'll go ahead and delete that out of here for this option and i think i actually want to stick this above the title here now the next thing we're going to want to do is bring in the post featured image now there is a block to just bring in the featured image from the post but i don't like that there's not a lot of control over the layout of the image the size of it rounded corners all those kinds of things so typically what i'll do is just drop in a container block another generate blocks block and this way i have all the control the styling and control options to style out this image exactly how i want so one quirk of this is if i go in here to the dynamic button now and go to put in the background image from the featured image it doesn't allow that you have to have a fallback image in there for it to get started so we'll just grab something random out of the media library for now and that'll give us something to look at while we're styling this as well so here we can decide how tall we want it to be let's say we only want it to be i don't know we'll go 400 pixels tall and let's say we want to round the corners we'll go 12 pixel radius on there maybe eight i don't know why i'm being picky okay we'll go with the eight pixel radius and now we can go in here and change this to the featured image so let's go ahead and save our work where we're at now we'll pull open this dummy blog post i have and look at it now that we've done these changes so now you can see we have our light gray background we have our list of our categories we have the title of the post and we have the featured image that we've brought in so all that is working perfectly so let's jump back in here and now we need the content for our post so i'm going to add another uh container block in here and on this one we're going to have to give it some padding as well maybe we'll say 60 pixels we'll keep the same thing we did in the top one but i don't want this content to be the whole width of the page so i'm going to go in here and change the container width to something smaller we'll say 800 pixels now to bring in all the content from the post we'll add a new block here and we'll choose the dynamic content block in here we'll choose post content we also have post excerpt term description author description but for this case we're going to use post content now this just puts some placeholder in here but if we update this and go to the front end and refresh we'll see that it's now showing all the content from our post now there's a couple other things you might want to put in here as well so we'll go ahead and add another headline block here i'm going to change this to a paragraph and i'm actually going to move it above my content here and we're going to choose dynamic content and we're going to do post author name so now here in this spot it's going to show the author's name and we'll just change this to a different color just to style it a bit update that refresh it on the front end and we see here now it has the author's name of course we could change in the wordpress settings how we want that to display right now it's just set to first name so it looks kind of funky um but we could go in here and go to spacing and change this to inline width so it's not a block level element it's inline we could duplicate it which i do with ctrl shift d and in this one instead of showing the author name we could do the post date so i'm going to go back to this author and add a little space on the right hand side of it just to bring it away from the date a little bit so there we go we can update that go to the front end and refresh and you can see we have the author name and the date it was published so just like that we took the default post layout and created a completely custom layout you'll see in this this dummy install i have right here i've created several different post layouts so here's one i stole from the nfl.com website kind of the layout they have we have this one here which has kind of two columns here in the hero section as well as this one here which is a little bit more of a traditional blog post so really you can do just about anything you want to with the layout of your blog post you just need to know how to work with those elements inside generate press pro so you can set up the dynamic conditions of where you want all these things to show if you have any questions i'd be more than happy to help just reach out to me or drop a comment down below and we'll see you in the next one if you're interested in learning more about generate blocks and generate press i recently held a live one-hour zoom call where i rebuilt an entire page using generate blocks and generate press with a live audience they were able to ask questions during the call and we were able to build almost an entire page and answer a lot of questions go off on a few tangents and learn more about how you can build websites using blocks so go ahead and click the link in the description and check out that video next

Channel: The Admin Bar

Views: 14,300

Keywords: WordPress, GenerateBlocks, GeneratePress, Blog Post, Website Design

Id: HNBsebU5uQw

Length: 7min 58sec (478 seconds)

Published: Tue Jan 25 2022