What is a Progressbar element on Dotcom?
A Progressbar element on Dotcom lets you add a progress bar to your website. This is a visual indicator of the progress of a task, process, or topic.
Progress bars are versatile, and you can place them at strategic places on your site to keep your viewers informed and engaged. If used creatively, they can build trust and drive conversions.
Steps to use the Progressbar element on Dotcom
- On your Dotcom dashboard, navigate to the Themes menu. Select your theme from the My Themes section. Click on the three-dot icon to open a floating menu. Now, click on Edit to open the theme dashboard.
- Here, select the page on which you want to insert the Progressbar element from the Select dropdown to open that page on your screen.
- In the Elements tab, drag and drop the Progressbar element into position on the page layout. Let’s see how to customize it on Dotcom.
- Hover over the dropped Progressbar element. It has three sections. You can customize each section individually.
- Edit the progress bar.
- Edit the progress bar container column.
- Edit the progress bar container row.
- Let’s first see how to edit the Progressbar element.
How to edit the Progressbar element on Dotcom?
- Click on the edit icon to customize the Progressbar element.
- The customization panel loads on your screen’s right side. Here, you have 3 tabs.
- Content
- Style
- Advanced
How to edit the content of the Progressbar element on Dotcom?
- Let’s start with the Content tab first to customize the progress bar.
- In the Progress Bar section, enter the Title for the progress bar.
- Next, adjust the Percentage progress of the bar using the range slider.
- Add the Inner Text of the progress bar.
- You can opt to display or hide the percentage value by toggling the Display Percentage switch.
How to edit the style of the Progressbar element on Dotcom?
- Navigate to the Style tab to do some style customizations for the Progressbar element. Here there are two sections- Progress Bar and Title.
Progress Bar Section
- In this section, select the Color for the progress bar by clicking on the globe icon. Choose a color from the Global Colors list.
NOTE: All the colors set in Theme Styles > Site Colors are displayed in the Global Colors list. Any Custom Color added here is also displayed on the list.
- If you want a custom color, click on the color box and pick a color from the color picker tool. Alternatively, you can enter the color values in HEX, HSL, or RGB format or pick an exact color using the color dropper tool.
- Repeat the same steps to select the Background Color.
- Adjust the progress bar Height using the range slider.
- Next, set its Radius by first selecting the size unit as px, %, em, or rem from the dropdown and then using the range slider tool.
- For the Inner Text, first, select the Color by clicking on the globe icon and picking a color from the Global Colors list. Else, click on the color box to set the color you want.
- To set its Typography, click on the globe icon to select a font from the Global Font Style list. Click on the values against Font Style 1, Font Style 2, or Font Style 3 to change the font style.
NOTE: The changes you have made at Theme Styles > Site Fonts are applied to the font when you select Font Style 1, 2, or 3. If you have added a new Font Style, it is also displayed here.
- If you want a custom font style, click on the edit icon next to the globe icon for Typography. In the floating window, set these font style parameters-
- Font Family
- Font Size
- Font Weight
- Style
- Transform
- Line Height
- Letter Spacing
- Next, to set the Text Shadow of the Inner Text, click on the edit icon. Here, select a Color by clicking on the color box. Enter its X & Y offsets. To set its Size, first select px, em, or rem from the dropdown and adjust the size using the range slider.
Title Section
- You can customize the title by adjusting its Text Color. Click on the globe icon and select a color from the Global Colors list, or set a color you want by clicking on the color box and picking the color from the color picker tool.
- Next, customize the title’s Typography by clicking on the globe icon and selecting from the Global Font Style list. Else, click on the edit icon to make custom changes to the font.
- To set the Text Shadow of the Inner Text, click on the edit icon. Here, select a Color by clicking on the color box. Enter its X & Y offsets. To set its Size, first select px, em, or rem from the dropdown and adjust the size using the range slider.
How to configure advanced settings for the Progressbar element on Dotcom?
- Navigate to the Advanced tab to configure some advanced settings for the Progressbar element.
- Once we have completed customizing the Progressbar element, let’s start with the customizations for its container column and row.
2. How to edit the Progressbar container column on Dotcom?
- Hover over the Progressbar element and click on the edit icon for the container column. The Customization panel loads on the right side with three tabs. Items here include-
- Content
- Style
- Advanced
- Customize the container column to suit your branding requirements.
3. How to edit the Progressbar container row on Dotcom?
- Hover over the Progressbar element and click on the edit icon for the container row. The Customization panel loads on the right side with three tabs.
- Content
- Style
- Advanced
- Customize the container row to match the website theme.
You can perform some general customizations, such as deleting or duplicating the Progressbar element or container on Dotcom. That ends our tutorial on how to use the Progressbar element on Dotcom.
If you have any questions regarding this topic, we recommend reaching out to our implementation specialist or contacting our support team for further assistance.
For detailed pricing plans, please visit Dotcom’s pricing page. To explore the full range of features and benefits, schedule a demo with our team.