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!