Kadence Theme Tutorial: Step-by-Step Guide to Designing Your Blog Post Layout

one of the reasons you get a WordPress theme is to customize the way you display your articles your posts your pages to the people who are visiting your site you're going to do that for both your desktop viewers and your mobile device viewers in this little video we're going to take a look at the Cadence theme and how you can customize your single post layout all right in order to get started obviously I need to have a blog post to use as a template so I just go went ahead and I created this one

and it looks something like this just another blog post and all I've done is I put in a featured image I've put in some paragraph text a couple of headers and then a couple of subhe headers so this is an H2 and these are H3 headers down here nothing exciting you can't understand it because it's lauram ipsum text but what if we want to change the way this looks well that's where we come over to our appearance and customize in this section over here where it says post Pages layout we're going to

click on that and I want to look at single post layout now there's different options up here a page layout would be obviously for WordPress Pages an archive would be for your blog post archive and let me show you what that is so I'll scroll down the bottom real quick I'll get to where it says blog and this is the archive it's like the number of posts that you have and how they're going to look we're not going to go into that right now what I want to do is go into the single post layout and I'm g

oing to click on this post so I can see an example of a single post all right so I've got my own little ideas about how I want my blog post to look but what I want to do is show you a couple things there's a general Tab and then there is a design tab so the design we'll get into in just a bit let's start off with the general Tab and first things do you want to show your post title or not if we click this and you'll see that the title goes away I don't recommend you do that unless you're willing

to put in an H1 title up there of your own so so when you turn this off this is your H1 title which is very important for your search engine optimization if you turn it off that's fine but you need to put something in there for your H1 for SEO blog posts should go from H1 and there should only be one of those and that's going to be your title and then it'll go down to H2 and then maybe it'll go down to H3 and so on and then back up to H2 so in other words you want to have this kind of stair step

between your different types of headers but your H1 Header by default is your blog post title so if you turn that off keep in mind you don't have an H1 you'll need to put that out there the next part down is where is the title layout going to be so is it going to be like this and it gives you this is kind of the default setting that you get from Cadence and these colors will vary depending upon what your color pallet is but it's taking up a lot of space and then you've got your image here which

we can change and Vary I kind of prefer this option instead where that way we've got our category showing here the title and then a little bit of metadata and we can change all of those and we can change how that title align so if you don't want it there you can align it over there you can align it in the center and then as I mentioned there's different views we want to look on mobile maybe we want this to go a different way so we can take a look at how these containers look on mobile or take a

look on tablet or take a look on desktop you're probably going to want to make certain that you look at all of these for your various settings all right the next section down title element so you'll see there is an eyeball here and that is whether this is on or off or basically visible or not so there's a couple things so there's an eyeball and then there's a drop-down so let's turn the eyeball [Music] on and what that does is it gives you this little thing right here basically the breadcrumbs

are the trail from home to uncategorize which is the category I have selected that's the default WordPress category and then the title of your post and then you can just say show the post title in breadcrumbs or not so if we turn that off you still get this path from home and and the category but you don't necessarily see the title so you've got an option there in most cases I like to leave the breadcrumbs on it's helpful for the visitor it's also helpful for the Bots that are crawling do you wa

nt to have your categories showing so I've got uncategorized here and then uncategorized there that may be more than you want so you can turn this off and then it's just like I would look at it almost as an option do you want to have the breadcrumbs showing over here or do you want to have the categories showing over there I'd like the bread CR so I'm going to turn off the category for this particular example and then again title is it viewable or not it's taken it away we've got it over here bu

t this is not an H1 and this title is kind of different from this poal post tile layout or show post tile What's Happening Here is if you turn this off or you turn this off you don't have your H1 so there's two places where you can choose where to show that title or not so I recommend you leave that on the metadata is this part right here so let me drop this down and then you have options you can choose a divider so instead of that dot maybe you want to have slashes or dashes and you can just ch

oose a few different things so I'm going to go back over here to the dot by default do I want to show the author that's my name right there William the author link so if I click on this someone could click on that and they can see all the posts that this author wrote you want to show the author image if there is one available and that way I've got a little photograph of myself there and then you can change the size of that so by default it was 25 we can bring this all the way up to 125 which in

my taste would probably be too big so let's go ahead and just get rid of that [Music] one and then you can also add this thing where it says buy so you can turn that off or you could change it so instead of just buy you could say something like that written by William beam it's really up to you as to what you want to do there but I think buy is sufficient for me do you want to show the date that you wrote the post there are reasons why some people want a date there there are other reasons why pe

ople don't want them there maybe they will be Evergreen and if this date is there and it starts to look old after a couple of years that might be something you don't want to show so you can also show the time that it was posted now something else you can do with the date I'm going to turn the time off here is this date label and you might want to change this instead of posted on that date maybe you want to say last updated and you notice down here we've got last updated so let's show last update

d and what I will do is I'm going to turn off showing the date or I could just click this one to show it only if different from the publish date here's what I'm going to recommend it's a good idea to update your post every so often maybe like every 3 months you want to go back and tweak something and that way it stays fresh I would not necessarily want to show the original date and the last updated post I might show the last updated only when it was um overtaking what the original post date was

but you've got the options so there's the show date that's the publish date and then the last updated date what I like to do for myself is to turn off show date and show last publish date and I don't necessarily put a label on here you could I mean we could turn this off and just say update on it's really up to you as to what you want to do but that way you've got the most current date of when you've updated or posted this article to be displayed over here do you want to show categories let's tu

rn this on this is yet another one where we talked about the category over here now you can have a single Post in multiple categories so it's not just that it came with a breadcrumbs this way that's only showing one if this post were in three or four different categories it would list all of them over here and then there's also the option to show comments and right now it shows zero comments or you can talk about this only if it has at least one comment and the idea is that it shows some engagem

ent here so I kind of like this idea of showing the comments if there is a comment and that way people are thinking oh I I'm kind of curious now what did somebody say about this post so that's something that you can also do now this item for showing the excert depends on if you created one when you wrote the post so I'm not going to see one here because I didn't create one an excert is part of Wordpress if you're looking and building it you're going to put in your categories your tags there's al

so a block down there where you can type in a brief excert that explains what the post is about and you can show that if you update this over here so so I don't lose this I'm going to go ahead and click publish now none of this matters until you click publish let's come down here to the default post layout so this is where we're going to start changing up how this looks a little bit more so you'll see that we have a few different items and then my featured image gets a lot larger whereas this on

e I'm using up kind of a more narrow space in the blog post nothing right or wrong about these it really depends on what you do this one over here is going to be full width and it's really going to take up a lot of the page so I don't like the way that it comes all the way across over here for the text I may not mind it so much depending on the image that's there my preference is for this narrow view or the normal view whichever one you like you also have an option to put in a sidebar either lef

t or right and then there are a couple of different sidebars so you can choose is it going to be sidebar one or sidebar two what you put in those sidebars may vary from one kind of post to another but this is going to be your default style let's get rid of the sidebar for right now I'm going to go back up here to this narrow layout and click publish so this content style is boxed versus unboxed now what that means if you can see there's a little gray background if I click this box I hope you can

see it there is a very light blue kind of background to the page but the article is on white unboxed just means everything is white this background is going to vary depending upon your theme color so if you go with a Cadence default it'll have this light blue if you've changed this and put in a different color for that background then that's what's going to show up here so you can really theme your display based upon that color palette and I've got another video about how to create color palett

es and I'll link to that above all right so this part with vertical padding right now I've got it disabled if I enable it basically all it's doing is putting some space between my header you can see where that line is and right here this space is the padding if you turn that off it just gets rid of that and there's also bottom padding so you can say top only or bottom only so top we've got padding there but if we scroll down down we don't really have any pading there and it just comes right up a

gainst where this menu is if I say bottom only you can see how it raised that up just a little bit but I'm going to say disable and just turn that off the next option is if you want to show a featured image and that is what this image is here so your featured image honestly I think that's a good idea to display it it gives people a little bit of information at a glance of what this should be about and then you've got a few different options here so is it going to be above behind or below right n

ow I've got it below this title if I create above you'll see how the featured image comes up first and then there's the title and the metadata and so forth behind is another view and you see the featured image comes up kind of behind it and there's a little bit of a difference here where this text is overlaying the bottom of it if you have a featured image with information that you want to show at the bottom I don't think this is a good choice but this is something that you can decide what works

for you in my case I like the featured image to be below so I want my title up here but notice that some of things change here if we go with behind then we've get this featured image width we don't see that with above or below so let's click behind and now you can stretch this full width but it kind of cuts off a little bit so that may be something you want to keep in mind if you decide to go with that so I'm going to click on below we'll go back this next option over here show featured image c

aption in other words if you have a caption for an image and it describes what's in the image you can toggle this on and it will show you the caption I don't have a caption with this photo so it's not showing anything there your featured image ratio I use a 16x9 aspect ratio for my blog post different people use different things you can inherit from whatever the settings are on your theme by default it might be 3x two or 4x3 you can do square if you want to do a 1 by one but you need to make you

r image work with or create it and upload it with the aspect ratio that you want to use so like I said since I use 16 by9 that's why I've chosen it here so that way it displays correctly if I had it you know with default of 3x two or 4x3 then it just wouldn't look right I it's cutting off some of the text so make sure that you set your featured image ratio now do you want to show post tags tags are a little bit of metadata that describe what the post is about and it will give you some informatio

n instead of categories it'll show you the tags you put in there the tags are something that you can make up for a post this case it could be about blogging it could be about uh default text whatever the tag is that you put in there it's really up to your imagination do you want to show those tags with your post so you've got a yes or no toggle here if you need an author box and I recommend you turn this on again it's good for search engine optimization you can just toggle this and then it will

create an author box let's scroll down towards the bottom there is my author box we can have it normal or centered and this is just a different way so that text that you come in here if you go into WordPress under users you find the user that wrote the post and there's a box there where you can put in some descriptive information about the author so you've got a choice is it going to be over here on this side showing their name and then the the text or not do you want to have an archive link so

in other words if I click on this link it'll show me other articles that this author wrote do you want to show post navigation that's this part down here so since this was the most recent post that I put in previous would get me to the post that was done just before this you want to show related posts I turn this on you'll see down here similar post now since this is a demo site I only have the default hello world in this post but you could have a few of them and you'll see that you can have two

three or four related posts over here I'm going to turn that off right now do you want to show comments and comment date now I don't have any comments here but I can turn off show comments and there's nothing there but you know what search engines also like comments so I typically like to leave those on and do you want to show the comment date I would if I were putting some comments in here but it again it depends on if you're worried about people are seeing that this post is too old so that gi

ves you kind of a rundown of everything that is in the general tab so there's a lot of optimization we can do there if we come over to design now we've got options to change our fonts for the title the category colors and it's going to take what your theme defaults are but we can change this so let's say that we want to change what we have over here so there's a little preview text of what it will look like and then you can change these various aspects of what it's going to look like so let's uh

say that we want to inherit a specific font and we're going to go with there's a lot of Google fonts down here so I'm going to go with u what's the one that like monserat so you can see how it just changed over there but also you can see how it changes down here and maybe I want that to be bold so let's choose a 700 weight so I just changed that and then now I've got this size how big do I want this font to be and then you can change these sizes depending upon which device it's going to look at

but also notice you can change the line height that looks for the mobile view that looks kind of like quite a big gap let's bring this down I'm just going to say one and that kind of brings it there you might do 1.1 if you want to have a little bit of space so you've got various options as to how this is going to look you can change your letter spacing which is going to show us the space between these letters and now this I had noticed before that you could actually get them into a negative tha

t's uh that's kind of fun but let's go ahead and click reset because I don't really think I did anything valuable there you can also transform it so do you want it to be AB do you want to be all caps all lowercase you got a few options there and you can also change it let's say that we wanted uh this title to be one of our inherited colors or one of our pallet colors so I'm going to go ahead and choose this kind of indigo color here I could make it this lighter color but we've got different colo

rs over here so this one is kind of a darker Indigo I'll just choose this one for right now just for the purpose of demonstration so now we've changed this to a different font different size different color and different weight so that's a 700 weight if we want to get rid of that we can just go ahead and select this and it'll reset everything you can do the same sort of thing for your category colors notice over here we could choose we've got our color over here that we can choose for our post t

ile font we can do the same thing for categories which we've turned off so it's not going to show here and same thing with the fonts the breadcrumbs you can see over here with that color and you've got an initial color and a hover so let's say that we did it with this for the initial color and this for the hover color and it it's hard to see it's a little bit difficult so let's go back over here and maybe we'll make this green so it's green then we hover over these things and it changes the colo

r now this one is not going to change because we're on that page but it will change if we go to uncategorized or if we go to home and again you can change all the fonts you can do the same thing for the metadata you can change the colors you can change the font and if you have an excert the same thing happens again now for the site background and the content background this kind of goes back to what we were showing whether it was boed or unboxed so you can see what it looks like you can change i

t depending upon the device type and then you can change the post background and then the content background so when we had it on booxed the post background would be this color on the side the content background would be what's behind the text so you can really get down and change up how your post looks I think is very flexible all of this is included with the free version of the Cadence theme and it really gives you an option to change up the way that your post looks and I think it's really ver

y handy so that's one of the reasons why I like the Cadence theme you can do all of this without writing a single bit of code you don't have to understand CSS or scripts or anything like that it's really just a matter of options choices and toggles and that's one of the reasons I like the Cadence theme all you have to do is make sure you hit publish now we've got this little icon over here and it'll give you a choice you know do you want publish it you want to save it as a draft or do you want t

o schedule when this is going to happen the schedule is very handy let's say that you want to make some changes that show up for a particular time and that could be for a holiday it could be for a sales event that you're having so you might want to discard these changes if you decid you know what I just don't like them right now we're just going to go ahead and close that we're going to click publish and those are the settings that we've got you can always go back out here to check the other typ

e of layouts we'll do that in another video and then you can get back to all of your customizer items or just click X to be done with it all right thank you so much for watching I hope this was helpful to you if there's anything I said that seemed to be confusing please leave me a question in the comments below and I'll be doing more videos on Cadence theme and other topics for folks who are trying to manage and maintain their own WordPress site for business thank you I'll see you in the next vi

deo