Progress Bar

Progressbar shortcode: #

Content Settings: #

Templates – Here you can choose template style for the Progressbar (Inline or Counter Simple)

Inline Style #

• Counter value – Please, enter the percentage value from 0 to 100.
• Heading – Here you can enter the heading text.
• Use custom font for heading? – Turn on the switch if you want to customize the heading typography
• Use custom font for text? – Turn on the switch if you want to customize the text typography
• Line color – Please, select the line color from the palette box.
• Active line color  – Please, select the active line color from the palette box.
• Use custom font for numbers? – Turn on the switch if you want to customize the numbers typography
• Use custom font for description? – Turn on the switch if you want to customize the description typography

Counter Simple #

• Counter value – Please, enter the percentage value from 0 to 100.
• Heading – Here you can enter the heading text.
• Use custom font for heading? – Turn on the switch if you want to customize the heading typography
• Use custom font for numbers? – Turn on the switch if you want to customize the numbers typography
• Use custom font for description? – Turn on the switch if you want to customize the description typography

Heading Typography: #



These options is only available if you select the “Use custom font for heading” checkbox in the content settings.

Text Color – Here you can select heading color from the palette
Alignment –  – Here you can select the heading alignment.
Typography item:
• Family – Here you can select the typography for the heading
• Size – Here you can set up the heading size 
• Weight – Please, select the weight for the heading
• Transform – This option allows to change the case of the text. 
• Style – Please, select text style for the heading
• Decoration – Please, select style for the heading decoration
• Line-Height – Here you can enter a line height for the heading
• Letter Spacing – Here you can enter a letter spacing for the heading

#

Text Typography: #

These options is only available if you select the “Use custom font for text” checkbox in the content settings.

• Text Color – Here you can select text color from the palette.
• Alignment – Here you can select the type of text alignment.

• Family – Here you can select the typography for the text.
• Size – Here you can set up the text size.
• Weight – Please, select the weight for the text.
• Transform – This option allows to change the case of the text. 
• Style – Please, select a text style for the text.
• Decoration – Please, select a style for the text decoration.
• Line-Height – Here you can enter a line height for the text
• Letter Spacing – Here you can enter a letter spacing for the text.

Numbers Typography: #

Text Color – Here you can select title color from the palette.

• Family – Here you can select the typography for the title.
• Size – Here you can set up the title size.
• Weight – Please, select the weight for the title.
• Transform – This option allows to change the case of the text. 
• Style – Please, select text style for the title.
• Decoration – Please, select a style for the title decoration.
• Line-Height – Here you can enter a line height for the title.
• Letter Spacing – Here you can enter a letter spacing for the title.

Description Typography: #

These options is only available if you select the “Use custom font for description” checkbox in the content settings.

• Text Color – Here you can select title color from the palette.
• Alignment – Here you can select the title alignment.

• Family – Here you can select the typography for the description text.
• Size – Here you can set up the description text size.
• Weight – Please, select the weight for the description text.
• Transform – This option allows to change the case of the description text. 
• Style – Please, select text style for the description text.
• Decoration – Please, select a style for the description text decoration.
• Line-Height – Here you can enter a line height for the description text.
• Letter Spacing – Here you can enter a letter spacing for the description text.

#

#