In this Elementor Tutorial, video Mark will teach you how to reverse or flip your columns on mobile devices. This can be very helpful for “Call To Action” sections and header navigations.
Elementor (Affiliate Link):
https://wickydesign.com/get-elementor
Video Transcript
Hi, this is Mark from Wicky Design. In this Elementor tutorial, I’m going to show you how you can easily reverse your column layouts on mobile devices. So before we jump into it, let me show you exactly what we are going to be doing and why you may need to do this.
In this example, you can see that this is a simple, 2-column layout with some text on the left and an image. Now, when you scale down and you start to get to mobile devices, it stacks the way that you think it would. Text on the top and image on the bottom. That’s great, but in some cases, you may want to flip it where you can have the image on top of the text, just on mobile devices.
A great thing about Elementor is that it’s all built into their system and you no longer have to hack your CSS code to make this happen. This used to be a much more difficult process before this was released in Elementor. Anf if you have Elementor Pro, I’m going to show you a good example in a header if you have a 3 column layout how using this technique can speed up the process on your mobile layouts as well. So let’s jump right into it.
Let’s jump right into Elementor. And like I said, this is great because it’s a very easy thing to do. The way that this works is that you can reverse columns on whole sections. So when you click up here, you’ll see that this is your whole section with just these 2 columns like this. So let’s go into mobile layout and as you can see, it’s doing exactly what it should be doing, which is having the text here and the image on the bottom. To change the layout on mobile only, go into your section. You can see right here it says Edit Section. Go into Advanced > Responsive, and it’s easy as clicking that button right there. As you can see, now the image is on the top and the text is on the bottom.
Now, depending on your layout and what you have in there, you may have to go in and start to play around with padding because the layout has now switched. SO you might have cases where your header might bump up right underneath your image or whatever it may be. So you might have to play around with some additional padding and margins and stuff like that to make it look good. But it’s just as easy as going into the responsive on your section and hitting reverse columns. And they give you the option to do this on tablet as well, so that’s a good feature.
Now, if you have Pro, we use this a lot in our header sections, so here’s a good example. Let me jump into the header template right here. So we recently did this where you have a 3 column layout and by default, it’s going to just stack navigation, the logo, and the icons. Let’s say you wanted to flip this where you wanted the icons on the top and that’s as easy as the same process. You just go in here and click mobile. So now you can have your icons on the top, menu on the right. So this works really well in headers, especially for 3 column layouts. If you want to do all of this without having to do any additional CSS work.
So in this case, you may want to have it where these icons are centered just on mobile. So yeah, this is a great example of how easy it is to start to manipulate how columns are laid out on mobile devices. And it’s all just built right into Elementor.
I hope this video was helpful. Thank you for watching this Elementor tutorial. If you’d like to receive future videos like this, make sure you subscribe to our YouTube channel and hit the notification bell. Thank you and have a great day!
