Adding Elements Inside Oxygen Repeater or Easy Posts

Categories:
Published On:
Comments:
Reading Time:
1 Minute

We are working on a new website for a client (will release URL soon) where they wanted a page for customer testimonials. One of the requirements of the project was to add a new div element in between testimonials on the page. We were using the Repeater element in Oxygen, however, this tutorial can easily be applied with the Easy Posts element.

While potential customers are reading testimonials, it presents a unique opportunity for us to slip information between the testimonials as a way to capture their attention and bring the visitor to a page that is important (in this case the donation page & adopt an animal page). If you look at the image below you can see what we mean by this. This is unique because as customers fill out testimonials, the two blocks we added (Donate and Adopt) stay in the same place and the testimonials move around them.

The code for the repeater function is:

jQuery(document).ready(function(){

jQuery('#div_block-253-1605').insertBefore('.repeater-container:nth-child(3)');
});
JavaScript

And the code for the Easy Posts element is:

jQuery(document).ready(function(){

jQuery('#div_block-7-1610').insertBefore('.oxy-post:nth-child(3)');
});
JavaScript
Sigma 1 Logo

Signup For Our Newsletter

Stay up to date with the newest trends in technology, exclusive offers & discounts from our company, and new products and services that we are offering.

Want to Hire Us For Your Next Project?

We work with all different types of companies from around the world with one goal in mind - to help them grow their brand and acquire new customers.
Contact Us

We are working on a new website for a client (will release URL soon) where they wanted a page for customer testimonials. One of the requirements of the project was to add a new div element in between testimonials on the page. We were using the Repeater element in Oxygen, however, this tutorial can easily be applied with the Easy Posts element.

While potential customers are reading testimonials, it presents a unique opportunity for us to slip information between the testimonials as a way to capture their attention and bring the visitor to a page that is important (in this case the donation page & adopt an animal page). If you look at the image below you can see what we mean by this. This is unique because as customers fill out testimonials, the two blocks we added (Donate and Adopt) stay in the same place and the testimonials move around them.

The code for the repeater function is:

jQuery(document).ready(function(){

jQuery('#div_block-253-1605').insertBefore('.repeater-container:nth-child(3)');
});
JavaScript

And the code for the Easy Posts element is:

jQuery(document).ready(function(){

jQuery('#div_block-7-1610').insertBefore('.oxy-post:nth-child(3)');
});
JavaScript
Sigma 1 Logo

Signup For Our Newsletter

Stay up to date with the newest trends in technology, exclusive offers & discounts from our company, and new products and services that we are offering.

Want to Hire Us For Your Next Project?

We work with all different types of companies from around the world with one goal in mind - to help them grow their brand and acquire new customers.
Contact Us
Dimitri is is a full-stack developer and the founder of Sigma 1. He spends the majority of his time designing websites for customers. However, when he has a bit of free time, you can catch him on a hike or exploring the nature around Las Vegas.

5 comments on “Adding Elements Inside Oxygen Repeater or Easy Posts”

  1. Amazing! Thanks for making this tutorial.

    Do you have a tutorial on how to create the custom easy post; so I can create my own layouts? Or with repeaters?

    Thank you!

    1. If I understand correctly, you are asking if I can show you how to create a unique layout with the easy posts or repeater?

      I'm sure we can put together a tutorial when we have a bit of time.

Leave a Reply

Your email address will not be published. Required fields are marked *

5 comments on “Adding Elements Inside Oxygen Repeater or Easy Posts”

  1. Amazing! Thanks for making this tutorial.

    Do you have a tutorial on how to create the custom easy post; so I can create my own layouts? Or with repeaters?

    Thank you!

    1. If I understand correctly, you are asking if I can show you how to create a unique layout with the easy posts or repeater?

      I'm sure we can put together a tutorial when we have a bit of time.

Leave a Reply

Your email address will not be published. Required fields are marked *