How to Style Up Numeric Pagination in Elementor

Elementor has two native widgets that you can use to display blog posts on your website: Posts and Archive Posts. The Posts widget is used to display blog posts on a non-archive page (e.g., blog page), while the Archive Posts widget is used to display blog posts on an archive page (e.g., category page, tag page, and so on).

Both the Posts widget and Archive Posts widget have an option to enable numeric pagination to split the post feed into pages. Just like other elements, you can also style up the numeric pagination to make it looks appealing and match the design scheme on your website. In this post, we will show you how to style up the numeric pagination in Elementor.

Styling Up the Numeric Pagination in Elementor

There are two options to style up the numeric pagination in Elementor. First, you can use the built-in styling options. Second, you can use custom CSS to further decorate the numeric pagination. This post will cover both options.

Before getting started, you can create a new page and edit it with Elementor (or you can edit an existing page with Elementor). New to Elementor? You can read our previous to learn how to use Elementor. Next, add the Posts widget (or Archive Posts widget if want to create a custom archive template) to the canvas area by dragging it from the widget panel.

Once the Posts widget is in place, go to the settings panel and open the Pagination block. On the Pagination option, select Numbers.

As you can see on the screenshot above, you can also set the page limit as well as enable the Shorten option. Once done with the basic settings, you can switch to the Style tab on the settings panel to start styling up the pagination.

— Styling Up the Numeric Pagination Using the Built-in Styling Options

To style up the pagination, you can open the Pagination block under the Style tab on the settings panel.

After opening the Pagination block, you will see some setting options that you can set such as typography — which includes font family, font size, font style, font height, and so on –, text color, gap between numbers, and pagination spacing.

For text color, you can set the color for each page state (normal, hover, and active).

Once done styling up the pagination, you can publish/update your page.

A handy tip. If you have multiple pages on your website you to apply the pagination to, you can create a global font as well as global color. This will save you time if you want to make changes to your pagination in the future.

— Styling Up the Numeric Pagination Using the Custom CSS

As you can see above, the built-in styling options offered by Elementor for numeric pagination are limited. You can only set the typography setting, text color, and the pagination gaps.

To further decorate the numeric pagination, you can use custom CSS. Before adding custom CSS, make sure to set the typography setting and text color to default.

In Elementor itself, the numeric pagination has the following structure:

  • The pagination itself/wrapper
  • Pagination numbers
  • Pagination number on active state

Each element on the numeric pagination structure above has a unique class selector as follows:

  • The wrapper: .elementor-pagination
  • Pagination numbers: .page-numbers
  • Active number: .page-numbers.current

You can use the selectors above to target the elements you want to apply the custom style to using custom CSS code.

## The Wrapper

First, select the Posts widget (or Archive Posts widget) on the canvas area to edit it. Next, go to the Advanced tab on the settings panel and open the Custom CSS block.

On the available field/CSS editor, type selector .elementor-pagination{}. Afterwards, you can add your CSS content/declaration between the curly brackets. Example:

selector .elementor-pagination{
    padding: 30px 20px 40px 20px;
    background: #E1FD13;
}

The code above will result in the following look:

## Pagination Numbers

Same as the wrapper above, you can start by typing selector .page-numbers{} on the CSS editor on the settings panel to target the pagination numbers. You can then add the CSS declaration between the curly brackets. Example:

selector .page-numbers{
    font-family: mulish;
    font-size: 15px;
    line-height: 20px;
    padding: 10px 15px;
    color:#FFFFFF;
    background: #0161cd;
    transition: all .5s;
    border-radius: 20px;
}

The code above will result in the following look:

To use a different style for the pagination numbers on hover state, you can add the :hover option to the pagination numbers selector and use the different values on some properties on the CSS declaration. For example, the following CSS code changes the background color and the text color of the pagination numbers on hover state (notice the value of the background property and the color property):

selector .page-numbers:hover{
    font-family: mulish;
    font-size: 15px;
    line-height: 20px;
    padding: 10px 15px;
    color:#384958;
    background: #edf2f7;
    transition: all .5s;
    border-radius: 20px;
}

## Active Number

Start by typing selector .page-numbers.current{} on the CSS editor on the settings panel to target the active number on the numeric pagination. Next, you can add the CSS declaration between the curly brackets. Example:

selector .page-numbers.current{
    font-family: mulish;
    font-size: 15px;
    line-height: 20px;
    padding: 10px 15px;
    color:#384958;
    background: #edf2f7;
    transition: all .5s;
    border-radius: 20px;
}

The code above will result in the following look:

For more examples of numeric pagination styles via custom CSS, you can download the following Elementor blog page templates. After importing a template, you can edit the Posts widget and open the Custom CSS block under the Advanced tab on the settings panel to view the CSS code snippets.

The Bottom Line

Elementor has a native feature to add numeric pagination on your website. You can use the feature whether on a blog page or archive pages (category page, tag page, author’s archive page, and so on). Just like other elements in Elementor, there are two options to style up the numeric pagination. First, you can use the built-in styling options offered by Elementor. Alternatively, you can achieve a custom style via custom CSS. The latter option, of course, requires a little CSS knowledge.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

10+ free Elementor landing page templates. No extra plugin!

Creating with WordPress?​

Subscribe and join 1,500+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.