The Give Totals widget displays a mini stat of total donations received in percentage for your running campaigns. This widget has a similar interface to the Give Goal widget but has more features.

Let me show you how to work it in this tutorial.

Inserting widget

Find Give Totals widget from the widget menu and drag it inside your webpage.

Content tab

This widget has a single section in the Content tab holding all the basic settings.

First, you have an empty field where you have to choose your target form. You can insert any number on the goal amount or the total donation amount for the Give Totals widget in Elementor. The number you put will be the maximum donation limit and show a 100% progress bar upon fulfillment.

You have a text input field, determining what message you want to give to your donors, a link-address field, and a switcher to show/hide the progress bar.

While in Forms, you can choose any donation form from the current list. You can see the progress bar and the message with the goal amount in the image for this charity plugin.

This is all for the Content tab. Now, let’s move on to the Style tab.

Style tab

The style tab has a bunch of sections covering different parts of the content on the screen.

Raised Title

Go to Style> Raised Title

You can customize the top title of the content by color, padding, and typography from this section.

Progress Bar

Go to Style> Progress Bar

The progress bar section lets you customize the actual progress bar on the screen by color, border-radius, height, and spacing. Note that putting a seemingly brighter color will help viewers focus on the progress.

Message

Go to Style> Message

Here, you can change the color and typography of the message below the progress bar.

Link

Go to Style> Link

And lastly, you have a section for customizing the link text and the end of the message.

Conclusion

Watch this video to get more visuals on the Give Totals widget, by Bdthemes, and visit this demo page for more examples.

Thanks for staying up.