September 5, 2023

Rearrange the Elementor Carousel Navigation without CSS

Play Video

Have you found yourself wrestling with Elementor’s Carousel feature, trying to get those navigation arrows just right? Good news! Elementor has rolled out a new feature that lets you rearrange the Elementor carousel navigation without any code or CSS. Let’s have a look at how it is done.

The Old-School Way: Using CSS

Remember the days when you had to dig into CSS to move those navigation arrows around? It was like trying to solve a puzzle with missing pieces. But those days are behind us, thanks to Elementor’s new feature.

The New Elementor Carousel Settings

Elementor has added new settings that make rearranging the carousel navigation a breeze. No more messing around with CSS or code. It’s straightforward and user-friendly.

How to Rearrange the Elementor Carousel Navigation

Ready to get started? Here’s how you can rearrange your carousel navigation without any hassle.

1. Accessing the Content Tab

First off, open your Elementor editor and head over to the Content Tab for your Carousel widget.

2. Navigation Settings

Once you’re there, look for the Navigation section. This is your control panel for the arrows. You can choose to turn them on or off.

3. Positioning the Previous Icon

Want to move the “Previous” arrow to the bottom? No problem! Just select the Previous Icon and choose the Bottom option from the dropdown.

4. Positioning the Next Icon

Now, let’s tackle the “Next” arrow. Want it at the top? You got it! Select the Next Icon and choose the Top option from the dropdown.

5. Fine-Tuning the Position

You can adjust the arrow positions by playing with the positioning values. Increase the value to move it away, or use a negative value to bring it closer.

6. Customizing the Icons

Feel like giving those arrows a new look? You can change their shape, color, or even upload your own SVG icons.


Now you know how to rearrange the Elementor Carousel Navigation. It’s straightforward and doesn’t require any coding skills. Give it a try and see how it works for you!

Required Resources

Elementor Logo
Free Options
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
Rearrange the Elementor Carousel Navigation without CSS
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.