For those of you using the Divi template there are lots of animated gizmo’s in there. Provided they are used sparingly you can go that extra mile when your site is compared to another one.
When I am putting sites together I tend to use animation sparingly on some images, and some featured blocks, to ensure they attract attention when they load. But having loaded and completed the animation they remain static, otherwise they would be very annoying.
One thing I have been wanting to do (and you may wish to do this as well) is publish articles after a fundraising event and tell the world how much you raised. Many of you do not do this, the website is used to announce a fundraising event, but not report on it’s success afterwards.
I would argue that it is equally important to advertise the success of an event to provide feedback to your supporters. Equally it sends a positive message about how pro-active you are.
Anyway, below is an example of what I mean. If you did not notice it, refresh your browser.
Money Raised
This is easy to achieve with a Divi based site you need a very small piece of CSS code which I will give you below. You need to log into the website and look for DIVI in the side bar, open the top level entry for DIVI and scroll down to the bottom where you will see a space for CSS code.
You will need to carefully cut and paste the following code and add it to the bottom of the CSS code without damaging or changing any of the preceding code. (otherwise you may break something.) Copy the following precisely.
.custom-counter .percent-value::before {
content: “£”;
}
Do not add anything else, and check that you have copied precisely what is there.
Now go to the post and add a Number Counter block into the post. Add your number, turn off the percent sign which is generally on by default.
You will notice that the Number Counter like all Divi Elements have three tabs. Choose the third one and add the following text in the position shown.
custom-counter
See image below as an example.
In the demo above, I have done a few other things like change the colour of the text, add a shadow behind it, changed the background colour as well. All of these things are easy to do by exploring the tabs.
I cannot claim this solution is mine, I found it while looking up solutions to Divi related issues. If you get stuck give me a call. You only need to add the code in once, then you can reuse it.