[Resolved] Need to show Divi content in the same form like sample

[Author]

Posts

[mouneebS-2]

Hi,

Please see this link for a sample page.
hidden link

I want the exact same look in this page: hidden link.

The difference is the upper link was completely design on DIVI and was static. Whereas, second link in dynamic and fetching a view from toolset.

Toolset is calling the template in a loop and each post have top padding and divider in it. To be specific about the issues It should show first post with top padding, each post should have a divider except last one. Exactly like this hidden link. Can you please suggest a way for this problem?

Thank you

[Nigel]

If only the first result should have the top-padding, it would make more sense to not apply the padding to any results and instead add the padding where the View is inserted.

Depending on how you are doing that it could make sense to edit the View itself, and in the final section (the Output Editor), add a wrapper div around the shortcodes used to insert the View which includes the top padding.

The padding is being added via the .et_pb_section class it seems, so you could instead just use CSS to overwrite the style for all but the first section with a selector that combines the :first-child and :not pseudo-selectors (e.g. https://stackoverflow.com/questions/12289853/how-can-i-use-a-notfirst-child-selector).

It looks like you are adding the divider using a Divi module inside the template designed with Divi. There is no way to modify anything within that template according to which loop iteration it is.

Within the wpv-loop tags you can use the wpv-item shortcode to target particular iterations of the loop (see https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-item), so that you could link to a different template (designed with Divi which is identical to the first but does not include the divider module) for example. It might make sense to not use the divider module and simply add an hr tag directly inside the wpv-loop tags next to where it links to the template.

Slight problem here is that the wpv-item shortcode is currently unable to detect the last item in the loop. You can vote for that feature to be added here: https://toolset.com/feature-request/?wpv_post_search=wpv-item&wpv_view_count=686737

But you can target the first item. So you would have to display the divider above the content and not below it, and handle the first iteration separately so that it doesn't add the divider.

This is probably a case where a pure CSS solution might be easier, check out the last-of-type pseudo selector, you may be able to simply add a display: none rule for the last divider.