Pagination

NOTE
All pagination options were added in version 2.15 of Design Upgrade Pro. Please upgrade to 2.15 or higher to see these options in the Customizer.

Design Upgrade Pro pagination options in the Customizer
Options available for LearnDash pagination

In version 2.15, not only did we improve the default design of all instances of LearnDash pagination, but we added 8 new design options for you to customize.

LearnDash pagination can be found in the following places (if you have more items than the limits you set in the admin area):

  • Focus Mode sidebar navigation
  • Course Content navigation (on the course page)
  • Course Navigation widget (if added to a sidebar)
  • Bottom of the course grid

Here’s an example of some styles being applied to the pagination. This example uses:

  • Background Color: Light blue
  • Text Color: Grey
  • Arrow Color: Blue
  • Hover: Arrow Color: White
  • Arrow Style: Circle
  • Arrow Background: White
  • Hover: Arrow Background: Blue
LearnDash pagination design options example

NOTE
LearnDash uses different icons & a different style for the course grid pagination. It will look slightly different but all of our options still apply.

Let’s discuss the new options.

Background Color

By default, the background color of the entire pagination element will be a light grey. We provide you two different options to customize it:

  • Remove Background Color: Check this box to completely remove the background color. Doing so will make the next option irrelevant.
  • Background Color: Choose your own custom background color for the pagination element.

Text Color

Text color refers to the page numbers in the center of the pagination.

  • For the course grid, it will look like this: Page 1 / 3
  • For all other instances, it will look like this: 1 of 3

Simply choose the color you’d like to use for this text.

Arrow Color

The arrows are found to the left & right of the page numbers. Clicking them will move you through the pages.

  • Arrow Color: This option dictates the color for all navigation arrows
  • Hover: Arrow Color: This option dictates the arrow color when the user’s mouse hovers over it

Arrow Style

There are 2 options available for arrow style:

  • Default: This will simply show the arrows as text/icons, just as LearnDash does.
  • Circle: This will place a circle around each arrow. The color of the circle is determined by the “Arrow Background” options.

Arrow Background

Arrow background only comes into play if you’re using the Circle style above. If using the default style, there is no need to set these options.

  • Arrow Background: In the arrow’s normal state, this determines the color of the circle around the arrow
  • Hover: Arrow Background: This determines the color of the circle when the user’s mouse hovers over the arrow

Other Notes

  • If an arrow is not clickable (meaning there is no previous page, or no next page, to navigate to), the arrow is shown at 25% opacity, to indicate it is not clickable.
  • The border radius of the pagination background (if not being hidden) uses the Button Border Radius setting from the Buttons panel.

Feedback / Suggestions

Lesson: Pagination

If you have any questions, feedback or suggestions about this lesson, please let us know in the box below.