Creating Dynamic Posts
Elementor is a fantastic page builder and one of the most effective ways to create a fully customizable WordPress site, but it isn’t without problems. Elementor, like any other tool, has certain limitations in terms of what it can do inside the box.
The ability to configure Elementor’s post widget is one of the features I believe it lacks. While they do offer some customizations, and to be honest, a lot more than some other plugins or page builders, and if you want a special post widget layout, you won’t be able to do a lot of them.
Today, In this WPDesigns article, we will discuss how to Create Dynamic Posts in Elementor. We will use the Elementor Custom Skin plugin, which extends Elementor’s post widget by allowing you to build loop templates with fully customizable post widget styles. It’s a fantastic plugin, and we’ll see how to use it and what it can do.
Table of Contents
Ele Custom Skin
This plugin is available in both a free and a paid version. Although the free version allows for a lot of layout customization, you’ll want to upgrade to the pro version if you want things like alternating templates, the ability to change your grid settings, or more dynamic content features.
This plugin allows you to generate a loop template for your posts and archives in Elementor. You can then pick that template in Elementor’s post or archive widget, depending on which page you’re editing, after you’ve created your loop.
Creating a loop template allows you to customize where certain elements are displayed or show more elements than Elementor provides out of the box.
How to Create a Dynamic Posts In Elementor
Step - 1: Installing Essential Plugins
First of all, you have to make sure that you have installed Elementor, Elementor Pro, and Elementor Custom Skin. After installing all three go to Template > Theme Builder. Then You will see the loop tab. Just click on the loop tab and then Add New Loop. After that, a pop-up will appear. Choose the Loop option from the dropdown and Give a name to the loop template. Then click on create template.
Step - 2: Set Loop Template Featured Image
Then you have to create one post for the loop template. So, to do that add a section with one column. You can create your own design if you want. So, first, we will set the featured image of the post as a background. So, to set a background go to the under style tab of the section and then choose classic. And you will see the image option will appear. Hover over on the choose image box and then you can see the dynamic tags that will appear in front of you so click on that. And choose the featured image option of the post. And you set the background. Now, to make it perfect you can set position, size, attachment, etc. So, you added the featured image as a background.
Step - 3: Adjusting Section and Column
We will give a minimum height to the section so that all the posts stay the same size. So, to give min-height to the section go to the Layout tab under the edit section and you will see the min-height option. Just set it what you like. Then I’m choosing the column position at the bottom so the content shown at the bottom. Now give some padding in the section. To do that go to the advanced tab and adjust the padding you like.
Step - 4: Adding Loop Post Title
After that, we will add a post title widget under the column. Just drag and drop the post title widget and style it as you like. Then we will add the dynamic link to the title so that when someone clicks on the title they can visit the relevant post. To do that, click on the dynamic tags icon from the link field and then choose Post URL.
Step - 5: Adding Post Info Widget
Now we will add the relevant category of the post here under the post title. So, to do that, just drag and drop the post info widget and we will add the only one which is category so I will remove all except one. After that, click on the item that we leave. Choose the terms option from the types dropdown. Then, choose the taxonomy category from the dropdown. Then we will uncheck the link option because if someone clicks on that they will transfer to the category page if we check the box. And then we don’t want to use any icon beside category so choose none from the icon dropdown. Now you can apply the style of your own to the post info widget.
Step - 6: Setting Overlay to the Section
To make it more professional we will add an overlay to the section. So go to the Style tab under the edit section and then choose a gradient from the background overlay. After that, you will get some options to make it catchy. You can adjust it as you like. After adding the overlay, just click on publish and you will see the condition window. Skip the conditions as we don’t need any and click on save and close. So we just set the loop.
Step - 6: Set up Post Loop Template in Archive Page
Now go to your blog page and drag and drop the posts widget. Then from the content tab under edit posts, choose the custom skin from the skin dropdown. Then choose the template that we made from the Select a default template option. Right now, you’ll see it looks a bit odd, but because 3 columns remain. So if we go down here and changing that to 1 column, it looks the way we’d expect it. So, you can adjust it as you want.
So play around and create some awesome effects for your post widget rather than just using the generic layouts Elementor provides. Yes, they have more layouts than most of the plugins or page builders do, so it’s very good to have a truly unique look.