- Hey you all, my name is Kori Ashton,
and welcome to another WordPress Wednesday.
Today's tutorial is gonna teach you how to add in
a dollar sign in front of the number counter
of the Divvy theme.
If you've been struggling with trying to figure out
how to do that I'm gonna show you right now
in this quick six minute tutorial.
You can either add a dollar sign before a number counter,
or maybe even a plus sign after it.
Let's go check it out right now.
(bright digital music)
So by default, Divi allows you to add in
a percent sign right, with just a quick little toggle.
I'll show you what that looks like.
Let's go ahead and enable the visual builder.
What they don't do, though, is they don't allow us
to easily allow us to add that dollar sign,
or a plus sign afterward.
And what I'm trying to do here
is show three different stats.
And this middle one needs to actually be
a dollar amount, 'cause I'm talking about capital.
So coming in here and clicking on the gear icon,
in the element section, of course,
you can add that percentage sign right?
Easily and quickly, toggle over you see
the percent sign added in there.
But I don't want this to be a percent sign,
I need this to be a dollar amount.
So there's a little bit of a work around.
Maybe someday Divi will add in a little toggle here
to add a dollar sign, or add in a plus sign.
Until then, we've got to do this little work around.
Super quick, though.
Click on the advanced tab while we're already here.
Let's open up this CSS ID and Classes area.
You're gonna come into the second field here,
the CSS Class, and I want you to write the word,
or type the word, dollar.
D-o-l-l-a-r, dollar, and then click the check mark.
Perfect, now we're gonna go ahead and open it up,
and click save, if you know Divi, that's how you do it.
Now that change is actually saved live to the website.
The second step to doing this is just a little bit of CSS.
So this right here is the CSS code I want you
to copy and paste right now.
I'll put this in the tutorial step-by-step.
All you do is come over here and grab it.
This is why you had to type in the word dollar
into that CSS class area.
We want it to affect the percent value here,
and we want to put in before the content a dollar sign.
How simple is that, right?
Super cool, you can put anything you want
inside of this little area right here,
and it will render it before our number.
Love this, okay let's copy it on our clipboard, here we go.
You need to jump into your dashboard,
and you're gonna go into appearance, and go to customize.
In this area you want to open up
the additional CSS box and go down to the last thing
if you have anything at all,
and paste in what you had on your clipboard just then.
And check this out, you guys look at that right there.
There's that dollar sign already sitting in there.
Now this is broken down here,
because we're in a responsive mode.
But I'm gonna go ahead and publish it,
and we'll test it on the live site right here.
Let me exit the visual builder now,
and it's gonna refresh the page.
And we should absolutely see it perfectly
sitting there as a dollar sign number, there you go!
Super easy, right?
Well, what if we wanted to do one
with a plus sign after the fact?
This is my other website where I've got these stats running.
This is built on Divi as well.
You're gonna use the same thing except for before,
we're gonna change that word to after.
And we're gonna change dollar to plus.
Now change the dollar sign to a plus sign,
and let's grab that onto our clipboard,
and jump into this website.
I'm gonna enable the visual builder.
Exact same stuff, so you guys, super, super easy to do.
Enable the builder, come down to the module
you want to add the sign to,
go into advanced, go into classes.
And we're gonna say plus, right, because that's our code.
Check the box and click save.
If I'm going too quickly just pause
and rewind me, it's okay.
You can do that to all three of these if you like.
You can add in that plus sign.
Let's go out and do it.
Go here and say plus.
And go here and say plus, 'cause we're always growing.
And save, in that last step we have it
on our clipboard already,
we're gonna jump into our dashboard.
We're gonna go ahead and exit the visual builder,
jump into our dashboard and go to customize,
right, appearance, customize.
Appearance, customize.
And of course that area down at the very bottom,
additional CSS, go all the way down to the bottom,
enter in plus after content, put a plus sign,
and click publish and let's go see if it worked.
Let's take a look right here, scroll down,
and there's our plus signs.
Worked perfectly for us, nice, huh?
So it's that super easy, I hope this helps you.
I have an entire playlist here dedicated to Divi.
If you're struggling through anything to do with that theme,
be sure to check out my YouTube channel.
Be sure to subscribe and like the video,
because every week I'm creating content just like this,
to help you improve your online marketing,
inside the world of WordPress.
All right, you all have a great rest of your week.
I'll see you next time, bye everyone.
(bright digital music)
(bell tinkling)