All Collections
Thrive Architect
Thrive Architect Elements
How to Use the 'Pagination Type' Option When Customizing a Post List Element
How to Use the 'Pagination Type' Option When Customizing a Post List Element

Read this article to find out how to use the "Pagination Type" option when using the Post List element in Thrive Architect

Iulia Dezmirean avatar
Written by Iulia Dezmirean
Updated over a week ago

If you're using a "Post List" element on your website, this article will help you understand how to use the "Pagination Type" option, in order to customize the element.

The first thing you have to do if you want to use the option is to add the element to your page. If you're not sure how to do that, check out this article, which goes through the steps one by one.

Once the "Post List" element has been added to your page, in the left sidebar, where the "Post List" section is, you can scroll down until you notice the "Pagination Type" option:

What is important to know about the "Pagination Type" is that, once you choose a type, you will have a new "Pagination" element in your editor. It will behave just like any other Thrive Architect element.

Keep in mind that, although you can customize it just like any other element, it cannot be an element on its own. This means that, if you delete the "Post List" element, the "Pagination" element will also be deleted. You can't have a "Pagination" element on your page without also having a "Post List" element.

Use the Option

After the "Post List" element has been added, you can use the "Pagination Type" option. There are two types of pagination: Numeric or Load More. You also have the "None" option, if you do not want to use a "Pagination" element. To choose one of these, click on the field next to the "Pagination Type" option:

A small drop-down will open, containing the three options mentioned above:

Here is how to use each of these options:

1. None

The first "Pagination type" option is "None":

If you select it from the drop-down menu, you will not have any "Pagination" on your "Post List" element. If you have previously used a "Numeric" or "Load More" pagination type, and you switched it to "None", the "Pagination" element will be removed.

However, the "Post List" element will not be deleted. You can find more about deleting the "Pagination" element later on in the article.

2. Numeric

The next pagination type is the "Numeric" one. Click on it in the small drop-down in order to choose it:

The "Pagination" element will be added to your page, right below the "Post List" element:

Just like in the case of any Thrive Architect element, you will have to click on the "Pagination" element to select it. Once the "Pagination" element is selected, you will notice its options in the left sidebar, with a few different sections:

Choose the Template

The first section of the left sidebar is the template library one. This is where you can choose the template that best fits your page:

A pop-up will open, with a few different templates. Select the one you prefer by clicking on it, and then click on the green "Choose Template" button:

The "Pagination" element will now have the template that you chose. The next section of the left sidebar is the "Pagination" one. This contains various options that you can use to customize the element to your liking.

You can find detailed information about using these options below:

Type

The first option is the "Type" one, and you can use it to change the type of the pagination from "Numeric" to "Load More" or to "None". If you want to change the type, click on the field next to the option:

This will open the same drop-down as the one mentioned above, where you can choose the pagination type.

Page Numbers

Next, you can choose whether the element should display the page numbers or not. The option is activated by default. If you want to deactivate it, simply click on the switch next to the option:

If the "Page Numbers" option is activated, you will be able to use the next two options, which are the "Pages Displayed Near Current Page" one, as well as the "Page Number Spacing" option, described below.

If, however, the "Page Numbers" option is deactivated, you will not be able to use the other two options.

Pages Displayed Near Current Page

This section refers to the number of pages that are displayed next to the current page. The current page number will be highlighted, and the option allows you to choose how many page numbers will be displayed next to it:

If you want to adjust the value, simply drag the slider from side to side, or manually enter a numerical value in the field next to the slider:

Page Number Spacing

After the number of displayed pages has been set, you can also change the spacing in between them. To do that, you can either use the slider below the option and drag it from side to side, or you can enter a numerical value in the field next to the slider:

Next/Previous

The next option is where you can choose if you want the "Pagination" element to have a "Next" and a "Previous" button or not. The option is activated by default. If you do not want to display these buttons, simply click on the switch next to the option:

First/Last

Similar to the last option, you can choose whether you want the element to have a "First" or a "Last" button. This is not activated by default. Naturally, if you want to activate it, click on the switch next to the option:

If you activate the option, the element will look something like this:

You can then further customize the buttons, by clicking on each of them and using their options that appear in the left sidebar. You can do this for the "First/Last" buttons, as well as for the "Next/Previous" buttons, or the page numbers.

For example, if you click on the "First/Last" buttons, these are the options you will see in the sidebar:

After you have customized the buttons, simply click on the "Pagination" element again, or click on "Pagination" in the breadcrumbs, to go back to it and continue using its options in the left sidebar.

Pagination Label

Going further with the element options, the next one is the "Pagination Label" one. Depending on what template you have previously selected, the option might be enabled or disabled by default. In this example, the option was disabled.

In order to activate it, click on the switch next to the option:

When the option is enabled, this is how it will look like:

You can change its format, as well. In the editor, click on the "Pagination Label", and some options will appear on the left sidebar:

To go back to the "Pagination" element options, either click on "Pagination" in the breadcrumbs or click on the "Pagination" element on the page.

Alignment

The last option of the "Pagination" section is the "Alignment" one. This means that you can choose the way the element is aligned. If you want to do that, click on the field next to the option:

This will open a small drop-down with the alignment options. Click on the one that you prefer:

This is how you can customize the "Numeric" pagination type. There is also the "Load More" option, here is how to use it:

3. Load More

Lastly, the third type of pagination is the "Load More" one. If you want to go for this type, select it from the small drop-down that opens when you use the "Pagination Type" option of the "Post List" element:

If you decide to go for this type of pagination, this is how the element will look like:

The element will turn into a "Load More Button" element, and you can customize it just like you would customize any other "Button" element, using the options from the left sidebar:

The ways in which you can do that are explained in this article. This is how you can customize the "Pagination" element when using a "Post List" element on your website.

Delete the element

If you decide that you do not need the “Pagination” element anymore, you can simply delete it. When the element is selected, click on the “Delete” option (the trash icon) from the upper right corner:

The other way to delete it is to go to the "Post List" element options, in the left sidebar, and select "None" in the drop-down from the "Pagination Type" option:

These were the ways in which you can use the "Main options" of the "Pagination" element, found in the left sidebar.

Remember that you can further customize the element by using the rest of the general options, such as "Layout & Position", "Background Style", etc., for which we have written separate articles in our knowledge base.

I hope you found this article useful. If so, don't forget to rate our efforts with a smile below :)

Did this answer your question?