Idukki lets you choose a pagination type to help your visitors browse through your collection. You can change the pagination according to how you want to organize and display your UGC media, i.e., the layout you prefer. You can divide the posts into smaller pages and provide the page numbers or symbols in the footer for visitors to navigate. Let us look at the different pagination types available with Idukki. <div data-lexical-embed-block="<div class=&quot;CTA&quot; style=&quot;background-image: url(https://static.wixstatic.com/media/0cf4be_68b652fbf5f24ef4aca4a6a039050162~mv2.jpg);&quot;>
<div class=&quot;d-flex&quot;>
<div class=&quot;title&quot;>
<div class=&quot;h2&quot;>Leverage User Generated Content in Your Marketing Campaigns</div>
Schedule a Demo Now!
<div class=&quot;actions&quot;>
<a href=&quot;https://idukki.io/request-demo&quot; style=&quot;background: beige;&quot; class=&quot;ugcFromBtn&quot;>Book a Demo</a>
</div>
</div>
<div class=&quot;titleImg&quot;>
<img decoding=&quot;async&quot; src=&quot;https://static.wixstatic.com/media/0cf4be_77e79d044be642d6bfb2dfec0c4c8422~mv2.png&quot; height=&quot;180px&quot; alt=&quot;Free Trial&quot;></div>
</div>
</div>
<style>
.CTA {
 padding: 20px 30px;
 background: #fff;
 max-width: 95%;
 margin: 30px auto;
 border-radius: 15px;
 box-shadow: 0 0 10px rgb(0 0 0/10%);
 background-size: cover;
 background-repeat: no-repeat
}

.CTA .d-flex {
 display: flex;
 justify-content: space-between;
 align-items: center
}

.CTA .title {
 width: 50%
}

.CTA .titleImg {
 width: 40%
}

.CTA .title .h2,.CTA .title .h3 {
 font-size: 24px;
 font-weight: 800;
 margin-top: 0;
 line-height: 36px;
 color: #333'
}

.CTA .title p {
 color: #333'
 margin-top: 5px
}

.CTA .actions {
 margin-top: 20px
}

.CTA .actions a {
 display: inline-block;
 padding: 12px 30px;
 border-width: 1px;
 border-style: solid;
 border-radius: 8px;
 font-size: 16px;
 transition: all ease .3s;
 text-decoration: none;
 font-weight: 400
}

.CTA .actions a.btn-fill {
 border-color: #ff4051;
 background: #ff4051;
 color: #fff;
 margin-bottom: 15px
}

.CTA .actions a.btn-fill:hover {
 background-color: #e23442;
 border-color: #e23442;
 color: #fff
}

.CTA .actions a.btn-bdr {
 border-color: #1a2029;
 color: #1a2029
}

.CTA .actions a.btn-bdr:hover {
 background-color: #ff4051;
 border-color: #ff4051;
 color: #fff
}

.actions_form {
 position: relative
}

.actions_form .form-control {
 width: 100%;
 padding: 15px;
 border: none;
 border-radius: 5px;
 padding-right: 140px;
 font-size: 14px
}

.actions_form .btn-fill {
 padding: 10px 12px;
 border-radius: 4px;
 font-size: 12px;
 text-decoration: none;
 font-weight: 400;
 position: absolute;
 right: 10px;
 background-color: #ff4555;
 color: #fff;
 top: 50%;
 transform: translate(0%,-50%)
}

.form-text.text-danger {
 color: #ff4555
}

.CTA_full .title {
 width: 100%;
 text-align: center
}

body{
 font-family: source sans pro,sans-serif;
 color: #545454;
 font-size: 16px;
 font-style: normal;
 overflow: auto;
 font-weight: 400;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-rendering: optimizeLegibility;
 -webkit-font-smoothing: antialiased

}
</style>"><div class="CTA" style="background-image: url(https://static.wixstatic.com/media/0cf4be_68b652fbf5f24ef4aca4a6a039050162~mv2.jpg);">
<div class="d-flex">
<div class="title">
<div class="h2">Leverage User Generated Content in Your Marketing Campaigns</div>
Schedule a Demo Now!
<div class="actions">
<a href="https://idukki.io/request-demo" style="background: beige;" class="ugcFromBtn">Book a Demo</a>
</div>
</div>
<div class="titleImg">
<img decoding="async" src="https://static.wixstatic.com/media/0cf4be_77e79d044be642d6bfb2dfec0c4c8422~mv2.png" height="180px" alt="Free Trial"></div>
</div>
</div>
<style>
.CTA {
 padding: 20px 30px;
 background: #fff;
 max-width: 95%;
 margin: 30px auto;
 border-radius: 15px;
 box-shadow: 0 0 10px rgb(0 0 0/10%);
 background-size: cover;
 background-repeat: no-repeat
}

.CTA .d-flex {
 display: flex;
 justify-content: space-between;
 align-items: center
}

.CTA .title {
 width: 50%
}

.CTA .titleImg {
 width: 40%
}

.CTA .title .h2,.CTA .title .h3 {
 font-size: 24px;
 font-weight: 800;
 margin-top: 0;
 line-height: 36px;
 color: #333'
}

.CTA .title p {
 color: #333'
 margin-top: 5px
}

.CTA .actions {
 margin-top: 20px
}

.CTA .actions a {
 display: inline-block;
 padding: 12px 30px;
 border-width: 1px;
 border-style: solid;
 border-radius: 8px;
 font-size: 16px;
 transition: all ease .3s;
 text-decoration: none;
 font-weight: 400
}

.CTA .actions a.btn-fill {
 border-color: #ff4051;
 background: #ff4051;
 color: #fff;
 margin-bottom: 15px
}

.CTA .actions a.btn-fill:hover {
 background-color: #e23442;
 border-color: #e23442;
 color: #fff
}

.CTA .actions a.btn-bdr {
 border-color: #1a2029;
 color: #1a2029
}

.CTA .actions a.btn-bdr:hover {
 background-color: #ff4051;
 border-color: #ff4051;
 color: #fff
}

.actions_form {
 position: relative
}

.actions_form .form-control {
 width: 100%;
 padding: 15px;
 border: none;
 border-radius: 5px;
 padding-right: 140px;
 font-size: 14px
}

.actions_form .btn-fill {
 padding: 10px 12px;
 border-radius: 4px;
 font-size: 12px;
 text-decoration: none;
 font-weight: 400;
 position: absolute;
 right: 10px;
 background-color: #ff4555;
 color: #fff;
 top: 50%;
 transform: translate(0%,-50%)
}

.form-text.text-danger {
 color: #ff4555
}

.CTA_full .title {
 width: 100%;
 text-align: center
}

body{
 font-family: source sans pro,sans-serif;
 color: #545454;
 font-size: 16px;
 font-style: normal;
 overflow: auto;
 font-weight: 400;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-rendering: optimizeLegibility;
 -webkit-font-smoothing: antialiased

}
</style></div> <h2 class="PlaygroundEditorTheme__h2" dir="ltr">To modify the pagination type of your collection:</h2> 1. Go to Collection &gt; All Collections in the left panel on your Idukki dashboard. <img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/38ed40_image_173g70p.1696522272106.png?alt=media" alt="image_173g70p.png" width="inherit" height="inherit"> 2. On the Collections page, click Curate for any of the active collections. <img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/38ed40_image_1wxm1v3.1696522309924.png?alt=media" alt="image_1wxm1v3.png" width="inherit" height="inherit"> 3. Click Gallery to access the settings. 4. Select a Pagination Type from the drop-down list. You can choose from the following: <ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Page Numbers- You can divide the collections into posts per page and provide page numbers in the footer to let visitors jump to any page.</li></ul> <ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Load More- You can provide the option to let visitors view more posts using the load more button at the bottom. It will load up more posts in the same organized manner.</li></ul> <ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Auto Scroll- Save the visitor's effort in loading posts by providing the auto scroll option that will load media as soon as they reach the bottom.</li></ul> <img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/38ed40_image_l9td9v.1696522370553.png?alt=media" alt="image_l9td9v.png" width="inherit" height="inherit"> <blockquote class="PlaygroundEditorTheme__quote" dir="ltr">For pagination type to work effectively, choose the right layout along with the posts per page, columns, and spacing between posts.</blockquote> I hope this helps. <div data-lexical-embed-block="<div class=&quot;id-container&quot;>
 <div class=&quot;id-features-cta&quot;>
 <div class=&quot;id-cta-content&quot;>
 <picture decoding=&quot;async&quot;>
<source type=&quot;image/webp&quot; srcset=&quot;https://assets.idukki.io/blogassets/instagram-icon-2.png.webp&quot; width=&quot;75px&quot;>
<img decoding=&quot;async&quot; src=&quot;https://assets.idukki.io/blogassets/instagram-icon.png&quot; alt=&quot;instagram&quot;>
</picture>

 
 <h3>Start leveraging your Instagram feed to grow your business</h3>
 Get started with your first feed in minutes
 
 </div>
 <div class=&quot;id-cta-btn&quot;>
 <a class=&quot;id-btn-peach&quot; href=&quot;https://app.idukki.io/register&quot;>Try for free</a> </div>
 </div>
 </div>```
 <style>.id-features-cta {
height:300px;
 font-family:Arial;font-size: 1.25rem;
 padding: 40px 50px 57px;
 background: #FFF;
 border: 2px solid #E8E8EB;
 box-sizing: border-box;
 box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 5px rgba(0,0,0,.05), -9px 9px #FE544F;
 border-radius: 16px;
 display: flex;
 position: relative;
 z-index: 99;
}.id-features-cta .id-cta-content {
 box-sizing: border-box;
 display: flex;
}
 .id-features-cta {
 padding: 2rem 2rem;
 background: #FFF;
 border: 2px solid #E8E8EB;
 box-sizing: border-box;
 box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 5px rgba(0,0,0,.05), -9px 9px #FE544F;
 border-radius: 16px;
 display: flex;
 margin-bottom: -80px;
 position: relative;
 z-index: 99;
}.id-features-cta .id-cta-content .id-cta-icon {
 margin-right: 32px; margin-top: 64px;
}.id-features-cta .id-cta-content h3 {
 font-size: 32px;
 margin-bottom: 20px;
 margin-top: 6vh;
 white-space: wrap;
 letter-spacing: 1px;
 line-height: 1.2;
 
}.id-features-cta .id-cta-btn {
 width: 300px;
 display: flex;
 align-items: center;
 justify-content: flex-end;
 padding-right: 10px;
 box-sizing: border-box;
}.id-features-cta .id-cta-btn a {
 font-size: 1.5rem;
 display: inline-block;
 padding: 0.75rem 1rem;
 margin-right: 0;
}
.id-btn-peach {
 font-family: GeneralSans-Semibold,-apple-system,BlinkMacSystemFont,&quot;Segoe UI&quot;,Roboto,Helvetica,Arial,sans-serif;
 padding: 6px 20px;
 background: #FE544F;
 border-radius: 2px;
 font-size: 1rem;
 line-height: 120%;
 letter-spacing: 0;
 color: #fff;
 text-decoration: none;
 margin-right: 3px;
 transition: all .1s ease-in-out;
 cursor: pointer;
}
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
 max-width: initial;
}
 </style>"><div class="id-container">
 <div class="id-features-cta">
 <div class="id-cta-content">
 <picture decoding="async">
<source type="image/webp" srcset="https://assets.idukki.io/blogassets/instagram-icon-2.png.webp" width="75px">
<img decoding="async" src="https://assets.idukki.io/blogassets/instagram-icon.png" alt="instagram">
</picture>

 
 <h3>Start leveraging your Instagram feed to grow your business</h3>
 Get started with your first feed in minutes
 
 </div>
 <div class="id-cta-btn">
 <a class="id-btn-peach" href="https://app.idukki.io/register">Try for free</a> </div>
 </div>
 </div>```
 <style>.id-features-cta {
height:300px;
 font-family:Arial;font-size: 1.25rem;
 padding: 40px 50px 57px;
 background: #FFF;
 border: 2px solid #E8E8EB;
 box-sizing: border-box;
 box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 5px rgba(0,0,0,.05), -9px 9px #FE544F;
 border-radius: 16px;
 display: flex;
 position: relative;
 z-index: 99;
}.id-features-cta .id-cta-content {
 box-sizing: border-box;
 display: flex;
}
 .id-features-cta {
 padding: 2rem 2rem;
 background: #FFF;
 border: 2px solid #E8E8EB;
 box-sizing: border-box;
 box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 5px rgba(0,0,0,.05), -9px 9px #FE544F;
 border-radius: 16px;
 display: flex;
 margin-bottom: -80px;
 position: relative;
 z-index: 99;
}.id-features-cta .id-cta-content .id-cta-icon {
 margin-right: 32px; margin-top: 64px;
}.id-features-cta .id-cta-content h3 {
 font-size: 32px;
 margin-bottom: 20px;
 margin-top: 6vh;
 white-space: wrap;
 letter-spacing: 1px;
 line-height: 1.2;
 
}.id-features-cta .id-cta-btn {
 width: 300px;
 display: flex;
 align-items: center;
 justify-content: flex-end;
 padding-right: 10px;
 box-sizing: border-box;
}.id-features-cta .id-cta-btn a {
 font-size: 1.5rem;
 display: inline-block;
 padding: 0.75rem 1rem;
 margin-right: 0;
}
.id-btn-peach {
 font-family: GeneralSans-Semibold,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
 padding: 6px 20px;
 background: #FE544F;
 border-radius: 2px;
 font-size: 1rem;
 line-height: 120%;
 letter-spacing: 0;
 color: #fff;
 text-decoration: none;
 margin-right: 3px;
 transition: all .1s ease-in-out;
 cursor: pointer;
}
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
 max-width: initial;
}
 </style></div>

Idukki lets you choose a pagination type to help your visitors browse through your collection. You can change the pagination according to how you want to organize and display your UGC media, i.e., the layout you prefer. You can divide the posts into smaller pages and provide the page numbers or symbols in the footer for visitors to navigate.

Let us look at the different pagination types available with Idukki.

Leverage User Generated Content in Your Marketing Campaigns

Schedule a Demo Now!

[Book a Demo]()

![]()
">
Leverage User Generated Content in Your Marketing Campaigns

Schedule a Demo Now!

[Book a Demo](https://idukki.io/request-demo)

![Free Trial](https://static.wixstatic.com/media/0cf4be_77e79d044be642d6bfb2dfec0c4c8422~mv2.png)

## To modify the pagination type of your collection:

****1.****Go to****Collection****>****All Collections****in the left panel on your Idukki dashboard.

![image_173g70p.png](https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/38ed40_image_173g70p.1696522272106.png?alt=media)

****2.****On the****Collections****page, click****Curate****for any of the active collections.

![image_1wxm1v3.png](https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/38ed40_image_1wxm1v3.1696522309924.png?alt=media)

****3.****Click****Gallery****to access the settings.

****4.****Select a****Pagination Type****from the drop-down list. You can choose from the following:

* ****Page Numbers-****You can divide the collections into posts per page and provide page numbers in the footer to let visitors jump to any page.

* ****Load More-****You can provide the option to let visitors view more posts using the load more button at the bottom. It will load up more posts in the same organized manner.

* ****Auto Scroll-****Save the visitor's effort in loading posts by providing the auto scroll option that will load media as soon as they reach the bottom.

![image_l9td9v.png](https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/38ed40_image_l9td9v.1696522370553.png?alt=media)

> **For pagination type to work effectively, choose the right layout along with the posts per page, columns, and spacing between posts.**

**I hope this helps.**

<picture><source /> ![]()</picture> ### Start leveraging your Instagram feed to grow your business

Get started with your first feed in minutes

[Try for free]()
\`\`\` ">
<picture><source /> ![instagram](https://assets.idukki.io/blogassets/instagram-icon.png)</picture> ### Start leveraging your Instagram feed to grow your business

Get started with your first feed in minutes

[Try for free](https://app.idukki.io/register)
\`\`\`

Idukki lets you choose a pagination type to help your visitors browse through your collection. You can change the pagination according to how you want to organize and display your UGC media, i.e., the layout you prefer. You can divide the posts into smaller pages and provide the page numbers or symbols in the footer for visitors to navigate. Let us look at the different pagination types available with Idukki. <h1 class="PlaygroundEditorTheme__h1" dir="ltr">To modify the pagination type of your collection:</h1> 1. Go to Collection &gt; All Collections in the left panel on your Idukki dashboard. <img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/38ed40_image_173g70p.1696522272106.png?alt=media" alt="image_173g70p.png" width="inherit" height="inherit"> 2. On the Collections page, click Curate for any of the active collections. <img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/38ed40_image_1wxm1v3.1696522309924.png?alt=media" alt="image_1wxm1v3.png" width="inherit" height="inherit"> 3. Click Gallery to access the settings. 4. Select a Pagination Type from the drop-down list. You can choose from the following: <ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Page Numbers- You can divide the collections into posts per page and provide page numbers in the footer to let visitors jump to any page.</li></ul> <ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Load More- You can provide the option to let visitors view more posts using the load more button at the bottom. It will load up more posts in the same organized manner.</li></ul> <ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Auto Scroll- Save the visitor's effort in loading posts by providing the auto scroll option that will load media as soon as they reach the bottom. </li></ul> <img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/38ed40_image_l9td9v.1696522370553.png?alt=media" alt="image_l9td9v.png" width="inherit" height="inherit"> <blockquote class="PlaygroundEditorTheme__quote" dir="ltr">For pagination type to work effectively, choose the right layout along with the posts per page, columns, and spacing between posts.</blockquote> I hope this helps.

How to Change Pagination Type of Your Collection

Idukki lets you choose a pagination type to help your visitors browse through your collection. You can change the pagination according to how you want to organize and display your UGC media, i.e., the layout you prefer. You can divide the posts into smaller pages and provide the page numbers or symbols in the footer for visitors to navigate. Let us look at the different pagination types available with Idukki. <h1 class="PlaygroundEditorTheme__h1" dir="ltr">To modify the pagination type of your collection:</h1> 1. Go to Collection &gt; All Collections in the left panel on your Idukki dashboard. <img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/38ed40_image_173g70p.1696522272106.png?alt=media" alt="image_173g70p.png" width="inherit" height="inherit"> 2. On the Collections page, click Curate for any of the active collections. <img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/38ed40_image_1wxm1v3.1696522309924.png?alt=media" alt="image_1wxm1v3.png" width="inherit" height="inherit"> 3. Click Gallery to access the settings. 4. Select a Pagination Type from the drop-down list. You can choose from the following: <ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Page Numbers- You can divide the collections into posts per page and provide page numbers in the footer to let visitors jump to any page.</li></ul> <ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Load More- You can provide the option to let visitors view more posts using the load more button at the bottom. It will load up more posts in the same organized manner.</li></ul> <ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Auto Scroll- Save the visitor's effort in loading posts by providing the auto scroll option that will load media as soon as they reach the bottom.</li></ul> <img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/38ed40_image_l9td9v.1696522370553.png?alt=media" alt="image_l9td9v.png" width="inherit" height="inherit"> <blockquote class="PlaygroundEditorTheme__quote" dir="ltr">For pagination type to work effectively, choose the right layout along with the posts per page, columns, and spacing between posts.</blockquote> I hope this helps.

Was this article helpful?