1
00:00:00,000 --> 00:00:01,560
Now let me show you one
of the coolest things you

2
00:00:01,560 --> 00:00:03,360
can do with elements of pro

3
00:00:03,360 --> 00:00:07,170
and that is building a template
for your single posts.

4
00:00:07,170 --> 00:00:09,090
Before I do that,
let me just show you

5
00:00:09,090 --> 00:00:11,640
very quickly how you can
rebuild the blog page.

6
00:00:11,640 --> 00:00:14,220
Remember we used
the posts element

7
00:00:14,220 --> 00:00:16,920
from the essential
add-ons for this page.

8
00:00:16,920 --> 00:00:18,930
Both elements are pro of course,

9
00:00:18,930 --> 00:00:20,820
you do have the elements

10
00:00:20,820 --> 00:00:22,890
specifically for
displaying your posts.

11
00:00:22,890 --> 00:00:24,690
I'm just show you very
quickly how it works.

12
00:00:24,690 --> 00:00:25,790
You will find it under Pro,

13
00:00:25,785 --> 00:00:27,575
this is it right here, posts.

14
00:00:27,570 --> 00:00:28,770
You drop it in there.

15
00:00:28,770 --> 00:00:33,120
And of course you can choose
the skin number of posts,

16
00:00:33,120 --> 00:00:34,890
show image, height, image.

17
00:00:34,890 --> 00:00:36,710
You have all those
options in there.

18
00:00:36,705 --> 00:00:38,255
You've got the query
do you want to

19
00:00:38,250 --> 00:00:39,780
pull from posts are due on it,

20
00:00:39,775 --> 00:00:42,725
pool from a manual
selection or pages.

21
00:00:42,725 --> 00:00:44,725
Would you like to
include by term?

22
00:00:44,720 --> 00:00:46,790
This way you can now add
things like categories,

23
00:00:46,790 --> 00:00:48,220
tags, and so on.

24
00:00:48,215 --> 00:00:50,275
You've got your
pagination options.

25
00:00:50,270 --> 00:00:54,140
You could just try and options
and all that cool stuff,

26
00:00:54,140 --> 00:00:57,020
but that is not what
we're here for.

27
00:00:57,020 --> 00:00:59,060
Let me show you how

28
00:00:59,060 --> 00:01:00,830
to build the template
first angle posts.

29
00:01:00,830 --> 00:01:02,150
Now let me pick one posted right

30
00:01:02,150 --> 00:01:04,530
here fashion in Istanbul.

31
00:01:04,534 --> 00:01:06,534
This is what we have by default.

32
00:01:06,530 --> 00:01:09,790
And you can see it does
not look good at all.

33
00:01:09,785 --> 00:01:13,555
That's because the hello theme

34
00:01:13,550 --> 00:01:16,850
is the one that's been
used to display this post.

35
00:01:16,850 --> 00:01:18,890
And it's very, very,
very ugly now,

36
00:01:18,890 --> 00:01:21,080
I very specifically have

37
00:01:21,080 --> 00:01:23,420
made the content area
for this post very,

38
00:01:23,420 --> 00:01:26,360
very long as you can see. But
there's a reason for that.

39
00:01:26,360 --> 00:01:30,160
I'm gonna show you exactly
why I chose to do that.

40
00:01:30,155 --> 00:01:32,215
Let me first of all
go ahead and build

41
00:01:32,210 --> 00:01:33,770
the template for our posts.

42
00:01:33,770 --> 00:01:37,100
So let's go to elemental,
I'm sorry, templates.

43
00:01:37,100 --> 00:01:40,280
And then right here,
theme builder.

44
00:01:40,279 --> 00:01:42,319
And we're going to add

45
00:01:42,320 --> 00:01:46,060
the builder for single post
right here, clicking there.

46
00:01:46,055 --> 00:01:48,065
No templates found
want to create one.

47
00:01:48,065 --> 00:01:50,365
Yes, so I'm going to
click on add new like

48
00:01:50,360 --> 00:01:53,660
they're of course with
elements are poor.

49
00:01:53,660 --> 00:01:56,300
You will have access to a
wide variety of templates.

50
00:01:56,300 --> 00:01:57,770
You can see them right here.

51
00:01:57,770 --> 00:01:59,750
All four single posts,

52
00:01:59,750 --> 00:02:03,320
so many, but I'm going to
go ahead and close this.

53
00:02:03,320 --> 00:02:05,560
Let's build out our template.

54
00:02:05,555 --> 00:02:06,925
Now by default, since we're

55
00:02:06,920 --> 00:02:09,020
building the template
for a single post,

56
00:02:09,020 --> 00:02:10,970
you'll have access to

57
00:02:10,970 --> 00:02:14,260
these elements under
the single category.

58
00:02:14,255 --> 00:02:16,165
These are for your posts,

59
00:02:16,160 --> 00:02:19,040
so obviously won't
display the post title,

60
00:02:19,040 --> 00:02:22,360
so I'll drop that in
there for the post title.

61
00:02:22,355 --> 00:02:25,115
Now by default,
elemental will pull in

62
00:02:25,115 --> 00:02:27,965
the latest posts to use as

63
00:02:27,965 --> 00:02:31,705
a sample when viewing
the template content.

64
00:02:31,700 --> 00:02:34,280
If you let you change
the selection,

65
00:02:34,280 --> 00:02:35,960
come down here to settings.

66
00:02:35,960 --> 00:02:37,370
Right here you will have

67
00:02:37,370 --> 00:02:39,370
the previous sentence,
you click in there.

68
00:02:39,365 --> 00:02:40,985
And then right here,

69
00:02:40,985 --> 00:02:44,885
I can simply type in fashion.

70
00:02:44,885 --> 00:02:47,005
And instead will, because
this is the one I want to

71
00:02:47,000 --> 00:02:48,880
use all choose
fashion in Instanbul.

72
00:02:48,875 --> 00:02:50,845
Click on Apply and preview.

73
00:02:50,840 --> 00:02:52,880
Now elemental will
use the content

74
00:02:52,880 --> 00:02:55,640
from this post for our sample.

75
00:02:55,640 --> 00:02:57,740
Okay, let me make a few changes.

76
00:02:57,740 --> 00:03:01,000
Inhalers make these and
H2 aligned to the center.

77
00:03:00,995 --> 00:03:05,125
Let's make the text
just a bit bigger.

78
00:03:05,120 --> 00:03:09,170
Maybe 58 pixels,
56 pixels as fine.

79
00:03:09,170 --> 00:03:11,320
Let's add some padding.

80
00:03:11,315 --> 00:03:14,645
At the top, 25 pixels,

81
00:03:14,645 --> 00:03:17,225
two pixels at the
bottom as well.

82
00:03:17,225 --> 00:03:19,645
All right, What's
next featured image?

83
00:03:19,640 --> 00:03:21,160
Let's drag that in there.

84
00:03:21,155 --> 00:03:23,965
Make this one f2. And
of course you can see

85
00:03:23,960 --> 00:03:27,020
the featured image from the
post-session and Istanbul.

86
00:03:27,020 --> 00:03:30,760
What's next? You do
have the post info.

87
00:03:30,755 --> 00:03:32,615
You can drop that in there.

88
00:03:32,615 --> 00:03:34,255
By default, it will show

89
00:03:34,250 --> 00:03:37,410
the author the date,
time comments.

90
00:03:37,414 --> 00:03:39,244
I don't want to
display the author.

91
00:03:39,245 --> 00:03:41,665
I don't want to display the
name and also the time,

92
00:03:41,660 --> 00:03:43,520
so we move those.

93
00:03:43,520 --> 00:03:45,730
It does leave date and comments.

94
00:03:45,725 --> 00:03:47,485
You can modify these
two, of course,

95
00:03:47,480 --> 00:03:49,390
simply click on
data as an example

96
00:03:49,385 --> 00:03:51,955
and say for example the icon,

97
00:03:51,950 --> 00:03:54,740
I can just go ahead and remove
the icon, fill out one.

98
00:03:54,740 --> 00:03:57,520
You can add extra metadata,

99
00:03:57,515 --> 00:03:58,705
so you click on Add item.

100
00:03:58,700 --> 00:04:00,700
And then right here,
you can do things like

101
00:04:00,695 --> 00:04:03,665
add the terms like the
category and so on,

102
00:04:03,665 --> 00:04:05,945
costume and so on.

103
00:04:05,945 --> 00:04:09,715
All right, I'm gonna go
ahead and close that.

104
00:04:09,710 --> 00:04:13,280
So we only have
date and comments.

105
00:04:13,280 --> 00:04:15,910
Let's go back to our
elements right here.

106
00:04:15,905 --> 00:04:20,125
Next time we're gonna add
will be the post our content.

107
00:04:20,120 --> 00:04:23,260
So we're going to jump into
post content down there,

108
00:04:23,255 --> 00:04:25,915
just below the information.

109
00:04:25,910 --> 00:04:30,430
Let me just confirm why this
seems to be grayed out.

110
00:04:30,425 --> 00:04:32,165
I'm just okay.

111
00:04:32,165 --> 00:04:35,605
It is displaying in here we've
got the post content very,

112
00:04:35,600 --> 00:04:37,550
very, very long or
wide. What next?

113
00:04:37,550 --> 00:04:39,250
What do we do like to display?

114
00:04:39,245 --> 00:04:43,265
We can display the
post navigation.

115
00:04:43,265 --> 00:04:44,765
We have posts navigation.

116
00:04:44,765 --> 00:04:46,615
Let's drop that in there.

117
00:04:46,610 --> 00:04:49,130
Now we have the previous
post, the next post,

118
00:04:49,130 --> 00:04:51,500
of course you can style
them as much as you want.

119
00:04:51,500 --> 00:04:55,160
And finally, we can
add our post comments.

120
00:04:55,160 --> 00:04:58,180
So post comments right
there at the very bottom.

121
00:04:58,175 --> 00:05:00,565
And that is it.

122
00:05:00,560 --> 00:05:03,700
This is going to
be our template.

123
00:05:03,695 --> 00:05:08,435
Now, why did I make the
content area very, very long.

124
00:05:08,435 --> 00:05:10,465
I want to show you how
to make use of a very,

125
00:05:10,460 --> 00:05:14,900
very cool new element called
the progress tracker.

126
00:05:14,900 --> 00:05:17,980
You may have seen this on some
certain blog before where

127
00:05:17,975 --> 00:05:19,895
You'll have a bar

128
00:05:19,895 --> 00:05:22,075
telling you how much of
the content has been

129
00:05:22,070 --> 00:05:24,410
consumed or how much
content you still have

130
00:05:24,410 --> 00:05:27,290
to read before you
finish the article.

131
00:05:27,290 --> 00:05:29,690
That is the progress
tracker right here.

132
00:05:29,690 --> 00:05:31,670
So what I'll do is this, okay,

133
00:05:31,670 --> 00:05:34,720
I'm going to drop it
at the top right here,

134
00:05:34,715 --> 00:05:36,665
just above the title.

135
00:05:36,665 --> 00:05:39,115
Let me just share how it
works right now you can

136
00:05:39,110 --> 00:05:42,500
see the progress bar idea
moving, we're moving.

137
00:05:42,500 --> 00:05:44,150
But the problem is,

138
00:05:44,150 --> 00:05:47,170
is that once we school
passed the bar,

139
00:05:47,165 --> 00:05:49,715
we no longer see it.

140
00:05:49,715 --> 00:05:51,275
What's the point
of having this by

141
00:05:51,275 --> 00:05:52,765
if you scroll down
here and you didn't

142
00:05:52,760 --> 00:05:55,850
even see how much of
the content is left.

143
00:05:55,850 --> 00:05:57,500
Well, let me show you a very,

144
00:05:57,500 --> 00:06:00,520
very cool trick. Go to Advanced.

145
00:06:00,515 --> 00:06:01,885
We're editing the progress
tracker, by the way,

146
00:06:01,880 --> 00:06:05,230
goods to advanced
go-to motion effects.

147
00:06:05,225 --> 00:06:07,435
Right here we have sticky.

148
00:06:07,430 --> 00:06:10,900
Say yes, we're gonna
stick it at the top.

149
00:06:10,895 --> 00:06:14,645
What this means right now
is that once we scroll,

150
00:06:14,645 --> 00:06:18,325
you will see that the bow
will always be there.

151
00:06:18,320 --> 00:06:19,880
And you can see
right now until we

152
00:06:19,880 --> 00:06:21,640
get to the very bottom,

153
00:06:21,635 --> 00:06:24,055
that's when the bar finishes.

154
00:06:24,050 --> 00:06:26,360
So that's exactly how to

155
00:06:26,360 --> 00:06:29,410
do this as a very,
very, very cool effect.

156
00:06:29,405 --> 00:06:32,135
You can do that for
the bottom as well.

157
00:06:32,135 --> 00:06:35,095
Which I don't think doubt

158
00:06:35,090 --> 00:06:36,500
would work because you
will actually have to

159
00:06:36,500 --> 00:06:38,060
scroll down at the bottom air.

160
00:06:38,060 --> 00:06:39,530
No, it actually doesn't work.

161
00:06:39,530 --> 00:06:42,760
I'd never tried it. So just
go with top. Go with top.

162
00:06:42,755 --> 00:06:44,905
And of course, on the style,

163
00:06:44,900 --> 00:06:47,470
you can change the
progress call law.

164
00:06:47,465 --> 00:06:49,055
You can add a border,

165
00:06:49,055 --> 00:06:51,965
you can have a hide
border radius, and so on.

166
00:06:51,965 --> 00:06:54,745
For the actual progress
checker itself,

167
00:06:54,740 --> 00:06:56,390
the progress will always be

168
00:06:56,390 --> 00:06:58,550
relative to the POSTAR content.

169
00:06:58,550 --> 00:07:00,620
So switch this to post

170
00:07:00,620 --> 00:07:03,370
content and not anti
page post content.

171
00:07:03,365 --> 00:07:06,055
You've got to check our types,
so-called or horizontal.

172
00:07:06,050 --> 00:07:07,820
This is the circular style,

173
00:07:07,820 --> 00:07:12,170
which can see I don't
personally like that,

174
00:07:12,170 --> 00:07:13,870
so I'll just go with horizontal.

175
00:07:13,865 --> 00:07:15,715
You can add percentage
if you want.

176
00:07:15,710 --> 00:07:17,960
So it will say
twenty-five percent,

177
00:07:17,960 --> 00:07:19,880
thirty three percent, and so on.

178
00:07:19,880 --> 00:07:22,340
You've got all those
options in there for you.

179
00:07:22,340 --> 00:07:25,020
That's it. I'm gonna go
ahead and now hit Publish.

180
00:07:25,024 --> 00:07:27,294
And just like with a template,
you will have to choose

181
00:07:27,289 --> 00:07:29,029
where you would lead to display

182
00:07:29,030 --> 00:07:30,310
this particular templates.

183
00:07:30,305 --> 00:07:32,215
Let's add the condition now by

184
00:07:32,210 --> 00:07:34,660
default it will
say all singular.

185
00:07:34,655 --> 00:07:37,375
Be careful all single
hour refers to

186
00:07:37,370 --> 00:07:40,990
all single-page is included
in your front page.

187
00:07:40,985 --> 00:07:44,515
So it's not all singular.

188
00:07:44,510 --> 00:07:46,810
Click on the drop-down
arrow in here.

189
00:07:46,805 --> 00:07:48,505
Now you'll see posts.

190
00:07:48,500 --> 00:07:51,170
Just simply choose posts.

191
00:07:51,170 --> 00:07:53,720
That's it. That's it.

192
00:07:53,720 --> 00:07:55,880
That is all you need.

193
00:07:55,880 --> 00:07:58,810
Gonna go ahead and now
click on save and close.

194
00:07:58,805 --> 00:07:59,815
And that's it.

195
00:07:59,810 --> 00:08:06,490
So let's go to the
front-page first,

196
00:08:06,485 --> 00:08:09,895
just to confirm front-page
as go to articles.

197
00:08:09,890 --> 00:08:13,670
And let's pick, let's
say the majestic city of

198
00:08:13,670 --> 00:08:19,440
Glasgow will have to
refresh this page.

199
00:08:20,440 --> 00:08:22,430
And there it is.

200
00:08:22,430 --> 00:08:23,540
Okay.

201
00:08:23,540 --> 00:08:25,890
Scroll down.

202
00:08:25,894 --> 00:08:27,414
Scroll down.

203
00:08:27,410 --> 00:08:29,960
Now obviously the
scroll bar moves very,

204
00:08:29,960 --> 00:08:31,520
very quickly because
the content area

205
00:08:31,520 --> 00:08:33,230
here is very, very, very short.

206
00:08:33,230 --> 00:08:34,850
As you can see, it's
just one paragraph

207
00:08:34,850 --> 00:08:36,380
or two paragraphs, basically.

208
00:08:36,380 --> 00:08:38,210
Maybe not the best example.

209
00:08:38,210 --> 00:08:40,700
Let's go with the
fashion in Istanbul.

210
00:08:40,700 --> 00:08:44,480
Again, I'll have to
refresh this page to clear

211
00:08:44,480 --> 00:08:48,550
the cache fashion in Istanbul.

212
00:08:48,545 --> 00:08:51,355
And they you go,

213
00:08:51,350 --> 00:08:54,260
that is the template
for our single posts.

214
00:08:54,260 --> 00:08:55,690
We have the TI tool,

215
00:08:55,685 --> 00:08:57,535
we have the featured image,

216
00:08:57,530 --> 00:09:00,080
we have the information

217
00:09:00,080 --> 00:09:01,820
about the pose that
data was published,

218
00:09:01,820 --> 00:09:05,360
number of comments,
the content area,

219
00:09:05,360 --> 00:09:07,430
the post navigation for

220
00:09:07,430 --> 00:09:09,280
the previous post
and the next post.

221
00:09:09,275 --> 00:09:12,055
And of course the
comments section.

222
00:09:12,050 --> 00:09:14,200
So that's how to build

223
00:09:14,195 --> 00:09:19,505
a post template for your
posts using Elementor Pro.