‫Welcome back, my dear students.
‫And now in this lecture of the course, we will be designing the blog post pages.
‫So this is going to be applied to all of the pages that will show your blog post.
‫So since home page currently shows the blog post, these are actually the categories pages.
‫Uh, these pages are a bit different.
‫All right.
‫However, this page is a bit different.
‫And the reason for that is because the home page is going to show all of the posts.
‫And if you go down, it's going to show the pagination and it's going to basically contain all of the
‫post.
‫All right.
‫Similarly, if we go into the categories and if you select like any of the category, then based on
‫this category all of the post will be shown, but the category is actually selected.
‫Right.
‫So now what we are going to be doing is that we are going to be designing, uh, both of the pages,
‫like uh, the home page, the categories and the destination, like all of the pages, that shows the
‫blog post.
‫So how are we going to do that?
‫For that, you need to click on the customize.
‫Now, once you are actually in the customizer, you can see that we've got this post types and we've
‫got this blog post inside the post types.
‫So what you can do you can click on that.
‫And we are in the blog post.
‫Now first of all we have got this blog title.
‫If you click on yes, there's going to be a home page title over here, but we do not want it, so we
‫will hide it from here.
‫Now remember the categories and the destinations for these pages.
‫We want to show the title.
‫However, for the other pages that contains blog posts, we do not want to show the title and this is
‫going to be applied over to those pages that are not actually the category or the custom taxonomy pages.
‫All right.
‫So now we are in the blog structure and this is going to like give you like how you want to show it.
‫So you can select simple.
‫This is going to be turned into simple.
‫You can select classic which is going to show in a classic way.
‫Or you can select it to be grid, which is the one that I like the most.
‫And you can also keep it to be enhanced Grid, which is going to show like two posts.
‫All right.
‫And after that it's going to show three posts.
‫All right.
‫And after that it's going to show two posts again.
‫And after that it's going to show three posts.
‫So this is kind of really great way to show your post.
‫Uh, and it's pretty much stylish as well.
‫So if you want to show it like this, definitely go ahead and you can do that.
‫After that we have got the number of the posts, like how many of the number of the posts you want to
‫show per page.
‫And you can see that I've got ten selected.
‫So ten posts are being shown.
‫If I just click on nine, then here is an empty post, uh, option over here.
‫So that is why if you want to go with the enhanced grid, I'd recommend you to keep it to be ten post
‫so that it fills up the entire page.
‫After that we have got the card options, which is something that we will be taking a look at later
‫on.
‫Now we have got this content area, vertical spacing, which means that we have got some of the spacing
‫over here.
‫And we have also got some of the spacing over here as well.
‫So now let's suppose that I say that I want to add spacing only on top.
‫That is going to be gone from the bottom.
‫And we have got only spacing from the top.
‫If I select disabled then there is going to be no spacing from the top and the bottom.
‫So it's up to you how you want it.
‫However, for the home pages, I suggest I'd recommend you, uh, to apply the spacing from the top
‫and the bottom.
‫All right then we have got the sidebar for the sidebar we will be working with, uh, in the upcoming
‫lectures, how it's done, how we can create it.
‫Then we have got the pagination, which is this right here.
‫So you can just turn it on.
‫I recommend you to turn it on so that a person can actually click on there to go to another post.
‫Now we want to actually style this as well so we can click on here we are in the pagination style.
‫We can go into the design.
‫Then we've got the text which is going to be this one.
‫This is the initial text.
‫Then we have got the text active and the accent.
‫So what I need to do I need to basically change the accent color, which is going to be like a background
‫color as well.
‫So I want to actually use a similar one that we are using for our header.
‫So I'll be clicking on the accent and I'll now drag this over here and I'll keep it to be just like
‫that.
‫So this seems perfectly fine.
‫Now, if you bring our mouse, you can see how it's working.
‫All right, so now we are fully done with the pagination.
‫Now we are only left with the cards.
‫So let's go back to our blog post.
‫And we were actually in the pagination.
‫After that we have got this cards reveal effect which is some which is a great animation.
‫Like you can turn it on and now you can see how it's revealing the cards.
‫And if I go down how the post are coming up right here like that.
‫So I'm going to be turning this on.
‫Now let's just go ahead and let's work with the card options.
‫So I'll be clicking on here.
‫And now we have to design our cards like how it's going to be appearing.
‫So first of all you can see that we've got the category.
‫Then we have got the title.
‫After that we have got the featured image.
‫Then we have got the post excerpt, which is a short description and then we have got the user who posted
‫this and the date of when it was posted.
‫Now, uh, some of the developers, some of the SEO experts now say that when you are actually building
‫a blog website, then do not include the date in it, because, uh, sometimes when the blog post gets
‫older, but it's still relevant.
‫However, it was posted like maybe, uh, 2 or 3 months ago, then, uh, people actually not tend to
‫read that and they close the tab, which affects your SEO.
‫So they are right as well.
‫It's up to you if you want to show it.
‫Like if you are building a news website where you want to show the latest news and you can do it.
‫Otherwise, if you are building any other blog like let's suppose that we are building a travel blog,
‫then people do not care.
‫Like when it was posted and people actually want to read the latest news.
‫But even if we if we just go ahead and if we hide the date, then they'll still believe that this is
‫actually the latest.
‫Now, this is something that you can do.
‫It's up to you if you want to hide it or not.
‫So I'll be going ahead and I'll be hiding it.
‫Now, first of all, we have got this post meta which is in here, which is going to show the category.
‫Now I also want to show the destination as well.
‫So I'll be clicking on this arrow button next to the post meta.
‫And now here I've got the taxonomies.
‫Now I can add particularly anything as well besides this category.
‫Like let's suppose that I want to add the publish date.
‫The publish date is going to be here, but I do not want to include it, so I'll hide it after that.
‫We have got this taxonomies.
‫All right.
‫So what I need to do I need to click on this clone item.
‫And I've got now two taxonomies.
‫The one is going to show the categories and the other one is going to show the destination.
‫So what I'll need to do for that I'll need to click on this arrow button.
‫And here in the taxonomy I'll click on here and I'll select destination.
‫And now you will see that we have got the destination being shown for each of the post that we have
‫over here.
‫Now what you can do if you want, you can also bring this destination up so that we get destination
‫first and then the category.
‫All right.
‫So I'll be dragging this destination up one level.
‫And the destination is now here.
‫And the category is here.
‫Similarly you can also design this a bit.
‫So you can click on the styles.
‫And you can change this to a button so that this is going to be converted into a button.
‫And now you can see how beautiful this is looking.
‫Don't worry about the color.
‫We will be matching it with the header.
‫And it's going to look good.
‫Now uh.
‫For the destination.
‫We will keep it into a button.
‫However, for this the itinerary is the category.
‫We will keep it to be the normal one so that there is basically kind of a bit a differentiation.
‫All right.
‫Now we have added the post meta.
‫After that we have got the title.
‫So you can select like heading tag like is it going to be h1 h2 h3 h4.
‫Now for the SEO perspective uh I'd recommend you to keep it to be H2.
‫Do not put it H1, because there should not be so many of the H1 tags in a page, so you should have
‫only one h1 tag on a page, so you can keep it to be h2.
‫After that we have got the featured image which is this.
‫Now you can click on that and you can work with the ratio like let's suppose that I want it to be 16
‫by nine.
‫This is the ratio looks kind of cool.
‫And then we have got the hover effect which is a great thing.
‫Like if you click on here and you select zoom in.
‫Now if I bring my mouse you can see how the image zooms in.
‫You can even select it to be zoom out.
‫And if you bring your mouse, the image is going to be zoomed out kind of like that.
‫So it's up to you like which one you like the most and which one you want to go with.
‫And then we have got the boundless image.
‫So if you uncheck that then it's going to be aligned in equal height uh, in equal width.
‫All right.
‫So it's up to you if you want it that way or that way.
‫However I'll be just checking this boundless image to be on and I'll be doing one more thing instead
‫of adding the destination and the category and title and then the image, you can also just keep this
‫featured image and bring this to the top.
‫Like that and this is how it is.
‫Similarly, I will also be, uh, hiding.
‫Like, who posted this?
‫Because we will have only a one single user.
‫However, if you have multiple user and you want to show the user like who posted this, it's up to
‫you.
‫So I'll be hiding both of these post meta.
‫Like I do not want to show the publish date, and I also do not want to show the author as well for
‫the comments.
‫Like if any of the post contains comments.
‫If you want to show it, you can show it, but I do not want to show it.
‫I want to hide it completely.
‫I just need these right here now.
‫Similarly the post meta as well.
‫I need it below the title.
‫So this looks kind of good.
‫If you want, you can also keep this post meta to be right down.
‫So this is how it should be.
‫It's up to you how you want it, where you want to place it.
‫I want to place it.
‫Uh, after the title it looks kind of good.
‫So now we are fully done with the designing, uh, basically the layout of our cards.
‫After that, we have got the cards gapping.
‫Like, how much of the gap you want cards, inner spacing.
‫Like how much of the inner spacing is going to be.
‫You can decide.
‫You can change it the way you want.
‫And the horizontal alignment like this is left aligned.
‫All right.
‫If you want it, you can keep it to be center aligned.
‫This is how it's going to be center aligned.
‫So I'll be keeping it to be horizontally aligned which is what I like.
‫And then we have also got the card type which is set to simple uh box.
‫You can keep it to be simple or cover.
‫You can play with it if you select cover.
‫This is going to be converted into cover just like that.
‫You can also keep it to be simple, and this is going to be converted into simple, like there is not
‫going to be any of the box defect, like it's not going to be shown to you, like there is not going
‫to be any of the box shadow and everything.
‫So I'll be keeping it to be boxed.
‫Because this is what I actually like.
‫Now I'll be going ahead and I'll be clicking on the design and let's work with the design.
‫So first of all we've got the title font color which is this.
‫And on hover um, you can see that it turns blue.
‫So what I'll do I'll just keep it to be gray on hover.
‫All right.
‫Similarly, after that we have got the excerpt font, which is perfectly fine.
‫The meta font, which is this.
‫On hover, you can see that it turns blue.
‫So I'll be going ahead and I'll be keeping it to be full black on hover.
‫So you can see the change after that we have got this button font.
‫So button font I'll just keep it to be.
‫This is actually the text and this is the background.
‫So for the background I'll be keeping this to be.
‫Dark, a light one, and on hover this should be dark black.
‫So now let's bring our mouse and you can see how it turns into dark, uh, black.
‫Then we have got the card background color.
‫So the card background color is actually this.
‫This is our card, right.
‫So we want to change it.
‫We want to keep it to be a little bit of grayish effect.
‫So I'll be clicking on color and I'll just set it to be this I believe a very light uh gray.
‫And then we have got the card border if you want to apply it.
‫I think it looks, uh, not good unprofessional.
‫So I'm not going to be applying a card border, but if you want to apply it, you can do it.
‫However, I will be applying a card shadow.
‫So I'll click on here and I'll increase the transparency a bit.
‫And I'll change this color to black.
‫Increase the transparency.
‫You can see that as I increase the transparency, how is the effect going?
‫But I'll keep it to be minimal.
‫Not that much.
‫This is by far looking so good.
‫So this is our now card page card design ready and our home page is now affected.
‫Everything is working perfectly fine.
‫So now we have worked up with each and every thing that we have to do with our blog post.
‫Now we have to work with the single post and categories that we'll be working later.
‫So let's publish the page and let's visit the website.
‫All right my dear students.
‫So now you can see that our home page is fully ready.
‫This is how it is.
‫Now let's suppose that if you want to add something else like a cover image over here, you want to
‫add particularly anything besides this before adding this, or you want to add your about me and you
‫want to introduce yourself like you are a traveler and you've traveled to like 100 countries.
‫You want to write something about yourself.
‫You can do it.
‫I'll show you how you can do it later on, so do not worry about it then.
‫We have got the destination and category.
‫So if I were to go into any of the destination like Germany, this is right here.
‫However, these cards are not affected and the reason for that is because I told you that, uh, the
‫brixi, uh, sorry, Blocksy theme.
‫They just say that when you will edit this thing, only the home page is going to be affected.
‫Or if you want to add post on the about page as well, that is going to be affected.
‫However, the categories will affect the taxonomies, all of the taxonomies.
‫So taxonomy this is also a taxonomy and this is a custom taxonomy.
‫So these pages will be affected when you will be making the changes to this particular one.
‫So now from the next lecture of the course we will be working with the categories design.
‫And then we'll be working with the single post design.
‫So stay tuned and bye bye.