Loop Item Dividers

[Dudeney95]

Prerequisites

• I have searched for similar features requests in both open and closed tickets and cannot find a duplicate.
• The feature is still missing in the latest stable version of Elementor ( Elementor Pro )

What problem is your feature request going to solve? Please describe.

I would like to make a feature request for Loop Item Dividers. Put simply, the option to add a divider (line) between each loop item in a loop list.

Loop Item Dividers will improve the User Experience (UX) because they help distinguish one post from another.

I have created a mockup here, you can see I have added a black 1px height divider between each loop item:

Describe the solution you'd like

I propose the option to add a loop item divider be added to the Loop Grid Widget > Style Tab > Layout, where the user chooses the gap between the rows and the gap between the columns.

Describe alternatives you've considered

At the moment, I'm adding a border to the bottom of my loop item container. This issue with this is when the user reaches the bottom of the loop grid/list, the last item should not show the border. Not only this, but when using the alternate template injection, the border workaround makes the design look disjointed.

Additional context

I appreciate this doesn't make too much sense if using a loop grid with more than one column but when using a one column list, this would help the loop look really smart.

[fabigrafo]

Why don’t add the divider in the template? Should work perfect.

[Dudeney95]

Hey Fabian,
It works almost perfectly, but as stated in the alternatives I've considered, when you reach the bottom of the loop the last divider should be omitted. Not only this, but when using the alternate template injection, the border workaround makes the design look disjointed.

[hitsgee]

Could you not switch it to a top divider as part of the template and then use a negative top margin on the loop grid widget to hide the first one?

[Dudeney95]

I could, or use CSS nth child to hide the last one. There are plenty of workarounds, I'd like to request the feature as a native setting

[Zaanone]

It's possible with CSS or negative maring.. but this is not very user-friendly. One would say it is a very simple option to build into the loop grid widget

[Michaelgimii]

+1

[ScottMadore]

This makes a lot of sense. Please add this feature.

If someone wants to provide code to do this in the meantime, that would be helpful.
Thanks.