Display your progress or skills and add a beautiful progress bar to any WordPress website using Elementor Page Builder.
hey guys this is Noah from Elementor
today I’ll teach you about our progress
bar widget with which you could display
your progress or skills any creative and
colorful way check it out for this
resume I added for progress bars each
with its own colors and amount by
percentage with its sliding animation it
automatically adds an interesting touch
to the page now I’ll show you how to add
it by clicking on the edit with element
button okay so here as you can see I
already have three progress bars and I
would like to add a fourth one for the
visual design skills and set its color
as the light blue so first I’m going to
search for the widget here we go I’ll
drag it on top of there so once the
widgets in its place you will see the
content area and the style area in the
content area you have full control over
the progress bars contents so first of
all you have the title where you insert
the title of the progress bar let’s put
visual design alright and you have the
type where you could set the type of the
bar as info success seeing green warning
orange and danger red let’s leave it at
defaults here you have the percentage
you could choose the percentage in which
the bar will be displayed let’s pick 95
and here you can choose whether to
display the percentage inside the bar as
you can see here it’s displayed it’s on
show you could choose to hide it let’s
keep it on show
and you have the inner text which is the
text that’s displayed inside the bar
I’ll just erase it here we go and that
was the content area now let’s move over
to the style area of the widget here you
have the style options for the progress
bar and for the title under the progress
bar style options you have the bar color
here you could set the color of the bar
all right so I set it as blue and here
you have the bar background color which
is actually if I set it it’s the color
that’s beneath the bar as you can see
here I’ll just set it here we go and we
have the inner text color which sets the
color of the text that’s displayed
inside the bar including the percentage
and you have the title style options
which is the text color and we have
typography let’s customize it ok let’s
set the weight as bold transform
uppercase and letter spacing one now as
you can see right here I have a padding
so I’ll just give this one a padding as
well under advanced and I’ll give it a
bottom 50 all right with these bars you
could add an amazing touch to any page
on your website I hope you enjoyed this
video for more videos and tutorials
subscribe our youtube channel or visit
us at Doc’s Elementor com
