Customize Elementor Pagination
User
HOw to customize Number+Prev/next pagination structure elemetor paginator for Loop grid widget
Assistant
To customize the pagination structure of Elementor's Loop Grid (or Posts) widget, specifically to **wrap Prev, Numbers, and Next buttons in separate “ elements**, you **cannot directly modify the HTML output** from Elementor Pro because it’s generated internally.
However, you can **visually restructure** it using **CSS only**, by targeting the pagination DOM structure and applying flexbox or similar tricks.
—
### ✅ Objective
You want:
<span class="prev">Prev</span>
<span class="numbers">1 2 3</span>
<span class="next">Next</span>—
### 🔧 CSS Solution to Restructure Pagination
Use this approach to **visually wrap the elements** as desired.
/* Target Elementor Pagination wrapper */
.elementor-pagination {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}
/* Wrap prev, next, and numbers using pseudo wrappers */
.elementor-pagination a.prev {
order: 1;
}
.elementor-pagination .page-numbers:not(.prev):not(.next) {
order: 2;
}
.elementor-pagination a.next {
order: 3;
}
/* Add visual separation */
.elementor-pagination {
position: relative;
}
.elementor-pagination::before,
.elementor-pagination::after {
content: '';
display: none;
}
.elementor-pagination > a.prev::before {
content: '';
display: inline-block;
}
.elementor-pagination > a.next::after {
content: '';
display: inline-block;
}—
### 💡 Optional: Wraps Using JavaScript
If you want **actual DOM structure change**, inject this JS:
document.addEventListener("DOMContentLoaded", function () {
const pagination = document.querySelector(".elementor-pagination");
if (!pagination) return;
const prev = pagination.querySelector(".prev");
const next = pagination.querySelector(".next");
const numbers = Array.from(pagination.querySelectorAll(".page-numbers"))
.filter(el => !el.classList.contains("prev") && !el.classList.contains("next"));
const prevWrapper = document.createElement("span");
prevWrapper.className = "custom-prev";
const numbersWrapper = document.createElement("span");
numbersWrapper.className = "custom-numbers";
const nextWrapper = document.createElement("span");
nextWrapper.className = "custom-next";
if (prev) prevWrapper.appendChild(prev);
numbers.forEach(el => numbersWrapper.appendChild(el));
if (next) nextWrapper.appendChild(next);
pagination.innerHTML = '';
pagination.appendChild(prevWrapper);
pagination.appendChild(numbersWrapper);
pagination.appendChild(nextWrapper);
});Add this via:
– Elementor > Custom Code
– Or Theme > footer injection
– Or `functions.php` via `wp_footer` hook
—
### ✅ Result
Now you’ll have the pagination grouped exactly like:
<span class="custom-prev">Prev</span>
<span class="custom-numbers">1 2 3</span>
<span class="custom-next">Next</span>Let me know if you want **additional hover styles or transitions** for the pagination.