💡 Så här sätter du upp oändlig scroll i Elementor med Ajax Load More

• Installera gratispluginen Ajax Load More från WordPress.orgs arkiv och aktivera den.
• Kopiera HTML-strukturen för ett enskilt inlägg från Elementor-rutnätet med hjälp av DevTools och bygg en Repeater Template.
• I Shortcode Builder väljer du "Infinite Scroll" som Loading Style och anger posts_per_page (4-6 för ett rutnät med 2-3 kolumner).
• Lägg till scroll_container och transition_container_classes med CSS-klasserna från Elementor-rutnätet så att laddade inlägg ärver stilarna.
• Slå in kortkoden i en HTML-behållare med den unika elementor-element-*-widgetklassen och placera blocket på sidan.
• Öppna sidan i frontend, scrolla till botten och kontrollera att inlägg laddas vid scroll utan sidomladdning.

Vad du behöver

Innan du börjar, se till att två saker är installerade och aktiverade på din webbplats:

• Elementor (gratisversionen eller Pro), byggverktyget där ditt inläggsrutnät skapas.
• Ajax Load More, en gratisplugin för att ladda innehåll via AJAX. Ladda ner från WordPress.org

Ha också den officiella dokumentationen och exempelsidan till hands. Det finns dussintals färdiga kodsnuttar för olika scenarier: från standardinlägg till WooCommerce och ACF.

Den inbyggda Posts-widgeten i Elementor erbjuder bara numrerad paginering; varken gratis- eller Pro-versionen kan ladda inlägg vid scroll. Ajax Load More fyller den luckan: den lägger till oändlig scroll, en "Ladda fler"-knapp och lazy load samtidigt som rutnätets utseende bevaras. Nyckeln är en korrekt Repeater Template. När du väl har byggt den är laddade inlägg visuellt omöjliga att skilja från de som redan finns på sidan.

Den korta videon ovan visar integrationen i praktiken: Elementor-inlägg laddas sömlöst utan sidomladdningar eller layoutförskjutningar.

Steg 1: Bygga en Repeater Template för Elementor-rutnätet

Den viktigaste delen är att korrekt överföra HTML-strukturen för ett enskilt inlägg från Elementor till Ajax Load More-mallen. Om mallen inte matchar den faktiska layouten kommer laddade inlägg att "falla isär": marginaler förskjuts, kort försvinner och rutnätet bryts sönder.

Öppna sidan med rutnätet i din webbläsare, tryck på F12 (DevTools), gå till fliken Elements och hitta DOM-noden för ett enskilt inlägg. Du behöver den FULLSTÄNDIGA HTML-koden för ett element, från den inledande <article>- eller <div class="elementor-post">-taggen till den avslutande taggen.

En grundmall för ett Elementor-grid (två kolumner, Cards-skin) ser ut så här:

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

Spara mallen i adminpanelen: Ajax Load More → Repeater Templates, klicka på "Add New". Ge den ett beskrivande namn, till exempel "Elementor Grid 2 kolumner".

Vad du ska tänka på:

• Klasserna elementor-post, elementor-post__card och elementor-post__thumbnail är "native" Elementor-klasser. De ser till att laddade inlägg visuellt matchar det ursprungliga griden.
• the_post_thumbnail('alm-thumbnail') använder den tumnagelstorlek som registrerats av Ajax Load More-pluginet. Om ditt tema har en anpassad storlek registrerad, ersätt alm-thumbnail med den.
• <?php the_ID(); ?> i <article>-klassen ger varje inlägg en unik identifierare, användbar för CSS-targeting.

Viktigt: klasserna kan skilja sig beroende på vilket skin Posts-widgeten har (Classic, Cards, Full Content). Ta klasserna FRÅN DIN EGEN markup istället för att kopiera koden ovan rakt av. Allt måste matcha, inklusive ordning och mellanrum.

Steg 2: Bygga Ajax Load More-shortcoden

Gå till Ajax Load More → Shortcode Builder. Den visuella byggaren genererar en shortcode baserat på dina parametrar:

• Post Type: post (eller din anpassade posttyp).
• Posts per Page: hur många inlägg som ska laddas per iteration. För ett grid med 2-3 kolumner, använd 4-6.
• Loading Style: Infinite Scroll (oändlig scrollning). Alternativ: "Load More"-knapp, lazy load.
• Container Type: div.
• Transition: animering för nya inlägg: Fade, Slide eller None.

En grundshortcode ser ut ungefär så här:

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..."]

För integration med Elementor är två ytterligare parametrar kritiska: scroll_container och transition_container_classes. De "binder" Ajax Load More-utdatan till Elementors CSS-grid:

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"]

Viktiga parametrar förklarade:

• scroll_container="elementor-grid-2" är grid-containern med två kolumner. För tre kolumner, ändra till elementor-grid-3; för fyra, använd elementor-grid-4.
• transition_container_classes="..." inkluderar ALLA CSS-klasser för grid-containern kopierade från DevTools. Utan dem kommer laddade inlägg inte att ärva Elementors stilar och visas som en vanlig lista.
• images_loaded="true" väntar på att bilder laddas klart innan ett nytt block visas. Detta eliminerar layout-hopp under laddning.
• offset="2" hoppar över de första N inläggen. Detta är nödvändigt om vissa inlägg redan visas av den vanliga Elementor-widgeten (se steg 4).

Steg 3: HTML-wrapper för shortcoden

Ajax Load More kräver att shortcoden placeras inuti en HTML-container som replikerar Elementor-gridets struktur. Utan wrappern kommer grid-stilarna inte att tillämpas och magin fungerar inte.

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 är den unika identifieraren för DIN Posts-widget. Hitta den i DevTools (den börjar alltid med elementor-element- och slutar med en hash). Denna klass bär alla stilar som tillämpats på widgeten i Elementor-editorn: marginaler, skuggor, border-radier och kortfärger.

Steg 4: Bevara gridets CSS-stilar

Om du helt enkelt tar bort Posts-widgeten och bara lämnar kvar Ajax Load More-shortcoden, försvinner alla stilar som genererats av Elementor från sidans <head>. Gridet går sönder direkt.

En fungerande approach: lämna Posts-widgeten på sidan med ett minimalt antal inlägg (2-3), och sätt offset="2" i Ajax Load More-shortcoden. På så sätt:

• Genererar Elementor CSS för de två första inläggen, så stilarna finns kvar i sidkroppen.
• Ajax Load More hämtar resterande inlägg med start från det tredje, med samma klasser och stilar.

Denna approach har en nackdel: varje gång du ändrar NÅGON inställning på Posts-widgeten i Elementor-editorn, regenereras den unika elementor-element-*-klassen. Du måste uppdatera den i HTML-wrappern. Det tar 30 sekunder via DevTools, men du får inte glömma bort det.

Steg 5: Placera det på sidan

Lägg till HTML-wrappern med shortcoden med hjälp av "Shortcode"- eller "Text Editor"-widgeten i Elementor; båda accepterar HTML. Placera blocket där Posts-widgeten fanns eller skulle ha funnits.

Spara sidan och öppna den i frontend. Scrolla till botten. Inlägg ska börja laddas automatiskt så snart scrollen når containern.

Om det inte fungerar, här är tre snabba kontroller:

• Webbläsarkonsolen (F12 → Console): röda JavaScript-fel indikerar plugin-konflikter eller trasig shortcode-syntax.
• scroll_container-klass: jämför den med den faktiska CSS-klassen för containern på sidan. Ett enda teckenfel (till exempel ett mellanslag istället för ett bindestreck) bryter scroll-triggern.
• Ajax Load More → Settings: se till att pluginet är aktivt och inte blockerat av ett caching-plugin (WP Rocket, W3 Total Cache). Ajax-anrop cachelagras ibland, så lägg till /wp-admin/admin-ajax.php i undantagen.

⁉️🤔 Vanliga frågor

Fungerar detta med gratisversionen av Elementor?

Ja. Ajax Load More är inte beroende av Elementor Pro. Det behöver bara HTML-strukturen för griden, vilket gratisversionen tillhandahåller. Kopiera klasserna via DevTools och bygg mallen; inga Pro-funktioner krävs.

Kan du ladda anpassade inläggstyper istället för bara inlägg?

Ja. I shortcoden anger du post_type="your_cpt". Ajax Load More fungerar med alla publika inläggstyper: standardinlägg, sidor, WooCommerce-produkter, portföljobjekt och så vidare. Varje typ behöver sin egen Repeater Template.

Laddade inlägg ser annorlunda ut jämfört med originalgriden. Vad är fel?

Problemet ligger nästan alltid i transition_container_classes: du kopierade ofullständiga klasser eller gjorde ett misstag i en av dem. Öppna DevTools, hitta originalgridens container, kopiera hela klass-strängen och klistra in den i shortcoden. Det näst vanligaste problemet: scroll_container pekar på fel element.

Krävs Ajax Load More Premium-tillägg för en grundläggande installation?

För oändlig scroll på inlägg, nej. Gratisversionen räcker. Premium-tillägg (Elementor Widget Connector, Single Posts, WooCommerce, SEO, Filters) utökar scenarierna: oändlig scroll inom enskilda inlägg, filterintegration, SEO-paginering med unika URL:er. Om ditt projekt växer och du behöver dessa funktioner, titta på Pro Bundle.

Varför "försvinner" grid-stilarna från laddade inlägg efter redigeringar i Elementor?

Varje gång du sparar Posts-widgeten genererar Elementor om den unika elementor-element-*-klassen. Hitta den nya klassen i DevTools och ersätt den i shortcodens HTML-wrapper. Det finns inget sätt att automatisera detta out of the box; du måste göra det manuellt. Det tar dock bara cirka 30 sekunder.

Bör du vänta på inbyggd oändlig scroll från Elementor?

Under de sex år som gått sedan de första guiderna i ämnet publicerades har den inbyggda Posts-widgeten i Elementor fortfarande inte fått oändlig scroll, varken i gratis- eller Pro-versionen. Numrerad paginering förblir det enda alternativet för arkiv och inläggsgridar.

Ajax Load More fyller denna lucka helt och hållet, och lite till. Pluginet är aktivt utvecklat: det har 200 000+ aktiva installationer på WordPress.org, regelbundna uppdateringar (den senaste för mindre än en månad sedan i skrivande stund) och över ett dussin tillägg för olika scenarier. Gratisversionen hanterar oändlig scroll, en "Ladda mer"-knapp, lazy load och anpassade Repeater Templates. Detta täcker de flesta Elementor-projekt.

Om Elementor driver inläggsgriden på din webbplats och dina besökare behöver oändlig scroll, bygg Repeater Template enligt instruktionerna ovan. En halvtimme för den initiala installationen, och inlägg kommer att laddas utan sidomladdning.

🔗 Ajax Load More på WordPress.org