By default, HighLevel doesn’t allow you to move or nest elements freely within other columns. The Move-After script solves this by allowing you to reposition fully designed rows, columns, or elements inside an existing column—expanding your design flexibility without limitations.
HighLevel’s builder has drag-and-drop limitations, but with Move-After, you can place rows, columns, and elements exactly where you need them automatically when the page loads.
<script>
document.addEventListener("DOMContentLoaded", function () {
if (window.HigherFrameMoveAfterLoaded) {
console.log("Move-After script already loaded, skipping duplicate execution.");
return;
}
window.HigherFrameMoveAfterLoaded = true;
function moveElements() {
document.querySelectorAll('[class*="move-after-"]').forEach((element) => {
if (element.classList.contains("moved-already")) return;
let match = element.className.match(/move-after-([a-zA-Z0-9-_]+)/);
if (match) {
let afterClass = match[1];
let targetElement = document.getElementById(afterClass) || document.querySelector("." + afterClass);
if (targetElement && !targetElement.contains(element) && element.previousElementSibling !== targetElement) {
targetElement.insertAdjacentElement("afterend", element);
element.classList.add("moved-already");
console.log(`Moved: ${element} after ${afterClass}`);
}
}
});
}
function removeDuplicates() {
document.querySelectorAll("div.inner").forEach((innerDiv) => {
let seenIds = new Set();
Array.from(innerDiv.children).forEach((child) => {
if (child.id) {
if (seenIds.has(child.id)) {
child.remove();
} else {
seenIds.add(child.id);
}
}
});
});
}
// Initial move and cleanup
moveElements();
setTimeout(removeDuplicates, 50);
// Watch for only relevant updates
const observer = new MutationObserver((mutations) => {
let shouldMove = false;
mutations.forEach((mutation) => {
if ([...mutation.addedNodes].some((node) => node.nodeType === 1 && node.matches('[class*="move-after-"]'))) {
shouldMove = true;
}
});
if (shouldMove) {
moveElements();
setTimeout(removeDuplicates, 50);
}
});
observer.observe(document.body, { childList: true, subtree: true });
});
</script>
- Format: move-after-[CSS Selector ID]
- Example: If the target’s ID is #paragraph-h244bXqAHH, add this class to the moving element: move-after-paragraph-h244bXqAHH
✅ Fix: Ensure that:
- The script was properly pasted into a <code> element and saved.
- The correct class name is assigned to the moving element (without the # symbol).
- The target element’s CSS Selector ID is copied correctly.
✅ Yes! Since we are identifying a specific CSS Selector ID as the target, the Move-After script can be used as many times as needed to reposition multiple elements after the same target element.
💡 How? Simply repeat the process by:
- Assigning the each target CSS Selector ID to different elements.
- Adding the move-after-[CSS Selector ID] class to each element you want to move.
Each element will be placed in the order they are processed, allowing you to stack multiple elements after the same reference point. 🚀