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