Paginación con scroll infinito en Posts de Elementor

En primer lugar y para que la paginación del widget Posts de Elementor funcione correctamente es importante que tengamos el parámetro de paginación posts_per_page en un número igual o inferior al que vayamos a poner en el widget de posts ya que con esto estableceremos el número máximo de entradas que se mostraran por página.

Ajustes de lectura

El valor de posts_per_page lo podemos modificar fácilmente desde el administrador de Wordpress desplegando las opciones de Ajustes > Lectura desde el menú lateral.

Paginación Wordpress - Ajustes de lectura

Dentro de la página Ajustes de lectura podemos modificar el valor de posts_per_page mediante un campo de texto. En mi caso muestro 3 entradas por página.

Paginación Wordpress - Número máximo de entradas

 

Incluir Widget Posts

Ahora ya podemos ir a la página o plantilla desde donde queremos mostrar nuestras entradas con paginación.

Utilizaremos el widget Posts de la versión Elementor Pro.

Paginación Wordpress - Widget Posts Elementor

Dentro de la pestaña Layout de las opciones de configuración del widget de los posts vamos a poner el número de entradas que queremos que se pinten en cada petición. En mi caso he vuelto a poner que se muestren 3 entradas por página ya que tengo pocas publicaciones y quiero que se aprecie el efecto de carga al entrar al Blog e ir haciendo scroll.

Paginación Wordpress y Elementor - Posts_per_pages

No olvidemos marcar nuestro CPT Entradas como source de la query para cargar las publicaciones del blog.

Paginación Wordpress y Elementor - Source Query

Finalmente dentro de la pestaña de configuración de la Paginación seleccionaremos la opción de scroll infinito.

Paginación - Wordpress y Elementor - Scroll-infinito

También podemos aplicar una animación de carga y un mensaje personalizado cuando ya no queden entradas por cargar.

Reproducir vídeo
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on facebook
Share on twitter
Share on linkedin

Nuevas/ publicaciones

Nuevas/ publicaciones

📢 Paginación con scroll infinito en Posts de Elementor 🔗 https://martagonzalez.dev/blog/paginacion-con-scroll-infinito-en-posts-de-elementor/ #webdev #playground #code #frontend #dev #webdev #developerlife #wordpress #elementor #cms #codingdays #development #frontenddev
Diseño tarjeta de visita #taxi #taxidriver #barcelona #tarjetadepresentacion #printdesign #taxibarcelona #graphicdesign #design #visitbarcelona #diseñografico #businesscards #branding #brandidentity
Move By Bike Landing - 2022 - Proyecto experimental Desarrollo de una landing page para promover el uso de la bicicleta como medio de transporte mediante una aplicación de pagina única hecha con #Angular y estilada con #SCSS. El diseño es de #Freepik. 🔗https://martagonzalez.dev/playground/by-bike-landing/ #webdev #playground #code #bybike #landing #frontend #developerlife #coding #angulardeveloper #codingdays #development #frontenddev #womenwhocode #tech #webdeveloper #codinglife
Hola mundo! 👋 Soy Marta González y me dedico al desarrollo front-end. Tengo estudios de multimedia, administración de sistemas y desarrollo de aplicaciones informáticas. Trabajo asiduamente con lenguajes #HTML5, #CSS3 y #JavaScript.  Me gustan los retos, soy autodidacta, creativa y proactiva. Aprendo con facilidad y me adapto a nuevos entornos rápidamente. #webdev #code #frontend #aboutme #developerlife #codingdays #development #programmer #womeninstem #frontenddev #webdeveloper #developer #code #techcommunity #devgirls #womenwhocode #coding #codepeople #womwnintech
Aplicación #CRUD de notas y registro de usuarios con #NodeJS #MongoDB #webdev #code #developer #playground #developerslife #codeislife #tech #codingdays #development
Pet Shop Landing - 2021 - Experimental #webdev #playground #code #frontend #developerlife #codingdays #development #frontenddev #developerlife #tech #development #adoptdontshop #coding
📢 Aplicaciones de página única (SPA) 🔗 https://martagonzalez.dev/aplicaciones-de-pagina-unica-spa/ #webdev #playground #code #frontend #developerlife #codingdays #development #frontenddev #spa #angular #react #vue #nodejs #javascript
To-Do con #ReactJS - 2021 #webdev #playground #code #frontend #developerlife #codingdays #development #frontenddev