💡 Slik setter du opp uendelig rulling i Elementor med Ajax Load More

• Installer den gratis plugin-en Ajax Load More fra WordPress.org-repositoriet og aktiver den.
• Kopier HTML-strukturen til et enkelt innlegg fra Elementor-rutenettet ved hjelp av DevTools og bygg en Repeater Template.
• I Shortcode Builder velger du «Infinite Scroll» som Loading Style og setter posts_per_page (4-6 for et rutenett med 2-3 kolonner).
• Legg til scroll_container og transition_container_classes med CSS-klassene fra Elementor-rutenettet slik at innlastede innlegg arver stilene.
• Pakk shortcode-en inn i en HTML-beholder med den unike elementor-element-*-widget-klassen og plasser blokken på siden.
• Åpne siden i frontend, rull til bunnen og bekreft at innlegg lastes inn ved rulling uten en sideoppdatering.

Hva du trenger

Før du begynner, sørg for at to ting er installert og aktivert på nettstedet ditt:

• Elementor (gratisversjon eller Pro), byggeverktøyet der innleggsrutenettet ditt er opprettet.
• Ajax Load More, en gratis plugin for å laste innhold via AJAX. Last ned fra WordPress.org

Ha også den offisielle dokumentasjonen og eksempelsiden tilgjengelig. Det finnes dusinvis av ferdige kodebiter for ulike scenarioer: fra standard innlegg til WooCommerce og ACF.

Den innebygde innleggs-widgeten i Elementor tilbyr bare nummerert paginering; verken gratis- eller Pro-versjonen kan laste innlegg ved rulling. Ajax Load More fyller dette gapet: den legger til uendelig rulling, en «Last mer»-knapp og lazy load samtidig som rutenettets utseende bevares. Nøkkelen er en korrekt Repeater Template. Når du har bygget den, er innlastede innlegg visuelt umulige å skille fra de som allerede er på siden.

Den korte videoen over viser integrasjonen i aksjon: Elementor-innlegg lastes sømløst uten sideoppdateringer eller layout-hopp.

Trinn 1: Bygge en Repeater Template for Elementor-rutenettet

Den viktigste delen er å overføre HTML-strukturen til et enkelt innlegg fra Elementor korrekt inn i Ajax Load More-malen. Hvis malen ikke samsvarer med det faktiske oppsettet, vil innlastede innlegg «falle fra hverandre»: marger forskyves, kort forsvinner og rutenettet bryter sammen.

Åpne siden med rutenettet i nettleseren din, trykk F12 (DevTools), gå til Elements-fanen og finn DOM-noden til et enkelt innlegg. Du trenger FULL HTML for ett element, fra den innledende <article> eller <div class="elementor-post"> til den avsluttende taggen.

En grunnmal for et Elementor-rutenett (to kolonner, Cards-utseende) ser slik ut:

1
<article class="elementor-post elementor-grid-item post-<?php the_ID(); ?>">
2
  <div class="elementor-post__card">
3
    <a class="elementor-post__thumbnail__link" href="<?php the_permalink(); ?>">
4
      <div class="elementor-post__thumbnail">
5
        <?php if (has_post_thumbnail()) {
6
          the_post_thumbnail('alm-thumbnail');
7
        } ?>
8
      </div>
9
    </a>
10
    <div class="elementor-post__text">
11
      <h3 class="elementor-post__title">
12
        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
13
      </h3>
14
      <div class="elementor-post__excerpt">
15
        <?php the_excerpt(); ?>
16
      </div>
17
      <a class="elementor-post__read-more" href="<?php the_permalink(); ?>">
18
        Read more »
19
      </a>
20
    </div>
21
    <div class="elementor-post__meta-data">
22
      <span class="elementor-post-date">
23
        <?php the_time('d.m.Y'); ?>
24
      </span>
25
    </div>
26
  </div>
27
</article>
28

Lagre malen i administrasjonspanelet: Ajax Load More → Repeater Templates, klikk «Add New». Gi den et meningsfylt navn, for eksempel «Elementor Grid 2 Columns».

Dette må du være oppmerksom på:

• Klassene elementor-post, elementor-post__card og elementor-post__thumbnail er «native» Elementor-klasser. De sørger for at innlastede innlegg visuelt samsvarer med det opprinnelige rutenettet.
• the_post_thumbnail('alm-thumbnail') bruker miniatyrstørrelsen som er registrert av Ajax Load More-utvidelsen. Hvis temaet ditt har en egendefinert størrelse registrert, bytter du ut alm-thumbnail med den.
• <?php the_ID(); ?> i <article>-klassen gir hvert innlegg en unik identifikator, noe som er nyttig for CSS-målretting.

Viktig: Klassene kan variere avhengig av utseendet til Posts-widgeten (Classic, Cards, Full Content). Hent klassene FRA DIN EGEN markup i stedet for å kopiere koden ovenfor direkte. Alt må stemme, inkludert rekkefølge og mellomrom.

Steg 2: Bygge Ajax Load More-shortkoden

Gå til Ajax Load More → Shortcode Builder. Den visuelle byggeren vil generere en shortkode basert på parameterne dine:

• Post Type: post (eller din egendefinerte posttype).
• Posts per Page: hvor mange innlegg som skal lastes per iterasjon. For et rutenett med 2-3 kolonner, bruk 4-6.
• Loading Style: Infinite Scroll (endeløs rulling). Alternativer: «Load More»-knapp, lazy load.
• Container Type: div.
• Transition: animasjon for nye innlegg: Fade, Slide eller None.

En grunnleggende shortkode vil se omtrent slik ut:

1
[ajax_load_more post_type="post" posts_per_page="4" 
2
  loading_style="infinite classic" 
3
  container_type="div" 
4
  scroll="true" 
5
  transition="fade"
6
  button_label="Loading..."]

For integrasjon med Elementor er to ekstra parametere avgjørende: scroll_container og transition_container_classes. De «binder» Ajax Load More-utdataene til Elementor CSS-rutenettet:

1
[ajax_load_more post_type="post" posts_per_page="4" 
2
  scroll_container="elementor-grid-2" 
3
  transition_container_classes="elementor-posts-container elementor-posts elementor-grid elementor-posts--skin-cards elementor-has-item-ratio"
4
  loading_style="infinite classic"
5
  images_loaded="true"
6
  offset="2"]

Nøkkelparametere forklart:

• scroll_container="elementor-grid-2" er rutenettbeholderen med to kolonner. For tre kolonner endrer du til elementor-grid-3; for fire, bruk elementor-grid-4.
• transition_container_classes="..." inkluderer ALLE CSS-klassene til rutenettbeholderen kopiert fra DevTools. Uten dem vil ikke innlastede innlegg arve Elementor-stiler og vil vises som en enkel liste.
• images_loaded="true" venter på at bilder er fullstendig lastet før en ny blokk vises. Dette eliminerer layout-hopp under lasting.
• offset="2" hopper over de første N innleggene. Dette er nødvendig hvis noen innlegg allerede vises av den vanlige Elementor-widgeten (se steg 4).

Steg 3: HTML-wrapper for shortkoden

Ajax Load More krever at shortkoden er inne i en HTML-beholder som replikerer Elementor-rutenettstrukturen. Uten wrapperen vil ikke rutenettstilene bli brukt, og magien vil ikke virke.

1
<div class="elementor-element-6ba59dc elementor-posts--skin-cards">
2
  <div class="elementor-posts-container elementor-posts elementor-grid elementor-has-item-ratio">
3
    [ajax_load_more post_type="post" posts_per_page="4" 
4
      scroll_container="elementor-grid-2"
5
      transition_container_classes="elementor-posts-container elementor-posts elementor-grid elementor-posts--skin-cards elementor-has-item-ratio"
6
      loading_style="infinite classic"
7
      images_loaded="true"
8
      offset="2"]
9
  </div>
10
</div>

Klassen elementor-element-6ba59dc er den unike identifikatoren for DIN Posts-widget. Finn den i DevTools (den starter alltid med elementor-element- og slutter med en hash). Denne klassen bærer alle stilene som er brukt på widgeten i Elementor-editoren: marger, skygger, border-radius og kortfarger.

Steg 4: Bevare rutenettets CSS-stiler

Hvis du bare sletter Posts-widgeten og bare lar Ajax Load More-shortkoden stå igjen, vil alle stiler generert av Elementor forsvinne fra sidens <head>. Rutenettet vil øyeblikkelig bryte sammen.

En fungerende tilnærming: la Posts-widgeten ligge på siden med et minimalt antall innlegg (2-3), og sett offset="2" i Ajax Load More-shortkoden. På denne måten:

• Genererer Elementor CSS for de to første innleggene, slik at stilene forblir i sidekroppen.
• Henter Ajax Load More de resterende innleggene fra og med det tredje, med de samme klassene og stilene.

Denne tilnærmingen har én ulempe: hver gang du endrer NOEN innstilling på Posts-widgeten i Elementor-editoren, blir den unike elementor-element-*-klassen regenerert. Du må oppdatere den i HTML-wrapperen. Det tar 30 sekunder via DevTools, men du kan ikke glemme det.

Steg 5: Plassere det på siden

Legg til HTML-wrapperen med shortkoden ved hjelp av «Shortcode»- eller «Text Editor»-widgeten i Elementor; begge aksepterer HTML. Plasser blokken der Posts-widgeten var eller ville vært plassert.

Lagre siden og åpne den på frontend. Rull til bunnen. Innlegg skal begynne å lastes automatisk så snart rullingen når beholderen.

Hvis det ikke fungerer, her er tre raske sjekkpunkter:

• Nettleserkonsoll (F12 → Console): røde JavaScript-feil vil indikere utvidelseskonflikter eller ødelagt shortkode-syntaks.
• scroll_container-klasse: sammenlign den med den faktiske CSS-klassen til beholderen på siden. Selv en enkelt tegnfeil (for eksempel et mellomrom i stedet for en bindestrek) ødelegger rulleutløseren.
• Ajax Load More → Settings: sørg for at utvidelsen er aktiv og ikke blokkert av en caching-utvidelse (WP Rocket, W3 Total Cache). Ajax-forespørsler blir noen ganger bufret, så legg til /wp-admin/admin-ajax.php i unntakene.

⁉️🤔 Ofte stilte spørsmål

Fungerer dette med gratisversjonen av Elementor?

Ja. Ajax Load More er ikke avhengig av Elementor Pro. Den trenger bare HTML-strukturen til rutenettet, som gratisversjonen gir. Kopier klassene via DevTools og bygg malen; ingen Pro-funksjoner er nødvendige.

Kan du laste inn egendefinerte innleggstyper i stedet for bare innlegg?

Ja. I shortcoden angir du post_type="your_cpt". Ajax Load More fungerer med alle offentlige innleggstyper: standardinnlegg, sider, WooCommerce-produkter, porteføljeelementer og så videre. Hver type trenger sin egen Repeater Template.

Innlastede innlegg ser annerledes ut enn det opprinnelige rutenettet. Hva er galt?

Problemet ligger nesten alltid i transition_container_classes: du kopierte ufullstendige klasser eller gjorde en feil i en av dem. Åpne DevTools, finn den opprinnelige rutenettbeholderen, kopier hele klassestrengen og lim den inn i shortcoden. Det nest vanligste problemet: scroll_container peker på feil element.

Er Ajax Load More Premium-tillegg nødvendige for et grunnleggende oppsett?

For uendelig rulling på innlegg, nei. Gratisversjonen er tilstrekkelig. Premium-tillegg (Elementor Widget Connector, Single Posts, WooCommerce, SEO, Filters) utvider scenarioene: uendelig rulling innenfor enkeltinnlegg, filterintegrasjon, SEO-paginering med unike URL-er. Hvis prosjektet ditt vokser og du trenger disse funksjonene, se nærmere på Pro Bundle.

Hvorfor «forsvinner» rutenettstiler fra innlastede innlegg etter redigeringer i Elementor?

Hver gang du lagrer Posts-widgeten, regenererer Elementor den unike elementor-element-*-klassen. Finn den nye klassen i DevTools og erstatt den i shortcodens HTML-wrapper. Det finnes ingen måte å automatisere dette på ut av boksen; du må gjøre det manuelt. Det tar imidlertid bare omtrent 30 sekunder.

Bør du vente på innebygd uendelig rulling fra Elementor?

I de seks årene siden de første veiledningene om dette emnet ble publisert, har den innebygde Posts-widgeten i Elementor fortsatt ikke fått uendelig rulling, verken i gratis- eller Pro-versjonen. Nummerert paginering forblir det eneste alternativet for arkiver og innleggsrutenett.

Ajax Load More fyller dette gapet fullstendig og vel så det. Utvidelsen er aktivt utviklet: den har 200 000+ aktive installasjoner på WordPress.org, jevnlige oppdateringer (den siste for mindre enn en måned siden i skrivende stund) og over et dusin tillegg for ulike scenarioer. Gratisversjonen håndterer uendelig rulling, en «Last mer»-knapp, lazy load og egendefinerte Repeater Templates. Dette dekker de fleste Elementor-prosjekter.

Hvis Elementor driver innleggsrutenettet på nettstedet ditt og de besøkende trenger uendelig rulling, bygg Repeater Template ved å følge instruksjonene ovenfor. En halvtime for det første oppsettet, så vil innlegg lastes inn uten sideoppdatering.

🔗 Ajax Load More på WordPress.org