Jett Hayes

Web Developement is hard.

Often, you’ve got just the idea for how a section should look – the exact placement. Then, inexplicably, a simple feature isn’t working – or isn’t available. 

What do you do?

If you don’t know CSS, Javascript, or HTML – you might be tempted to give up. But don’t worry – I figured it out so you don’t have to.

Here's the situation:

As you can see – I’m building out a two column FAQ. I want the questions to be centered, so the longer ones aren’t overshadowing the shorter questions: but wait, there’s no button?

Unlike many other elements, there’s no alignment button. So what do you do? How do you center a toggle in elementor?

If you’ve run into similar problems, you might have seen something like this:

Even if you did know where to put that, it doesn’t even work on toggles!

So how do you center a toggle in Elementor?

You’re going to use a bit of in-line code.

Step 1: Copy this code:  

                      <div style= “text-align:center;”> Toggle #1 </div>

(See where it says ‘Toggle #1’? That’s your title, change it to whatever you’d like.)

Step 2: Add it to your toggle’s title line:

Pro Tip: Can’t see the whole title line? Drag the right edge of the elementor editor (highlighted below in blue) to expand the window size.

Now, how do I get rid of the icon?

Now that it’s centered, that little arrow doesn’t look too great, right? 

Luckily, this is an easy fix, no coding required:

On the Toggle Settings menu, find this button:

Simply select the cancel icon:

Did I save you time?

If you want to say thanks, you can:

  • Share any of my blogs on your social media
  • Link to any of my content on your (now well centered) website
  • Think of me the next time you find yourself in need of Digital Marketing, or web development. 
  • Follow or add me on Linkedin.

Anyway, thanks for visiting!