tuanphan Posted June 20 Posted June 20 To add a pagination Previous/Next on a standard page, you can follow these. If you can't make it work, you can comment below with site url, I can check easier. #1. Edit Page > Add a Code Block #2. Paste this code into Code Block <section id="itemPagination" class="item-pagination item-pagination--prev-next custom-prev-next"> <a href="/project-01" class="item-pagination-link item-pagination-link--prev"> <div class="item-pagination-icon icon icon--stroke"> <svg class="caret-left-icon--small" viewBox="0 0 9 16"> <polyline fill="none" stroke-miterlimit="10" points="7.3,14.7 2.5,8 7.3,1.2"></polyline> </svg> </div> <span class="pagination-title-wrapper"> <h2 class="item-pagination-title">Project 01</h2> </span> </a> <a href="/project-03" class="item-pagination-link item-pagination-link--next"> <div class="pagination-title-wrapper"> <h2 class="item-pagination-title">Project 03</h2> </div> <div class="item-pagination-icon icon icon--stroke"> <svg class="caret-right-icon--small" viewBox="0 0 9 16"> <polyline fill="none" stroke-miterlimit="10" points="1.6,1.2 6.5,7.9 1.6,14.7"></polyline> </svg> </div> </a> #3. Use this code to Custom CSS box to make the arrow appear + resize the text on mobile section.custom-prev-next svg { fill: #000; stroke: #000; } @media screen and (max-width:767px) { section.custom-prev-next * { font-size: 16px; } } #4. Result #5. Some notes Change text/url here Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment