How to do Content Switching in Elementor - WpBuilt 1350476922971524123

How to do Content Switching in Elementor

Content-switching in web development and design is very important, especially for creating pleasing mobile responsive layouts. It’s incredibly useful and handy since it allows your designs to have some sort of versatility across all platforms. Sadly, it’s a functionality that most page builders like Elementor still lacks. 

That’s why on this tutorial, you’ll be able to do something like this: 

How to do Content switching in Elementor5

How to do Content switching in Elementor1

Return now to your keyboard so we can proceed to our tutorial! 

Step 1: First create a section where you will place the widget.

How to Create Icon Only Buttons5

Step 2: Add your desired column. In this case I will choose a one-column structure.

How to Create Icon Only Buttons2

Step 3: Select the Post Widget.

How to do Content switching in Elementor6

Step 4: Select the Post you want to show on the Query > Source.

How to do Content switching in Elementor5

Step 5: To switch the position of the Title and Meta go to the  Advance and look for the Custom CSS.

How to do Content switching in Elementor4

Step 6: Target the class of the content for example, the class of the content is  elementor-post__text, elementor-post__title is the class of the post-title and elementor-post__meta-data  for the meta.

Apply this style to the elementor-post__text

display: flex;
flex-direction: column;
flex-wrap: wrap;

Apply this style to the elementor-post__title

order: 2;

Apply this style to the elementor-post__meta-data

order: 1;

If you have an excerpt on your post apply this for elementor-post__excerpt

order: 3;

And now, we’re done!

How to do Content switching in Elementor1

Thanks for Reaching This Far! 🙂

I hope we were able to help you with this tutorial! You can also try to install the Elementor Pro Version and get access to more Elementor templates for free!

Get Elementor Pro Now

If you have more concerns or have encountered other issues, let us know in the comments section!

Leave a Reply

×
×

Cart