How to Create Dynamic Posts in Elementor

How to Create Dynamic Posts in Elementor
Share This Post

Creating Dynamic Posts

UPDATE: Elementor has now released “Loops” which allows you to create this with Elementor Pro itself rather than needing third party plugins. If you do not have Elementor Pro you can still use the techniques below.

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 with it’s out of the box features.

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.

How to Create Dynamic Posts in Elementor
Create Dynamic Posts in Elementor

Using 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.

dudaster

Ele Custom Skin Pro
Ele Custom Skin Free

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.

Plugins install
Plugins Install
Loop tab after install Ele custom skin
Loop tab
Dynamic Tag Icon
Dynamic Tag Icon
Set post featured image as background
Set post featured image as background

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.

Adjustment the heghit of section and position of column
Adjustment the heghit of section and position of column
Adjusment of padding for the section
Setting up dynamic post title and link
Setting up dynamic post title and link

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.

Setting up dynamic categoreis
Setting up dynamic categoreis
Adding overlay on the section
Adding overlay on the section

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.

Setting Up Condition

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. 

How to set custom skin for posts
How to set custom skin for posts
Adding overlay on the section

Conclusion

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.

Search
Recommended Hosting
Upgrade to Pro
Recent Posts
Picture of Josh
Josh

Josh is passionate about technology, web design, and SEO. Along with this is a keen skier and cyclist. Having spent years developing websites for clients, he enjoys writing and sharing knowledge online.

Contact
Want us to get Creative?

We would love to hear from you!

Josh Cut Out colour white

Josh

Typically replies in minutes

Hi there 👋,

Feel free to message me if you have any questions.