0:00:00
Alright guys, let’s go ahead and get started. We’re going to be working on a blog post template in this training. So the first thing before, just like we did with our primary template, you need to have something to be able to look at when you’re actually building the template. So the first thing we’re going to do is we’re going to go to post and we’re going to go to add new. I’m going to assume that you don’t have any blog posts in here. So this is going to be sample with medium length title. Alright, we’re going to go to Laura Ipsum real quick. And we’re going to go ahead and grab just some sample content here. So I’m going to go ahead and paste this in and we’re going to break this up into some smaller, some smaller things. And then what we’re going to also do, you’re going to want to put some formatting in here. So I want to do a heading. This is a heading. That’s an H2 and then this is an H3 heading. And we’ll click this heading and actually sorry, I don’t use Gutenberg that often. Alright, so this is the heading. This is an H3 heading. And let’s go ahead and put like a list in here.
0:01:13
So this is a list item and we will just kind of duplicate that down. And then we need an ordered list as well. This is going to be a block quote by the way. And then we’re going to do ordered list. Okay, I’ll do five there. Perfect. And then I do like to have another H2 and I’ll show you why I actually a couple of them. So this is a third heading. This is a second heading. And then we’re going to want a image as well. Grab this one. That looks perfect. We’re going to download that. And we’re going to go to squoosh.app. I usually squoosh these before I load the men because you see that. That’s like 6,500 pixels. That’s completely unnecessary. Let’s do like 2500. And we’ll wait for the process there and we’ll download that. We’ll replace cool. Alright, so let’s go back and we’re going to go to our post featured image. Set that featured image and toss that in.
0:02:28
And you’re going to want to set an alt text here as well. So this is the alt text. And we’re going to set the featured image. Alright, so let’s go ahead and publish that and just take a look at it on the front. So we’re going to view and this is what we have. You’ll see and then you can this is going to be different from what it looks like in our first tutorial because I actually switch servers. I started over from scratch on a dev site. So some of the stuff that we did in the first tutorial is missing. But this is basically what you’re going to end up with when you don’t. Template installed. So we’re going to go back to the admin now and we’re going to talk about how to create that post template. So oxygen templates, add new template and we’re going to call this blog colon single post. Now think about this. You’re going to need more than one template. You’re going to need one for your blog posts, but you’re also going to need one for your category pages. You’re going to need an author template, right? So we need to kind of have a naming convention here.
0:03:32
So what I recommend is everything that’s related to the blog part of the site. It starts with blogs and then the thing, the name of the template. So in this case, blog single posts, all right? And what we’re going to do is inherit our primary design. And then I’m going to go to singular and I am going to assign this to all posts. No templates have been assigned to post yet. So I don’t need to set a priority or anything like that. I’m just assigning the blog post template to post. That should make perfect sense. So I’m going to go ahead and hit publish here. I’m going to go ahead and edit with oxygen now. And because we put that first blog post in, that sample post, when the builder loads, we’re going to be able to preview that post inside the builder. And that’s going to help us create that blog post template. All right. Now the builder is open.
0:04:24
We’re going to go ahead and make our blog post template. What I want to want to kind of preface this with is there’s a gazillion types of blog post templates that you can create in terms of layout, and structure, and elements, and things like that. I’m just going to give you an example of one to teach you the principles for how to create a blog post template. It’s up to you or your UX person or whoever to come up with what that blog post template is actually going to look like. But this is going to get you started. All right. So we’re going to talk about some best practices as we go as well. But the first thing I’m going to do is I’m going to go up to add and we’re going to add a section. This is going to be our hero. So with a traditional blog post layout, you’re going to have a blog post hero that’s going to have like your featured image, your heading, all of that. Of your main content, which with a blog typically has a sidebar, it doesn’t have to. Sometimes it has two sidebars that happens to be the style that we’re going to work with today. I’m going to show you one of my go to blog post templates basically. And I’m going to show you a really cool way to do this so that it has some pretty neat functionality that’s really good for SEO and a really good user experience as well.
0:05:39
But we’re going to create this section as our hero. I’m going to go ahead and duplicate that. This is going to be our. And then we’re not going to hit the link where we’re going to let me make sure that didn’t. It did. It added a link wrapper to the section. Fantastic. All right. So I’m going to delete that. I’m going to duplicate it again. I’m going to duplicate it one more time. This is going to be our bottom section, which is going to be for related posts. So within this, I’m going to show you how to add related posts to a blog post template because that is super useful as well. So I’m going to go ahead and hit save here and we’re going to name our our section. So this one is going to be hero.
0:06:17
This one is going to be main. Well, that did not work. We’re going to try that again. And then this one is going to be rename related posts. Perfect. All right. So let’s go ahead and get started with our main hero section here. So this is part of the header technically. I know that this nav bar, this header up here, we gave it the HTML header tag or if you’re using the header builder, it automatically has the header tag. In that HTML structure, there can be more than one header tag on a page. But there can be more than one on a page and technically this is the header of the blog. It contains the h1. It contains all the header type information. So I’m going to go ahead and set this section tag to header. We’re going to go ahead and leave this one blank because there’s going to be side bars in this section.
0:07:15
They’re not really part of the main content. So I’m going to show you how to handle that when we build it out. And then I’m going to set this another aside, which is not available in the sections dropdown. So you need to use custom tags and put aside. All right. Cool. So we’ve got our kind of our foundational structure here. Ready. There’s two ways to do these hero sections. If you need to have the Alt tags present and you need the benefits of having a real event, you need to use the right arrow. And then you need to use the image module and probably do. And all that. A more traditional style is to use a background image. And that’s what I’m going to do here. So I’m going to go ahead and do background and we’re going to click the data button.
0:08:07
I’m not going to browse for an image because this is a template. And it has to be able to inherit the featured image of whatever the blog post happens to be. Right now we’re previewing sample blog posts. All right. So when I do data, we should be able to pull in dynamically a featured image. And you’ll see it right here post feature. And then for the size, I’m going to go ahead and do large. And then I’m going to hit insert. And you’re going to see it pull it in right there. I’m going to set the background size to cover. I’m going to make sure that it does not repeat because that’s not the style that we’re going for. And then I’m going to position it. If you want it just completely centered, you want to do left 50% and top 50%. And then what I’m going to do is I’m going to add a bunch of padding into this section. So first thing I’m going to do is probably, you know, I would use a clamp function.
0:09:00
I’m on a brand new computer. I don’t have my resources tab available. So I don’t have that shortcut to the clamps. But you would use a clamp function like you’ve seen in my other tutorials before. For now, I’m going to go ahead and set this to like, let’s do 18 rim. Wow, can’t type today. 18 rim and 18 rim. And then I’m going to go ahead and add a heading in here. And this is going to be our H1. Now, it cannot read our heading over this background image. So I’m going to go back to background. And I’m going to set a background overlay color or an image overlay color. And I’m just going to choose this. Let’s do the blue. Let’s go for something a little bit more vibrant.
0:09:45
We’re going to kind of like the image is going to be there for just a little bit of a look and feel. Like you’re going to be able to kind of tell what it is. Really, we’re using this really deep blue overlay or vibrant blue overlay, I should say. And because that is a darker overlay, we’re going to want to make sure that all the text in this section is light. So you can go ahead and add the class text light if you’re using oxy ninja utility classes or any utility class section. You can go ahead and add that utility class to the entire section, not to the individual elements. You add it once to the entire section, everything is going to inherit that styling. Now, we need to pull in dynamically this heading. Click it, I’m going to hit insert data, and now I have some different options here. And I’m going to pull in post title, and I’m going to hit insert. Perfect. So we have our post title in there. What else do we need inside of this header? Well, typically you’re going to have some author information, you’re going to have a date. So let’s go ahead and do that stuff now.
0:10:47
I’m going to put the author down below this, and I’m going to put the date right above it. So I’m going to add text here. And then I’m going to duplicate that, and I’m going to just pull this above. Perfect. So now what I’m going to do is double click this, insert data, and now I can choose this date field. And I can leave the format blank, and I use the default format. And there you go. Now what I typically do is in blogging, especially when you’re blogging for SEO, you’re going to be updating content a lot. So the published date is not really relevant. Now this date will inherit whatever your update date is. So typically when I do major updates to a blog post, I change the date. And that date will, this date will follow those updates. So, but I don’t want to make it seem like this was the original published date. So what I do is I double click it, and before this short code that does the dynamic data insertion, you can actually insert static content.
0:11:46
So I’m going to do last updated colon space, and then when I click out, it’s going to put the date after that. So that’s pretty cool. And now everybody knows how fresh this article is effectively. Next, I’m going to do the author. So I’m going to double click this, insert data, and we’re going to come down here. I’m going to choose display name, and I’m going to link it to the author post URL. So you can choose the link it, or you can not link it. Here’s what I’ll say. For SEO purposes, you need to be linking it. And you need to have a author bio page with a real author, and that author needs to have their social media links on that author bio page and all of that. So this is for Google’s EAT algorithm. So basically, they’re authority and trust algorithm. If you’re about any of that, you can do none, and you don’t even have to create an author template at that point. But if you do want to link this to the author posts, then you’re going to need to create another template for author bios or the author page template. And I can do one, I can do like a tutorial in this series on creating one of those.
0:12:58
So we’re going to hit insert. All right. And now you’ll see that that is all linked up. Now this email protected thing, I believe is tied to like my bio on the back end. I don’t actually know why it’s doing that, but I’m going to go to all users and I’m going to go to I don’t even know which author. Let me go to that post real quick. So as Kevin to digital gravy.co is the author. I’m going to all users. Kevin to digital gravy.co. Kevin to digital gravy.co. Okay. So let’s do Kevin Geary. And then let’s do that as the display name. And let’s update the profile. And then let’s go back and we’ll just save that real quick and we’ll update.
0:13:37
All right. So that was the, I don’t know what it was doing, but now it is updated. And it is linked here as well. So you can do the exact same thing where we double click and then can do written by. And then it says written by Kevin Geary. And then this whole, this is, this is linked. Let me say it was preview what we have on the front end and just make sure that we have our link. Yeah, we do. So that’s going to go to my post page where you’re going to see there’s no template there for that yet. So that’s not technically going to work, but that is how you would put that in. Now what we can also do is put in my head shot as well. So what I’m going to do here, I have this as a text box. I’m going to right click this and I’m going to say, and you have to allow. I’m going to say wrap with div. And if we look at our structure panel, it’s now wrapped that text link.
0:14:27
And now inside that div, I can add an image. And it’s going to be absolutely gigantic. So what I’m going to do is do blog, double underscore, and then this is author head shot. Cool. And then we’re going to do width as like, you know, 30, maybe 40, 50. Let’s try that. And we’re also going to do height as five rim. This is equivalent to about 50 pixels. If you watch my other trainings, you know how rim converts, especially if you’ve done your font. Reset. So that’s, that’s good. I might make. What I’m going to do so it doesn’t distort is go to custom CSS. And we’re going to do object fit cover. I need to change my editor theme here so we can make this easier to see.
0:15:11
So object fit cover will make it behave. It’ll, it’ll protect the aspect ratio, let’s say. And then I’m going to go to borders. And I’m border radius. I’m going to choose percent. And we’re going to go to 50%. And that’s going to make it a circle. I kind of like that look. And then I’m just going to align these horizontal. And then I’m going to align them to the middle. And I’m going to align them to the left. And then I just need to change the order that these show up in. You can drag them in the structure panel. But then I’m going to just put a little margin on the right hand side of this. So we’re going to go to rim to rim and one rim.
0:15:45
Okay, that’s good. And that, that is a little big. So I’m going to go four and four. And I think that’s perfect. On this, I’m going to do margin bottom. And we’re going to try like an M. And then I’m going to do margin bottom here. We’re also going to do an M. And I’m going to control this post length a little bit. We’re going to use one of my max width utility. Not 960. Let’s do a 720 maybe. All right, that’s, that’s better. So that kind of doesn’t let that blog post heading stretch all the way across. But let’s go ahead and take a look at what we’ve got so far.
0:16:19
We are going to resume. Yeah, resume. It asked me if I wanted to stop recording. I must have a, I must have a shortcut key that’s similar to the hard refresh. All right, so we’re pretty much, well, first of all, this text light I can already tell. It’s not actually white. I like, you know, white with. Okay, now let’s take a look. Awesome. So we’ve got our hero header with our featured image. We’ve got our last updated. We’ve got our author. That’s all linked up. All right, guys, I realized when I was editing this, that I never did the author bio pick.
0:16:50
So I’m recording it. And then I’m going to magically insert it at the point you’re watching right now. But we’re just going to go ahead and grab that, hit data. And then just hit author pick right here. It’s, it’s pretty straightforward. But I wanted to make sure that that was at least included. And you’ll see it actually swaps my pick from my user profile. So now we have a real author bio pick and not just a placeholder. We’re ready to rock and roll on our main content section now. So what I’m going to do in this main section is I’m going to add a div. And I’m going to do columns four. And I know we’re going to go for a three column look. So this might be a little confusing, but I’m explain it as we go. And it’s going to make perfect sense to you. So I’m going to do columns four, but I’m only going to add three divs.
0:17:36
Because like I said, we want, we want three divs. One, there’s two, there’s three. The middle one, I want to actually take up two spaces. That’s why I gave us an extra space to work with. So I’m just going to do call span. And I’m going to do call span two here. And that’s going to give us our larger center column with our two outside side bars. I’m going to select the entire wrapper. And I’m going to put a gap on this. We’re going to do a gap of, let’s try Excel. That might be a little much. I like, I tend to adjust these as we go. Large. And now we can create our HTML tags before we go any further and then create our classes as well. So this first side bar, most side bars are going to be an aside.
0:18:23
So you can go into tag and you can do a side. And then on this one, you can do tag aside. And then this is going to be our main content. Remember, there’s only one main tag on a page. This is going to be our main content. This is going to be the body of our blog post. This side bar, I reserve for the table of contents, which I’m going to show you how we’re going to do that. And then this one can be whatever you would tip our categories, all that good stuff. We’ll put a little bit of stuff there. We’re not going to go crazy on it though. That side bar is up to you. So if you’ve been using WordPress any length of time, I mean, you know, it goes on a side bar. You should be able to put it there. So first thing though is, you know, we’re a little outlandish with our own. We’re a little outlandish with our default spacing in this section.
0:19:08
So I’m going to tone that down. We’re going to go to 3-Rim and 3-Rim. That’s definitely not enough. Let’s go to 5-Rim and 5-Rim. Cool. Alright, that’s a little bit better. And let’s get to work. So the first thing we’re going to do, you can do this one of two ways. You can do an inner content. Oh, let’s do that real quick. Alright, so we’re going to do blog. And then this is going to be a side one. You can name these whatever you want, but or you can do a side first. And or a side left. How about that?
0:19:42
Right? A side left. That works. And then we’ll do blog, a side right. And then this is going to be blog main. Perfect. Okay. Two ways you can do this. You can do an inner content element or you can just do a text element. It’s really either way. I haven’t found ProZardCon. Sometimes the inner content element is a little bit tricky or unpredictable, let’s say. It tends to want to try to break out of these containers that it’s put in. So the safest bet I found is to just use a text block and double click it and do insert data and do insert content. And you can also set this text block to 100% width.
0:20:30
Alright, and then we’re going to hit save. And we’re just going to take a look at the front end and see what we’ve got. So we’ve got a center column of text that says all of our content. And even if you put in images in the body, you know, we can look at that in a minute. It’s still going to put it in there. It’s going to put in everything just fine. Even though we use the text box instead of inner content, it’s going to put in everything just fine. But like really we’re off to a good start here. I feel like this is a good looking blog post template. So now let’s handle the left aside right here. This is going to be our table of contents. Now if you have the upgraded version of oxygen that like do you have this as an element? Oxygen extras also has a table of contents, but I will tell you this. I used to use the oxy extras table of contents. The default table of contents that now comes with oxygen is better.
0:21:20
So I’m going to go ahead and load that in. And this is great for SEO. It’s great for user experience. And I’m also going to show you something we can do that’s really cool with it. But first thing, let’s take a look in the structure panel over here because you are going to have to see differently. I don’t like how they did the default styling in oxygen. So there’s the TOC code. You want to keep that. Don’t mess with that. TOC label container. This is going to be your like title right here. You can probably keep it. It’s okay. The H2 is styled really funky. This is what we’re going to have to redo. And then I actually don’t want H3s, 4s, 5s, and 6s in my table of contents. It’s not necessary to have that level of detail.
0:22:02
And it just clutters up this sidebar over here tremendously. So you can literally just put these in the trash. And so all your left and then this H2 element. And this all pulls in dynamically from the H2s that are on your page. We’ll see that in just a second. But first things first, I’m going to have to go and re-style this thing. So I’m just going to hit, uh, reddit. Wow. Okay, that was C-text light. Let’s undo that. I’m working on the wrong thing. So the other thing I would recommend you do, I don’t know why I was selecting. Why is this like, see, see text light is not even on this class. So oxygen is definitely doing something very funky here. I had to do oxal TOC primary. And then oxal TOC template. I actually don’t think, let me see, link text.
0:22:49
I don’t know which one of these. Let me just reset. Okay, that’s cool. That’s affecting this. All right, we’re going to take off the border. We don’t want that either. Size and spacing. We don’t want any of that. Like just give me a blank slate to work with, please. All right, primary. Nothing is set in there. Adventure. It doesn’t look like there’s nothing in here. All right, great. So we’re ready to work now. So I’m going to go to typography. And I’m just going to make these dark. All right. And we’re going to do rim.
0:23:21
Let’s try like 1.6. Yeah, something like that. Remember, it’s a sidebar. It’s not like, there’s not a lot of room. And if you have long headings, you don’t want to get crazy with your, your font sizes here. We’re going to almost go to like 1.5 rim. And next, I’m going to grab this heading. We need a little space here. Okay, there’s no class set on that. Bottom will do like 2. Now we’ll do 1. All right. And then on this, we’ll also do a margin bottom of 1. And 1.4. I don’t know. We’ll have to see.
0:23:53
But I’m going to save. And then we’re going to refresh. All right. So now you see we have our table of contents. And we have this heading. This is the second heading. This is the third heading. Yeah, I actually decided I don’t like this at all. This, uh, did a default styling on this. So I’m going to go ahead and reset all of this. Size and spacing. And board. Get rid of all of that, please. Okay, cool. So I’m going to go to typography. Font weight is going to go to 600.
0:24:16
And then size and spacing. Rim. We’ll go to the one. And then we’ll say, I just let’s just keep it nice and simple. How about that? All right. It almost tried to read. I got a quit hitting shift command R. All right. Can we get a refresh? Thank you. All right. So that, that’s nice and simple now. We can put a border on the bottom here. All right. So we’re going to go to bottom.
0:24:40
And we’re going to go to one pixel solid. And let’s just do. Let’s. Eyes 100% width on this. So it goes all the way across. That looks a little bit better. And then our border. We do need to do a color. My dog’s going crazy downstairs. It’s somebody. We’ll just do a light. Oh, well, that didn’t do a border at all. What color is that? All right. Size, typographer.
0:25:02
Now where were we? Borders. Bottom. And let’s try a color that actually exists. Does that one exist? Okay. That’s that’s decent. All right. Great. No. Stop hitting. I’ve got it. I’ve got to stop doing that. All right. Table of contents is the heading.
0:25:20
And then you’ll see that these act like anchor links. It’s real cool for UX, right? But what we’re going to do even cooler is we’re going to make that sticky. So that the table of contents literally follows the person down the page as they’re reading, which I think is really cool too. So I’m going to grab this entire Toc container. It’s inside of my sidebar div. Now in order to do this, I have to make sure that my sidebar stretch all the way to the bottom. So higher wrapper, my whole grid, wrapper, selected. And I’m going to do a stretch class on that. And now when I select the sidebar, you see that it follows all the way down the page. Now when I put sticky on this table of contents block, it’s going to be able to move up and down this channel right here. All right.
0:26:08
The second thing I need to do is select that sidebar, blog the side left, and I’m going to go to layout and set that to relative. And then I’m going to set this to sticky. So all we have to do, we’re going to assign sticky to a class by the way. That way you can just……thing that you want to be sticky across your site. So we’re going to do sticky. And then we’re going to come to advanced custom CSS position sticky. And this is easy, right? Top zero. The only thing you have to remember is when you’re doing something position sticky, it has to have a top spacing. And because I, we have that admin bar, I typically like a little bit of space between the top and…
0:26:47
So I’m going to hit save. And let’s just take a look at it. And there it is. So now it’s following down the page. Now we do have to take care of this on mobile as well. So typically we need to figure out what our breakpoints are going to be. And let me get out of this. All right, let me get out of this view. Thank you. All right, so I’m thinking it’s going to break not here. All right, because we are going to break the two columns here. We’re going to get rid of this third sidebar on this screen. It’s going to be side by side here. So we don’t need to break this stickyness. It can still be sticky there.
0:27:25
But when we get to here, 768, that ain’t going to fly. The table of contents is going to be first. And it does not need to be sticky at that point. So what I’m going to do while I’m in this little screen mode. And I’m just going to do it for this div right here. I’m not going to do it on the class because typically I would stop the stickiness at a different breakpoint. So I’m not going to assign this to the class. But I’m just going to go to layout position static. So that’s going to override the sticky at this breakpoint. You see it’s not sticky anymore. If I take that static off, it is sticky. Okay. So where static is basically the default position for an element. So that’s going to stop our stickiness and make sure that we’re not screwing up our sticky.
0:28:11
Because if you have it still sticky at the at that breakpoint. And it’s stacked on top of your main content. It’s going to fly up and it could, let’s say, fly up and down over your main content. We don’t want that to happen. So, get the static at a breakpoint and that’ll take care of that. All right. So save, check out what we’ve got. Refresh. Boom. Now what we have to do is take care of our mobile breakpoints and our stacking. So, and there’s a little complicated when you’ve done a stretch. Okay. So I’m going to select my parent and I’m going to check the XL breakpoint. I feel like this is still good and acceptable at this breakpoint. So I’m not going to adjust anything here.
0:28:51
We’re going to go down to, this is our large breakpoint. At our large breakpoint, I want to get rid of volume. So I still have, it’s going to be, I believe we’re going to get this, a math always confuses me in my mind, especially when I’m screen recording. So we’re going to try L2 or L3, excuse me. All right. That should be perfect. Because now we have this taking up two and this taking up one. All right. That still makes perfect sense. And then this goes down to below. This is, does get a little bit janky here. Because it’s, it’s normal size. Because this is a three column grid. So it’s one of the three columns.
0:29:36
But it’s, there’s nothing else next to it, right? So depending on what’s in the sidebar, you can kind of, there’s, there’s a couple ways you can deal with this. So you can take this at the large breakpoint, span two or three. So you could do call span three. And that’ll take up all three spaces in the grid. So that’s one option for you. You could take up two spaces in the grid. It’s really going to come down to what you’ve put in that sidebar as well. All right. So, and then you could all, well, at this breakpoint, I’m not going to have two columns here then one column below. I just go with a full stack. All right. You could do that as well.
0:30:12
So it’s one on top of the other on top of the other. So I really have to you. I’m just showing you how to kind of approach some of these concepts. All right. Let’s take a look at the next section down. So this one, we definitely, there’s not enough room for, for these two things to live side by side. So at this point now, I’m going to go to, this is the medium breakpoint. So I’m going to do M1, C columns M1. And then what I need to do is select this one. And I’m going to do call span one at the M breakpoint. Call span M1. So at the mobile breakpoint, this needs to be taking up one thing. And then I’m going to go down here. I think I did this one wrong actually. C call span three.
0:30:54
Yeah. I did. So this needs to be span. Remember that was the large breakpoint L3. So on the large breakpoint, it needs to span three. It doesn’t need to span three all the time. It only needs to span three at the large breakpoint. So I had done that wrong. And now at the M breakpoint, which I’m previewing now, we’ll do call span M. It needs to be doing one. Okay. So that was effectively breaking my grid. That’s why you saw those two things on the side. Because this one down here that was incorrectly done was forcing the grid out of its, you know, correct shape, let’s say.
0:31:33
All right. So we’ve got, but we, I think we’ve got everything, everything going. Let’s check this out. So four columns at the large device size, it goes to three. And at the medium device size, it goes to one. Let’s go ahead and review all of our columns. We have XL. All right. I still have a side bar there. That’s good. And then at the large, have two columns. And then I have a third one that spans all three. And then at the medium device size, I have this one, cool. And this one, cool.
0:32:14
Let’s check out. Oh, okay. Call span M1. I did that wrong. I put that on my text instead of my div. So call span M1. There we go. And now we’re squared up. I was seeing a little tiny gap. And when you’re seeing a little tiny gap between the edge of a div and the end of the wrapper, there’s typically something breaking the grid. So I was trying to be sleek about that, but you know, at the end of the day, I had to come back and fix it. So anyway, we are fixed up now. So, and then if we look at the S-break point, it’s still all good things on top of each other.
0:32:54
So now we have a completely mobile responsive main section. Guys, this is the reason that I did a triple column layout for this. You could do it much simpler. And you could do it without call spans and all of that. So if you just wanted two columns, that’s super easy to deal with. I wanted to do three columns so that we can work through some of this stuff. Because you’ll see, like, even I’m making mistakes as I go, assigning the class to the wrong thing, and then you’ve got a troubleshoot. And that’s all part of this process. All right. So, I’m working now. What I’m going to do is add, let’s say, categories here. Now, I don’t have any categories yet. So let’s go to our sample blog post and just hit edit. And let’s go down to categories.
0:33:38
And we’ll do cat1. And we’ll do category2. And we’ll do category like this, three. I’ll just put a bunch of different stuff in there. All right. So I’m going to hit update. Now, what I’m going to do, like, you can use a widget, a side categories, but you’re going to have far less control over that. So what I often do is I make a menu. So here’s my sample blog post. Let’s refresh and see what we’ve got. I’m going to go ahead and go to customize up here. I’m going to go to menus, create new menu, and we’re going to call this categories. And you could probably, you know, a better name would be like blog categories. In case you have other kinds of taxonomies, you don’t want to get confused. So here’s blog categories.
0:34:22
And I’m just going to go to this categories tab. And we’re going to say one, two, three, and publish. And so now I’ve made a menu for my categories. Is use the menu element in my sidebar. So first thing I’m going to do is add a div. I like to section these out. And we’re going to call this blog a side right. We’ll do a side. And we’ll just, we’ll call it a widget. How about that? A side widget. Something like that. Even though it’s not technically a widget. All right, we’ll do 100% width to pick up the whole thing. And then we’re going to add a heading to this.
0:34:55
And we’re going to make this an H3. You can make it an H3 or an H4. And we’re going to call this categories. And then I’m going to assign a class to this. So we’re going to do blog, double underscore, a side widget heading. And I’m going to do a little bit of spacing on these. I want to control the spacing of the class level on these without utility classes. Because there’s probably going to be multiple widgets on the page. All right, so now what I’m going to do is add menu. And I’m actually going to add the pro menu. The regular menu, I’m going to type menu. This regular menu is absolutely like if you think the pro menu sucks. This menu is a dumpster fire. So just type in pro, do the pro menu. You select your menu here.
0:35:43
So we’re choosing to see our categories. You can see I’m right there, right? Hopefully the pro menu with all of its faults doesn’t add any default styling. All right, so we’re going to do blog, double underscore, a side menu as our class. And we’re going to go ahead and start styling. Now, first thing on desktop, we need to do a vertical orientation. And you can see that that does not look vertical at all. First thing I’m going to do is we’re going to go to advanced size spacing. I’m going to make sure that we have all of it. All right, and I believe that when I refresh the builder and come back, you’re going to see these stacked on top of each other. Let’s go ahead and try that now. All right, I refresh the builder. I still don’t see these things stacked on top of each other. I’m going to go to the ID level.
0:36:29
I’m going to go to desktop menu and try vertical. All right, so I guess it was set made like even though the button wasn’t lit up, it was clearly set at the ID level to be horizontal. So let me see if I take it all off. I still have this set of vertical. So that doesn’t do anything at the class level. All right, that’s typical of oxygen. All right, so I’m going to go to the class now and see if we can do some margin stuff. Yeah, there we go. Okay, everything else is working at least at the class level. So we have typography. And we’ll see if we can change our link color. We can. I’m not going to change it. The weight.
0:37:07
I’m not going to make it bold or anything like that. We don’t have any hover effect going on here. So I’m going to go to hover typography. I don’t know if this is actually going to work. Super unpredictable. Let’s save and view on the front end. Okay, cool. So now we have our categories list. I wouldn’t recommend making that sticky. I wouldn’t make anything on this side, sticky. Like when you already have one sticky element, if everything is sticky and following people around, it gets a little overwhelming. We, you know, we put categories here. I will say this, you know, another caveat disclaimer. If you have categories, which you’re going to have with your blog post, we have to create a category template for those.
0:37:45
If somebody clicks on it, you’re going to see they’re ain’t nothing there, right? So there’s content, but it’s not the way that it should look. So making note in your mind, man, I linked up to categories. People are going to be able to navigate to them. I need to create templates for those. All right, so we’re pretty much done here. We need to tackle our related posts. All right, so we have Cat1, Cat2, category 3 as our sidebar. Oh, really important. Really important. This, because I’m trying to teach other stuff as we go. Mobile menu toggle below. Set that to never. We don’t want this to ever toggle. So if we look at, you know, this is the lowest break point here.
0:38:24
We should still be able to see our category list. All right, so make sure that that is set to never on a menu like this. You don’t want that to go to a hamburger. That’s like super odd. All right, so I feel good about our main body template here. Let’s tackle our related posts. So the first thing I’m going to do is we don’t really need to close one of them in existence. It’s inside of a template. So I’m just going to go ahead and style it. We’re going to do a little light background here. We’re going to add a heading. This is going to be an H2. And we’re going to call this related posts. And then I’m going to put a margin bottom on this. Let’s try an L.
0:39:01
And then what I’m going to do is add a repeater. All right, so let’s talk about this repeater. The oxygen 3.8 has some repeater, right? So we’re going to be able to go to query, advance, use a preset, and say related posts by terms. And what I would actually recommend is doing random related posts by terms. So that every time somebody loads this blog post, they’re not seeing the same three related posts over and over again. They’re seeing random related posts. So I’m going to go ahead and select that. And the first thing it’s going to ask me is, OK, by terms, like which term do you want? Category, tag, whatever. So I always do category. I don’t use tags in WordPress. Gory is the taxonomy. And boom. Now we’re going to hit safe.
0:39:48
Just since we’ve done that, I’m going to open the structure panel. So you see our repeater, we have our main div. Now, what confuses people is, let me go to our query again, hit apply. OK, we don’t have any posts in categories. I believe. Except one. Oh, we only have one post, and it’s this one, right? So that makes sense. So what I’m going to have to do is go to here, and we’re going to do add new add title. So this is going to be another post in the same category. Bear with me. Set the featured image. We do need a different image. So let’s go to unsplash again. And let’s choose this one.
0:40:27
Let’s choose a tall one. I always like to do this because clients always do this. They, clients love vertical images for some reason, right? Scooch. And you have to plan for this because you can’t be building grids that break when somebody uploads an image. So we’re going to go ahead and download this one. And OK, sure, replace. And then we’re also going to get one more. We’re going to choose, I don’t get some pregnancy ones. Let’s do this. Let’s do a computer. All right, I have a post dramatic stress syndrome from pregnancies. So we’re not going to do that. All right, I’m going to throw this cool story. I’ve got to, I’ve got to maybe tell you guys that story one day about my third child and that delivery.
0:41:17
All right, so we’re going to do that. Cool. Now add new post here we are. So let’s grab this one and throw it in. Oh, I don’t, these might be the full res versions. Let me go to downloads. Boom, boom, boom. I mean, I think I’ll replace. Yeah, not these are right. They’re right. Set featured image. And then we do, you need a little bit of lorum. I’m not going to do whole blog posts for these. We are going to make sure that posts. And we’re going to do category one.
0:41:49
Okay, publish, publish. Cool. All right, let’s go back and let’s do final post in this category. All right, there’s our, oh gosh, I hate that paste. Okay, post edge. And let’s just choose this one. I mean, this will give us three. I didn’t really need three other images. All right, so category one, publish, publish. Let’s go make sure our first one, I believe it was, is in that category as well. Yeah, it’s in all of them. Okay, that’s cool. All right, so now we have to do is refresh here. All right, so now that we’ve done this, you’re going to see, oh, we did need a third post because, yeah, that’s why we need a third post. Okay, let’s go back and we’ll do one more.
0:42:33
So we need, because it’s not going to include the post we’re actually looking at. So we need three beyond the post that we’re actually looking at. This is really the last post in this category. Okay, and we can post. So I was right. I knew I was doing it for a reason. Maybe it’s this middle image. That’s the wrong one. Toss that in. Toss that in. I mean, we can repeat the same image. I don’t really care. Okay, yeah, let’s try this one. Because that won’t show up in the grid anyway. All right, so that’s in category one.
0:43:09
Let’s go ahead and publish. Perfect. All right, we don’t need to refresh. That’s what we’ve got here. Now, what I would recommend, and this is where oxy ninja utility classes come in super handy, you just select the repeater, and then we’re going to do columns three. And see, they work right on a repeater. And then I do gap L, and then we’re going to do at the large breakpoint, we’re going to go to one. Okay, so they just all stack on top of each other at this large breakpoint. So that will work there. Perfect. All right, so we’re going to hit save, save our progress. Thing now we’re going to do, what I like to do is just go to repeater, and I go to single mode.
0:43:50
I just want to work with one thing. I don’t want all this stuff trying to change an update while I’m working on my card. So go into single mode, and that should help you out. Just just know that you’re not going to see the rest of the post until you go look at it on the front end. So I need these to be clickable. Let’s start with that. I like always ask yourself, when you’re creating something in a repeater, do I need this thing to be clickable like in its entirety? Now, if you need something inside of the div to be clickable like a button or a link, that’s a different story. But if you need the entire div to be clickable, not add a link wrapper to the primary div of a repeater. So you need to add a div inside of that. There’s our clickable div. See now I have the link option available to me.
0:44:32
So this is what I’m going to call blog post card. All right, so this is going to be blog post card. And then I’m going to make it 100% with. So it takes up the full container. And then I’m going to add some elements here. So we’re going to add an image. We’re going to add a heading. And we’re going to add an, we’re not going to do an excerpt. You could do an excerpt, but it’s cleaner if you don’t do an excerpt. I’ll just give. And really that’s all we need. Let’s just do a simple card. All right. So I’m going to grab the image. We’re going to do blog post card, double underscore image.
0:45:08
And we’re going to do blog post card, double underscore heading. We’re going to change this to an H3. And oxygen is going to sit and think for a minute, apparently. I don’t know why that was so difficult. Or it’s just going to break. I mean, that’s always. All right, let’s go ahead and hit save. Let’s refresh and see if it can gather itself. All right. So now I’ve refreshed. You can see that it’s all as well. Sometimes oxygen just gets a little, you know, caught up in itself. So I’m noticing I did seem to lose my spacing up here. It’s okay. If I click on it, the spacing comes back.
0:45:47
It’s getting a little buggy. I got to admit, it’s getting a little buggy. But it’s still the best tool out there. All right. So advanced size and spacing, bottom, rim. Let’s go with. And, you know, for this kind of card. Let’s see how it looks first. All right. So I’m going to click the image. We’ll decide if we need to make it like a white card or something like that. I’m going to go ahead and go to the primary tab. Just like we did with the featured image up here. We’re going to do data. And we’re going to select featured image.
0:46:17
And then we’re going to do size. This can be like medium-large. And it’s going to pull. With that yet though. All right. Because remember, there’s going to be a post over here with that vertical image that the client loves to put in. So what we need to do is to plan for that. We’re going to go object fit cover on this. And then we’re going to come back here. And we’re going to set an explicit height. So the width is going to be 100%. And the height is going to be like not 4. 40 maybe. No, that’s way too tall.
0:46:49
20. Okay. 30. Oh, not 20. Let’s do 25. Okay. So let’s go 20. I tend to like narrower photos. Let’s see what we’ve got here. All right. See, you know, it’s coming along. Right. So, you know, I do think we need white. I do think we need to spice it up a little bit. So in that case, what we’re going to do is we’re going to go after the image.
0:47:21
And we’re going to add a div. And then we’re going to do this blog postcard double underscore inner. And we’re going to do 100. And we’re going to put the heading inside of it. And then we’re going to take that pat that margin off of the heading that we had. And then inside that div now that inner div. I’m just going to add padding. So we’re going to do REM. Let’s try three apply all. And then we’ll do a background of white on that. Kind of our our better card. Let’s see what we get. Yeah. That’s a little bit better. I think these are a little far apart too.
0:47:59
So I’m just going to take off this gap L. And we’re going to rock with gap M. Did I select it? There. If. Check it. Oops. Wrong refreshing in. Okay. I think that’s getting better. Now we’re going to round the corners on these a little bit. And we still need to make them clickable. So I’m going to grab my card here. And if we name this like where’s a post to blog post card. It’s easier to find.
0:48:28
Okay. So let’s talk about this. First things first we’re going to do a link wrapper. Which is going to break. Because that’s you know, that’s how oxygen works. I just go to data and I set the post permalink on that link wrapper. And then I’m going to go ahead and hit save. Then I’m going to refresh and I’ll be right back. And we’re back. Okay. So I’m going to go to that inner. I’m going to go to vertical left. And we’re probably good there. But I do want to set the color of this link. So I don’t want that to be blue text.
0:49:00
So let’s let’s go with that. And then let’s get rid of this double click at the headline. So I’m going to. I’m going to double click it. Let’s hit insert data and insert the post title. And we don’t need to link it. Because we’re going to link the entire card. So that’s what we’re going to do. Because we’re going to link the entire card. So there’s another post from the same category. And then if I refresh, we see. All right. We’re really starting to look like we have some blog posts here. All right. Let’s round the corners of everything.
0:49:28
So I’m going to go to structure panel, grab my blog post card. Go to advanced borders. And then we’re going to set this to M. Do let’s see. 1M is usually, you know, pretty decent. Now you’re not going to see anything. Right. So I’m going to go to the bottom and then double check. Or in this often confuses people. They’re like, ah, do I have to go like add the, you know, top and bottom to just the image and then come to that inner. And then add a bottom bottom to the inner. Like what do I have to do here? No. Actually you just add the one in to the entire card. Go to layout and then go to overflow.
0:50:02
Hidden. And that’s going to make sure that it actually does the rounding. So I’m going to hit save. That. That’s a little aggressive on the rounding. I’m going to go to unless, you know, your entire site like that. Then obviously, you know, do you. But I’m going to go to 0.5M. And there you go. Okay. So now we have clickable cards. I do want to, we need some feedback. Like so when somebody hovers over these, yeah, it changes to a hand, right? But it’d be nice if there was a little feedback.
0:50:33
It’ll also be nice if these weren’t so aggressive. You can just change the font size. Again, I don’t have access to my calculator because this new computer, new browser, all that. So in order to get a smaller heading, I’m just. Foretag that, you know, for some reason, confused oxygen again. But I’m going to go on the front end and see now that we have, oh, and it’s good to do this because you see that we’re having a problem here, right? So I do need to go to my repeater, my big wrapper that has my grid on it. And if I add the stretch class, that’ll make sure that all of these are the same height in their container. So when this happens right here, what I like to try, I come in and it typically, this almost never happens when I put stretch on the entire wrapper, but it does happen from time to time. If you come to the parent div and add the stretch class to that as well, it’ll typically force those items inside.
0:51:28
And by the way, my kids just got home and it’s the way you’ll probably hear them start to chime in. But that’s, you see that now they’re all even height. So even when a title is not the, you know, two lines or if they’ve won one to three lines, it’s, it’s okay. It’s not going to break the design. And you see all of the images across the cards are the exact same height. Remember, this one was a vertical image. It’s been contained with that object’s fit cover. All the only thing we need to add now is two things. The alt tags for these images and then we also need to make sure that there’s some feedback. When somebody hovers over these cards that they see that their links kind of visually. So I’m going to click on the image and under alt text, I’m going to hit data. And then you’re going to do featured image alt right here. And this is super important when you’re adding images to blog posts for your featured images, you need to add the alt tag inside of the gallery. So I’m going to hit add, show you that right now just so you can see what I’m talking about.
0:52:33
If I go to media and then I select one of these images, there’s an alt text field right here. So we’re going to say woman dancing in pink dress, right? Like an alt tag is just a little description of what your, what the image is. But now when I go and well, that should save on its own. So we’re going to go ahead and preview this on the front end. And if I identify that image and we inspect, we should see, let’s see, alt, okay, it’s actually not pulling the alt. Let’s make sure that we’re doing that correctly. All right, we’ve got it. Let me, oh, it’s probably, okay, so this is a woman in a pink dress dancing. There is multiple versions of that image. So let’s make sure that they all have them. And then you’ll see that I wasn’t actually lying to you. Okay, so we’ll right click inspect alt. This is a woman in a pink dress dancing. So now you see that the alt is actually in there.
0:53:31
All right, very final step before my kids, you know, completely go off the deep ends is we’re going to go to the link wrapper. So our blog postcard, we’re going to go to state. And then just a super simple thing to do for this is you go to effects, transform, add a transform. We’re going to do translate and then we’re going to translate on the Y axis. So up and down and we’re just going to go to rim and let’s do like minus, well, that’s a lot minus one. Okay, that’s pretty, you want it to be very subtle. And then you can just add the class for using oxygen and just transition class to make that a nice smooth transition. So when I refresh on the front end, you get that little cool effect. So now people can see, oh, yeah, this is nice and clickable. It’s interactive. And then if we click, it’s going to go to that post. That’s, you know, the one we’re looking at. Okay, this is a different one. And you’re going to see that this table of contents is automatically generated. Now it is pulling this here.
0:54:37
And you’re going to see that on our main one as well. Let me see if we can. Okay, so it’s pulling from this section. There is a way to exclude what pulls in from that section. You’re going to have to touch the code for this. Unfortunately, there isn’t a way to do this with like clicking buttons in oxygen. So we’re going to have to go to the table of contents module that TOC code block. And we’re going to go into the JavaScript. And then we’re going to find this line right here. And you can see it, you can identify it because it has all the headings in it. H2, H3, H4, H5, H6. By the way, this is like, you know, this is. So what we’re going to do is after this closed parentheses right here, we’re going to do a period and then not. And I’ll give this to you, you know, for copy paste basically.
0:55:27
Open and closed parentheses and then open and close. What is it called? I can’t even remember. I can’t even think right now because my kids are downstairs going crazy. A apostrophe or whatever. Single quote. All right. So you’re going to do a class and we’ll do TOC, TOC, exclude. So that anything that you apply that TOC, exclude, class two gets excluded from this little search and injection into the table of contents. So I’m going to click my related post heading and we’re going to do TOC, exclude, pop that on there, hit save. And then when I refresh, you’ll see that that is no longer part of our table of contents. That, you know, it seems like it’s not scalable, but actually it is because we’re working on a template. So you just have to make sure that all the H2s that are not actually part of your content are excluded from the table of contents in the template. It’s not something you have to do on like every single blog post. It’s just applies to the H2s that are surrounding your content in the template.
0:56:33
So that’s pretty much it, guys. We have an entire three column blog posts with a sticky table of contents with related posts that are interactive on hover. I feel like this is a really, really great start for you guys. Build out your own blog post templates. You don’t, you can copy this if you want. In fact, I will give you the copy and paste hydrogen shortcode. So you could just copy, paste it into your own website and get started with it. But obviously I would, I would encourage you to branch out and try some of your own blog post designs. If you have any questions, don’t hesitate to ask.
