💡 So richten Sie Infinite Scroll in Elementor mit Ajax Load More ein

• Installieren Sie das kostenlose Plugin Ajax Load More aus dem WordPress.org-Repository und aktivieren Sie es.
• Kopieren Sie die HTML-Struktur eines einzelnen Beitrags aus dem Elementor-Grid mithilfe der DevTools und erstellen Sie ein Repeater Template.
• Wählen Sie im Shortcode Builder als Loading Style „Infinite Scroll" und setzen Sie posts_per_page (4-6 für ein 2-3-spaltiges Grid).
• Fügen Sie scroll_container und transition_container_classes mit den CSS-Klassen aus dem Elementor-Grid hinzu, damit nachgeladene Beiträge die Styles übernehmen.
• Umschließen Sie den Shortcode mit einem HTML-Container, der die eindeutige elementor-element-*-Widget-Klasse trägt, und platzieren Sie den Block auf der Seite.
• Öffnen Sie die Seite im Frontend, scrollen Sie nach unten und prüfen Sie, ob Beiträge ohne Seitenaktualisierung nachgeladen werden.

Was Sie benötigen

Bevor Sie beginnen, stellen Sie sicher, dass zwei Dinge auf Ihrer Website installiert und aktiviert sind:

• Elementor (kostenlose Version oder Pro), der Builder, in dem Ihr Beitrags-Grid erstellt wird.
• Ajax Load More, ein kostenloses Plugin zum Laden von Inhalten per AJAX. Herunterladen von WordPress.org

Halten Sie außerdem die offizielle Dokumentation und die Beispielseite griffbereit. Dort finden Sie Dutzende fertiger Snippets für verschiedene Szenarien: von Standardbeiträgen bis hin zu WooCommerce und ACF.

Das integrierte Posts-Widget in Elementor bietet nur eine nummerierte Paginierung; weder die kostenlose noch die Pro-Version kann Beiträge beim Scrollen nachladen. Ajax Load More schließt diese Lücke: Es fügt Infinite Scroll, einen „Mehr laden"-Button und Lazy Load hinzu und bewahrt dabei das Erscheinungsbild des Grids. Der Schlüssel ist ein korrektes Repeater Template. Sobald Sie es erstellt haben, sind nachgeladene Beiträge optisch nicht von den bereits auf der Seite vorhandenen zu unterscheiden.

Das kurze Video oben zeigt die Integration in Aktion: Elementor-Beiträge werden nahtlos geladen, ohne Seitenaktualisierungen oder Layout-Sprünge.

Schritt 1: Repeater Template für das Elementor-Grid erstellen

Der wichtigste Teil ist die korrekte Übertragung der HTML-Struktur eines einzelnen Beitrags aus Elementor in das Ajax Load More-Template. Wenn das Template nicht mit dem tatsächlichen Layout übereinstimmt, „fallen" die nachgeladenen Beiträge „auseinander": Abstände verschieben sich, Karten verschwinden und das Grid zerbricht.

Öffnen Sie die Seite mit dem Grid in Ihrem Browser, drücken Sie F12 (DevTools), wechseln Sie zum Tab „Elements" und suchen Sie den DOM-Knoten eines einzelnen Beitrags. Sie benötigen das VOLLSTÄNDIGE HTML eines Elements, vom öffnenden <article> oder <div class="elementor-post"> bis zum schließenden Tag.

Eine grundlegende Vorlage für ein Elementor-Raster (zwei Spalten, Cards-Skin) sieht wie folgt aus:

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

Speichern Sie die Vorlage im Admin-Bereich: Ajax Load More → Repeater Templates, klicken Sie auf „Add New". Geben Sie ihr einen aussagekräftigen Namen, zum Beispiel „Elementor Grid 2 Columns".

Worauf Sie achten sollten:

• Die Klassen elementor-post, elementor-post__card und elementor-post__thumbnail sind „native" Elementor-Klassen. Sie stellen sicher, dass nachgeladene Beiträge optisch dem ursprünglichen Raster entsprechen.
• the_post_thumbnail('alm-thumbnail') verwendet die vom Ajax Load More-Plugin registrierte Thumbnail-Größe. Falls Ihr Theme eine eigene Größe registriert hat, ersetzen Sie alm-thumbnail durch diese.
• <?php the_ID(); ?> in der <article>-Klasse verleiht jedem Beitrag eine eindeutige Kennung, nützlich für CSS-Ansprachen.

Wichtig: Die Klassen können je nach Skin des Beitrags-Widgets (Classic, Cards, Full Content) abweichen. Übernehmen Sie die Klassen AUS IHREM EIGENEN Markup, anstatt den obigen Code unverändert zu kopieren. Alles muss übereinstimmen, einschließlich Reihenfolge und Abständen.

Schritt 2: Erstellen des Ajax Load More-Shortcodes

Gehen Sie zu Ajax Load More → Shortcode Builder. Der visuelle Builder generiert einen Shortcode basierend auf Ihren Parametern:

• Post Type: post (oder Ihr benutzerdefinierter Beitragstyp).
• Posts per Page: wie viele Beiträge pro Durchlauf geladen werden sollen. Für ein Raster mit 2-3 Spalten verwenden Sie 4-6.
• Loading Style: Infinite Scroll (endloses Scrollen). Alternativen: „Load More"-Button, Lazy Load.
• Container Type: div.
• Transition: Animation für neue Beiträge: Fade, Slide oder None.

Ein grundlegender Shortcode sieht in etwa so aus:

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 die Integration mit Elementor sind zwei zusätzliche Parameter entscheidend: scroll_container und transition_container_classes. Sie „binden" die Ajax Load More-Ausgabe an das Elementor-CSS-Raster:

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

Erläuterung der Schlüsselparameter:

• scroll_container="elementor-grid-2" ist der Container für das zweispaltige Raster. Für drei Spalten ändern Sie dies zu elementor-grid-3; für vier Spalten verwenden Sie elementor-grid-4.
• transition_container_classes="..." enthält ALLE CSS-Klassen des Raster-Containers, die Sie aus den DevTools kopiert haben. Ohne diese übernehmen nachgeladene Beiträge die Elementor-Stile nicht und werden als einfache Liste dargestellt.
• images_loaded="true" wartet, bis Bilder vollständig geladen sind, bevor ein neuer Block angezeigt wird. Dies verhindert Layout-Sprünge während des Ladens.
• offset="2" überspringt die ersten N Beiträge. Dies ist erforderlich, wenn einige Beiträge bereits durch das Standard-Elementor-Widget angezeigt werden (siehe Schritt 4).

Schritt 3: HTML-Wrapper für den Shortcode

Ajax Load More erfordert, dass sich der Shortcode innerhalb eines HTML-Containers befindet, der die Elementor-Rasterstruktur nachbildet. Ohne diesen Wrapper greifen die Rasterstile nicht und die Magie funktioniert nicht.

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>

Die Klasse elementor-element-6ba59dc ist die eindeutige Kennung IHRES Beitrags-Widgets. Finden Sie diese in den DevTools (sie beginnt immer mit elementor-element- und endet mit einem Hash). Diese Klasse trägt alle Stile, die im Elementor-Editor auf das Widget angewendet wurden: Abstände, Schatten, Rahmenradien und Kartenfarben.

Schritt 4: Erhalt der CSS-Stile des Rasters

Wenn Sie das Beitrags-Widget einfach löschen und nur den Ajax Load More-Shortcode belassen, verschwinden alle von Elementor generierten Stile aus dem <head> der Seite. Das Raster bricht sofort zusammen.

Ein funktionierender Ansatz: Belassen Sie das Beitrags-Widget mit einer minimalen Anzahl von Beiträgen (2-3) auf der Seite und setzen Sie offset="2" im Ajax Load More-Shortcode. Auf diese Weise:

• Generiert Elementor CSS für die ersten beiden Beiträge, sodass die Stile im Seitenkörper erhalten bleiben.
• Übernimmt Ajax Load More die restlichen Beiträge ab dem dritten, mit denselben Klassen und Stilen.

Dieser Ansatz hat einen Nachteil: Immer wenn Sie IRGENDEINE Einstellung am Beitrags-Widget im Elementor-Editor ändern, wird die eindeutige elementor-element-*-Klasse neu generiert. Sie müssen diese dann im HTML-Wrapper aktualisieren. Das dauert 30 Sekunden über die DevTools, aber Sie dürfen es nicht vergessen.

Schritt 5: Platzierung auf der Seite

Fügen Sie den HTML-Wrapper mit dem Shortcode über das „Shortcode"- oder „Text Editor"-Widget in Elementor hinzu; beide akzeptieren HTML. Platzieren Sie den Block dort, wo sich das Beitrags-Widget befand oder befinden würde.

Speichern Sie die Seite und öffnen Sie sie im Frontend. Scrollen Sie nach unten. Beiträge sollten automatisch geladen werden, sobald der Scrollvorgang den Container erreicht.

Falls es nicht funktioniert, hier drei schnelle Prüfpunkte:

• Browser-Konsole (F12 → Konsole): Rote JavaScript-Fehler deuten auf Plugin-Konflikte oder eine fehlerhafte Shortcode-Syntax hin.
• scroll_container-Klasse: Vergleichen Sie sie mit der tatsächlichen CSS-Klasse des Containers auf der Seite. Schon ein einzelner Zeichenfehler (zum Beispiel ein Leerzeichen statt eines Bindestrichs) unterbricht den Scroll-Trigger.
• Ajax Load More → Einstellungen: Stellen Sie sicher, dass das Plugin aktiv ist und nicht von einem Caching-Plugin (WP Rocket, W3 Total Cache) blockiert wird. Ajax-Anfragen werden mitunter zwischengespeichert, fügen Sie daher /wp-admin/admin-ajax.php zu den Ausnahmen hinzu.

⁉️🤔 Häufig gestellte Fragen

Funktioniert das mit der kostenlosen Version von Elementor?

Ja. Ajax Load More ist nicht von Elementor Pro abhängig. Es benötigt lediglich die HTML-Struktur des Rasters, die auch die kostenlose Version liefert. Kopieren Sie die Klassen über die DevTools und bauen Sie das Template; Pro-Funktionen sind nicht erforderlich.

Können Sie benutzerdefinierte Beitragstypen anstelle von normalen Beiträgen laden?

Ja. Geben Sie im Shortcode post_type="your_cpt" an. Ajax Load More funktioniert mit allen öffentlichen Beitragstypen: Standardbeiträge, Seiten, WooCommerce-Produkte, Portfolio-Einträge und so weiter. Jeder Typ benötigt ein eigenes Repeater Template.

Geladene Beiträge sehen anders aus als das ursprüngliche Raster. Was ist falsch?

Das Problem liegt fast immer in transition_container_classes: Sie haben unvollständige Klassen kopiert oder sich bei einer davon vertan. Öffnen Sie die DevTools, suchen Sie den ursprünglichen Raster-Container, kopieren Sie den vollständigen Klassen-String und fügen Sie ihn in den Shortcode ein. Das zweithäufigste Problem: scroll_container verweist auf das falsche Element.

Sind Ajax Load More Premium-Add-ons für ein einfaches Setup erforderlich?

Für Infinite Scroll bei Beiträgen nicht. Die kostenlose Version ist ausreichend. Premium-Add-ons (Elementor Widget Connector, Single Posts, WooCommerce, SEO, Filters) erweitern die Szenarien: Infinite Scroll innerhalb einzelner Beiträge, Filterintegration, SEO-Paginierung mit eindeutigen URLs. Wenn Ihr Projekt wächst und Sie diese Funktionen benötigen, sehen Sie sich das Pro Bundle an.

Warum „verschwinden" Rasterstile von geladenen Beiträgen nach Bearbeitungen in Elementor?

Jedes Mal, wenn Sie das Posts-Widget speichern, generiert Elementor die eindeutige Klasse elementor-element-* neu. Suchen Sie die neue Klasse in den DevTools und ersetzen Sie sie im HTML-Wrapper des Shortcodes. Es gibt keine Möglichkeit, dies out of the box zu automatisieren; Sie müssen es manuell tun. Es dauert jedoch nur etwa 30 Sekunden.

Sollten Sie auf natives Infinite Scroll von Elementor warten?

In den sechs Jahren, seit die ersten Anleitungen zu diesem Thema veröffentlicht wurden, hat das integrierte Posts-Widget in Elementor weder in der kostenlosen noch in der Pro-Version Infinite Scroll erhalten. Nummerierte Paginierung bleibt die einzige Option für Archive und Beitragsraster.

Ajax Load More schließt diese Lücke vollständig und bietet noch mehr. Das Plugin wird aktiv entwickelt: Es hat über 200.000 aktive Installationen auf WordPress.org, regelmäßige Updates (das letzte zum Zeitpunkt des Schreibens vor weniger als einem Monat) und über ein Dutzend Add-ons für verschiedene Szenarien. Die kostenlose Version unterstützt Infinite Scroll, einen „Mehr laden"-Button, Lazy Load und benutzerdefinierte Repeater Templates. Das deckt die meisten Elementor-Projekte ab.

Wenn Elementor das Beitragsraster auf Ihrer Website betreibt und Ihre Besucher Infinite Scroll benötigen, erstellen Sie das Repeater Template gemäß den obigen Anweisungen. Eine halbe Stunde für die Ersteinrichtung, und Beiträge werden ohne Seitenaktualisierung geladen.

🔗 Ajax Load More auf WordPress.org