 In this video, we are going to look at how to add retime to our blogs. We're going to do this to our blog post using the Elementor Loop Builder, and we're going to add them to our blog templates as well. We're going to use two different methods. The first one, we're going to use JetEngine, for all of you out there that are using CrocoBlog. The second method that we're going to use, we are going to use a free version of advanced custom fields. So I do got timestamps inside the description, bounce to where you need to get to, to get the right information. I'm going to make this one pretty quick and easy. And if you do like this and find it helpful, you know that good YouTube stuff. Make sure to like. And if you want to keep updated with content like this for web designers and creators, then make sure to subscribe. All right, let's jump in. We are going to start with advanced custom fields, and we're going to be using the free version. Go over to your add plugins, and just type in advanced custom fields. And we're looking for this right here, ACF. So I've already installed it. I'm just going to activate it. Now here we have this option for custom fields. Our left sidebar, let's go ahead and click on that. From here, we're going to select on add new field group. And let's go ahead and give it a name. We're going to call this retime. All right, now here we have the option for our field type. This is going to be what kind of a field goes inside a blog post. And the field is going to be a field where we could fill in the information. So we're going to want to change this to number, because we want there to be a number that we could add for the number of minutes. Let's go ahead and change the fill label to, again, we're going to call this retime. Fill name automatically populates. Now, a default value. This is totally up to you if you want to add something. If you put a value in here like zero, all of your fields are going to start off with zero. So in the front end, right now, if I were to add it, all my blog posts would show zero minutes retime. Now, I probably will leave this one blank and only fill it in. That way, only accurate information is getting put out there. But for the sake of this video, I'm going to put three so that way you could see how it works inside the front end. From here, now we have our settings and the settings are already set up good to go. This is going to be for a post type, which is WordPress default post equal to and post. So it's all good to go. Now I'm going to go ahead and save the changes. And here is one of my blog posts right here. Now, all the way down here at the bottom, you can see the custom field. If you do not see this custom field, then something went wrong. Go back through and make sure everything was done right and everything was saved correctly. Now with this set up, we are good to go to add it to Elementor. We're going to start off with a loop builder. So that way we have it in our post grids. And then we're going to go to our blog template. I'm going to be using this demo website right here. And I have my loops right over here. It's not that pretty. I just did something really quick and simple. So let me edit this. Now select on edit template. And from here, whatever we add in here is going to reflect for the rest of the post grid. I did make a video on the loop builder in case if you are new to it, I'll go ahead and leave a link somewhere around here. All right. So now we got our title, our button and featured image. Let's add in our read time inside here. I'm going to go over to my widgets and I'm going to put post info. I'm going to slide this right down below the title. Let me undo all these. I just want one item. I'm going to change this type over here to custom. Now in the custom, we're going to select on dynamic tags. And here scroll all the way down to our ACF and we're going to add on ACF fill. Now click on this right here where it says ACF fill. And we're going to have this drop down for settings and underneath the key, we're going to see the one that we created, which is our read time. Next, we want to go to our events and we want to add in our before and after. So I'm going to put in right here read time and I'm going to create a space right there. And then on after, I found what really helps out create another space right there and start it. And I'm going to put just men. Next up, I want to turn off the icon right here. So it aligns to the right and then I could go ahead and style this up. Let me go ahead and do that. I got my styles all here makes it really quick to do. And I'm going to add some spacing here. We'll put 20 pixels, give a good amount of spacing. Let's go ahead. You can select on update right here or you can click on save and back and it'll do the same. And there we go. Now we got the read time across all of the blog posts and you can position this any way that you want using elements or loop builder. That's why I love loop builder. This thing is awesome. You can put this way up here. You can do anything. You can make it go sideways. All right. We're not going to go there right now. All right. Really quick. Let me show you how this all works. So if we look at the front end, we're going to see three minutes and we got finding your ideal client right here. So I'm going to go to that blog post and let's say this one is a very small blog post. So I'm going to put on just one minute. Let's update that. We can refresh it. And there you can see we have our read time. All right. Let's now go add this to our blog template. So that way when we see a single post, we have it right there. Let's go over and create a template really quick. We're going to make a really fast one. Now from here, I'm going to add new and I am going to add a single post. I'm going to call this one my blog template. And I'm also using the old school theme builder. You might be using a newer one. I personally like this one a lot better, but it's the same exact thing. You're going to create a single post. And now this is really important. Do not use these pre-built templates. They're really old and outdated. They're not compatible with where Elementor is now. I'm really hoping Elementor removes them and build some new ones soon. They have some new ones inside the works for containers. So that's good news. All right. Let's go ahead and click on our container right here. Let's do everything inside a single container. Now build in a blog and build in the template. You don't have to create many different sections or containers. You can do it all in one. All right. I'm going to do this quickly. Now let's add the title right here. Let's add the featured image right here. Where is it at? And then right underneath that, we're going to add our post content. All right. We can style this up really quickly. Let me center align this. I have my styles. So I got my color. We're going to make this large right over here. I'm going to make this a lot smaller. I want this to be boxed in. We're going to make this at 800. I like my blog post to be narrow. It's a lot easier to read. All right. And then let me add some spacing here. I'm going to put 40 pixels below to get some proper spacing. And let me fix this up as well. I'm going to make that black. And then I got my body text right here. In fact, I'm going to make this more narrow. I'm going to make it 650. All right. And now I want to put the read time and author right here. So let's go back here and let's put the post info widget. And let's remove two of them. We could keep the author. I think the author is cool to have for the date. Let's go back and do the same thing that we did. We're going to change it to custom. We're going to select on dynamic tags. Go down here to ACF filled. Click on ACF filled and select on read time. We're going to do the same in the advanced. Before we're going to put read time. Add a space as well. And then after start off by adding a space. And we'll put men right here short for minutes. All right. Now for the icon, we do want to put an icon right here. Because it would be kind of cool if you want to pull it. You don't have to. I'm going to go here. I'm going to put time. And let's see. Do we have a watch? A clock. Here we go. Now let's go ahead and style it up. We're going to make our icons this dark blue. Our text this dark blue. And let's go ahead and get that. And then we could center align that add a little bit of spacing. All right, you can see I'm geeking out now, but I like to show a bit of my design process. Now I will go ahead and put some spacing around here. I probably put like 20 pixels all around. And then the top and bottom would do 80. This is what I normally do for a blog post. And we have our read time with our author right here. Super easy. Now let's jump over to jet engine because it's very similar. Let me go over back to my plugins. I'm going to activate my jet engine from here. Now I'm going to go over to meta boxes. And the meta boxes are going to work the same as a custom field. So I'm going to click on meta box. I'm going to add a new one. I'm going to call this one read time. And we're going to keep it on it for post. That's what it's for. I want to put on edit the meta box link. There's a few more options here. There's a few more than the ACF and some cool things that we could do as well. Now let's enable it. And we're going to select on post. Now we need to create our meta field. Same thing as a custom field. Select on that. Let's go ahead and give it a name. I'm going to call the read time. Oops. Same thing auto populates. We're going to keep this as a field. I want to fill just something easy to fill in. And same thing right here is ACF. We got these options. And I want to change it from text over here to number. Where is number at? There we go. And as we go, you can see there's a lot more options over here. So we could put a minimum value. Maybe two is the lowest out of a go because no blog post would be less than two minutes. Or you could also put the maximum value. Say you don't want to go in past 10 minutes. That way nobody can make a mistake saying hey this blog post is 100 minutes. Nobody would ever click on it. All right, we could put in our description. This is the read time. We could change our fill width. We're going to leave it just as it is. And then same thing as ACF. We have our default value. I normally would leave a blank for this tutorial. I'm going to change this one to five. So it's more identifiable in the front end. Easier to see as you are learning this. I do like to turn this on the quick edit support. I'll show that in a moment as well because it's super helpful. Now I'm going to click right on here at meta box. We got it. Now let's go over to our post. If we refresh it, we should see it down here if we did everything correctly. You can see our default is set at five minutes. And now that we have our meta fill set up custom fill meta fill. Same thing. We could go now back to our homepage. Let me refresh this right here. And we're going to do the same exact thing that we did with ACF. I'm going to go over here and edit my loop builder. My loop. I am now going to add the post info. I'm going to drop it right here. Let me take out all these. I just want to put read time. I'm going to now take this down to custom. Select on dynamic tags and scroll all the way down to the bottom where we can see our jet engine options. And we are going to select on custom field from here. Now you could if you don't see this, you could just click on it. It'll drop down. We're going to select now on read time. And here we're going to go to our advanced. We're going to put in read time out of space and the after start off with a space and we're going to put men right over here. And then I am going to take out the icon so it's flushed style it up. Let me make this one blue out of my font style right here. I'm going to put 20 pixels down and then we could go ahead save and go back. And now we could see our read time. On everything. And if we go back to it, so we got five minutes here. Let me go ahead and edit this. I'm going to put two minutes right here. Let me update that. Let's refresh this. And now you can see we got two minutes. Now, if you are wondering, well, how do I find out the actual read time for a blog post? I got this really cool tool right here about to show you. In fact, my man Ben, that's from the Lightbox crew. He's the one that showed me this tool. It is the Read-O-Meter. It is completely free and I'll leave a link to it inside the description. Basically, let's just go here. What we could do is copy and paste all the text. I'm just going to scroll, capture all of this, copy it, paste it in here, select on estimate reading time. And there we go, seven and a half minutes. Probably will round it down because people don't want to read long blog posts, but it's completely free, really helpful. Also, in case if you're wondering, well, why not use a plugin? Because there are plugins dedicated to adding reading time. The thing is using custom fields or meta fields like what we did inside this tutorial will allow us to be more creative and have more flexibility on how we create our post grids and our post templates because that's the power of using a tool like Elementor or even Bricks. Using this method, it gives us that flexibility and it is a really good practice and habit to get familiar with using custom fields and custom post types. Well, I hope this video helped. If it did, you like content like this, make sure to subscribe, support the channel. It is much appreciated and I'll be back again soon. All right, thank you.