So erstellen Sie eine Autorenseitenvorlage mit Divis Theme Builder

Autorenseiten waren früher schwer anzupassen. Mit dem Divi Theme Builder ist das kein Problem mehr. Sie können nicht nur Autorenseiten, sondern auch Kategorieseiten, Suchergebnisseiten und mehr personalisieren. In diesem Beitrag zeigen wir Ihnen, wie Sie mit Divis Theme Builder eine dynamische Autorenseitenvorlage erstellen.

Wenn Sie dieses Layout im Divi Theme Builder neu erstellen, verwenden Sie dynamischen Inhalt, sodass alle Autorenseiten gleichzeitig betroffen sind, während der für den Autor eindeutige Inhalt beibehalten wird. Sie müssen lediglich sicherstellen, dass alle Autoren über aktuelle Informationen verfügen. Wenn sie keine guten Gravatar-Bilder haben, empfehlen wir Ihnen, das WP User Avatar Plugin herunterzuladen, um mehr Kontrolle zu haben. Sie können auch die JSON-Datei der Vorlage kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Bevor wir mit der Neuerstellung der Autorenseitenvorlage im Theme Builder beginnen, werfen wir einen Blick auf das Ergebnis für verschiedene Bildschirmgrößen. Beim Erstellen der Vorlage sieht das Design im Vorlageneditor etwas anders aus. Wir empfehlen Ihnen, zwei Fenster geöffnet zu haben, eines mit dem Vorlageneditor und eines mit einer Live-Vorschau.

Desktop

Handy, Mobiltelefon

Laden Sie die Willkommensautorenseite KOSTENLOS herunter

Um die kostenlose Vorlage für die Autorenseite in die Hände zu bekommen, müssen Sie sie zuerst ü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. Benutzer aktualisieren

Autorenbilder optimieren

WP-Benutzer-Avatar-Plugin hinzufügen

Wenn ein Autor zu Ihrem WordPress hinzugefügt wird, zieht das System automatisch ein Gravatar-Bild. Einige Autoren haben kein Gravatar-Konto oder das Bild stimmt nicht mit Ihrer Website überein. Die Verwendung des WP-Benutzer-Avatar-Plugins gibt Ihnen mehr Kontrolle.

Vollständige Autoreninformationen

Stellen Sie sicher, dass alle folgenden Autoreninformationen enthalten sind:

• Name und Nachname
• Anzeigename
• Biografie des Autors
• Bild des Autors

2. Layout im Theme Builder neu erstellen

Theme-Builder öffnen

Der erste Schritt zum Neuerstellen der Autorenseitenvorlage besteht darin, den Theme Builder zu öffnen und eine neue Vorlage hinzuzufügen. Wählen Sie im Abschnitt Archivseiten „Alle Autorenseiten“ und klicken Sie auf die blaue Schaltfläche „Vorlage erstellen“.

Benutzerdefinierten Körper erstellen

Sobald die neue Vorlage erstellt wurde, klicken Sie auf „Benutzerdefinierten Körper hinzufügen“, um den Vorlageneditor aufzurufen.

Abschnitt 1 Einstellungen

Abstand

Zeit, das Layout zu erstellen! Innerhalb des Vorlageneditors werden Sie einen Abschnitt bemerken. Öffnen Sie den Abschnitt und ändern Sie die Abstandswerte wie folgt:

• Obere Polsterung
  • Desktop: 300px
  • Tablet und Telefon: 50px
• Bodenpolsterung
  • Desktop: 0px

Grenze

Fügen Sie dem Abschnitt auch einen unteren Rand hinzu.

• Rahmenstile: Unterer Rahmen
• Breite: 2px
• Farbe: Schwarz #000000

Zeile 1 hinzufügen

Spaltenstruktur

Fügen Sie nun eine Zeile mit der folgenden Spaltenstruktur hinzu:

Größe

Öffnen Sie die Zeileneinstellungen und ändern Sie die Größe wie folgt:

• Breite
  • Desktop: 1580px
  • Tablet und Telefon: automatisch
• Maximale Breite
  • Desktop: 90%
  • Tablet und Telefon: 80%

Abstand

Ändern Sie als nächstes die Abstandseinstellungen.

• Linker Rand: auto
• Rechter Rand: 79px
• Rechte Polsterung: 0px

Benutzerdefinierte CSS

Zu guter Letzt richten Sie den gesamten Spalteninhalt mit zwei Zeilen CSS-Code im Hauptelement der Zeile aus.

• Hauptelement
  • Desktop: Anzeige: Flex; Ausrichten-Elemente: Mitte;

display: flex;
align-items: center;

• • Tablet und Telefon: Anzeige: Block;

display: block;

Textmodul 1 zu Spalte 1 hinzufügen

Inhaltstext

Zeit, Module hinzuzufügen, beginnend mit einem Textmodul in Spalte 1. Verknüpfen Sie den richtigen dynamischen Inhalt.

• Text: Dynamischer Inhalt – Autor des Beitrags
• Vorher: <h1>
• Nachher: ​​<h1>
• Namensformat: Vor- und Nachname

Überschriftstext

Dann formatieren Sie den Überschriftentext wie folgt:

• Überschriftsebene: H1
• Schriftart: Krona One
• Gewicht: Fett
• Stil: TT
• Farbe: Schwarz #000000
• Größe
  • Desktop: 90px
  • Tablet: 60px
  • Telefon: 50px

Abstand

Fügen Sie auch einige responsive Abstandswerte hinzu.

• Unterer Rand
  • Desktop: -43px
  • Tablet: -33px
  • Telefon: -27px
• Obere Polsterung: 19px
• Untere Polsterung: 0px

Textmodul 2 zu Spalte 1 hinzufügen

Inhaltstext

Weiter zum nächsten Modul, das ein weiteres Textmodul ist. Fügen Sie den biodynamischen Inhalt des Autors hinzu.

• Textkörper: Dynamischer Inhalt – Biografie des Autors

Text

Stylen Sie dann den Text auf der Registerkarte Design.

• Schriftart: Open Sans
• Gewicht: Leicht
• Farbe: Schwarz#000000
• Größe
  • Desktop: 16px
  • Tablet: 15px
  • Telefon: 14px
• Buchstabenabstand: 1px

Abstand

Und vervollständigen Sie die Moduleinstellungen, indem Sie etwas oberen Rand hinzufügen.

• Oberer Rand: 100px

Bildmodul zu Spalte 2 hinzufügen

Bildinhalt

Gehen Sie zu Spalte 2 und fügen Sie ein Bildmodul hinzu. Löschen Sie den Standardplatzhalter und verbinden Sie den dynamischen Inhalt des Profilbilds des Autors.

• Bild: Dynamischer Inhalt – Autorenprofilbild

Größe

Passen Sie dann die Größeneinstellungen des Bildes an.

• Breite
  • Desktop: 100 %
  • Tablet und Telefon: 50%

Abstand

Fügen Sie auch einen reaktionsfähigen unteren Rand hinzu.

• Unterer Rand
  • Desktop und Tablet: -20%
  • Telefon: -30%

Grenze

Vervollständigen Sie die Moduleinstellungen, indem Sie den Randeinstellungen einige abgerundete Ecken hinzufügen. Dies wird dazu beitragen, das Modul in einen Kreis zu verwandeln.

• Abgerundete Ecke: 50vw alle vier Ecken
• Stile: Alle vier Seiten
• Breite: 2px
• Farbe: Schwarz #000000

Abschnitt 2 hinzufügen

Abstand

Fügen Sie nun einen weiteren regulären Abschnitt hinzu, öffnen Sie die Abschnittseinstellungen und ändern Sie die oberen und unteren Abstandswerte.

• Polsterung oben und unten: 300px

Zeile 2 hinzufügen

Spaltenstruktur

Fügen Sie eine Zeile mit einer nächsten Spalte hinzu.

Größe

Öffnen Sie die Zeileneinstellungen, gehen Sie zur Registerkarte Design und nehmen Sie einige Änderungen an den Größeneinstellungen vor.

• Breite: 1580px
• Maximale Breite
  • Desktop und Tablet: 90%
  • Telefon: 95%
• Zeilenausrichtung: Mitte

Blog-Modul hinzufügen

Inhalt

Das einzige Modul, das wir in diesem Abschnitt/dieser Zeile benötigen, ist ein Blog-Modul. Stellen Sie sicher, dass Sie die Option "Beiträge für aktuelle Seite" aktivieren. Dadurch wird sichergestellt, dass nur Beiträge des jeweiligen Autors angezeigt werden.

• Beiträge für aktuelle Seite: Ja

Elemente

Im Abschnitt "Elemente" aktivieren wir die Anzeige der folgenden Elemente in unserem Design:

• Ausgewähltes Bild
• Autor
• Kategorien
• Auszug
• Seitennummerierung

Layout

Wechseln Sie als nächstes zur Registerkarte Design und ändern Sie das Layout.

• Layout: Gitter

Titeltext

Dann formatieren Sie den Titeltext entsprechend:

• Überschriftsebene: H2
• Schriftart: Krona One
• Stil: TT
• Farbe: Schwarz #000000
• Größe
  • Desktop: 26px
  • Tablet: 16px
  • Telefon: 18px
• Buchstabenabstand: 3px
• Linienhöhe: 1,3 m

Hauptteil

Wir ändern auch die Textkörpereinstellungen.

• Schriftart: Open Sans
• Gewicht: Leicht
• Farbe: Schwarz #000000
• Größe
  • Desktop: 16px
  • Tablet: 15px
  • Telefon: 14px
• Buchstabenabstand: 1px

Metatext

Dann nehmen wir einige Änderungen an den Metatext-Einstellungen vor.

• Schriftart: Open Sans
• Stil: TT
• Farbe: Schwarz #000000
• Buchstabenabstand: 2px

Größe

Fahren Sie fort, indem Sie die Größeneinstellungen des Moduls für verschiedene Bildschirmgrößen ändern.

• Breite
  • Desktop: automatisch
  • Tablette: 90%
  • Telefon: 80%

Abstand

Fügen Sie dann etwas obere Polsterung hinzu.

• Obere Polsterung
  • Desktop: 60px
  • Tablet & Telefon: 70px

Grenze

Wir ändern auch die Rahmeneinstellungen des Moduls.

• Rasterlayout-Rahmenstile: Linke Seite
• Breite: 1px
• Farbe: Schwarz #oooooo

Benutzerdefinierte CSS

Und wir vervollständigen das Design mit zwei Zeilen CSS-Code zum Titel und Hauptteil des Moduls!

• Titel: Auffüllen-unten: 50px;

padding-bottom: 50px;

• Körper: Polsterung-unten: 50px;

padding-bottom: 50px;

Vorschau

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

Desktop

Handy, Mobiltelefon

Das ist ein Wrap!

In diesem Tutorial haben wir mit Divis Theme Builder eine benutzerdefinierte Autorenseitenvorlage erstellt. Wir haben dynamische Inhalte mit den integrierten Optionen von Divi kombiniert, um ein minimales Autorenseitendesign zu erstellen. Denken Sie daran, dass alle Autoren einen Vor- und Nachnamen, eine Biografie des Autors und ein Profilfoto haben müssen. Wenn Sie die JSON-Datei heruntergeladen haben, können Sie sie in Ihren Divi Theme Builder-Hauptbereich importieren. Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen!