So erstellen Sie eine benutzerdefinierte Blog -Post -Schleife mit Divi 5's Loop Builder

Ihre Marke sollte nicht durch ein statisches Layout eingeschränkt werden. Daher möchten wir Ihnen die volle Flexibilität bieten, da sich Divi 5 weiterentwickelt. Der neue Schleifenbauer von Divi 5 ist ein großer Schritt in diese Richtung; Sie können einen Artikel einmal entwerfen und in dynamische Gitter oder Listen schalten.

In diesem Tutorial zeigen wir Ihnen, wie Sie eine benutzerdefinierte Blog -Post -Schleife einrichten. Wir werden die Auflistung entwerfen, dynamische Felder verbinden, die Abfrage festlegen und das Layout für ein sauberes Netz oder eine Liste verfeinern. Kommen wir dazu!

Was ist der Schleifenbauer von Divi 5?

Mit dem Loop Builder von Divi 5 entwerfen Sie im visuellen Builder ein einzelnes „Karten“ -Layout mit so vielen Divi -Modulen, wie Sie möchten, und schleifen Sie es dann für jedes Element an, das Sie anzeigen möchten.

Abonnieren Sie unseren YouTube -Kanal

Aktivieren Sie das Schleifenelement in einer Spalte, legen Sie eine Abfrage (Beiträge, benutzerdefinierte Post -Typen wie Projekte, Begriffe oder Benutzer) fest und kartieren Sie dynamische Felder wie Titel, vorgestellte Bilder, Kategorien, benutzerdefinierte Felder und Schaltflächen. Sie können Elemente neu ordnen, den Abstand steuern und alles Ihre globalen Stile erben lassen.

Das Ergebnis ist eine reaktionsschnelle, wiederverwendbare Auflistung, die Ihrem System entspricht, ohne dass zusätzliche Plugins oder benutzerdefinierte Code erforderlich ist.

Wie der Schleifenbauer funktioniert

Sie können den Schleifenmodus in jedem Abschnitt, einer Zeile, der Spalte oder eines beliebigen Moduls einschalten, indem Sie die Registerkarte "Inhalt ) öffnen und die Schleife aktivieren.

Ab diesem Zeitpunkt wiederholt Divi das Element für jeden Beitrag automatisch, der Ihren Einstellungen entspricht.

Hier kommt die wahre Kontrolle ins Spiel. In den Schleifeneinstellungen können Sie:

• Abfragetyp: Wählen Sie zwischen einer grundlegenden Post -Abfrage oder einer Meta -Abfrage, einer Filterung nach Kategorien, Tags, benutzerdefinierten Feldern oder anderen Metadaten.
• Beitragstyp: Wählen Sie den zu angezeigten Inhaltsart, von Blog -Posts über Produkte bis hin zu jedem benutzerdefinierten Beitragstyp.
• Fügen Sie nur Beiträge mit bestimmten Begriffen hinzu: Zeigen Sie nur Beiträge an, die bestimmte Kategorien, Tags oder andere Taxonomie -Begriffe entsprechen.
• Beiträge mit bestimmten Begriffen ausschließen: Entfernen Sie Beiträge, die ausgewählten Kategorien, Tags oder Begriffen übereinstimmen.
• Fügen Sie nur spezifische Beiträge hinzu: Wählen Sie einzelne Beiträge aus, um zu enthalten.
• Spezifische Beiträge ausschließen: Ausblenden einzelne Beiträge, die Sie in der Schleife nicht möchten.
• Meta -Abfrage: Fügen Sie benutzerdefinierte Feldbedingungen hinzu, um das zu steuern, was erscheint.
• Bestellung nach: Wählen Sie, ob die Ergebnisse nach Datum, Titel, Menübestellung oder benutzerdefiniertem Feldwert sortiert werden.
• Reihenfolge: Zeigen Sie Ergebnisse in aufsteigender oder absteigender Reihenfolge.
• Beiträge pro Seite: Entscheiden Sie, wie viele Beiträge vor der Pagination angezeigt werden.
• Post -Offset: Überspringen Sie eine bestimmte Anzahl von Beiträgen von Anfang an, um Duplikate mit vorgestellten Abschnitten zu vermeiden.
• Ignorieren Sie Klebrichter: Wählen Sie, ob Sticky -Posts Priorität haben oder wie normale Beiträge behandelt werden.

Sobald Sie Ihre Abfrage definiert haben, füllt Divi jede Postkarte automatisch mit dem richtigen Inhalt, während Sie das Layout und das Styling identisch halten. Sie konzentrieren sich ausschließlich auf die Aussehen der Karte und divi behandelt die Bevölkerung und die Wiederholung. Bei allem, was von einem einzelnen Panel gesteuert wird, sind einige Einstellungen alles erforderlich, um Ihre Blog -Auflistung ohne manuelle Änderungen auf dem Laufenden zu halten.

Erfahren Sie alles über den Loop Builder von Divi 5 von Divi 5

Erstellen einer benutzerdefinierten Blog -Post -Schleife mit Divi 5

Das Erstellen einer benutzerdefinierten Blog -Post -Schleife mit Loop Builder verfügt über zwei Teile. Zunächst entwerfen Sie das Postkartenlayout und wählen genau aus, welche Inhalte erscheint und wie er aussieht. Dann platzieren Sie dieses Design in einer Schleife, damit Divi es automatisch für jeden Beitrag wiederholt, den Sie anzeigen möchten.

Wir werden Schritt für Schritt durchlaufen, beginnend mit dem Kartenlayout und dann die Schleife einrichten.

Bevor Sie anfangen

Wenn Sie vom Blog -Modul zum Loop Builder wechseln und bereits über eine Blog -Auflistungsseite verfügen, können Sie Ihr Schleifenlayout erstellen. Wenn nicht, hier ist das schnelle Setup:

1. Fügen Sie eine Blog -Seite hinzu

Gehen Sie aus Ihrem WordPress -Dashboard aus, wechseln Sie zu Seiten> Neue , nennen Sie es "Blog" und veröffentlichen Sie es.

Diese Seite ist der Hauptzentrum für Ihre Beiträge.

2. Stellen Sie Ihre Blog -Seite in WordPress -Einstellungen ein

Wählen Sie in Einstellungen> Lesen eine statische Seite . Weisen Sie Ihre Homepage zu Hause und Ihre neue Blog -Seite zur Seite der Beiträge zu.

Dies ist nur erforderlich, wenn Sie eine separate Homepage- und Blog -Listing -Seite verwenden.

3. Erstellen Sie eine Theme Builder -Vorlage

Als nächstes erstellen Sie eine neue Vorlage für Ihre Blog -Listing -Seite. Wenn Sie bereits einen haben, können Sie das anpassen. Stellen Sie sicher, dass Sie die neueste DIVI 5 -Version verwenden, um auf Loop Builder zuzugreifen.

In Divi> Theme Builder klicken Sie auf neue Vorlage hinzufügen> Neue Vorlage erstellen.

Weisen Sie es Ihrer Blog -Seite zu und klicken Sie auf Vorlage erstellen.

Um Ihre Blog -Post -Auflistungsseite zu entwerfen, klicken Sie auf Benutzerdefinierte Körperung hinzufügen> Benutzerdefinierte Körperung erstellen.

Sie werden jetzt den Divi -Builder betreten, wo wir das Schleifenlayout bauen werden.

1. Importieren Sie ein Layout

Wenn Sie mit einem Layout beginnen, können Sie viel Zeit sparen und Ihnen helfen, ein konsistentes Design von Anfang an zu führen. Für dieses Tutorial verwende ich das Layout der Marketing -Agentur -Blog -Seite zum Branding.

Sie können dasselbe auswählen oder ein Layout importieren, das Ihnen eine gute Basis zum Arbeiten bietet. Sobald es in Ihrer Vorlage ist, haben Sie eine fertige Struktur, die Sie an Ihre Bedürfnisse anpassen können, anstatt alles von Grund auf neu zu erstellen.

2. Entwerfen Sie eine Blog -Postkarte

Hier kommt die Flexibilität des Loop Builder wirklich durch. Anstatt in das feste Layout des Blog -Moduls eingeschlossen zu werden, entscheiden Sie genau, was auf Ihrer Postkarte und wie es angeordnet ist.

Fügen Sie Ihrer Vorlage einen neuen Abschnitt hinzu. Sie können aus den vorgezeichneten Strukturen auswählen oder Ihre eigene mit der One-Spaln-Option erstellen.

Lassen Sie uns für dieses Beispiel einen Abschnitt mit drei Spaltenzeilen aus auswählen.

In der ersten Spalte erstellen wir unsere Postkarte. Wir werden eine Modulgruppe verwenden, um alle Elemente zu halten.

Fügen Sie dann ein Bildmodul für das vorgestellte Bild, ein Überschriftenmodul für den Posttitel und ein Textmodul für den Auszug hinzu. Wir werden auch Meta -Informationen und eine Schaltfläche Weitere Informationen hinzufügen, damit die Besucher zum vollständigen Beitrag klicken können.

Sobald die Grundstruktur vorhanden ist, passen Sie das Design der Karte so an, dass sie zu Ihrer Marke passt. Optimieren Sie Farben, Schriftarten, Abstand und alle einzigartigen visuellen Details, die es zu Ihnen machen.

3.. Verpacken Sie die Reihenverpackung

Um sicherzustellen, dass Ihre Karten in Zeilen über verschiedene Bildschirmgrößen ordentlich angezeigt werden, sollten Sie Flex -Wraps aktivieren. Wählen Sie die Hauptreihe und öffnen Sie die Registerkarte "Design" .

Gehen Sie zum Layout. Stellen Sie sicher, dass der Layoutstil auf Blex eingestellt ist.

Aktivieren Sie das Layout -Verpackung , damit die Karten bei Bedarf in eine neue Linie wechseln können, und wählen Sie dann die Verpackungsausrichtung aus, die am besten zu Ihrem Design passt.

4. Schalten Sie die Schleife ein

Jetzt kommt der Schritt, der alles automatisch macht. Wählen Sie die Spalte der Karte aus.

Schalten Sie dann die Loop -Option unter der Registerkarte Inhalt ein. Sobald die Loop aktiviert ist, wiederholt Divi Ihr Kartendesign für jeden Beitrag, der Ihren Abfrageinstellungen entspricht.

Für dieses Layout habe ich festgelegt:

• Beitragstyp: Beiträge
• Beiträge pro Seite: 10
• Bestellung bis: Datum
• Bestellung: Abstieg (neuester zuerst)
• Post -Offset: 0 (Zeigen Sie alle von vor dem neuesten)
• Ignorieren Sie Haftbeiträge: Ja

Diese kleinen Anpassungen stellen sicher, dass das Netz genau die gewünschten Beiträge in der gewünschten Reihenfolge anzeigt. Sie können diese Werte jederzeit ändern, um das Layout an unterschiedliche Anforderungen anzupassen.

5. Dynamische Inhalte hinzufügen

Der letzte Schritt, um die Schleife zum Leben zu erwecken, besteht darin, jedes Modul in Ihrer Karte mit Live -Post -Daten zu verbinden. Dies verwandelt eine statische Karte in eine automatisierte, immer aktuelle Auflistung. Zum Beispiel:

• Verknüpfen Sie das Bildmodul mit dem vorgestellten Bild des Beitrags.
• Verknüpfen Sie das Überschriftenmodul mit dem Post -Titel.
• Verknüpfen Sie das Textmodul mit dem Postauszug.
• Schließen Sie die Schaltfläche Weitere Schaltfläche an die Post -URL an.

Beim Loop ersetzt Divi Platzhalterinhalte durch die richtigen Daten für jeden Beitrag in der Schleife.

Um das vorgestellte Bild festzulegen, öffnen Sie das Bildmodul, schweben Sie über die Bildoption und klicken Sie auf das Symbol für dynamische Inhalte . Wählen Sie das Bild aus und alle relevanten Bilder werden sofort ausgefüllt.

Wiederholen Sie dies für den Post -Titel, das veröffentlichte Datum, den Auszug und alle anderen Felder, die Sie anzeigen möchten.

Wenn Sie auf das Symbol für dynamische Inhalte für ein Modul klicken, wird der gesamte Bereich der Loop-spezifischen Optionen angezeigt. Sie sind nicht auf Titel und Bilder beschränkt; Sie können auch Veröffentlichungsdaten, geänderte Daten, Autorennamen, Kommentare, Kategorien, Tags und sogar benutzerdefinierte Felder anzeigen.

Dies bedeutet, dass Ihre Postkarte so minimal oder so detailliert sein kann, wie Sie möchten. Erstellen Sie ein sauberes, bildorientiertes Netz, ein inhaltsreiches Layout oder sogar die benutzerdefinierten Nischen-benutzerdefinierten Post-Typ-Felder. Entwerfen Sie es einmal und Divi hält es über die gesamte Schleife genau und konsistent.

6. Speichern Sie Ihre Vorlage und Vorschau

Sobald alles richtig aussieht, nehmen Sie endgültige Änderungen vor und speichern Sie Änderungen sowohl im Divi Builder als auch im Theme Builder.

Vorschau Ihrer Seite, um die Schleife in Aktion anzuzeigen. Hier ist die fertige Blog -Auflistungsseite:

Das Blog -Modul hatte Grenzen, Loop Builder nicht

Das Blog -Modul funktionierte einwandfrei. Warum drängen wir also nach dem Schleifenbauer? Weil „fein“ repariert bedeutete. Das Blog -Modul hat Sie in seine Vorlage gesperrt, aber der Loop Builder gibt Ihnen eine leere Leinwand. Sie wählen das Layout, die Reihenfolge, den Stil und die Divi -Loops automatisch.

Das ist die wahre Verschiebung: Sie passen die Vorlage eines anderen nicht an, sondern entwerfen Ihre eigenen. Lassen Sie uns das noch einmal in die Praxis umsetzen und ein anderes Layout entwerfen, das sich von einer typischen Blog -Modulstruktur unterscheidet.

Fügen Sie zunächst eine einspaltige Reihe und einen Abschnitt hinzu. Passen Sie die Größe an und stellen Sie sicher, dass die Flex- und Flex -Verpackung für die Zeile aktiviert ist.

Diese Zeile enthält Ihre Blog -Karten. Fügen Sie nun eine weitere verschachtelte Zeile in der Spalte hinzu, um Ihre Kartenstruktur zu erstellen, wobei das Bild links und die Metadaten des Beitrags rechts.

Entwerfen Sie Ihre Struktur genau so, wie Sie es möchten. Sie müssen nicht der Blog -Modulsequenz folgen. Lassen Sie die linke Spalte vorerst leer. Wir werden das vorgestellte Bild als Hintergrundbild der Spalte hinzufügen.

Passen Sie Ihre Blog -Liste an.

Sie können auch die vertikale Lücke Ihrer Modulgruppe in der rechten Spalte in Design> Layout> vertikaler Lücke ändern.

Als nächstes aktivieren wir die Loop -Option. Wählen Sie die erste Spalte aus der übergeordneten Zeile aus.

Auch hier schließen wir den dynamischen Inhalt. Gehen Sie mit dem Bild zur Hintergrundoption der linken Spalte, und der Rest ist der gleiche.

Dies ist Ihre Blog-Schleife im Listenstil. Wenn Sie dies nun in ein Raster umwandeln möchten, ändern Sie einfach die Breite der Spalte. Da wir die Flex -Verpackung in der Reihe aktivieren lassen, werden die Karten selbst einwickeln, wenn wir ihre Größe ändern.

Wenn dies Ihre Bilder viel zu groß macht, können Sie den Auszug entfernen, die Spaltenstruktur der Zeile ändern und sogar die horizontale Lücke auf Null einstellen.

Und genau so ist Ihr Netz bereit.

Dieses Beispiel ist nur ein Blick darauf, was Loop Builder ermöglicht. Das eigentliche Imbiss ist, dass Sie nicht mehr auf eine Handvoll voreingestellter Layouts beschränkt sind. Jeder Teil der Postkarte gehört Ihnen, um zu arrangieren, zu stylen und neu zu interpretieren, und Divi kümmert sich um die automatische Wiederholung. Diese Flexibilität verwandelt eine einfache Blog -Auflistung in etwas, das sich für Ihre Website entwickelt fühlt.

Verwenden Sie das Pagierungsmodul

Wenn Sie Beiträge pro Seite in Ihrer Schleifenabfrage beschränken, möchten Sie wahrscheinlich, dass die Leser den Rest sehen. Fügen Sie das Paginierungsmodul unter Ihrem Raster hinzu und stellen Sie seine Zielschleife auf das Element ein, in dem Sie die Schleife aktiviert haben. Eine vollständige Vorgehensweise finden Sie unter der Verwendung von Divi 5's Loop Builder & Pagination Modul zusammen: Lesen Sie das Tutorial.

Laden Sie die Blog -Vorlagen herunter

Wenn Sie in einer Blog -Vorlage mit Grids experimentieren möchten, laden Sie die in diesem Tutorial verwendeten Vorlagen unten herunter. Um diese zu importieren, navigieren Sie zu Ihrem Divi -Themenbauer. Sie können diese mit dem Import-/Exportsymbol in der rechten Ecke importieren.

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!

Erstellen Sie noch heute Ihre benutzerdefinierte Blog -Post -Schleife in Divi 5

Vor dem Loop Builder von Divi 5 bedeutete das Erstellen einer wirklich benutzerdefinierten Blog -Post -Schleife oft das Wrestling mit starren Vorlagen oder das Schreiben von benutzerdefiniertem Code für jede kleine Änderung. Jetzt ist es ein visueller Prozess von Anfang bis Ende. Sie entwerfen einmal eine Karte, verknüpfen ihre Module mit Live -Post -Daten und lassen Divi den Rest umgehen.

Wenn Sie an den Grenzen des Blog -Moduls gearbeitet haben, ist Loop Builder das Upgrade, auf das Sie gewartet haben. Probieren Sie es in Ihrem nächsten Projekt aus und sehen Sie, wie viel einfacher es ist, ein Blog (oder Produkt, Ereignis oder Auflistung) zu erstellen, das genau so aussieht, wie Sie es wollen!