William: 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. Alright, in order to get started,
obviously I need to have a blog post to use as a template, so I just
went ahead and I created this one.

And it looks something like
this, just another blog post. And all I've done is I've
put in a featured image. I put in some paragraph text, a couple of
headers, and then a couple of subheaders. So this is an H2 and these
are H3 headers down here.

Nothing exciting. You can't understand it
because it's lorem 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 posts. Archive. And let me show you what that is.

So I'll scroll down to
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 going to click on this post so
I can see an example of a single post. Alright, so I've got my own little
ideas about how I want my blog

posts 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? 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 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 Kadence, and these colors will vary depending upon what

your color palette 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 aligns. 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.

If 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. Alright, the next section down, Title Elements. 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 on. And what that does is it gives you this little thing right here. Basically the breadcrumbs are the trail from Home to Uncategorized,

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 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, uh,
the bots that are crawling.

Do you want to have
your categories showing? So I've got Uncategorized
here and 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 like the breadcrumbs, 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,
but this is not an H1. And this title is kind of different from
this post title layout or show post title. 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 choose
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 one. And then you can also add
this thing where it says buy. So you turn that off. Or you could change it. So instead of just buy, you could say

something like that,
written by William Beem. 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
people 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 updated, and what
I will do is I'm going to turn off showing the date, or I could just
click this one, show it only if

different from the published date. Here's what I'm going to recommend. It's a good idea to update
your posts every so often, maybe like every three 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, uh, 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 turn off
show date and show last published date. And I don't necessarily
put a label on here. You could, I mean, we could turn
this off and just say updated 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. You want to show categories. Let's turn 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 toggle this only if it has at least one comment. And the idea is that it shows some engagement 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'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 excerpt 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 excerpt is part of WordPress. If you're looking and building it, you're going to put in

your categories, your tags. There's also a block down there where you can type in a brief excerpt that explains what the post is about. And you can show that if you update this over here. 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 one, 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 left or right.

And then there are a couple of different sidebars. So you can choose, is it going to be sidebar 1 or sidebar 2? 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 the Kadence default, it'll have this light blue. If you change 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 palettes, and I'll link to that above. Alright, 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, we don't really have any padding there, and it just comes right up against 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 now, 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. There's a little bit
of a difference here where this text is overlaying at 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 things change here.

If we go up behind, then we've
got this Featured Image Width. We don't see that with Above or Below,
so let's click behind it, 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 Caption. 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 16 by 9 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 may be 3x2 or 4x3. You can do square if you want to do a 1x1. But you need to make your 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 16x9
that's why I've chosen it here so that way it displays correctly. If I had it, you know, with a
default of 3x2 or 4x3, then

it just wouldn't look right. I mean, 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 information. Instead of categories, it'll show you
the tags that you've put in there. The tags are something that
you can make up for a post. In 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 text or not? Do you want to have an archived 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. Do you want to show related posts? If I turn this on, you'll see down here similar posts.

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. 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, again, it depends on if you're worried about people seeing that this post is too old. So that gives 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, uh, what's the one that I, Montserrat.

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 gonna 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 hadn't noticed before that
you could actually get them into negative. That'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. And you can also transform it. So, do you want it to be all caps, do you
want it to be 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 palette colors. So I'm going to go ahead and choose
this kind of, uh, indigo color here. I could make it this lighter color.

But we've got different colors 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 can choose,
we've got our color over here that we can choose for our post title font. We can do the same thing for
categories, which we've turned off so it's not going to show here. And the 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'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 color. 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 excerpt, 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 boxed or unboxed. So, you can see what it looks like, you can change it depending upon the device type, and then you can change the post background and then the content background.

So, when we had it on boxed, 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 it's very flexible.

All of this is included with the free version of the Kadence Theme and it really gives you an option to change up the way that your post looks. And I think it's really very handy. So that's one of the reasons why I like the Kadence 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 Kadence 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 to publish it, do you want
to save it as a draft, or do you want to

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 decide, 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 type 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 Kadence Theme and other topics for folks who
are trying to manage and maintain

their own WordPress site for their business. Thank you. I'll see you in the next video.

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

Suburbia Press

워드프레스 테마 사용자 정의 소개

워드프레스 테마를 사용하면 데스크톱과 모바일용 글, 글 및 페이지 표시를 사용자 정의할 수 있습니다.

이 동영상에서는 케이던스 테마의 단일 게시물 레이아웃을 사용자 정의하는 방법을 중점적으로 설명합니다.

데모를 위해 추천 이미지, 단락, 헤더 및 하위 헤더가 포함된 샘플 블로그 게시물이 사용됩니다.

단일 포스트 레이아웃 옵션 액세스 및 이해

사용자 정의는 모양 > 사용자 정의 > 글 페이지 레이아웃 > 단일 글 레이아웃을 통해 액세스할 수 있습니다.

페이지, 아카이브(블로그 글) 및 단일 글에 대해 다양한 레이아웃 옵션이 있습니다.

단일 글 레이아웃에는 사용자 정의할 수 있는 '일반' 및 '디자인' 탭이 있습니다.

일반 탭 설정: 제목, 레이아웃 및 메타데이터

글 제목을 표시/숨기는 옵션(SEO에 중요 - H1 헤더).

제목 레이아웃 옵션: 기본 케이던스 스타일, 카테고리, 제목 및 메타데이터가 포함된 대안.

제목 요소: 이동 경로(홈에서 카테고리로 이동하여 글 제목으로 이동하는 경로), 카테고리 및 메타데이터 옵션입니다.

메타데이터 옵션: 작성자, 작성자 이미지, 작성자 링크, 날짜, 시간 및 사용자 지정 레이블.

카테고리, 댓글(댓글 수 포함 또는 제외) 및 발췌문을 표시하는 옵션입니다.

기본 포스트 레이아웃 및 디자인 선택

기본 글 레이아웃 옵션: 좁음, 일반, 전폭, 사이드바 포함 또는 미포함.

콘텐츠 스타일: 박스형(배경색 포함) 또는 박스형 해제(모두 흰색).

세로 패딩 옵션: 상단, 하단 또는 둘 다.

추천 이미지 옵션: 위치(제목 위, 뒤 또는 아래), 너비, 캡션 및 종횡비.

글 태그, 작성자 상자(정렬, 작성자 정보 및 아카이브 링크 포함), 글 탐색, 관련 글 및 댓글(날짜 포함 또는 제외)을 표시하는 옵션입니다.

디자인 탭: 글꼴, 색상 및 스타일 사용자 지정

제목, 카테고리, 이동 경로, 메타데이터, 발췌문의 글꼴, 색상, 스타일을 사용자 지정하세요.

Google 글꼴을 선택하고 글꼴 굵기, 크기, 줄 높이, 글자 간격 및 텍스트 변환을 조정하는 옵션입니다.

제목, 카테고리, 이동 경로 및 메타데이터의 색상을 사용자 지정할 수 있습니다.

사이트 배경 및 콘텐츠 배경 사용자 지정(박스형/비박스형).

옵션, 선택 사항 및 토글을 사용하여 코드 없이 사용자 지정할 수 있습니다.

게시 옵션: 게시, 초안으로 저장, 예약.

댓글에 질문을 남기도록 권장합니다.