So erstellen Sie eine dynamische Portfolio-Projektvorlage mit Divi & ACF

Suchen Sie nach einer Möglichkeit, die Erstellung von Portfolioelementen auf Ihrer Website zu optimieren? Wenn ja, wirst du diesen Beitrag lieben. In diesem Tutorial zeigen wir Ihnen, wie Sie mit Divis Theme Builder und dem ACF-Plugin eine dynamische Portfolio-Projektvorlage erstellen. Wenn Sie eine Portfolioprojektvorlage erstellen, können Sie den Vorlagenkörper einmal entwerfen und ihn auch auf alle Portfolioelemente anwenden, die Sie in Zukunft hinzufügen. Das von uns erstellte Vorlagendesign passt zu allen möglichen kreativen Berufen, aber es ist nur die Spitze des Eisbergs. Sie können beliebig viele Felder hinzufügen und diese in Ihrer Vorlage verwenden. Sie können auch die JSON-Datei des Designs herunterladen, das wir kostenlos neu erstellen werden!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Laden Sie die Vorlage für ein dynamisches Portfolio-Projekt KOSTENLOS herunter

Wichtig: Sie müssen jedem Modul manuell dynamische Inhalte hinzufügen, nachdem Sie die ACF-Felder eingerichtet und die JSON-Vorlagendatei in den Theme Builder hochgeladen haben.

Um die kostenlose Vorlage für ein dynamisches Portfolio-Projekt in die Hände zu bekommen, müssen Sie sie zunächst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

1. ACF installieren und Projektfelder einrichten

Installieren und aktivieren Sie ACF

Beginnen Sie mit der Installation des kostenlosen Advanced Custom Fields-Plugins auf Ihrer WordPress-Website. Stellen Sie nach der Installation sicher, dass Sie es auch aktivieren.

Feldgruppe einrichten

Nachdem Sie das Plugin installiert und aktiviert haben, können Sie mit der Erstellung der benutzerdefinierten Felder beginnen. Gehen Sie zu Ihren Plugin-Einstellungen und fügen Sie eine neue Feldgruppe hinzu.

Ändern Sie den Standort Ihrer Feldgruppe. Wir möchten, dass es nur in unseren Projekten angezeigt wird.

• Beitragstyp – ist gleich – Projekt

Felder hinzufügen

Fahren Sie fort, indem Sie für jedes der unten genannten Elemente ein neues Feld hinzufügen:

• Problem
  • Feldbezeichnung: Problem
  • Feldtyp: Textbereich
• Lösung
  • Feldbezeichnung: Lösung
  • Feldtyp: Textbereich
• Zeugnis
  • Feldbezeichnung: Testimonial
  • Feldtyp: Text
• Gesprächspartner
  • Feldbezeichnung: Kontaktperson
  • Feldtyp: Text
• Kontaktperson Bild
  • Feldbeschriftung: Bild der Kontaktperson
  • Feldtyp: Bild
• Berufsbezeichnung des Ansprechpartners
  • Feldbezeichnung: Berufsbezeichnung der Kontaktperson
  • Feldtyp: Text
• Kundenlogo
  • Feldbezeichnung: Kundenlogo
  • Feldtyp: Bild
• Kunden-Website
  • Feldbezeichnung: Kunden-Website
  • Feldtyp: URL
• Projektdauer
  • Feldbezeichnung: Projektdauer
  • Feldtyp: Bereich
  • Anhängen: Wochen

Sie können beliebig viele Felder hinzufügen, je nachdem, welche Projektvorlage Sie erstellen möchten. Um das exakte Design, das in der Vorschau dieses Beitrags gezeigt wurde, nachzubilden, benötigen Sie alle oben genannten Felder.

2. Neues Projekt erstellen

Titel und Beschreibung des Portfolioprojekts hinzufügen

Nachdem Sie die Feldgruppe und alle ihre Felder eingerichtet haben, können Sie ein Beispielprojekt erstellen. Gehen Sie zu Ihrem WordPress-Dashboard, fügen Sie ein neues Projekt hinzu und geben Sie einen Titel und eine Beschreibung ein.

Ausgewähltes Bild hochladen

Laden Sie dann ein Bild Ihrer Wahl hoch.

Füllen Sie alle benutzerdefinierten Felder aus

Fahren Sie fort, indem Sie alle verschiedenen benutzerdefinierten Felder ausfüllen, die Sie im ersten Teil des Tutorials hinzugefügt haben.

3. Neue Vorlage erstellen

Gehen Sie zu Divi Theme Builder und erstellen Sie eine neue Vorlage

Zeit, mit dem Erstellen der Vorlage zu beginnen! Gehen Sie zum Divi Theme Builder und fügen Sie eine neue Vorlage hinzu.

Verwenden Ein

Wenden Sie die Vorlage auf alle Ihre Projekte an.

• Verwenden für: Alle Projekte

4. Beginnen Sie mit dem Erstellen des Vorlagenkörpers

Fahren Sie fort, indem Sie mit dem Erstellen des benutzerdefinierten Hauptteils der Vorlage beginnen.

Abschnitt 1

Hintergrundfarbe

Innerhalb des Vorlageneditors werden Sie einen Abschnitt bemerken. Öffnen Sie diesen Abschnitt und fügen Sie eine schwarze Hintergrundfarbe hinzu.

• Hintergrundfarbe: #000000

Abstand

Fügen Sie als nächstes eine benutzerdefinierte obere und untere Polsterung hinzu.

• Obere Polsterung: 250px
• Untere Polsterung: 250px

Grenze

Fügen Sie auch einen unteren linken und rechten Randradius hinzu.

• Unten links: 8vw
• Unten rechts: 8vw

Zeile 1 hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Abschnitt eine erste Zeile mit der folgenden Spaltenstruktur hinzufügen:

Textmodul Nr. 1 zur Spalte hinzufügen

Inhalt hinzufügen

Fügen Sie dann ein Textmodul hinzu und platzieren Sie einige Inhalte in der Inhaltsbox.

• Körper: Projektdauer:

Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Texteinstellungen wie folgt:

• Textschriftart: Montserrat
• Textfarbe: #a0a0a0
• Textgröße: 1.2rem

Textmodul #2 zur Spalte hinzufügen

Dynamischer Inhalt

Fügen Sie der Spalte ein weiteres Textmodul hinzu und wählen Sie den dynamischen Inhalt für die Projektdauer aus.

• Dynamischer Inhalt: Projektdauer
• Nach: Wochen

Texteinstellungen

Ändern Sie als nächstes die Texteinstellungen des Moduls.

• Textschriftart: Lora
• Textfarbe: #ffffff
• Textgröße: 1.5rem

Textmodul Nr. 3 zur Spalte hinzufügen

Dynamischer Inhalt

Fügen Sie ein weiteres Textmodul hinzu und wählen Sie den dynamischen Inhalt des Post-/Archivtitels aus.

• Dynamischer Inhalt: Titel des Beitrags/Archivs
• Vorher: <H1>
• Nachher: ​​</H1>

H1-Texteinstellungen

Gestalten Sie die H1-Texteinstellungen des Moduls.

• Überschrift Schriftart: Montserrat
• Textfarbe der Überschrift: #ffffff
• Überschrift Textgröße: 6rem (Desktop), 3rem (Tablet & Telefon)

Abstand

Vervollständigen Sie die Einstellungen des Moduls, indem Sie einen oberen und unteren Rand hinzufügen.

• Oberer Rand: 100px
• Unterer Rand: 100px

Modul für Beitragsinhalt hinzufügen

Texteinstellungen

Das nächste und letzte Modul, das wir in der Spalte benötigen, ist ein Post-Content-Modul. Dies zeigt die Beschreibung Ihres Projekts. Ändern Sie die Texteinstellungen des Moduls wie folgt:

• Textschriftart: Lora
• Textfarbe: #ffffff
• Textgröße: 1,5 Rem (Desktop), 0,9 Rem
• Textzeilenhöhe: 2em

Zeile 2 hinzufügen

Spaltenstruktur

Fügen Sie dem Abschnitt eine weitere Zeile mit der folgenden Spaltenstruktur hinzu:

Bildmodul zu Spalte 1 hinzufügen

Dynamischer Inhalt

Fügen Sie in Spalte 1 ein Bildmodul hinzu und wählen Sie den dynamischen Inhalt des Kundenlogos aus.

• Dynamischer Inhalt: Kundenlogo

Textmodul zu Spalte 2 hinzufügen

Inhalt hinzufügen

Fügen Sie dann in Spalte 2 ein Textmodul hinzu und geben Sie eine Kopie Ihrer Wahl ein.

Dynamische Inhalte verknüpfen

Verknüpfen Sie das Modul mit der Client-Website, indem Sie in den Link-Einstellungen den dynamischen Inhalt der Client-Website auswählen.

• Dynamischer Inhalt: Kunden-Website

Texteinstellungen

Ändern Sie als nächstes die Texteinstellungen des Moduls.

• Textschriftart: Montserrat
• Textfarbe: #ffffff
• Textgröße: 1.5rem
• Textzeilenhöhe: 1em

Abstand

Fügen Sie auch eine benutzerdefinierte untere Polsterung hinzu.

• Untere Polsterung: 50px

Grenze

Und vervollständigen Sie die Einstellungen des Moduls, indem Sie einen unteren Rand hinzufügen.

• Breite des unteren Rands: 1px
• Farbe des unteren Rands: #ffc300

Abschnitt 2 hinzufügen

Abstand

Auf zum nächsten Abschnitt! Entfernen Sie alle standardmäßigen oberen und unteren Polster.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Abstand

Öffnen Sie die Zeileneinstellungen und entfernen Sie alle standardmäßigen Auffüllungen oben unten.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Bildmodul zur Spalte hinzufügen

Dynamischer Inhalt

Das einzige Modul, das wir in dieser Zeile benötigen, ist ein Image-Modul. Verbinden Sie das Bild mit dem vorgestellten Bild des Projekts.

• Dynamischer Inhalt: Ausgewähltes Bild

Grenze

Fügen Sie auch einen unteren linken und rechten Randradius hinzu.

• Unten links: 8vw
• Unten rechts: 8vw

Abschnitt 3 hinzufügen

Abstand

Fügen Sie einen weiteren regulären Abschnitt mit benutzerdefinierter oberer und unterer Polsterung hinzu.

• Obere Polsterung: 250px
• Untere Polsterung: 250px

Zeile 1 hinzufügen

Spaltenstruktur

Fügen Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Textmodul zu Spalte 1 hinzufügen

H2-Inhalt hinzufügen

Fügen Sie in Spalte 1 ein Textmodul hinzu und fügen Sie H2-Inhalte Ihrer Wahl ein.

H2-Texteinstellungen

Ändern Sie die H2-Texteinstellungen wie folgt:

• Überschrift 2 Schriftart: Montserrat
• Überschrift 2 Schriftstärke: Fett
• Überschrift 2 Textgröße: 2rem

Textmodul zu Spalte 2 hinzufügen

Dynamischer Inhalt

Fahren Sie mit der zweiten Spalte fort, fügen Sie ein Textmodul hinzu und verwenden Sie den problematischen dynamischen Inhalt.

• Dynamischer Inhalt: Problem

Texteinstellungen

Ändern Sie dann die Texteinstellungen des Moduls:

• Textschriftart: Lora
• Textgröße: 1,5 rem (Desktop), 0,9 vw (Tablet & Telefon)
• Textzeilenhöhe: 2em

Zeile klonen

Sobald Sie die Zeile abgeschlossen haben, klonen Sie sie vollständig.

Kopie des Textmoduls in Spalte 1 ändern

Ändern Sie die Kopie von Spalte 1 Textbaustein der duplizierten Zeile.

Dynamischen Inhalt des Textmoduls in Spalte 2 ändern

Ändern Sie auch den dynamischen Inhalt des Textbausteins in Spalte 2 der doppelten Zeile.

• Dynamischer Inhalt: Lösung

Schaltflächenmodul zu Spalte 2 der doppelten Zeile hinzufügen

Kopie hinzufügen

Fahren Sie fort, indem Sie ein Schaltflächenmodul zu Spalte 2 der doppelten Zeile hinzufügen. Fügen Sie eine Kopie Ihrer Wahl hinzu.

Tasteneinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Schaltflächeneinstellungen wie folgt:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 1.5rem
• Schaltflächentextfarbe: #000000
• Schaltflächenrandradius: 0px

• Button-Schriftart: Montserrat

Abstand

Vervollständigen Sie die Einstellungen des Moduls, indem Sie etwas oberen Rand hinzufügen.

• Oberer Rand: 100px

Abschnitt 4 hinzufügen

Hintergrundfarbe

Auf zum nächsten und letzten Abschnitt! Fügen Sie eine schwarze Hintergrundfarbe hinzu.

• Hintergrundfarbe: #000000

Grenze

Fügen Sie dem Abschnitt auch einen oberen linken und rechten Randradius hinzu.

• Oben links: 8vw
• Oben rechts: 8vw

Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Testimonial-Modul zur Spalte hinzufügen

Dynamischer Inhalt

Fügen Sie der Zeile ein Testimonial-Modul hinzu und wählen Sie dynamische Inhalte für die verschiedenen Elemente innerhalb des Moduls aus.

• Autor: Ansprechpartner
• Berufsbezeichnung: Kontaktperson Berufsbezeichnung
• Körper: Testimonial
• Bild: Kontaktperson Bild

Elemente

Deaktivieren Sie als nächstes das Zitatsymbol.

• Angebotssymbol anzeigen: Nein

Hintergrundfarbe

Ändern Sie dann die Hintergrundfarbe des Moduls in Schwarz.

• Hintergrundfarbe: #000000

Texteinstellungen

Wechseln Sie auf die Registerkarte Design des Moduls und ändern Sie die Textfarbe.

• Textfarbe: Hell

Textkörpereinstellungen

Ändern Sie als Nächstes die Textkörpereinstellungen.

• Körperschriftart: Montserrat
• Textgröße: 2 Rem (Desktop), 1,5 Rem (Tablet & Telefon)

Einstellungen für Autorentext

Ändern Sie auch die Texteinstellungen des Autors.

• Schriftart des Autors: Lora
• Textgröße des Autors: 1,4 rem (Desktop), 0,9 rem (Tablet & Telefon)

Texteinstellungen positionieren

Und vervollständigen Sie die Einstellungen des Moduls, indem Sie die Positionstexteinstellungen entsprechend ändern:

• Position Schriftart: Lora
• Positionstextfarbe: #a8a8a8
• Positionstextgröße: 1,4 Rem (Desktop), 0,9 Rem (Tablet & Telefon)

4. Theme Builder-Änderungen speichern und Ergebnis anzeigen

Sobald Sie die Vorlage fertiggestellt haben, speichern Sie alle Änderungen im Divi Theme Builder und sehen Sie sich das Ergebnis in Ihrem Projekt an!

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit dem Divi Theme Builder und dem ACF-Plugin eine schöne Portfolio-Projektvorlage erstellen. Dies ist eine großartige Möglichkeit, die Darstellung von Projekten auf Ihrer Website zu optimieren. Nachdem Sie die Vorlage allen Ihren Projekten zugewiesen haben, wird sie automatisch auf zukünftige Portfolioelemente angewendet, die Sie hinzufügen. Sie konnten die JSON-Vorlagendatei dieses Designs ebenfalls kostenlos herunterladen! Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.