Recognize this?

Yeah, those icons come with the toggles, right?

Somehow, they get real boring quickly, and they’re not always the coolest.

Check out the toggle below. The icon is different, plus check out the sweet animation.

Click me to open the toggle

Life is a waterfall
We’re one in the river
And one again after the fall

Swimming through the void
We hear the word
We lose ourselves but we find it all

‘Cause we are the ones that wanna play
Always wanna go
But you never wanna stay

And we are the ones that wanna choose
Always wanna play
But you never wanna lose

Aerials in the sky
When you lose small mind
You free your life

The snippet

Here, copy this and paste it somewhere that custom code is welcomed.

.et_pb_toggle_open .et_pb_toggle_title:before {
  color: black;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 36px;
  content: "+";
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.et_pb_toggle_close .et_pb_toggle_title:before {
  color: black;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 36px;
  content: "+";
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

Some explanations

What we’re using here is a pseudo element. Simply put, it’s something you attach before or after an element to make it display something extra. It’s really useful in many ways of styling things, and here, the toggle gets some.

One styles the open toggle, the other one styles the closed toggle.

  • color: black; -> The color of the icon
  • font-family: ‘Montserrat’, sans-serif !important; -> I suggest a nice geometric sans serif. I went with Montserrat on this one.
  • font-size: 36px; -> It’s gotta be a certain size, otherwise it’s too small.
  • content: “+”; -> You can change this if you want. To learn how to add more icons, check out an example of the method here.
  • transition: all 0.5s ease-in-out; -> a bunch of transitions with vendor prefixes. You can change the 0.5s from half a sec to something else if you want.
  • transform: rotate(45deg); -> a bunch of transforms with vendor prefixes. You can probably see that this rotates the icon by 45 degrees.

So yeah, change the values to get what you want. Have fun!

Promotion

Hey guys, I’m coming out with a course about making the Divi theme highly custom responsive, and doing a lot of cool things with Divi on mobile devices. You will also be getting a Divi child theme that you can use in all your future builds (because it has the extra responsiveness included) so you can hit the ground running.

It’s coming out in a couple of days, and if you’re interested, please sign up for the newsletter below for an extra discount coupon.

Edit: It’s up now, you can find it here: https://almostinevitable.com/product/wdmc-making-divi-more-responsive/

Notice

Hi! Please consider signing up for my newsletter for... two emails (at most) a month of news, updates, and special offers, including child themes and more courses. Sound interesting? The signup form is right here!

Photo by Etienne Girardet on Unsplash