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:
Return now to your keyboard so we can proceed to our tutorial!
Step 1: First create a section where you will place the widget.
Step 2: Add your desired column. In this case I will choose a one-column structure.
Step 3: Select the Post Widget.
Step 4: Select the Post you want to show on the Query > Source.
Step 5: To switch the position of the Title and Meta go to the Advance and look for the Custom CSS.
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
Apply this style to the elementor-post__meta-data
If you have an excerpt on your post apply this for elementor-post__excerpt
And now, we’re done!
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!
If you have more concerns or have encountered other issues, let us know in the comments section!