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.
- Wilis Elementor Blog Page Template
- Putri Tidur Elementor Blog Page Template
- Panderman Elementor Blog Page Template
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.
3 thoughts on “How to Style Up Numeric Pagination in Elementor”
This tutorial works great but the problem is when you want to use also previous and next buttons. On the first and last page you cannot style the look of the prev i next buttons. Its should be greyed and inactive. Can you help me with that?
Hi Marek,
The previous and next buttons have their own selector. You can use these selectors to create a unique style for each button. You can jump here to see the selectors of next button and previous button
Thank you for your reply,
I wasn’t precise in my comment. My problem is the inactive state of previous and next button on the last and first page only. Ex: previous button should be automatically inactive on the first page and the next button should be inactive on the last page because I cannot go further. If I style :before and :hover state it is not enough, because I need additional state, something like :current state. On the first page two buttons should be inactive (:current state): Previous button and digit 1.
When I inspect it I see only extra stete (:current) on digit 1 but there is no extra state on the previous button. I don’t know how to achieve it. Maybe you have some ideas. Thank you