How to Add Reading Progress Bar in Elementor (without Add-on)

Do you often write long-form articles on your website? If yes, you might want to add a reading progress bar to improve the user experience for your visitors. Elementor (the pro version), comes with a native widget called Progress Tracker which you can use to add a reading progress bar. Thanks to this widget, you no longer need to install an add-on to add a progress bar in Elementor. The widget started available in Elementor 3.5.

You can add a progress bar using the Progress Tracker widget to any page (or template) on your Elementor-powered WordPress website. In most websites, a progress bar is added to the header of the website. This practice allows the progress bar to appear on all pages within the website. Here is an example of the progress bar on HubSpot.

In addition to the header, you can also add the reading progress bar on the sidebar of the single post layout. This post will show you to add reading progress to the single post layout.

Adding Reading Progress to Single Post Layout in Elementor

Since we want to add the reading progress bar to the single post layout, you need to create the custom single post layout first. You can read our previous article to learn how to create a custom single post template in WordPress using Elementor. In this post, we will go straight to adding the Progress Tracker widget to an existing single post template.

Before getting started, make sure you have updated your Elementor Pro to version 3.5 in case you haven’t done so. Once you are ready, go to Templates -> Theme Builder on your WordPress dashboard to access Elementor Theme Builder screen. Click the Single Post tab on the left panel. Select the custom template you want to add the Progress Tracker widget to and click Edit to edit it.

Once the Elementor editor opens, add the Progress Tracker widget by dragging it from the widget panel to the canvas area. Place it to an area you want.

On the Progress Tracker block under the Content tab, select a tracker type on the Tracker Type option. There are two tracker types you can choose from: Horizontal and Circular. Set the direction on the Direction option. If you want to display the percentage, you can simply enable the Percentage option.

Styling Up the Progress Bar

You can style up the progress bar to make it look more appealing. For instance, you can change the color to make it fit the color scheme of your website. To style up the progress bar, you can go to the Style tab on the settings panel. From here, you can set things like progress bar color, border color, border style, tracker background, and so on.

To make advanced settings such as padding and margin, device visibility, and so on, you can switch to the Advanced tab on the settings panel.

Once you are done editing the Progress Tracker widget, you can update the template by clicking the UPDATE button on the bottom side of the settings panel.

The Bottom Line

Reading progress bar is a simple, yet useful feature to improve the user experience on your website. It allows your visitors to track how far they have been on the page they are viewing. The feature is especially useful if you often write long-form articles on your website. Since version 3.5, Elementor has had a Progress Tracker widget, a native widget that you can use to add a progress bar to your website so that you no longer need to install an add-on to add a progress bar to your website.

What Are the Benefits of Screen Capturing Software?

Screen recording software can help lots of industries that want to improve collaboration, boost their productivity, and much more. Screen capturing may come in handy when you need to provide directions to colleagues, record important meetings, and train employees. Modern screen recording solutions boast a wide variety of features and functions that not only allow you to capture any part of your screen but also make necessary edits to it. What’s more, a good many screen recording tools that are currently available on the market can be used for free. But there is much more to this type of software. In today’s article, we’re going to review the major benefits of screen capture solutions and help you figure out how your business can use them to its advantage.

What is Screen Recording?

As its name suggests, screen recording helps you capture your screen and record a video that you’ll be able to use later. But what is screen recording used for? You can record your conference, business meeting and create a detailed video with the help of a robust screen recording app or a dedicated program. You can also record the entire desktop and then share your videos with the intended audience on YouTube or other video-sharing platforms. What’s more, screen recording software is now widely used to improve workplace productivity and provide professional and even psychological help to employees.

How Do I Do Screen Recording?

If you’re no stranger to video recording, you already know that the entire process depends on the software you’re using. With some tools, you’ll just need to press a couple of buttons, and the program will do the rest for you while using others will require you to tweak more settings or possess more specialized skills to enjoy the versatility of features to the fullest.

In general, if you want to capture your screen activity on your desktop PC, you need to navigate to the screen area you want to record and press a certain combination of buttons. Windows and Mac come with their own built-in screen recording software that enables users to record their screen, capture screenshots, broadcast screen activity, and save recorded projects to a specific location. Windows’ Game Bar and MacOS’ built-in screenshot tool will help you grab the entire screen or record on-screen activity almost from any application installed on your computer. You can also record your voice and audio using the dedicated features in these programs.

You can record your screen and capture audio on mobile devices. Thus, those who use Android 11 and higher versions can turn to the Android screen recorder or the Google Play Games option. Apple devices, in their turn, boast their own screen recording tool, which also makes screencasting a breeze.

There are also lots of third-party screen capture and video recording solutions you can install on your device to grab your screen fast.

Just make sure the screen recorder you choose is reliable, safe, and compatible with your device.

Benefits of Screen Capture Software

Now that we’ve answered the common “what is screen capture software” question, it’s about time we took a closer look at the benefits this type of software can actually bring to your business.

# 1 Employee Training

Just like any other video recording tool, your screen recorder can be used for creating video content for your business. And one of the most useful types of video content you can create is that which can help your employees polish their professional skills and get proper training quickly and comfortably. Record effective instructional and onboarding videos for your team members. Create helpful tutorial videos and compile training projects by simply recording essentials from your screen.

It’s also important to note that screen recording software enables HR managers to record interviews with applicants and then review necessary materials to make more accurate hiring decisions. And there is much more you can do with robust screen recorders in terms of optimizing your employee training.

# 2 Timely Spot System Errors

What is a screen record in essence? It’s a great way to capture some processes and the system’s inner workings and then review the recorded materials in order to identify potential weaknesses, errors, or inconsistencies. You can use your screen capturer to spot system failures and software crashes and come up with effective solutions to the problems that can result in system downtime and thus inflict financial losses on your business. You can tap into the potential of your screen recorder to spare your IT specialists the bother of manually scouring the logs and looking for an effective remedy for the problem.

Consider using screen recording solutions if you want your technicians to have a clearer view of what is actually happening with your enterprise software and figure out the causes of errors faster and more effectively. This means fewer problems, less disruption of your normal workflow, and more free time to devote to improving other business processes.

# 3 Simplifies Collaboration

Situations where employees need to share their screen are commonplace at the workplace. Still, apart from popular screen sharing solutions, you can use screen recorders for the same purpose. Not only does screen capture software help you share the video after recording your screen, but also incorporate necessary edits, add comments, and delete the areas not intended for public sharing.

You can use screen recording software along with other workplace productivity tools to achieve better results.

# 4 Create Effective Videos

Just any other type of video editing software, screen capture tools can be a great way to put together helpful online tutorials, video instructions, how-tos, and lots of other projects your customers and employees will definitely appreciate. ‘Can I screen record a phone call and create an informative interview?’ If this is the question you’re still puzzling over, don’t be. Modern screen recorders are ideal for capturing video calls, business meetings, and other virtual events that are important to your company or you personally. What’s more, you can take advantage of the editing features most modern screen recorders come bundled with and turn your videos into a digital art masterpiece.

All in all, it’s a great idea to make screen recording tools part of your enterprise software kit. It’s a cheap, convenient, and quick way to improve your communication with clients and boost customer experience, enhance training effectiveness and workplace interaction quality, enhance performance, and much more. So, it would be a wise idea to tap into the advantages of screen capture solutions and put them to good use right now.

How to Create a PDF File Download Button in Elementor

When creating a page using Elementor (be it a homepage, landing page, etc.) you might want to add a download button whereby when a visitor clicks the button, the file is directly downloaded instead of being directed to a new tab on web browser to view the file.

Elementor has a native Button widget which you can use to create a file download button. When adding the Button widget, you can simply add the link of your file on the settings panel. However, the default setting will direct your visitor to a new tab to view the file for certain file formats, including PDF and image formats like JPG and PNG. If you want the file to be directly downloaded, you need to add a custom attribute to the download link.

Creating a PDF File Download Button in Elementor

First off, upload the PDF file to the media library of WordPress. To do so, login to your WordPress dashboard and go to Media -> Add New. Click the Select Files button to select your file.

Once the file is uploaded, you will see a Copy URL to clipboard button to copy the URL of the file and an Edit link to edit the file. Click the Copy URL to clipboard button.

You can also find the URL of the file from the WordPress media library (Media -> Library). Simply select (click) the file you want to use and click the Copy URL to clipboard on the appearing window.

Once the URL is copied, go to the Elementor editor and add the Button widget. Paste the URL you have just copied to the Link field on the settings panel.

To add the custom attribute, click the gear icon on the Link field. Type download|[file name]. You can type any name on the file name section.

That’s it. You can go to the Style tab to style up the button. Once done editing the entire page, you can update/publish your page.

The Bottom Line

Elementor has a native Button widget which you can use to add a file download button on your page. You can add any file that is supported by the WordPress system, including PDF, ZIP, JPG, PNG, and so on. However, for file formats like PDF, JPG, and PNG, you need to add a custom link attribute in order for the file to be directly downloaded.

If you use Elementor Pro, you can also use the Button widget to create an actionable button such as WhatsApp chat button, call button, Google Calendar button, and so on.

Pin It on Pinterest

Creating with WordPress?‚Äč

Subscribe and join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.