Springe zum Hauptinhalt

Divi Tutorial: Wie benutzt man das Divi Builder Personen Modul?

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 600.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Das Divi Person-Modul ist der beste Weg, um einen persönlichen Profilblock zu erstellen. Dies ist ein hervorragendes Modul, das Sie auf den Seiten "Über mich" oder in den Teammitgliedern verwenden können, in denen Sie eine Biografie von Personen erstellen möchten. In diesem Modul wurden Text-, Bild- und Social-Media-Links zu einem zusammenhängenden Modul zusammengefasst.

So konfigurieren Sie das Divi-Personenmodul

Bevor Sie Ihrer Seite ein Divi Person-Modul hinzufügen können, müssen Sie zunächst in Divi Builder springen. Sobald das Divi-Design auf Ihrer Website installiert ist, werden Sie eine Schaltfläche bemerken Verwenden Sie Divi Builder jedes Mal, wenn Sie eine neue Seite erstellen, über dem Publisher. Klicken Sie auf diese Schaltfläche, um Divi Builder zu aktivieren und auf alle Divi Builder-Module zuzugreifen. Klicken Sie dann auf die Schaltfläche Verwenden Sie Visual Builder um den Generator im visuellen Modus zu starten. Sie können auch auf die Schaltfläche klicken Verwenden Sie Visual Builder Wenn Sie Ihre Website im Vordergrund durchsuchen, wenn Sie mit Ihrem WordPress-Dashboard verbunden sind.

Divi Builder

Nachdem Sie Visual Builder aufgerufen haben, können Sie auf das graue Plus-Symbol klicken, um Ihrer Seite ein neues Modul hinzuzufügen. Neue Module können nur innerhalb der Zeilen hinzugefügt werden. Wenn Sie eine neue Seite beginnen, vergessen Sie nicht, Ihrer Seite zuerst eine Zeile hinzuzufügen. Wir haben großartige Tutorials zur Verwendung der Elemente von Linien und erhebliche Abschnitte von Divi.

Personenmodul divi.png

Suchen Sie das Personenmodul in der Liste der Module und klicken Sie darauf, um es Ihrer Seite hinzuzufügen. Die Liste der Module ist durchsuchbar, dh Sie können auch das Wort "Person" eingeben und dann auf "Enter" klicken, um das Personenmodul zu suchen und automatisch hinzuzufügen! Sobald das Modul hinzugefügt wurde, werden Sie von der Liste der Optionen des Moduls begrüßt. Diese Optionen sind in drei Hauptgruppen unterteilt: Inhalt , Konzeption et fortgeschritten .

Anwendungsbeispiel: Hinzufügen eines Abschnitts "Unser Team" zu einer Seite "Über uns"

Die Seite "Über uns" ist ein guter Ort, um Ihre Teammitglieder mithilfe des Personenmoduls vorzustellen. Dies fügt eine persönliche Note hinzu und kann dazu beitragen, Vertrauen bei neuen Kunden aufzubauen.

In diesem Beispiel zeige ich Ihnen, wie Sie mit dem Modul "Person" einer Seite über ein kleines Unternehmen den Abschnitt "Unser Team" hinzufügen. Ich werde ein Layout für drei Personen verwenden, drei Spalten, die den Abschnitt kompakter halten und zum Gesamtdesign der Seite passen.

Seite über uns.jpg

Fügen Sie in Visual Builder einen neuen Standardabschnitt mit einer dreispaltigen Zeile ein (1 / 3 1 / 3 1 / 3). Fügen Sie dann der ersten Spalte ein Personenmodul hinzu.

Modulperson wordpress divi.png

Aktualisieren Sie die Einstellungen des Personenmoduls wie folgt:

Inhaltsoptionen

Name: [Name der Person eingeben] Position: [Nebenstelle der Person eingeben] Geben Sie URLs für Social Media-Profile ein
Beschreibung: [Geben Sie eine kurze Biografie ein] Bild: [Geben Sie ein Bild ein 600 x 600]

Design-Optionen

Farbsymbol: # fcbf00
Farbe des Hover-Symbols: # e0a831
Header-Schriftart: Roboto, fett, nutzen Sie
Schriftgröße des Headers: 30px
Kopfzeilentextfarbe: # 505050
Leerzeichen für Kopfzeile: 1px
Höhe der Kopfzeile: 1.5em
Körperschriftgröße: 18px
Größe der Körperlinie: 1.4em
Benutzerdefinierte Polsterung: 15px nach oben, 15px nach rechts, 15px nach unten, 15px nach links

Erweiterte Optionen (benutzerdefiniertes CSS)

Hauptelement:
-webkit-box-shadow: 01px5px rgba (0, 0, 0, 0.2)
-moz-box-shadow: 01px5px rgba (0, 0, 0, 0,2);
Box-Schatten: 0 1px 5px rgba (0, 0, 0, 0,2);

Profil ändern person divi.png

Einstellungen speichern

Duplizieren Sie nun das soeben erstellte Personenmodul zweimal und ziehen Sie die duplizierten Module in die zweite und dritte Spalte der Zeile. Da das Design für jedes der doppelten "Person" -Module verschoben wurde, müssen Sie lediglich den Inhalt mit Bild, Titel, Standort, URLs für soziale Medien und Beschreibung aktualisieren. der Person.

Das ist alles!

Ergebnismodul Person divi.jpg

Beginnen Sie mit der Bewerbung Ihres Blogs

Laden Sie Dutzende von Logos, Bannern, Website-Vorlagen und vielen anderen Marketing-Tools herunter, um Ihren WordPress-Blog zu vermarkten. [Empfohlen]

Inhaltsoptionen für Personen

In der Registerkarte Inhalt finden Sie alle Inhaltselemente des Moduls, wie z. B. Text, Bilder und Symbole. All das kontrolliert was erscheint in Ihrem Modul immer auf dieser Registerkarte.

Inhaltsoption divi.png

Vorname

Dies ist der Name der Person, die Sie präsentieren. Der Name wird oben im Modul in größerem Text angezeigt.

Position

Die Position wird unter dem Namen in einem kleineren Text angezeigt. Dies wird häufig verwendet, um auf die berufliche Position einer Person innerhalb eines Geschäftsteams hinzuweisen. Zum Beispiel Nick Roach, "Graphic Designer".

Facebook-Profil-URL

Geben Sie die URL auf Ihrer Facebook-Seite ein oder lassen Sie das Feld leer, um das Facebook-Symbol zu deaktivieren.

Twitter-Profil-URL

Geben Sie die URL auf Ihrer Twitter-Seite ein oder lassen Sie sie leer, um das Twitter-Symbol zu deaktivieren.

Google+ Profil-URL

Geben Sie die URL auf Ihrer Google+ Seite ein oder lassen Sie sie leer, um das Google+ Symbol zu deaktivieren.

LinkedIn-Profil-URL

Geben Sie die URL auf Ihrer LinkedIn-Seite ein oder lassen Sie sie leer, um das LinkedIn-Symbol zu deaktivieren.

Beschreibung

Tragen Sie hier den Inhalt des Haupttextes für Ihr Modul ein.

Bild-URL

Hier können Sie ein Foto herunterladen, um es in der Biografie zu verwenden.

Hintergrundfarbe

Legen Sie eine benutzerdefinierte Hintergrundfarbe für Ihr Modul fest oder lassen Sie das Feld leer, um die Standardfarbe zu verwenden.

Hintergrundbild

Wenn festgelegt, wird dieses Bild als Hintergrund für dieses Modul verwendet. Um ein Hintergrundbild zu löschen, löschen Sie einfach die URL aus dem Einstellungsfeld. Die Hintergrundbilder werden über den Hintergrundfarben angezeigt. Dies bedeutet, dass die Hintergrundfarbe nicht sichtbar ist, wenn ein Hintergrundbild angewendet wird.

Administratorkennzeichnung

Dadurch wird die Modulbezeichnung im Konstruktor zur einfachen Identifizierung geändert. Wenn Sie die WireFrame-Ansicht in Visual Builder verwenden, werden diese Bezeichnungen im Modulblock der Divi Builder-Benutzeroberfläche angezeigt.

Entwurfsoptionen für das Modul Person

Auf der Registerkarte Design finden Sie alle Stiloptionen des Moduls, z. B. Schriftarten, Farben, Größen und Abstände. Auf dieser Registerkarte können Sie das Erscheinungsbild Ihres Moduls ändern. Jedes Divi-Modul verfügt über eine lange Liste von Konstruktionsparametern, mit denen Sie alles ändern können.

Parameter Design Modul Person divi.png

Farbe des Icons

Diese Option steuert die Farbe der Social Media-Symbole, die im Profil jeder Person angezeigt werden. Standardmäßig sind diese Symbole grau. Mit dieser Einstellung können Sie die Farbe ändern.

Icon Farbe auf der Überführung

Sie können auch die Schwebefarbe von Social Media-Symbolen ändern. Wählen Sie die gewünschte Farbe mit dem Farbwähler in dieser Einstellung.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Textfarbe

Hier können Sie den Wert Ihres Textes auswählen. Wenn Sie auf einem dunklen Hintergrund arbeiten, sollte Ihr Text aktiviert sein. Wenn Sie mit einem klaren Hintergrund arbeiten, sollte Ihr Text dunkel sein.

Header-Schriftart

Sie können die Schriftart Ihres Kopfzeilentexts ändern, indem Sie die gewünschte Schriftart aus dem Dropdown-Menü auswählen. Divi wird mit Dutzenden großer Schriftarten geliefert, die von Google Fonts unterstützt werden. Standardmäßig verwendet Divi die Open Sans-Schriftart für den gesamten Text auf Ihrer Seite. Sie können den Stil Ihres Textes auch anpassen, indem Sie die Optionen Fett, Kursiv, Großbuchstaben und Unterstrichen verwenden.

Größe der Kopfzeile

Hier können Sie die Größe Ihres Kopfzeilentextes anpassen. Sie können den Bereichsschieberegler ziehen, um den Text zu vergrößern oder zu verkleinern, oder den Wert der gewünschten Textgröße direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Farbe des Kopftextes

Standardmäßig werden alle Divi-Textfarben in Weiß oder Dunkelgrau angezeigt. Wenn Sie die Farbe Ihres Kopfzeilentexts ändern möchten, wählen Sie mit dieser Option die gewünschte Farbe in der Farbauswahl.

Abstand der Briefköpfe

Der Abstand der Buchstaben wirkt sich auf den Abstand zwischen den Buchstaben aus. Wenn Sie den Abstand zwischen den einzelnen Buchstaben in Ihrem Kopfzeilentext vergrößern möchten, verwenden Sie den Bereichsregler, um den Abstand anzupassen, oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Regler ein. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Höhe der Kopfzeile

Die Zeilenhöhe wirkt sich auf den Abstand zwischen den einzelnen Zeilen des Kopfzeilentexts aus. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, verwenden Sie den Bereichsregler, um den Abstand anzupassen, oder geben Sie den gewünschten Abstand in die Zeile ein. Eingabefeld rechts vom Cursor. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Körper Schriftart

Sie können die Schriftart Ihres Körpers ändern, indem Sie die gewünschte Schriftart aus dem Dropdown-Menü auswählen. Divi wird mit Dutzenden großer Schriftarten geliefert, die von Google Fonts unterstützt werden. Standardmäßig verwendet Divi die Open Sans-Schriftart für den gesamten Text auf Ihrer Seite. Sie können den Stil Ihres Textes auch anpassen, indem Sie die Optionen Fett, Kursiv, Großbuchstaben und Unterstrichen verwenden.

Körper Schriftgröße

Hier können Sie die Größe Ihres Körpertexts anpassen. Sie können den Bereichsschieberegler ziehen, um den Text zu vergrößern oder zu verkleinern, oder den Wert der gewünschten Textgröße direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Textfarbe des Körpers

Standardmäßig werden alle Divi-Textfarben in Weiß oder Dunkelgrau angezeigt. Wenn Sie die Farbe Ihres Texts ändern möchten, wählen Sie mit dieser Option die gewünschte Farbe in der Farbauswahl.

Abstand der Körperbuchstaben

Der Abstand der Buchstaben wirkt sich auf den Abstand zwischen den Buchstaben aus. Wenn Sie den Abstand zwischen den einzelnen Buchstaben in Ihrem Text vergrößern möchten, verwenden Sie den Bereichsregler, um den Abstand anzupassen, oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Regler ein. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Höhe der Körperlinie

Die Zeilenhöhe wirkt sich auf den Abstand zwischen den einzelnen Textzeilen in Ihrem Körper aus. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, verwenden Sie den Bereichsregler, um den Abstand anzupassen, oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld ein befindet sich rechts vom Cursor. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Benutze den Rand

Wenn Sie diese Option aktivieren, wird Ihr Modul mit einem Rahmen versehen. Dieser Rahmen kann mit den folgenden bedingten Parametern angepasst werden.

Farbe der Grenze

Diese Option wirkt sich auf die Farbe Ihres Rahmens aus. Wählen Sie im Farbwähler eine benutzerdefinierte Farbe aus, um sie auf Ihren Rand anzuwenden.

Breite der Grenze

Standardmäßig haben die Ränder eine Breite von 1-Pixeln. Sie können diesen Wert erhöhen, indem Sie den Bereichsregler ziehen oder einen benutzerdefinierten Wert in das Eingabefeld rechts neben dem Regler eingeben. Benutzerdefinierte Maßeinheiten werden unterstützt, dh Sie können die Standardeinheit von "px" in eine andere Einheit ändern, z. B. em, vh, vw usw.

Grenzstil

Rahmen unterstützen acht verschiedene Stile: Solide, Gepunktete, Gepunktete, Doppelte, Groove, Crest, Inlay und Start. Wählen Sie den gewünschten Stil aus dem Dropdown-Menü aus, um ihn auf Ihren Rand anzuwenden.

Benutzerdefinierter Rand

Der Rand ist der Abstand, der an der Außenseite Ihres Moduls zwischen dem Modul und dem nächsten Element darüber, darunter oder links und rechts davon eingefügt wird. Sie können einer der vier Seiten des Moduls benutzerdefinierte Randwerte hinzufügen. Entfernen Sie den hinzugefügten Wert aus dem Eingabefeld, um den benutzerdefinierten Rand zu entfernen. Standardmäßig werden diese Werte in Pixel gemessen. Sie können jedoch benutzerdefinierte Maßeinheiten in die Eingabefelder eingeben.

Benutzerdefinierte Polsterung

Füllung ist der in Ihrem Modul hinzugefügte Raum zwischen der Kante des Moduls und seinen internen Elementen. Sie können einer der vier Seiten des Moduls benutzerdefinierte Füllwerte hinzufügen. Entfernen Sie den hinzugefügten Wert aus dem Eingabefeld, um den benutzerdefinierten Rand zu entfernen. Standardmäßig werden diese Werte in Pixel gemessen. Sie können jedoch benutzerdefinierte Maßeinheiten in die Eingabefelder eingeben.

Erweiterte Optionen des Personenmoduls

Auf der Registerkarte Erweitert finden Sie Optionen, die für erfahrene Webdesigner hilfreich sein könnten, z. B. benutzerdefinierte CSS- und HTML-Attribute. Hier können Sie benutzerdefiniertes CSS auf eines der vielen Elemente des Moduls anwenden. Sie können dem Modul auch benutzerdefinierte Klassen und CSS-IDs zuweisen, mit denen Sie das Modul in der Datei style.css Ihres untergeordneten Themas anpassen können.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Optionsdesignmodul divi.png

CSS-ID

Geben Sie eine optionale CSS-ID ein, die für dieses Modul verwendet werden soll. Eine ID kann zum Erstellen eines benutzerdefinierten CSS-Stils oder zum Erstellen von Links zu bestimmten Abschnitten Ihrer Seite verwendet werden.

CSS-Klasse

Geben Sie die optionalen CSS-Klassen ein, die für dieses Modul verwendet werden sollen. Mit einer CSS-Klasse kann ein benutzerdefinierter CSS-Stil erstellt werden. Sie können mehrere Klassen hinzufügen, die durch ein Leerzeichen getrennt sind. Diese Klassen können in Ihrem untergeordneten Divi-Design oder in dem benutzerdefinierten CSS-Stylesheet verwendet werden, das Sie Ihrer Seite oder Website mithilfe von Divi-Designoptionen oder Divi Builder-Seiteneinstellungen hinzufügen.

Benutzerdefiniertes CSS

Benutzerdefiniertes CSS kann auch auf das Modul und eines der internen Elemente des Moduls angewendet werden. Im Abschnitt Benutzerdefiniertes CSS finden Sie ein Textfeld, in dem Sie jedem Element direkt benutzerdefinierte CSS-Stylesheets hinzufügen können. Die CSS-Einträge in diesen Parametern sind bereits in die Style-Tags eingeschlossen. Geben Sie einfach die durch Semikolon getrennten CSS-Regeln ein.

Animation

Standardmäßig werden Bilder animiert, wenn Sie auf der Seite nach unten scrollen. Hier können Sie die Richtung der Animation auswählen oder deaktivieren.

Sichtbarkeit

Mit dieser Option können Sie die Geräte steuern, auf denen Ihr Modul angezeigt wird. Sie können Ihr Modul auf Tablets, SmartPhones oder Desktop-Computern einzeln deaktivieren. Dies ist nützlich, wenn Sie verschiedene Module auf verschiedenen Geräten verwenden oder das mobile Design vereinfachen möchten, indem Sie bestimmte Elemente der Seite entfernen.

Andere Divi Tutorials

Dieser Artikel enthält Kommentare 2
  1. Guten Tag!
    Warum verschwindet das Feld "Position", wenn ich ein Projekt oder eine Publikation erstelle und das Modul "Person" verwende, wenn ich Projekte oder Publikationen mithilfe des Blogs oder des Moduls "Filterable Blog" anzeige?

    Wie mache ich das Feld "Personenposition" in einer Blog-Rasteransicht sichtbar?

    Thanks!

    1. Guten Abend und vielen Dank für das Warten.
      In der Regel führen Suchmodule keine Shortcodes aus. Daher generiert das Personenmodul (wie jedes andere Modul auch) einen Shortcode, der nur durch Vorschau des Artikels oder der Seite und nicht aus einem Modul, das eine Vorschau des Artikels oder der Seite bereitstellt, gerendert werden kann.

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
19 Aktien
Aktie10
tweet3
Registrieren6