ErnestPH

Web developer

How to change the Pagination text of DIVI’s Filterable Portfolio

Home » Blog » How to change the Pagination text of DIVI’s Filterable Portfolio

CSS is the only solution yet

Someone found out that using a Javascript seems to ignore the code when changing the text on Filterable portfolio module. So I tried it myself using the same jQuery code for the Gallery module and just adding the right classes. Indeed it won’t update the texts when saving, though the console log outputted the new text… Also there’s no errors too in the console log, so it’s hard to debug it.

The quick solution is using CSS instead. Shared from Facebook DIVI group. Thanks to moderator, Benny for the codes.

.et_pb_filterable_portfolio .et_pb_portofolio_pagination ul li a.page-next, 
.et_pb_filterable_portfolio .et_pb_portofolio_pagination ul li a.page-prev {
border:none; /*ignore this because it's my needed styling*/
color: #404148; /*ignore this because it's my needed styling*/
padding: 4px 9px; /*ignore this because it's my needed styling*/
font-size:0; /*THIS IS IMPORTANT set font-size to zero*/ 
}
.et_pb_filterable_portfolio .et_pb_portofolio_pagination ul li a.page-next:after {
content: 'Next Page'; /*add text as you want*/
font-size:16px; /*set your font-size as you want*/
}
.et_pb_filterable_portfolio .et_pb_portofolio_pagination ul li a.page-prev:after {
content: 'Prev Page'; /*add text as you want*/
font-size:16px; /*set your font-size as you want*/
}
.et_pb_filterable_portfolio .et_pb_portofolio_pagination ul li a.page-next:hover, 
.et_pb_filterable_portfolio .et_pb_portofolio_pagination ul li a.page-prev:hover {
border:0px solid #fff!important; /*ignore this because it's my needed styling*/
}

Do you have a javascript solution? Please share it on the comment below. Thanks!