Divi Events Calendar

Documentation & Support

Docs » Divi Events Calendar » Modules » Events Feed » Pagination Options

Still Need Help?

If you have a question not covered here in the docs, or if you face any technical issue, you can reach out to us.

Visit Our Support Page

Divi Events Calendar plugin by Pee Aye Creative 2.1

Ready To Purchase?

Visit the product page to get all the details and make your purchase.

View Product

Events Feed Module Pagination Options in the Divi Events Calendar Plugin by Pee Aye Creative

Events Feed Module Pagination Options

In this video I’m going to talk about the three different pagination options available in the Events Feed module. Be sure to reference the Events Feed Module Settings List which includes a summary of every setting that is available and what it does. You should also check out the Events Feed Module Demos to see how the module works and get some inspiration. You can see all the Pagination Options by going to the Events Feed Module Settings > Content Tab

We made it our goal to provide every setting we could think of to provide you the best pagination experience.

Show Pagination

This is the first option that you will see after coming to the Events Feed Module Settings > Content Tab > Pagination Options. Enabling or disabling this option will display or hide the pagination from the frontend. After enabling this option you will see different options to customize the pagination.

Pagination Type

This option allows you to select the type or style of pagination that you want to show on the front end. There are three options under the pagination type which offers three different styles of paginations.

Paged

This option provides you the default WordPress style pagination which shows the Older Entries and Next Entries for going previous and forward respectively.

Numeric

This option provides you the number pagination in the bottom right corner which shows on which page from the total pages you are on and also provides first and last buttons to jump directly to the first and the last page on which Events Feeds are present.

Load More Button

This option provides you a Load More Button which will load the Events feeds on that very page that you are on using the Ajax functionality. After selecting this pagination type you will see two additional options:

Number Of Events to Load

This option allows you to place a number and that much number of events will be loaded per click of the Load More Button.

Button Text

This option allows you to change the Load More text to any other text of your liking and that text will show inside the Load More button.

Load More Button Design Settings

Currently, we don’t have the customization options for the paged and numbered type paginations but we can totally customize the load more button type pagination by going to the Events Feed Settings > Design Tab. Under the load more button tab you will see two options:

Use Custom Styles For Load More Button

Enabling this option will provide you a lot of customization options to customize the Load More Button. All the options are standard button customization options that you encounter while working on the buttons under Divi and using the options you can style the button and the button text. You also get the feature to show the icon and customize the visibility of the icon.

Button Alignment

This option will allow you to align the Load More Button inside the Events Feed container. You can left, right, or center align the button as per your liking.

Bonus: Customize Paged type Pagination using CSS

The CSS Snippet given below will allow you to change the Older and Next Entries text in the paged type pagination. Go to the WordPress Dashboard > Divi > Theme Options > Custom CSS Panel and place the CSS snippet given below:

a.ecs-page_alignment_left {
visibility: hidden;
}
/*add new custom previous pagination text*/
a.ecs-page_alignment_left:before {
content: 'Left Text Here';
visibility: visible;
color: red;
font-size: 22px;
font-weight: bold;
}
/*remove default next pagination text*/
a.ecs-page_alignment_right {
visibility: hidden;
}
/*add new custom next pagination text*/
a.ecs-page_alignment_right:after {
content: 'Right Text Here';
visibility: visible;
color: red;
font-size: 22px;
font-weight: bold;
}
You can place your content in the content property inside the given CSS Snippet. Other than that you can change the font size, color, font-weight of the text as per your liking.

Last updated Oct 6, 2021 @ 3:45 pm

Is This Article Helpful?

Pin It on Pinterest

0

Your Cart