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.
View Live Demo
View Settings List
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.
