Elementor (Affiliate Link):
https://wickydesign.com/get-elementor
Video Transcript
Get A Custom Blog Post Layout Using the Elementor Custom Skin Add On
Elementor is a great page builder and one of the best ways to create a completely customized WordPress website, but it isn’t a perfect plugin. Just like any other tool you use, Elementor does have some limitations as to what it can do inside the box.
One of the things that I think Elementor lacks is the ability to customize its post widget. While they do offer some customizations and to be fair, a lot more than what some other plugins or page builders offer, it’s not the greatest and you can’t do a ton of customizations if you want a unique post widget layout.
Today, I’m going to show you one of my favorite add ons for Elementor, the Elementor Custom Skin widget. This plugin adds on to the post widget in Elementor and allows you to create loop templates that give you completely customizable post widget styles. It’s a great plugin and I’m going to show you some examples of how to use it and all of the things that it can do.
There is both a free and paid version of this plugin. The free version does allow you to do quite a bit of layout customization, but if you’re looking for things like alternating templates, the ability to adjust your grid settings, or more dynamic content features, you’ll want to go with pro.
This plugin adds the ability to create a loop template in Elementor for your posts and for your archives. Once you create your loop, you can then select that template in Elementor’s post or archive widget, depending on what page you’re editing. Having the ability to create a loop template allows you to customize where specific elements are displayed or show more elements than what Elementor gives you in its box. Let me show you a few examples of how I’ve used this plugin.
Examples of how to use Elementor Custom Skin
In this first example, I’ve created a custom layout using Elementor Custom Skin for my post widget that’s placed on the homepage of this site. If you’ve ever used Elementor’s post widget, you know that they have a couple of different layout options, but it’s nothing that looks remotely close to this, so it’s nice to be able to use a plugin that breaks up the different pieces that you would want in your post widget and lets you place them wherever you want. It really worked out well for this site.
In this second example, I did something similar. You’ll see here, this is the blog, and the layout has a featured image at the top, a title, a divider line, an excerpt, and then a button to view the full post. What’s really cool about Elementor Custom Skin is that it integrates into the native post widget in Elementor, so you still have all of the functionality of that post widget. You can select the query, you can put columns, you can do all of the same things, you just have the ability to choose your layout.
So what I did in this situation was I created a loop that looks like this and then put that on this page and set it to 2 columns, so now it repeats in 2 columns down the page. So that’s another cool way to use this plugin.
In my third example, I actually used this on a custom post type. So for this events section on this page, I created a loop template that looks like this. It has a featured image, that’s an icon, and then we have the title of the post, and then we have some advanced custom fields. So I’m using a couple of different plugins and add ons for Elementor and combining them all to create this really unique look for this events area. So this is another way you can use this plugin to achieve some really cool advanced effects.
Now that I’ve shown you some examples of how to use this plugin works, let me walk you through how to use it.
How to use Elementor Custom Skin
After you’ve installed your plugin, you’ll want to go to Templates, click add new, then select Loop Template and give your template a name. After you hit the create button, it will take you to the standard Elementor editor where you have your widgets on the left, and then on the right-hand side, you have the ability to add as many sections and columns as you want.
For this example, I want to create a 2 column layout with a featured image showing on the left, then on the right, I’d like to have my post category, the title of the post, a short excerpt, and then a button to read more.
Adding the featured image
So I’m just going to create a 2 column structure. On the left-hand side, I’m going to drag over my featured image. I would like my featured image to link to the full post, so in order to do that I’m going to go to link, then click custom URL, then use the dynamic tag button to link it to the post URL. So now if somebody clicks on this, it will go to the full blog post.
Adding the post category
On the right-hand side, I’m going to drag over a text editor widget and I’m going to do the same thing of clicking on the dynamic tags, then selecting post terms so I can pull up the categories for this post. So if I hit taxonomy and select categories, you’ll see now that the category of the post shows. You do have the ability to add a separator if your posts are in more than one category. Right now, this is a comma, but you can put in whatever you want. You also have the ability to link to the category page, or uncheck that and it won’t link. So whatever it is that you want to do.
Adding the blog post title
I’m going to go back to my widgets and I’m actually going to drag over a heading this time. This is what we’re going to use for our post title. I’m going to do the same thing. I’m going to click dynamic tags and then go to where it says post title. Now you’ll see that changed to my most recent blog post title. I can also link this by clicking on dynamic tags and selecting post URL.
Adding the post excerpt
I’m going to go back to my widgets and then I’m going to drag over a post excerpt. This will pull from the excerpt on this blog post.
Adding the read more button
Lastly, I’m going to drag over a button widget, then I’m going to change this to say “Read This Post” and for the link, we will do the same thing as we did above. We’ll click dynamic tags and we’ll select post URL.
Styling your loop template
Now that we have all of the elements in place, we can start styling. I’m actually pretty happy with how this looks, but I am going to just go to my layout, change the columns gap to give it a little bit more space, and then I’m going to change the vertical alignment to middle, just because I like how that looks a little bit better.
With Elementor, as you know, you can customize as much or as little as you want and you can add as many widgets as you want. So if you want more or less to this, feel free and really customize it to get the layout that you’re looking for for your loop template.
Publishing your loop template
Once you’re all ready to go, you can click on the responsive mode to make sure things look good on tablet and mobile. Everything looks pretty good there. And then we will hit publish. Now you don’t have to worry about conditions for this because we are going to just select this in the post widget, so I’m just going to hit save and close.
Choosing your loop template in Elementor’s post widget
Now let’s go back to our WordPress dashboard and click pages. And I’m going to go to this blog template that I’ve created already. You can see, I have the generic post widget from Elementor in here, but I want to switch this so that it shows my new template that I’ve created. So under skin, we’ll hit this dropdown and we can select now “Custom”. And then we’ll hit “Select default template” and we’ll put in “test loop” because that’s the name of our template.
You’ll see it looks a little strange right now, but that’s because it’s still showing 3 columns. So if I go down here and change this to 1 column, you’ll see it looks the way we would expect it to look. It has that nice 2 column layout with the image on the left, our category, our title, our except, and then this “Read This Post” button.
So that’s how you create really cool templates using the Elementor Custom Skin widget. If you did purchase the pro version you have even more features available. We have the ability to use a custom grid with the pro version and then you can select different templates, so you can create more than one and then alternate them if you want. And you can have display conditions checked on and that will give you even more options for where to display the template. You can do alternating templates – so let’s say that I wanted to have one that was an image on the left and text on the right like this, but switch it where the text was on the left and the image was on the right, I could do that with my alternating templates in the pro version. So that’s another really cool feature. There are also some different display modes that are available in the pro version and you can use dynamic keywords in the pro version to really create some cool, dynamic effects. There is a lot that you can do with this, and like I said before, you can use this on custom post types as well, so if you have Advanced Custom Fields installed, you could bring those things in and use a custom post type for this because, in the query, we can select post, pages, or something else if there is a custom post type in there. So there’s a lot that you can really do with this.
The possibilities for customizing your post layouts are endless!
So play around and come up with some cool effects for your post widget instead of just using the same generic layouts that Elementor provides. Yes, they provide more layouts than most plugins do or most page builders, but it’s really nice to be able to customize everything and get some really unique looks.
That’s it for today’s tutorial. If you liked this video, please give it a thumbs up, subscribe to our channel, and ring the bell to receive notifications whenever we post a new video. See ya next time!
