So bauen Sie ein Portfolio -Netz mit dem Schleifenbauer von Divi 5 von Divi 5

Ein Portfolio -Netz ist eine einfache und effektive Möglichkeit, Ihre Arbeit zu präsentieren. Mit dem Loop Builder von Divi 5 können Sie ein wiederverwendbares Kartenlayout entwerfen und es automatisch von Ihrem Inhalt direkt im visuellen Bauuntern genommen lassen.

Im Gegensatz zu Einzelzweckmodulen können Sie mit Loop Builder ein beliebiges Divi-Element verwenden, eine Abfrage für Beiträge oder benutzerdefinierte Post-Typen festlegen und ein reaktionsschnelles Netz ausgeben, das Ihre globalen Stile erbt. In diesem Tutorial erstellen wir Schritt für Schritt ein Portfolio -Netz unter Verwendung des benutzerdefinierten Projekts.

Verständnis der Schleifenbauer von Divi 5 von Divi 5

Der Loop Builder von Divi 5 ist eine neue Funktion, mit der Sie leicht dynamische, schleifende Inhaltslayouts erstellen können. Im Gegensatz zum Blog- oder Portfolio -Modulen können Sie mit dem Loop Builder jedes Divi -Element problemlos umseiten, um Beiträge, Begriffe oder Benutzer anzuzeigen. Dies bedeutet, dass Sie eine einzelne Vorlage erstellen können, die automatisch mit Inhalten von Ihrer WordPress -Site gefüllt wird.

Loop Builder unterstützt verschiedene Inhaltstypen, einschließlich benutzerdefinierter Post -Typen (CPTs), WooCommerce -Produkte und erweiterten benutzerdefinierten Feldern (ACF), mit der Sie Ihr Portfolio genau so anzeigen können, wie Sie möchten.

Wichtige Vorteile des Schleifenbauers

Dank der robusten Anpassungsoptionen passt Loop Builder perfekt zum Erstellen von Portfolio -Gittern. Hier sind die herausragenden Funktionen:

• Flexibilität, benutzerdefinierte Schleifenvorlagen zu entwerfen: Mit dem Schleifenbauer sind Sie nicht auf vordefinierte Layouts beschränkt. Sie können jedes Divi -Modul verwenden, um eine eindeutige Vorlage für jedes Portfolio -Element zu entwerfen.
• Anpassbare Abfragen: Mit Loop Builder können Sie in Ihrem Raster eine Feinabstimmung erstellen. Filtern Sie nach Kategorie, Post -Typ oder benutzerdefinierten Feldern, um nur die gewünschten Elemente in Ihrer bevorzugten Reihenfolge anzuzeigen.
• Dynamische Inhaltsintegration: Geben Sie nahtlos dynamische Inhaltsdaten wie Projekttitel, vorgestellte Bilder, Beschreibungen oder benutzerdefinierte Metadaten ein, damit jedes Portfolio -Element ansprechend ist.

Diese Funktionen machen den Loop Builder von Divi 5 zu einem idealen Werkzeug, um ein poliertes, professionelles Portfolio zu erstellen, das vollständig anpassbar und einfach zu navigieren ist.

Erstellen eines Portfolios mit Loop Builder

Wir werden die integrierten Projekte von Divi Custom Post (CPT) verwenden, um ein Portfolio mit dem Loop Builder zu erstellen. Die Projekte CPT sind so konzipiert, dass sie Inhalte im Portfolio-Stil präsentiert und dies zu einer idealen Wahl für unser Layout macht. Während Divi ein Portfolio -Modul anbietet, werden wir den Schleifenbauer verwenden, da wir unbegrenzte Optionen zum Erstellen eines eindeutigen Portfolios bieten.

Fügen Sie zunächst eine neue Zeile zu Ihrer Seite hinzu. Dafür werden wir ein 3-Spal -Layout verwenden.

Wir werden der ersten Spalte ein Überschriftenmodul hinzufügen.

Geben Sie einen Titel ein oder verwenden Sie Divi AI, um einen für Sie zu generieren.

Navigieren Sie zur Registerkarte "Entwurf" , wählen Sie Inter für die Schriftschriftart , Licht für das Kopfschriftengewicht , stellen Sie die Textgröße der Überschrift auf 2EM ein und weisen Sie eine 1,3EM -Kopfhöhe zu.

Lassen Sie uns nun unsere Schleife bauen. Navigieren Sie zur 2. Spalte unserer Zeile.

Suchen Sie die Registerkarte Schleifen , erweitern Sie sie und aktivieren Sie das Schleifenelement .

Wählen Sie als Nächstes den Abfragetyp . Für dieses Tutorial werden wir Divi's integriertes CPT, Projekte, verwenden. Wählen Sie unter Post -Type Projekte aus. Wir wollen alle Projekte präsentieren, also werden wir alles so lassen, wie es ist.

Sie können die Bestellung nach Einstellungen, Beiträge pro Seite und Post -Offset auswählen. Da unsere erste Spalte ein Überschriftenmodul enthält, setzen wir die Beiträge pro Seite auf 8 . Auf diese Weise wird die Ausgabe sogar in unserer dreispaltigen Reihe sein .

Sie werden feststellen, dass unsere Schleife versucht, alle Spalten zu stapeln. Um dies zu beheben, müssen wir zu den Zeileneinstellungen gehen. Navigieren Sie zur 3-Spal -Zeile, klicken Sie auf die Registerkarte Entwurf und suchen Sie die Layouteinstellungen .

Erweitern Sie die Registerkarte Layouteinstellungen . Suchen Sie die Layout -Wickeleinstellung und wählen Sie Wrap . Dadurch werden unsere Schleife wieder in 3 Spalten eingewickelt.

Styling der Loop -Spalte

Jetzt, da die Schleifeneinstellungen vorhanden sind, ist es Zeit, unsere Spalten zu stylen. Die hier ausgewählten Stileinstellungen wirken sich auf die verbleibenden Spalten in der Schleife aus. Klicken Sie in der 3-Spalte -Zeile in die 2. Spalte und klicken Sie auf die Registerkarte Design . Navigieren Sie zur Grenztropfen und weisen Sie der Spalte einen Randradius von 15px zu. Fügen Sie unter Grenzstilen eine 1PX -Randbreite hinzu und verwenden Sie #000000 als Randfarbe .

Fügen Sie der Schleife Inhalte hinzu

Wir können mit den zugewiesenen Stilen der Spalte Inhalte hinzufügen. Klicken Sie, um ein Bildmodul in die 2. Spalte hinzuzufügen. Sobald jede Spalte in der Schleife hinzugefügt wird, wird ein Bildplatzhalter angezeigt.

Wir werden die dynamische Inhaltskraft von Divi 5 verwenden, um das vorgestellte Bild unseres Projekts zu fördern. Bewegen Sie sich über dem Bild, um die Symbole zu enthüllen. Klicken Sie auf das dynamische Inhaltsymbol, um fortzufahren.

Wählen Sie das abgebildete Bild , wenn die Optionen angezeigt werden.

Unsere Schleife wird das vorgestellte Bild jedes Projekts direkt in unsere Portfolioschleife einbringen.

Fügen Sie als nächstes ein Überschriftenmodul zur 2. Spalte unter dem vorgestellten Bild hinzu. Dies wird für den Projekttitel verwendet. Wiederholen Sie die obigen Schritte, um den Titel hinzuzufügen. Wählen Sie diesmal jedoch einen Schleifenposten -Titel .

Wählen Sie auf der Registerkarte " Entwurf H3 für die Überschriftenstufe , Inter für die Überschrift , Mitte für die Ausrichtung der Überschriftentext und 20px für die Heading -Textgröße.

Schließlich fügen wir eine Schaltfläche hinzu, die zu jedem Projekt verlinkt. Fügen Sie der 2. Spalte unter dem Post -Titel ein Schaltflächenmodul hinzu. Klicken Sie in der Schaltfläche Link -URL auf das Symbol für dynamische Inhalte und wählen Sie Loop -Link .

Wechseln Sie zur Registerkarte "Entwurf" und setzen Sie die Ausrichtung auf die Mitte .

Erweitern Sie die Dropdown -Einstellungen der Schaltfläche und aktivieren Sie benutzerdefinierte Stile für die Schaltfläche . Geben Sie die folgenden Designeinstellungen ein:

• Button -Hintergrund: #000000
• Button Rand Radius: 15px
• Taste Randbreite: 0px
• Schaltfläche Schriftart: Inter
• Schaltfläche Textfarbe: #ffffff
• Schaltfläche Textgröße: 16px
• Rand: 15px unten
• Polsterung: 15px oben und unten, 35px links und rechts

Das war's! Wie Sie sehen können, ist das Erstellen einer Schleife mit Divi 5 ein unkomplizierter Prozess.

Ändern der Stile mit Loop Builder

Das Bearbeiten der Stile Ihrer Schleife ist genauso einfach wie das Erstellen der Schleife selbst. Nehmen wir an, Sie möchten von einem hellen zu einem dunklen Thema für Ihre Schleife tauschen. Das Vorgehen von Designänderungen dauert nur ein paar Sekunden. Sie können die Hintergrundfarbe des Abschnitts ändern und dann Änderungen an einzelnen Schleifenelementen mit ein paar Klicks vornehmen.

Es ist nicht erforderlich, Schleifenelemente einzeln zu bearbeiten. Da sie alle miteinander verbunden sind, müssen Sie nur einmal Module bearbeiten, und Divi 5 wendet die aktualisierten Stile automatisch auf jedes Modul in der Schleife an.

Sie können der Schleife mehr Module hinzufügen, z .

Wenn Sie den Raum um die Elemente in Ihrer Schleife festziehen möchten, können Sie die vertikale Lücke in den Einstellungen zwischen Zeile und Spalten einstellen. Dadurch steuert die Menge an Platz zwischen jeder Zeile und den einzelnen Modulen mithilfe des FlexBox -Layout -Systems von Divi 5 und ermöglicht es Ihnen, das Aussehen Ihrer Schleife zu perfektionieren.

Testen und Verfeinerung der Portfolioschleife

Sobald Sie ein Portfolio erstellt haben, ist es Zeit, es zu testen, um sicherzustellen, dass alles wie beabsichtigt funktioniert. Beginnen Sie mit der Vorschau des Gitters am vorderen Ende mit dem Vorschau -Link in der oberen Leiste des Visual Builder.

Stellen Sie sicher, dass der Titel , den Titel für den einzelnen Projekt, Bild , Auszug und Loop -Link aus den Projekten CPT korrekt abrufen. Stellen Sie sicher, dass keine Platzhalter gebrochene Elemente sind, die erscheinen.

Überprüfen Sie im visuellen Bauunternehmer, um sicherzustellen, dass das Layout mithilfe der anpassbaren Reaktionsbestandteile von Divi 5 ordnungsgemäß anpasst. Standardmäßig bietet Divi 5 3 Haltepunkte - einen für Desktop , Tablet und Telefon -, können Sie jedoch bis zu 7 aktivieren, indem Sie auf das Ellipsis -Menü in der Mitte der oberen Leiste des visuellen Bauherrn klicken.

Navigieren Sie durch jeden Haltepunkt , überprüfen Sie das Layout und nehmen Sie nach Bedarf Anpassungen vor.

Um das Layout mobiler zu gestalten, können Sie die Spaltenstruktur der Divi 5 verwenden, um die Anzahl der auf kleineren Geräten angezeigten Spalten zu ändern.

Best Practices und Tipps

Um sicherzustellen, dass Sie das Beste aus Divi 5 und Loop Builder herausholen, finden Sie hier einige Best Practices beim Aufbau Ihres Portfolios.

1. Gewährleistung der Konsistenz mit Konstruktionsvariablen

Mit der Entwurfsvariablen von Divi 5 können Sie konsistente Typografie, Farben und Abstand auf Ihrer Portfolio -Seite definieren. Stellen Sie im visuellen Bauunternehmer globale Variablen für Schriftarten, Farben und Polsterung/Ränder fest, um sicherzustellen, dass jedes Portfolio -Artikel einheitlich aussieht. Klicken Sie zum Erstellen von Variablen auf das Symbol Variable Manager im Menü Links im visuellen Bauunternehmer.

Von dort aus können Sie globale Schriftarten , Farben und mehr zuweisen, um sicherzustellen, dass Ihre Designs auf Ihrer gesamten Website konsistent sind, nicht nur Ihre Portfolio -Seite.

2. Betrachten Sie die Zugänglichkeit

Die Barrierefreiheit sorgt dafür, dass alle Benutzer, einschließlich derjenigen mit Behinderungen, navigieren und Ihre Arbeit genießen können. Stellen Sie sicher, dass Sie alternative Text für Bilder hinzufügen, während Sie sie in die Mediengalerie hochladen. Dies hilft, die Leser den Inhalten auf sehbehinderte Benutzer zu vermitteln.

Es ist auch gut, Farben mit ausreichenden Kontrastverhältnissen auszuwählen, um den Benutzern mit Sehbehinderungen die Lesbarkeit zu gewährleisten.

3.. Vorlagen speichern und wiederverwenden

Speichern Sie nach der Perfektionierung Ihrer Schleifenbuilder-Vorlage in der Divi-Bibliothek , indem Sie mit der rechten Maustaste im Bereich Portfolio klicken und Speichern in der Bibliothek auswählen. Geben Sie ihm einen beschreibenden Namen für eine einfache Referenz. Auf diese Weise können Sie die Vorlage auf anderen Seiten wiederverwenden, ohne von Grund auf neu umzubauen.

Um die Vorlage auf anderen Websites zu verwenden, können Sie sie in Divi Cloud speichern und mit einem Klick in andere Webprojekte importieren.

Durch das Speichern von Vorlagen wird Ihr Workflow optimiert und stellt sicher, dass Sie schnell professionelle Portfolio -Netze für zukünftige Projekte bereitstellen können.

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!

Probieren Sie noch heute den Schleifenbauer in Divi 5 aus

Der Loop Builder von Divi 5 erleichtert es einfach, dynamische Portfolio -Gitter zu erstellen, sodass Sie Ihre Arbeit mit Stil und Effizienz präsentieren können. Durch die Nutzung der integrierten Projekte CPT und die leistungsstarken Funktionen des Loop Builder können Sie flexible und vollständig anpassbare Gitter erstellen, die den Inhalt Ihres Projekts dynamisch einsetzen. Mit seiner Flexibilität können Sie einzigartige Layouts mit jedem Divi -Modul entwerfen, Abfragen zum Anzeigen bestimmter Projekte einrichten und ansprechende Netze erstellen, die auf jedem Gerät leuchten.

Sind Sie bereit, Ihr Portfolio zum Leben zu erwecken? Tauchen Sie in die neueste öffentliche Alpha -Veröffentlichung von Divi 5 und experimentieren Sie mit Ihrem Portfolio -Layout. Egal, ob Sie ein Freiberufler sind, der Projekte vorstellt oder ein Unternehmen hervorhebt, der die Kundenarbeit hervorhebt, mit Loop Builder können Sie problemlos ein professionelles, dynamisches Display erstellen.