Das Divi Person-Modul ist der beste Weg, um einen persönlichen Profilblock zu erstellen. Dies ist ein großartiges Add-On für About Me-Seiten oder solche mit Teammitgliedern, auf denen Sie eine Biografie einzelner Personen erstellen möchten. Dieses Modul kombinierte Text-, Bild- und Social-Media-Links in einem zusammenhängenden Modul.

So konfigurieren Sie das Divi-Personenmodul

Bevor Sie ein Divi Person-Modul zu Ihrer Seite hinzufügen können, müssen Sie zuerst zu Divi Builder wechseln. Einmal die Divi-Thema auf deinem installiert Website, werden Sie eine Schaltfläche bemerken Verwenden Sie Divi Builder über dem Post-Editor, wenn Sie eine neue Seite erstellen. 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 durchsuchen Website im Vordergrund, wenn Sie in Ihr WordPress-Dashboard eingeloggt sind.

Nachdem Sie Visual Builder eingegeben haben, können Sie auf die graue Plus-Schaltfläche klicken, um Ihrer Seite ein neues Modul hinzuzufügen. Neue Module können nur innerhalb von Zeilen hinzugefügt werden. Wenn Sie eine neue Seite starten, denken Sie daran, Ihrer Seite zuerst eine Zeile hinzuzufügen. Wir haben großartige Tutorials zur Verwendung der Elemente von Linien und Abschnitte von Divi.

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. Sie können also auch das Wort "Person" eingeben und dann auf die Eingabetaste klicken, um das Personenmodul automatisch zu finden und hinzuzufügen! Sobald das Modul hinzugefügt wurde, werden Sie von der Moduloptionsliste begrüßt. Diese Optionen sind in drei Hauptgruppen unterteilt: Inhalt , Technologie et fortgeschritten .

Beispiel für einen Anwendungsfall: 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. Es 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 einen Abschnitt "Unser Team" hinzufügen. Ich werde ein dreiteiliges Layout für drei Personen verwenden, das den Abschnitt kompakter hält und zum Gesamtdesign der Seite passt.

Fügen Sie mit Visual Builder einen neuen Standardabschnitt mit einer Reihe von drei Spalten ein (1/3 1/3 1/3). Fügen Sie dann der ersten Spalte ein Personenmodul hinzu.

Aktualisieren Sie die Einstellungen des Personenmoduls wie folgt:

Inhaltsoptionen

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

Design-Optionen

Farbsymbol: # fcbf00
Farbe des Hover-Symbols: # e0a831
Header-Schriftart: Roboto, fett, Hebelwirkung
Schriftgröße der Kopfzeile: 30px
Kopfzeilentextfarbe: # 505050
Buchstabenkopfabstand: 1px
Kopfzeilenhöhe: 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);

Einstellungen speichern

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

Das ist es!

Inhaltsoptionen für Personen

Auf der Registerkarte Inhalt finden Sie den gesamten Inhalt des Moduls, z. B. Text, Bilder und Symbole. All das steuert was erscheint in Ihrem Modul immer auf dieser Registerkarte.

Vorname

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

Position

Die Position wird unter dem Namen in kleinerem Text angezeigt. Dies wird häufig verwendet, um sich auf die berufliche Position einer Person innerhalb eines Unternehmensteams zu beziehen. Zum Beispiel Nick Roach, "Graphic Designer".

Facebook-Profil-URL

Geben Sie die URL auf Ihrer Facebook-Seite ein oder lassen Sie sie 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

Definieren Sie eine benutzerdefinierte Hintergrundfarbe für Ihr Modul 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 entfernen, entfernen Sie einfach die URL aus dem Einstellungsfeld. Hintergrundbilder werden über den Hintergrundfarben angezeigt. Dies bedeutet, dass die Hintergrundfarbe beim Anwenden eines Hintergrundbilds nicht sichtbar ist.

Administratorkennzeichnung

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

Entwurfsoptionen für das Modul Person

Auf der Registerkarte Design finden Sie alle Stiloptionen für das Modul, z. B. Schriftarten, Farben, Größe und Abstand. Auf dieser Registerkarte können Sie das Erscheinungsbild Ihres Moduls ändern. Jedes Divi-Modul verfügt über eine lange Liste von Designeinstellungen, mit denen Sie Änderungen vornehmen können.

Symbolfarbe

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

Symbolfarbe beim Schweben

Sie können auch die Hover-Farbe für Social Media-Symbole ändern. Wählen Sie die gewünschte Farbe mit dem Farbwähler in dieser Einstellung.

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 hellem Hintergrund arbeiten, sollte Ihr Text dunkel sein.

Header-Schriftart

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

Header-Schriftgröße

Hier können Sie die Größe Ihres Kopfzeilentextes anpassen. Sie können den Bereichsregler ziehen, um die Größe Ihres Texts zu erhöhen oder zu verringern, oder den gewünschten Textgrößenwert direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Dies bedeutet, dass Sie je nach Größenwert "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Kopfzeilentextfarbe

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

Kopfbuchstabenabstand

Der Buchstabenabstand beeinflusst den Abstand zwischen den einzelnen Buchstaben. Wenn Sie den Abstand zwischen den einzelnen Buchstaben in Ihrem Kopfzeilentext vergrößern möchten, passen Sie den Abstand mit dem Bereichsregler an oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Schieberegler ein. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Dies bedeutet, dass Sie je nach Größenwert "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Kopfzeilenhöhe

Die Zeilenhöhe wirkt sich auf den Abstand zwischen den einzelnen Zeilen Ihres Kopfzeilentextes aus. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, können Sie den Abstand mithilfe des Bereichsreglers anpassen oder die gewünschte Abstandsgröße in das Feld eingeben Eingabefeld rechts vom Cursor. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Dies bedeutet, dass Sie je nach Größenwert "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Körper Schriftart

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

Körper Schriftgröße

Hier können Sie Ihre Körpertextgröße anpassen. Sie können den Bereichsregler ziehen, um die Größe Ihres Texts zu erhöhen oder zu verringern, oder den gewünschten Textgrößenwert direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Dies bedeutet, dass Sie je nach Größenwert "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Textfarbe des Körpers

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

Abstand der Körperbuchstaben

Der Buchstabenabstand beeinflusst den Abstand zwischen den einzelnen Buchstaben. Wenn Sie den Abstand zwischen den einzelnen Buchstaben in Ihrem Text vergrößern möchten, passen Sie den Abstand mit dem Bereichsregler an oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Schieberegler ein. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Dies bedeutet, dass Sie je nach Größenwert "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, können Sie den Abstand mit dem Bereichsregler anpassen oder die gewünschte Abstandsgröße in das Eingabefeld eingeben befindet sich rechts vom Cursor. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Sie können also je nach Größenwert "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Benutze den Rand

Wenn Sie diese Option aktivieren, wird ein Rand um Ihr Modul gelegt. Dieser Rahmen kann mithilfe der folgenden bedingten Parameter 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 sind die Ränder 1 Pixel breit. Sie können diesen Wert erhöhen, indem Sie den Bereichsregler ziehen oder einen benutzerdefinierten Wert in das Eingabefeld rechts neben dem Schieberegler eingeben. Benutzerdefinierte Maßeinheiten werden unterstützt. Dies bedeutet, dass Sie die Standardeinheit von "px" in etwas anderes wie em, vh, vw usw. ändern können.

Grenzstil

Rahmen unterstützen acht verschiedene Stile: fest, gepunktet, gepunktet, doppelt, Rille, Grat, Überlagerung und Start. Wählen Sie den gewünschten Stil aus dem Dropdown-Menü aus, um ihn auf Ihren Rahmen 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 hinzugefügt wird. Sie können jeder der vier Seiten des Moduls benutzerdefinierte Randwerte hinzufügen. Entfernen Sie den Mehrwert 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 Raum, der innerhalb Ihres Moduls zwischen der Kante des Moduls und seinen internen Elementen hinzugefügt wird. Sie können jeder der vier Seiten des Moduls benutzerdefinierte Füllwerte hinzufügen. Entfernen Sie den Mehrwert 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 erfahrene Webdesigner möglicherweise als nützlich erachten, z. B. benutzerdefinierte CSS- und HTML-Attribute. Hier können Sie benutzerdefiniertes CSS auf jedes der vielen Elemente des Moduls anwenden. Sie können dem Modul auch benutzerdefinierte CSS-Klassen und -IDs zuweisen, mit denen Sie das Modul in der style.css-Datei Ihres untergeordneten Themas anpassen können.

CSS-ID

Geben Sie eine optionale CSS-ID ein, die für dieses Modul verwendet werden soll. Eine ID kann verwendet werden, um einen benutzerdefinierten CSS-Stil zu erstellen oder um auf bestimmte Abschnitte Ihrer Seite zu verlinken.

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, getrennt durch ein Leerzeichen. Diese Klassen können in Ihrem Divi-Child-Theme oder im benutzerdefinierten CSS-Stylesheet verwendet werden, das Sie Ihrer Seite oder Website hinzufügen. Website Verwenden von Divi-Designoptionen oder Divi Builder-Seiteneinstellungen.

Benutzerdefiniertes CSS

Benutzerdefiniertes CSS kann auch auf das Modul und alle Interna des Moduls angewendet werden. Im Abschnitt Benutzerdefiniertes CSS finden Sie ein Textfeld, in dem Sie jedem Element benutzerdefinierte CSS-Stylesheets direkt hinzufügen können. CSS-Einträge in diesen Einstellungen sind bereits in Stil-Tags eingeschlossen. Geben Sie einfach die durch Semikolons getrennten CSS-Regeln ein.

Animation

Standardmäßig werden Bilder beim Scrollen der Seite animiert. 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 Desktops einzeln deaktivieren. Dies ist nützlich, wenn Sie verschiedene Mods auf verschiedenen Geräten verwenden möchten oder wenn Sie das mobile Design vereinfachen möchten, indem Sie bestimmte Elemente von der Seite entfernen.

[vc_row center_row=“yes“][vc_column width=“1/2″][vcex_button target=“blank“ layout=“expanded“ align=“center“ font_family=“Raleway“ font_weight=“700″ style=“flat“ custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DIVI THEMA HERUNTERLADEN [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=“https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials“ target=“blank“ layout=“expanded“ align=“center“ font_family = „Raleway“ font_weight=“700″ style=“flat“ custom_background=“#c4226e“ custom_hover_background=“#8d184f“ custom_color=“#ffffff“ custom_hover_color=“#ffffff“ icon_right=“fa fa-download“]LADEN SIE HERUNTER TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Andere Divi Tutorials

• 5 Websites, die Divi Restaurant Thema verwenden
• Wie man Text auf einem Divi WooCommerce Produkt hinzufügt
• So ändern Sie die Menüfarbe zwischen Divi-Seiten
• So personalisieren Sie die Gitter eines Blogs mit Divi
• Wie die Rolle Divi-Editor auf Wordpress verwenden
• So erstellen Sie einen Divi-Schieberegler im Vollbildmodus
• So ändern Sie die Farbe von Menüs zwischen Divi-Seiten
• Funktionen, die Sie wahrscheinlich nicht über Divi kennen
• Wie man Divi Builder auf WordPress benutzt
• Wie benutzt man das Divi Video-Scroll-Modul?
• Wie benutze ich das Divi Builder Flip Modul?
• So fügen Sie ein Testimonial-Modul in Divi Builder hinzu
• Wie benutzt man das Divi-Textmodul?
• So erstellen Sie einen Schieberegler auf Divi
• So bearbeiten Sie eine Divi-Benutzerrolle
• Wie benutzt man das Divi Social Media Modul?
• So verwenden Sie das Shop-Modul zum Thema WordPress Divi
• So verwenden Sie das Divi-Sidebar-Modul
• Wie benutzt man das Divi Preistabellen Modul?
• Wie verwende ich das Titelmodul von Divi-Publikationen?
• So fügen Sie ein Video-Modul von Divi hinzu
• Wie man das Artikelnavigationsmodul benutzt
• Wie benutzt man das Divi-Suchmodul?
• So verwenden Sie das Divi-Wallet-Modul
• Wie man das Personenmodul im Divi Builder benutzt
• Wie man das Geldbörsenmodul mit Divi-Filter verwendet
• So verwenden Sie das Schiebermodul mit voller Breite
• Wie benutzt man das Divi Builder Image Modul?
• So verwenden Sie das vollständige Navigationsmodul von Divi Builder
• So verwenden Sie das Bildergalerie-Modul
• So verwenden Sie das Divi Builder Kartenmodul mit voller Breite
• So verwenden Sie das Divi Full Width Portfolio-Modul
• So verwenden Sie das Divi-Header-Modul in voller Breite
• Wie benutze ich das Divi Counter Modul?
• So verwenden Sie den Artikel-Schieberegler in Divi Builder
• Wie benutze ich das Divi Email Optin Modul?