‫Welcome back, my dear students.
‫And now in this lecture of the course, we will be working with a single post design.
‫So let's just go ahead and let's get started.
‫Now if you go ahead and if we click on any of the post like this one, and I just go into that particular
‫post and this is how it looks like now, there is no featured image being shown by the default in the
‫future.
‫It may show, it may not.
‫So if I just click on here, you can see that it's no featured image is being shown.
‫The featured image is being shown over here only.
‫So let's suppose that if you want to show the featured image, you don't want to show the featured image.
‫You want to design everything how you're going to do that.
‫Let's just go ahead and let's take a look at it.
‫So what I'll do is that I'll be going ahead and I'll be opening any of the post.
‫Now this is right here.
‫The post starts from here.
‫Then this is another image.
‫This is not the featured image.
‫If I just click on the edit post now you can see that this is actually the image which is added inside
‫the editor by adding the image tag.
‫All right, this is not the featured image.
‫The featured image is added over here.
‫So let's just go ahead.
‫Let's click on View Post again.
‫Let's go into the blog and let's click on customize.
‫Now once we are in the Theme customizer then we will be going ahead and we will be clicking on any of
‫the posts that we are taken to that particular post, and then we can edit it.
‫Now we will click on the single post and we will be taken there.
‫Here it says post title.
‫If you want to show it, definitely you want to show it so you can just disable it if you want to.
‫However we want to edit it as well.
‫So let's just go ahead and let's click on here.
‫And this is going to take us to the edit page.
‫Now first of all let's talk about the featured image.
‫Now featured image.
‫Uh previously people used to prefer to add featured images um, right after the title.
‫And it's used to look good previously.
‫So many of the people used to do that, but now the trend is actually changing.
‫So now if I just go ahead and if I were to include the featured image inside the post, all right,
‫then you can see that the featured image is here.
‫However, my text, my message that I want to convey, whatever I want to convey my users.
‫Now you can see it has gone to so much down over here.
‫And when people will visit this website and this featured image just pops up right on my head, then
‫it's not giving a really good effect.
‫All right?
‫Because the text is not that much visible.
‫I have to go down and then I can start reading the text.
‫So that is why now people say like, uh, you should know that the trend always gets changed.
‫All right.
‫Previously there was.
‫So these featured images were so much popular.
‫Now when you will visit so many of the blog website, you will see that featured images are only for
‫the background purposes, mostly not not to be added right on the front.
‫So I'd suggest you go ahead and you hide this.
‫Otherwise it's up to you.
‫If you want to use it, you can just check this.
‫You can click on the arrow button.
‫You can design it, but I'll be going ahead and I'll be hiding this.
‫And I will be using the featured image as a background for this title.
‫And you'll see how amazing it's gonna look.
‫So how I'm going to do that, I'm going to go up to the top in the single post.
‫I've got the page title, I'll click on this arrow and this is right here.
‫Now this is the type one and this is the type two.
‫So if I select the type two you will see that the featured image is going to be right here.
‫Up here this is smaller and this is going to look good.
‫So then we have got the design.
‫So let's click on the design.
‫Then we have got the title font excerpt font.
‫And then we also have got the image overlay.
‫So what you can do you can click on the image overlay and you can add an overlay on top over here.
‫If you will click it will be added.
‫You can work with the transparency.
‫Choose the color.
‫And once you have got your color then you can work with the title font.
‫So I'll be now changing the title to like Pure White.
‫This is how it is.
‫Then we have got like who posted this when it was posted and the category.
‫All right.
‫So we will be changing that as well.
‫So let's change the colors to white so that this is also visible.
‫And now let's go back.
‫So we are here in the general tab.
‫Now we have got the elements the title we want to show it.
‫You want to do some changes.
‫Make sure that the heading tag for this title is set to H1.
‫Because for the SEO purposes in a single post, it uh, must be H1 because this is actually the main
‫heading.
‫All right.
‫And then we have got the excerpt which is not being shown.
‫And we do not want to show it as well.
‫So if you show it it's still not being shown.
‫I don't know why they edit it.
‫So let's just go ahead and let's hide this.
‫We do not want to show the excerpt.
‫We have got the post meta, which is this.
‫Now you can show like the author if you want to show it, you can show the published date as well.
‫I told you about the dates in the previous lecture.
‫If you want to show it, you can show it.
‫I'm going to be hiding this.
‫And then we have got the taxonomies and the comments.
‫I'm going to be hiding the number of the comments, the user, the category.
‫And I also want to show another taxonomy which is going to be the destination.
‫So let's select the destination and let's select the style to be the button.
‫And this is how it is.
‫Or you can also go ahead and you can this time.
‫You can also keep it to be like underline.
‫Like this.
‫So it's up to you how you want it.
‫I'll be going ahead and I'll be keeping it to the default, because over here I think the defaults looks
‫good.
‫So then we have got the breadcrumbs.
‫If you click on here it's going to show you the breadcrumbs home itineraries and the title.
‫But I do not want to show it.
‫I think it's fine over here.
‫And then I've got the horizontal alignment.
‫This is a similar to that as well.
‫Like if you want it on the left you can do it if you want it in the center, the right vertical alignment
‫and everything.
‫And then we have got the container background image which is set to be the featured, like whatever
‫the featured image that you will be adding, it's going to automatically pull in that.
‫And it's going to show that as the background image.
‫If you need a custom image, you can do that, like it's going to be applied to all of the posts then.
‫So it's not recommended.
‫And you can also keep it to be none.
‫If you set none, there's going to be no image and it's going to show you like that.
‫So I'll be keeping it to be the featured.
‫And then we have got the image size which is set to full size, and the container minimum height.
‫Now that this height 250 pixels is perfectly fine, do not increase this because this is actually a
‫single post.
‫This looks good.
‫I know this looks good, but do not increase this because this this text, this text that you see over
‫here, this is the main text that we want our users to read.
‫All right.
‫So this should be up here because for the blogs design doesn't really that much matter.
‫I know it looks good but I'd recommend you to keep it to be smaller.
‫So let's just keep it to be 250 pixels back.
‫And now let's just go ahead and let's go back.
‫Now we have got the post structure which is set to narrow width, which is post structure means this
‫whatever the contents that you will be adding in here, this is the normal width.
‫Like so.
‫And now this is actually the left sidebar.
‫This is the right sidebar now on this page on your post.
‫Adding a sidebar is good, so if you want to add the sidebar, definitely add it.
‫Now for the time being, I'll be going ahead and I'll be keeping this to be narrow width.
‫All right.
‫Later on when we'll be adding the sidebar, then we will add it.
‫Then we have got the area style which you can set to white, or you can keep it to be boxed.
‫So if you set it just to boxed, you can see that this is how it looks with the boxed and with the right
‫sidebar.
‫It looks really amazing.
‫So you can see.
‫All right.
‫So I'm going to be going ahead and I'm going to be keeping this to be narrow.
‫And I'm going to be keeping this to be wide.
‫Now if you do not want to use the sidebar then do not select box.
‫If you want to use the sidebar, then select the boxed and add the sidebar and it's going to look dashing.
‫Then we have got the spacing top which is going to be applied from here, bottom which is going to be
‫applied from here.
‫If you want to add it, then we have got the featured image which I told you, if you add it again it's
‫going to be shown.
‫It's not going to look good.
‫Adding it in the background looks good, but adding it as a separate image doesn't make it a good thing.
‫Then we have got the post tags, so if you click on check and you go down, there is going to be tags
‫as well.
‫Like I told you that these are also, um, a taxonomy and the person can actually just click on this
‫tags and you can view all of the tags.
‫So it's a good thing to add tags on a blog website.
‫Then we have got the share box.
‫These are the ones uh, that are uh given by this particular theme, the Blocksy theme.
‫All right.
‫If I just click on here to share box is going to be here.
‫And now you can click on here.
‫And you can decide like which social networks you want to add.
‫Similarly you can also select the design like you can select type two, type one I kind of like the
‫type one.
‫So I'll be adding that.
‫And I will also be adding WhatsApp.
‫And WhatsApp is also added.
‫Similarly you can also add the emails.
‫If anyone wants to email directly you can click on that.
‫But I do recommend you do not add so many of these social icons.
‫Otherwise the user is going to be overwhelmed, so it's better if you remove this.
‫Now LinkedIn is good, Pinterest is good, X is good, and the Facebook is also good.
‫Then we have got this author box.
‫If I just click on here, the author box is right here.
‫Now you can also just like add about yourself as well.
‫So I'll be showing you how you can do that.
‫First just leave this author box part.
‫Now we have got the post navigation.
‫So if you click on check there is going to be the post navigation like person can click and you will
‫be taken to the previous post.
‫If there is a next post available there will be an option for that as well.
‫So if I just hit on publish and now if I just go down refresh, there is going to be this previous post.
‫If I click on that, I am in this previous post, and if I go down then I've got the next post, which
‫is how to get a Ferrari in Abu Dhabi.
‫So this is right here.
‫It's working perfectly fine and if you want to design it, you can also design this as well.
‫So I'd recommend you go in there, go into the design and change the hover effects.
‫All right.
‫Thumbnail overlay.
‫Change that to gray so that it looks good.
‫This as well.
‫Change that to black on hover.
‫This is right here.
‫It's looking at.
‫All right.
‫So whatever you are adding similarly the author box that you are adding, if you want to add it, make
‫sure you stick to your color combination.
‫Then we have got the related post.
‫So if I just click on here, here you can see that I have got the related post as well.
‫And you can click on here.
‫And this is going to be columns.
‫And the number of the post related criteria is based on the category.
‫Now let's suppose that I want the related criteria to be based on the tags.
‫I can do this.
‫Now.
‫This related criteria is not I cannot do it based on the destination for this theme.
‫Now, hopefully this is my recommendation to this team that they should allow the related criteria to
‫based on the custom taxonomies as well.
‫So they are not currently doing that.
‫But in the future, maybe you should see that.
‫Then we have got the sorted by related post module image ratio and everything.
‫You can work with these type of customization, and this is actually the date as well.
‫So for this one you can definitely show the date date.
‫And you can also show the taxonomy.
‫And then if you.
‫Wand.
‫We can also show the destination.
‫So this is how you can also go ahead and you can add the related post as well.
‫Now I'd recommend you again go into the design and make sure that you change the hover color to black.
‫And this one is also set to that.
‫So let's change that to black as well.
‫All right.
‫And after that we have got our comments.
‫So if you want to enable the comments you can enable that people will be able to leave a comment on
‫your particular post if you want to hide it.
‫You can also hide that as well.
‫So what I'll need to do, I need to go into the design and I need to change the um, button link.
‫So there is no option to for me to change the button link.
‫So what I'll need to do for that, I'll need to go back and I need to go into the colors.
‫Yes.
‫So now to change the button color you can go into the global color palette.
‫Click on the color one and set this to either black or grayish.
‫And this is now done as well.
‫So now we are fully done with it.
‫Now what we have to do is to just work with our this outer box.
‫All right.
‫So what you can do you can click on publish and then you can go into the dashboard.
‫And now once you are in the dashboard you have to go into the users.
‫And then you have to click on profile.
‫So now this is actually your profile you can add in your first name.
‫All right.
‫Then you can add in your last name.
‫And then you have.
‫This display name publicly as Tanzeel.
‫Then you have got your website.
‫If you want to add your Facebook, Twitter, LinkedIn, you can add it.
‫Similarly, you can also add something about yourself.
‫So I'll be going ahead and I'll be going to Lipson.
‫Com to copy, uh, the first paragraph.
‫And I'll be going into the profile and I'll paste it.
‫Now I'll be going up to Edit Profile Update Profile.
‫And this is going to be done.
‫Similarly you can also add a profile picture.
‫But the profile picture can be added on Gravatar.
‫So you can click on here.
‫And this is going to take you to Gravatar com where it will tell you to either enter your email address
‫or login.
‫So let's suppose that I enter my email address and then I click on view profile.
‫It says there is no profile associated with this email address.
‫Is this you claim your free Gravatar profile.
‫So you can click on that.
‫And it's going to tell you to enter your email address.
‫You can enter that.
‫And then you can click on send me the sign in link, which is going to send you a link to your Gmail.
‫So after you have got the link to your Gmail, you can click on continue to Gravatar which is going
‫to create your account.
‫So now here it says upload the image, use your camera.
‫You can do anything like if you have a camera connected you can do that.
‫Like let's suppose that this is a camera right here.
‫I just select that and then I just go ahead and I hit on capture which looks really bizarre.
‫So let me.
‫And this is let's suppose that this is the image I'm going to hit on upload.
‫And now this is the image.
‫All right.
‫So I'll be cropping this image now.
‫And this is right here.
‫So now here I can enter my username.
‫And I'm going to hit on save changes.
‫That's it now.
‫My profile is actually updated.
‫All right.
‫Now if I just go ahead and if I visit the website and now I refresh.
‫All right.
‫So let's refresh this.
‫Let's click on change profile.
‫And that is there.
‫Now you can see that I have got my profile image being shown over here.
‫So now if I just go ahead and if I visit the website.
‫And now if I just click on here and I go down now, you can see that my profile picture is being shown,
‫the name and everything, and also my social links as well.
‫So I can just click on there to be taken to the website.
‫Click on here to be taken to my ex account, LinkedIn or Facebook.
‫Everything seems to be working perfectly fine.
‫So this is how you can go ahead and you can design everything.
‫Now.
‫Once you have completely set up your profile, you can refresh this theme customizer.
‫Then you can click on any of the post so that you are taken to the post.
‫And now this is your profile.
‫So then you can click on the edit and you are here.
‫Now you can decide like which one you like the most, the type one which is this, and the type two
‫which is this.
‫So it's up to you which one you want to go with.
‫You can go with any of the one.
‫Now let's suppose that I want to go with the type two.
‫This is how it is number of the post this user is posted.
‫You want to show it, you can do that author archive link.
‫Like if you click on there he will be taken to that author.
‫I don't want to show that, all right?
‫I just want to show the name of the user.
‫All right.
‫The social icons open the link in a new tab in our spacing and everything, and you can even work with
‫the design and everything like the hover effects.
‫You can see that these are actually in blue.
‫So I'll be going ahead and I'll change this to the black dark black.
‫So now I am fully done with this single post design as well.
‫Let's just go ahead and let's click on publish and let's click on cross.
‫Now let's view the website.
‫And now you can see that this is how the website is.
‫So now we are fully done with that dynamic pages.
‫Now remember I told you that there are dynamic pages and there are also static pages.
‫So now we are fully done with our dynamic pages.
‫Now.
‫Now from the upcoming lectures we can go ahead and we can work with the static pages.
‫And we can also work with the sidebar and we can like complete our website.