How to add a Div in Repeater’s output

This members-only tutorial provides the steps to insert a div as the last item in a grid of posts output by the Repeater component in Oxygen using a line of jQuery.

This is typically used to mix ads in posts.

Here's the link to previous tutorial that shows how to do the same but when using Easy Posts instead of a Repeater via PHP instead of jQuery: How to add HTML in the blog posts grid in Oxygen.

Here's How

Sample Structure:

In the Oxygen editor add a Section and inside that, a Repeater.

Set up the WP Query by choosing one of default/custom/manual as needed. Set the Count to 1 less than the number of your desired posts per page. In my test site, I have set it to 5 since the last item is going to be a static div so there will be a total of 6 in the grid.

Click on the Div in the Repeater and set it up with what you want to show for each entry. I have added a Link Wrapper that links to post's permalink with featured image and title inside.

Next, select the Section and add a Div so it is adjacent and below the Repeater.

Add your desired elements inside this Div like image/text that make up what you want to show as the last item in the grid. In my test site, I added static image and text elements, selected the Div and clicked the chain icon and set a link to it.

Select the Section and add a Code Block.

CSS: