#Responsive columns elementor how to
#Responsive columns elementor code

So yeah, this is a great example of how easy it is to start to manipulate how columns are laid out on mobile devices. So in this case, you may want to have it where these icons are centered just on mobile. If you want to do all of this without having to do any additional CSS work. So this works really well in headers, especially for 3 column layouts.

So now you can have your icons on the top, menu on the right. 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. 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 me jump into the header template right here. Now, if you have Pro, we use this a lot in our header sections, so here’s a good example. And they give you the option to do this on tablet as well, so that’s a good feature.

But it’s just as easy as going into the responsive on your section and hitting reverse columns. So you might have to play around with some additional padding and margins and stuff like that to make it look good. SO you might have cases where your header might bump up right underneath your image or whatever it may be. 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. As you can see, now the image is on the top and the text is on the bottom. Go into Advanced > Responsive, and it’s easy as clicking that button right there. You can see right here it says Edit Section. To change the layout on mobile only, go into your section. 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. So when you click up here, you’ll see that this is your whole section with just these 2 columns like this. The way that this works is that you can reverse columns on whole sections. And like I said, this is great because it’s a very easy thing to do. 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. This used to be a much more difficult process before this was released in Elementor.

#Responsive columns elementor code

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.Ī 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. Now, when you scale down and you start to get to mobile devices, it stacks the way that you think it would. In this example, you can see that this is a simple, 2-column layout with some text on the left and an image.

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 Elementor tutorial, I’m going to show you how you can easily reverse your column layouts on mobile devices. This can be very helpful for “ Call To Action” sections and header navigations.

#Responsive columns elementor how to

In this Elementor Tutorial, video Mark will teach you how to reverse or flip your columns on mobile devices.