Features

  • Choose to align Pagination navigation to the left, center or right of content
  • Set navigation control to small, standard or large
  • Localize text for First and Last buttons
  • Show all navigation numbers or set a custom range
  • Use color style presets from Control Center stack or choose custom colors
  • Opt to bold active page number
  • Choose an arrow style that matches your page

Example

  • Section One

    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

  • Section Two

    Label

    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

    Label

    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

  • Image

    Section Three

    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

  • Image

    Section Four

    Lorem ipsum dolor sit amet, sapien platea morbi lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, ante dolor sed mauris.

    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

    Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

  • Section Five

    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

  • Section Six

    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.


Using Pagination

Navigation

Alignment
Allows you to align Paginations controls to the left, center or right of the stack’s content.

Navigation Size
Choose whether you want your Pagination navigation to be small, standard or large.

Style
By default the Pagination stack styles its elements using the page presets for Pagination in the Control Center stack. You can also opt to use the Custom styling which will allow you to adjust each element on your own using color pickers. Here’s a look at the various color picker sections:

  • Base: Set the color of your navigation's base background, border and text.
  • Disabled: Change the coloring arrows and "first" and "last" buttons when they are disabled.
  • Active: Chose the coloring of the buttons and numbers in the Pagination stack when they are selected.
  • Hover: Lets you select the color you wish the buttons and numbers to have when they are hovered over.

Bold Active Number
Enabling this feature helps to distinguish the active page number in the navigation by bolding it.

First & Last Buttons
Choose whether you wish to display "First" and "Last" buttons in your navigation. Visitors clicking these will be taken to the first or last page in the Pagination stack.

First & Last Button Localization
Allows you to set the words you like to use for the "First" and "Last" buttons in the navigation if you have them enabled.

Arrows
Choose the style of arrows for your navigation that will match your project.

Nav. Numbers
Opt to show navigation numbers for all sections in your Pagination stack or set a custom range of numbers to display.

Sign up for The Forge newsletter

Stay up to date on future versions of Foundry, as well as important news, updates and more!

This site is built using Foundry for RapidWeaver

© 2006-2016 Elixir Graphics | Contact Us