So verwenden Sie zusammen Divi 5's Loop Builder & Pagination Modul

Statische Listen von Post -Inhalten sind in Ordnung, wenn Sie einen ausgewählten und begrenzten Satz dieser Beiträge anzeigen. Oft möchten Sie jedoch, dass Benutzer auf mehr Inhalte zugreifen als Ihre ursprünglichen Loop -Shows. Sie möchten entscheiden, wie viel Inhalt ursprünglich lädt, und geben den Lesern eine klare Möglichkeit, sich zwischen Chargen zu bewegen. Hier ist der Schleifenbauer und das Paginationsmodul von Divi 5 ein perfektes Paar.

Dieser Beitrag führt Sie durch, wie jeder funktioniert, und zeigen Ihnen dann, wie Sie sie verbinden. Am Ende wissen Sie, wie Sie Schleifenlayouts mit richtiger Pagination bauen.

Treffen Sie den Loop Builder von Divi 5

Der Schleifenbauer ist einer der größten Upgrades von Divi 5. Es gibt Ihnen die Freiheit, dass das alte Blog -Modul niemals könnte. Jedes Element kann zu einem „Looped“ -Container werden. Das bedeutet, dass Divi es automatisch für jeden Beitrag, Produkt oder benutzerdefinierten Post -Typ, der Ihrer Abfrage entspricht, automatisch wiederholt.

Anstatt mit einer vorgezeichneten Liste von Beiträgen festzuhalten, entwerfen Sie ein „Vorlage“ -Posten als Schleife. Divi verwendet das für jedes Ergebnis und tauscht dynamische Inhalte aus der Abfrage der Schleife aus. Dies könnte sein:

• Titel, die aus Postdaten gezogen wurden
• Ausgewählte Bilder
• Benutzerdefinierte Felder
• Links zu vollständigen Beiträgen oder Produkten

Sie können jedes Modul verwenden, um diese Daten anzuzeigen, nicht nur eine blogspezifische. Möchten Sie ein ausgefallenes Klappentextmodul mit Ihren neuesten Kurslisten? Erledigt. Benötigen Sie ein benutzerdefiniertes Produktkartenlayout für WooCommerce -Artikel? Auch fertig.

Es ist flexibel, weil Sie die Design- und Inhaltsstruktur selbst aufbauen. Divi behandelt die Wiederholung.

Wenn Sie vom Blog -Modul zum Loop Builder wechseln, werden Sie von einer Standardvorlage zu einem vollständig anpassbaren Layout -System übertragen. Ich habe es wirklich genossen, damit zu bauen, und ich weiß, dass Sie es auch tun werden!

Treffen Sie das Paginierungsmodul

Pagination ist eine ausgefallene Möglichkeit zu sagen: "Teilen Sie die Ergebnisse in Seiten auf". Anstatt alle Elemente auf eine einzelne Seite zu entfernen, unterteilen Sie sie in kleinere Sets. Das hilft bei:

• Seite Ladezeiten
• Lesbarkeit
• Scanbarkeit

Das Paginierungsmodul in Divi 5 macht genau das, aber mit einer intelligenten Integration. Es ist nicht nur an Blog -Beiträge gebunden. Stattdessen kann es eine Verbindung zu jeder Schleife herstellen, die Sie auf der Seite erstellt haben.

Es wird mit zwei Navigationselementen hinzugefügt - befriedigende und nächste Links -, deren Beschriftungen Sie anpassen können. Wenn ältere Elemente hinter dem aktuellen Satz vorhanden sind, ist „älter“ (oder der gewählte Text) aktiv. Wenn es neuere Artikel gibt, wird „neuer“ aktiv sein.

Aufbau eines Schleifen- + Paginierungs -Layouts

Lassen Sie uns das vollständige Setup durchlaufen. In diesem Beispiel geht davon aus, dass Sie eine benutzerdefinierte Schleife mit Pagination darunter wünschen. Hier ist das Flex -Layout, das ich erstellt habe, das unsere Schleife anzeigt. Sie können das vollständige Layout unten herunterladen.

Beachten Sie, dass die Karte auf eine Breite von ~ 50% und das Flex-Anbau eingestellt ist. Wenn sich also eine Schleifenkarte in einer Flexreihe selbst befindet, wird sie in ihrem Behälter eine vollständige Breite.

Schritt 1: Erstellen Sie den Schleifenbehälter

Fügen Sie Ihrer Seite einen Abschnitt hinzu. Fügen Sie darin das Modul hinzu, das Sie wiederholen möchten. Dies kann ein einzelnes Modul (wie ein Klappentext) oder ein komplexeres Layout mehrerer Module in einer Spalte oder Gruppe sein.

Öffnen Sie mit Ihrem ausgewählten Container seine Einstellungen und aktivieren Sie die Loop -Option.

Wählen Sie Ihre Datenquelle. Dies ist die "Abfrage", die die Schleife ausgeführt wird.

Wählen Sie zunächst den Abfragetyp. Abhängig von der Konfiguration Ihrer Website sehen Sie möglicherweise folgende Optionen:

• Beitragstyp (wie Ihre Blog -Beiträge oder benutzerdefinierte Beitragstypen wie "Projekte")
• Begriffe (Kategorien und Taxonomien)
• Benutzer (geben Sie eine Liste von Site -Benutzern wie Autoren zurück)
• Repeater Field (ein benutzerdefiniertes Feld, das von einem Plugin zum Erstellen einer Schleife in einer Schleife erstellt wurde)

Als nächstes erhalten Sie je nachdem, welche Art von Abfrage Sie oben ausgewählt haben, die Chance haben, genauer zu sein. Durch die Auswahl von "Post -Typ" können Sie solche Post -Typen wie folgt verwenden:

• Blog -Beiträge
• Projekte
• Produkte
• Unabhängig von CPT Sie sich für sich selbst gebaut haben

Von dort aus können Sie mit dem, was in Ihrer Schleife erscheinen soll, noch spezifischer werden. Du kannst:

• Elemente mit einer bestimmten Kategorie oder einem bestimmten Tag eingeben
• Elemente mit einer bestimmten Kategorie oder einem bestimmten Tag ausschließen
• Spezifische Elemente einschließen (nach Post -ID)
• Bestimmte Elemente ausschließen (nach Post -ID)
• Erstellen Sie Ihre eigene Meta -Abfrage (nützlich, um Einschlüsse/Ausschlüsse basierend auf benutzerdefinierten Felddaten zu erstellen).
• Stellen Sie die Reihenfolge der passenden Abfragen fest (wie alphabetische und absteigende)
• Die Elemente pro Seitenwert steuern, wie viele in der Schleife angezeigt werden
• Post -Offset, falls Sie Ihre Schleife später im Zyklus starten möchten
• Ignorieren Sie Haftposts

So sieht unser Beispiel diesen Punkt an. Wir haben die Schleife erstellt und ihn unserem Blog -Beitragstyp zugewiesen. Ich habe die Anzeigegrenze auf 3 gesetzt.

Jetzt müssen wir die verschiedenen Textfelder und Elemente zuweisen, die wir mit dynamischem Schleifeninhalt hyperlink machen möchten.

Schritt 2: Fügen Sie in der Schleife dynamische Inhalte hinzu

Unsere nächste Aufgabe besteht darin, in die Module der einzelnen Schleifen zu klicken und statische Text oder Bilder durch dynamische Inhaltsfelder zu ersetzen. Zum Beispiel:

• Wählen Sie in einem Textmodul aus dem dynamischen Inhaltspicker "Posten Sie den Titel" aus
• In einem Bildmodul können Sie "Featured Image" auswählen
• Setzen Sie in einem Schaltflächenmodul den Link auf "URL post".
• Stellen Sie im gesamten Container des Schleifens auch den Link auf "URL post" fest.

Dies fordert Divi an, den richtigen Inhalt für jedes Looped -Element zu ziehen.

Denken Sie daran - alles in der Schleife wird für jedes Ergebnis wiederholt. Halten Sie den Nicht-Schleifen-Inhalt (wie Überschriften, Anzeigen oder CTAs) außerhalb dessen. Wenn Sie einen Inhalt in der Schleife haben, das nicht mit dynamischen Daten verbunden ist, zeigt jedes Element in der Schleife das As-is an (wie der Text „Read →“ unten rechts auf der Beispielkarte).

Schritt 3: Fügen Sie das Pagierungsmodul hinzu

Fügen Sie unter Ihrem Schleifenabschnitt eine neue Zeile hinzu. Fügen Sie das Paginierungsmodul ein. Suchen Sie in den Einstellungen des Moduls das Zielfeld . Wählen Sie es aus, um Ihre Schleife aus einer Dropdown -Liste mit Schleifen auf der Seite auszuwählen. Dies verbindet die Paginationskontrollen mit dieser speziellen Schleife. Pro -Tipp: Wenn Sie Admin -Labels verwenden, ist es einfacher, das richtige Ziel auszuwählen. Dies gilt auch für Interaktionen.

Passen Sie die Beschriftungen für "vorher" und "Weiter" an. Sie können "ältere Beiträge / neuere Beiträge", "zurück / vorwärts" oder sogar "← / →" verwenden, um einen minimalen Stil zu erhalten.

Der Schlüssel ist, dass das Paginationsmodul außerhalb der Schleife sitzen muss, die es steuert. Dies und sicherzustellen, dass es dem richtigen Ziel zugewiesen ist (wenn Sie mehrere Schleifen auf derselben Seite/Vorlage haben).

Schritt 4: Testen Sie die Interaktion

Speichern Sie Ihre Seite und Vorschau. Klicken Sie auf "älter", um zum nächsten Satz von Loop -Elementen zu gelangen.

Beachten Sie, wie sich die URL mit einem Abfrageparameter ändert, der die Seite der Schleife identifiziert. Beachten Sie auch, dass nur der Schleifeninhalt/Änderungen mischt - Laceers, Fußzeilen und Seitenleisten sollten gleich bleiben.

Holen Sie sich dieses Schleifenlayout

Möchten Sie dieses Layout analysieren und sehen, wie die Dinge für sich selbst aufgebaut sind? Laden Sie es hier herunter!

Sobald Sie Ihren Ordner entpackt, navigieren Sie zu Ihrer Divi -Bibliothek, um die Datei hochzuladen. Nach dem Hochladen können Sie den Abschnitt zu einer beliebigen Seite hinzufügen, an der Sie arbeiten.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Treten Sie dem Divi -Newsletter bei und wir senden Ihnen eine Kopie des ultimativen Divi -Landing -Layout -Pakets sowie Tonnen anderer erstaunlicher und kostenloser Divi -Ressourcen, Tipps und Tricks per E -Mail. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi -Meister sein. Wenn Sie bereits abonniert sind, geben Sie einfach Ihre E -Mail -Adresse unten ein und klicken Sie auf Download, um auf das Layoutpaket zuzugreifen.

HERUNTERLADEN

Sie haben erfolgreich abonniert. Bitte überprüfen Sie Ihre E -Mail -Adresse, um Ihr Abonnement zu bestätigen und Zugriff auf kostenlose wöchentliche Divi -Layout -Packs zu erhalten!

Genießen Sie eine dynamischere Divi

Der Schleifenbauer und das Paginationsmodul von Divi 5 sind ein großer Sprung nach vorne in der Flexibilität. Der Schleifenbauer befreit Sie von den starren Designs älterer Module und lässt Sie Ihre eigenen wiederholten Layouts mit dynamischem Inhalt erstellen. Das Paginierungsmodul hält diese Layouts schnell und überschaubar, indem sie in benutzerfreundliche Stücke zerlegt werden.

Das Loop Builder- und Pagination -Modul, gepaart mit anderen neuen Divi 5 -Funktionen (Flexbox, Interaktionen, HSL -Farbsteuerungen), ist so leistungsfähig wie nie zuvor. Mit all dem können Sie einige unglaubliche Seitendesigns erstellen.

Sobald Sie Ihre erste paginierte Schleife erstellt haben, werden Sie sehen, wie einfach es ist, den Ansatz für Blogs, Produktgitter, Portfolios oder einen inhaltlichen Inhaltstyp wiederzuverwenden, den Sie organisieren müssen.