Now let me show you one of the coolest things you
can do with elements of pro
and that is building a template for your single posts.
Before I do that, let me just show you
very quickly how you can rebuild the blog page.
Remember we used the posts element
from the essential add-ons for this page.
Both elements are pro of course,
you do have the elements
specifically for displaying your posts.
I'm just show you very quickly how it works.
You will find it under Pro,
this is it right here, posts.
You drop it in there.
And of course you can choose the skin number of posts,
show image, height, image.
You have all those options in there.
You've got the query do you want to
pull from posts are due on it,
pool from a manual selection or pages.
Would you like to include by term?
This way you can now add things like categories,
tags, and so on.
You've got your pagination options.
You could just try and options and all that cool stuff,
but that is not what we're here for.
Let me show you how
to build the template first angle posts.
Now let me pick one posted right
here fashion in Istanbul.
This is what we have by default.
And you can see it does not look good at all.
That's because the hello theme
is the one that's been used to display this post.
And it's very, very, very ugly now,
I very specifically have
made the content area for this post very,
very long as you can see. But there's a reason for that.
I'm gonna show you exactly why I chose to do that.
Let me first of all go ahead and build
the template for our posts.
So let's go to elemental, I'm sorry, templates.
And then right here, theme builder.
And we're going to add
the builder for single post right here, clicking there.
No templates found want to create one.
Yes, so I'm going to click on add new like
they're of course with elements are poor.
You will have access to a wide variety of templates.
You can see them right here.
All four single posts,
so many, but I'm going to go ahead and close this.
Let's build out our template.
Now by default, since we're
building the template for a single post,
you'll have access to
these elements under the single category.
These are for your posts,
so obviously won't display the post title,
so I'll drop that in there for the post title.
Now by default, elemental will pull in
the latest posts to use as
a sample when viewing the template content.
If you let you change the selection,
come down here to settings.
Right here you will have
the previous sentence, you click in there.
And then right here,
I can simply type in fashion.
And instead will, because this is the one I want to
use all choose fashion in Instanbul.
Click on Apply and preview.
Now elemental will use the content
from this post for our sample.
Okay, let me make a few changes.
Inhalers make these and H2 aligned to the center.
Let's make the text just a bit bigger.
Maybe 58 pixels, 56 pixels as fine.
Let's add some padding.
At the top, 25 pixels,
two pixels at the bottom as well.
All right, What's next featured image?
Let's drag that in there.
Make this one f2. And of course you can see
the featured image from the post-session and Istanbul.
What's next? You do have the post info.
You can drop that in there.
By default, it will show
the author the date, time comments.
I don't want to display the author.
I don't want to display the name and also the time,
so we move those.
It does leave date and comments.
You can modify these two, of course,
simply click on data as an example
and say for example the icon,
I can just go ahead and remove the icon, fill out one.
You can add extra metadata,
so you click on Add item.
And then right here, you can do things like
add the terms like the category and so on,
costume and so on.
All right, I'm gonna go ahead and close that.
So we only have date and comments.
Let's go back to our elements right here.
Next time we're gonna add will be the post our content.
So we're going to jump into post content down there,
just below the information.
Let me just confirm why this seems to be grayed out.
I'm just okay.
It is displaying in here we've got the post content very,
very, very long or wide. What next?
What do we do like to display?
We can display the post navigation.
We have posts navigation.
Let's drop that in there.
Now we have the previous post, the next post,
of course you can style them as much as you want.
And finally, we can add our post comments.
So post comments right there at the very bottom.
And that is it.
This is going to be our template.
Now, why did I make the content area very, very long.
I want to show you how to make use of a very,
very cool new element called the progress tracker.
You may have seen this on some certain blog before where
You'll have a bar
telling you how much of the content has been
consumed or how much content you still have
to read before you finish the article.
That is the progress tracker right here.
So what I'll do is this, okay,
I'm going to drop it at the top right here,
just above the title.
Let me just share how it works right now you can
see the progress bar idea moving, we're moving.
But the problem is,
is that once we school passed the bar,
we no longer see it.
What's the point of having this by
if you scroll down here and you didn't
even see how much of the content is left.
Well, let me show you a very,
very cool trick. Go to Advanced.
We're editing the progress tracker, by the way,
goods to advanced go-to motion effects.
Right here we have sticky.
Say yes, we're gonna stick it at the top.
What this means right now is that once we scroll,
you will see that the bow will always be there.
And you can see right now until we
get to the very bottom,
that's when the bar finishes.
So that's exactly how to
do this as a very, very, very cool effect.
You can do that for the bottom as well.
Which I don't think doubt
would work because you will actually have to
scroll down at the bottom air.
No, it actually doesn't work.
I'd never tried it. So just go with top. Go with top.
And of course, on the style,
you can change the progress call law.
You can add a border,
you can have a hide border radius, and so on.
For the actual progress checker itself,
the progress will always be
relative to the POSTAR content.
So switch this to post
content and not anti page post content.
You've got to check our types, so-called or horizontal.
This is the circular style,
which can see I don't personally like that,
so I'll just go with horizontal.
You can add percentage if you want.
So it will say twenty-five percent,
thirty three percent, and so on.
You've got all those options in there for you.
That's it. I'm gonna go ahead and now hit Publish.
And just like with a template, you will have to choose
where you would lead to display
this particular templates.
Let's add the condition now by
default it will say all singular.
Be careful all single hour refers to
all single-page is included in your front page.
So it's not all singular.
Click on the drop-down arrow in here.
Now you'll see posts.
Just simply choose posts.
That's it. That's it.
That is all you need.
Gonna go ahead and now click on save and close.
And that's it.
So let's go to the front-page first,
just to confirm front-page as go to articles.
And let's pick, let's say the majestic city of
Glasgow will have to refresh this page.
And there it is.
Okay.
Scroll down.
Now obviously the scroll bar moves very,
very quickly because the content area
here is very, very, very short.
As you can see, it's just one paragraph
or two paragraphs, basically.
Maybe not the best example.
Let's go with the fashion in Istanbul.
Again, I'll have to refresh this page to clear
the cache fashion in Istanbul.
And they you go,
that is the template for our single posts.
We have the TI tool,
we have the featured image,
we have the information
about the pose that data was published,
number of comments, the content area,
the post navigation for
the previous post and the next post.
And of course the comments section.
So that's how to build
a post template for your posts using Elementor Pro.