e-addons

Share

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on whatsapp
Share on telegram
Share on skype
Share on email

e-addons for Elementor

Posts Skin Template

The Posts Skin Template for the Elementor-Pro Posts Widget lets you use a custom Elementor Template (Section, Page, or Single) on every post preview block.

The Template must contain dynamic contents:
Title, Featured Image, Content, Terms, Date, Author, Custom Meta, and so on.

Now your Post list can put on the best dress so… Please, stop it with the cards thing!

template panel

Custom Template for the Elementor-Pro Posts Widget

Super easy to use and perfectly integrated with Elementor

template posts skin 1

Select Template skin from the Options in Widget Posts of Elementor Pro

template posts skin 2

Select your Template from the all previously generated Templates

How to create a Loop Post preview Template

Create a Section Elementor Template from Templates menu voice in Admin area,
or simply press on the Plus button on Template Select Control.

1. The Post Title

To render dynamically the Post Title in the Loop use the provided Dynamic Tags on a basic Heading Widget.

You can use the Dynamic Tag included in Elementor PRO called “Post Title”, or for a more custom result you can work with Token, the most flexible solution included in our plugin.

In the same way you can display other standard Post information of current Post, like Date and Terms.

Screenshot 2020 08 24 Elementor Post semplice1
Elemento PRO Dynamic Tag
Screenshot 2020 08 24 Elementor Post semplice
Tokens Dynamic Tag

2. The Post Featured Image

To render dynamically the Post Feature Image in the Loop use the provided Dynamic Tag on a basic Image Widget.

You can use the Dynamic Tag included in Elementor PRO called “Featured Image”.

You can use the image also as Background Image, alternatively you can fetch image from another Image meta field like an ACF or PODS instead of standard Featured Image.

Screenshot 2020 08 24 Elementor Post semplice2
Elemento PRO Dynamic Tag
Screenshot 2020 08 24 Elementor Cassso1
Section dynamic Background Image

3. Extra Fields and Style

You are free to insert whatever you want (dynamic texts and images) inside the Template, using Elementor PRO Tags or Tokens you can display every Post Fields, Meta Fields, Terms and Site information.

You can use the Dynamic Tag included in e-addons called “Tokens” → READ MORE ABOUT TOKENS

Play with all available Styles, they will be dynamically applied to Post Preview in the Loop.
Here below some simple demos of Custom Templates used in Posts Template Skin.

pro dynamic tag date
Elemento PRO Dynamic Tag Post Date
pro dynamic tags
Elemento PRO Dynamic Tags

4. Tips and Tricks

In Editor Mode remember that you can use the Preview settings for a real representation of the Template with data of a specific Post. This trick will help you a lot during Template construction.

Remember that probably the block will not be render in full width mode, depends on what you choose on Posts Widget Columns configuration.

You can show different contents based on Post data in same Template, maybe current Post should display or not an info based on a its Meta Field, you can do this using Display extensionREAD MORE ABOUT DISPLAY

Screenshot 2020 08 24 Elementor Authorooo1
Preview Settings
Screenshot 2020 08 24 Elementor Cassso
Display Condition

Examples of custom template

EX. 01

August 12, 2020
mitchell luo XvSb5B9SZ9o unsplash

Donec rhoncus non nulla in vulputate

July 11, 2020
clarisse croset nFQ G2xWpvE unsplash

Etiam ut ornare justo

June 10, 2020
remy gieling meZSqVJeLAY unsplash

Vestibulum ullamcorper ac odio eu imperdiet

EX. 02

Donec rhoncus non nulla in vulputate

mitchell-luo-XvSb5B9SZ9o-unsplash

Etiam ut ornare justo

clarisse-croset-nFQ_G2xWpvE-unsplash

Vestibulum ullamcorper ac odio eu imperdiet

remy-gieling-meZSqVJeLAY-unsplash
dis postSkinTemplate