Jump to content

[Share] Add Previous/Next on Standard Page

Recommended Posts

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

f60ab6e0969b27e6c46204604a3445bf0c2c28d0_2_540x750.jpeg

#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>

image.png.cb01342e8c8efc452c47de503dad1d67.png

#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;
    }
}

image.png.154cb37777ca743c08e3ea23f3207b1d.png

#4. Result

image.png.37968f82d143a721d6eaa7f6c618aec3.png

#5. Some notes

Change text/url here

image.png.760590d0af391e74e320a921cf5cd2c9.png

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!)

Link to comment
  • Replies 0
  • Views 108
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.