5 Möglichkeiten, mit Divis Personenmodul kreativ zu werden

Alle neuen Divi-Feature-Updates, die in den letzten Monaten durchgeführt wurden, haben unbestreitbar die Palette der Möglichkeiten erweitert, die Sie bei der Gestaltung von Websites haben. Für dieses Tutorial haben wir 5 verschiedene Möglichkeiten entwickelt, um mit dem Divi Person Module kreativ zu werden, ohne zusätzlichen CSS-Code zu verwenden. Das Hauptziel dieses Beitrags ist es, Sie zu inspirieren, bevor Sie mit Ihrem nächsten Divi-Projekt beginnen. Das Personenmodul wird oft verwendet, um mehr Informationen über Teammitglieder zu teilen oder Erfahrungsberichte zu teilen. Mit diesen 5 verschiedenen Beispielen sind Sie bereit, Ihren Seiten einen Designschub zu verleihen.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis auf verschiedenen Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abonnieren Sie unseren Youtube-Kanal

Beispiel 1 neu erstellen

Neuen Abschnitt hinzufügen

Beginnen wir mit der Erstellung des ersten Beispiels! Öffnen Sie eine neue oder vorhandene Seite und fügen Sie einen regulären Abschnitt hinzu.

Neue Zeile hinzufügen

Spaltenstruktur

Fügen Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzu, ohne die Abschnittseinstellungen zu ändern:

Größe

Öffnen Sie die Zeileneinstellungen und nehmen Sie einige Änderungen an den Größeneinstellungen vor.

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Abstand

Öffnen Sie als Nächstes die Abstandseinstellungen und fügen Sie einige benutzerdefinierte Abstandswerte hinzu.

• Obere Polsterung: 100px (Desktop), 80px (Tablet & Telefon)
• Untere Polsterung: 100px (Desktop), 80px (Tablet & Telefon)
• Linke Polsterung: 100px (Desktop), 30px (Tablet), 25px (Telefon)
• Rechte Polsterung: 100px (Desktop), 30px (Tablet), 25px (Telefon)

Bildmodul zu Spalte 1 hinzufügen

Bild hochladen

Zeit, Module hinzuzufügen! Fügen Sie der ersten Spalte ein Bildmodul hinzu und laden Sie ein kariertes Bild Ihrer Wahl hoch.

Box Schatten

Fahren Sie fort, indem Sie zur Registerkarte Design gehen und einen subtilen Boxschatten anwenden.

Filter

Sie können auch mit den Filtereinstellungen herumspielen, um Ihrem Bild einen Effekt hinzuzufügen.

• Sättigung: 40%
• Kontrast: 130%

Personenmodul Nr. 1 zu Spalte 2 hinzufügen

Inhalt hinzufügen

Das nächste Modul, das wir brauchen, ist ein Personenmodul. Fahren Sie fort und fügen Sie einen in die zweite Spalte ein und füllen Sie die Felder für Name und Position aus.

Hintergrund mit Farbverlauf

Fügen Sie diesem Modul einen Hintergrund mit Farbverlauf hinzu.

• Farbe 1: rgba(11,15,229,0.41)
• Farbe 2: rgba(45,237,255,0,87)
• Steigungsrichtung: 150deg

Einstellungen für Titeltext

Ändern Sie dann die Einstellungen für den Titeltext auf der Registerkarte Design.

• Titelschriftart: Baloo
• Titeltextfarbe: #ffffff
• Titeltextgröße: 20px

Textkörpereinstellungen

Ändern Sie auch die Textkörpereinstellungen.

• Schriftgewicht des Körpers: Leicht
• Textkörperfarbe: #ffffff

Abstand

Fügen Sie in den Abstandseinstellungen einige benutzerdefinierte Werte für Rand und Abstand hinzu.

• Linker Rand: -4vw (Desktop & Tablet), 0vw (Telefon)
• Rechter Rand: 8vw (Desktop & Tablet), 0vw (Telefon)
• Obere Polsterung: 25px
• Untere Polsterung: 25px
• Linke Polsterung: 20px

Grenze

Wir fügen dem Modul auch einen dezenten linken Rand hinzu.

• Breite des linken Rands: 3px
• Farbe des linken Rands: #ffffff

Box Schatten

Zusammen mit einem Kastenschatten, der Ihnen hilft, Tiefe auf der Seite zu erzeugen.

• Stärke der Box-Schattenunschärfe: 80px

Personenmodul #2 zu Spalte 2 hinzufügen

Inhalt hinzufügen

Fügen Sie ein weiteres Personenmodul direkt unter dem vorherigen hinzu. Wir verwenden dieses Modul, um die Social-Media-Profile und die Beschreibung anzuzeigen.

Symboleinstellungen

Gehen Sie zur Registerkarte Design und ändern Sie die Symbolfarbe in den Symboleinstellungen.

• Symbolfarbe: #50e8fe

Abstand

Öffnen Sie zu guter Letzt die Abstandseinstellungen und fügen Sie einige benutzerdefinierte Abstandswerte hinzu.

• Obere Polsterung: 30px
• Linke Polsterung: 30px (Desktop & Tablet), 0px (Telefon)

Beispiel 2 neu erstellen

Neuen Abschnitt hinzufügen

Auf zum nächsten Beispiel! Fügen Sie Ihrer Seite einen neuen Abschnitt hinzu.

Neue Zeile hinzufügen

Spaltenstruktur

Fügen Sie diesem Abschnitt mithilfe der folgenden Spaltenstruktur eine neue Zeile hinzu.

Spalte 2 Hintergrundfarbe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und fügen Sie eine Hintergrundfarbe für Spalte 2 hinzu.

• Spalte 2 Hintergrundfarbe: #f4f4f4

Größe

Gehen Sie dann zur Registerkarte Design und nehmen Sie einige Änderungen an den Größeneinstellungen vor.

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja

Abstand

Fügen Sie auch einige benutzerdefinierte Abstandswerte in den Abstandseinstellungen hinzu.

• Obere Polsterung: 100px (Desktop), 80px (Tablet & Telefon)
• Untere Polsterung: 100px (Desktop), 80px (Tablet & Telefon)
• Linke Polsterung: 100px (Desktop), 30px (Tablet), 25px (Telefon)
• Rechte Polsterung: 100px (Desktop), 30px (Tablet), 25px (Telefon)

Bildmodul zu Spalte 1 hinzufügen

Bild hochladen

Zeit, Module hinzuzufügen! Das erste Modul, das wir benötigen, ist ein Bildmodul in Spalte 1. Laden Sie ein Bild Ihrer Wahl hoch.

Box Schatten

Fügen Sie dann dem Bild einen Kastenschatten hinzu.

• Stärke der Box-Schattenunschärfe: 160px

Filter

Sie können auch mit den Filtereinstellungen herumspielen.

• Sättigung: 40%
• Kontrast: 130%

Personenmodul Nr. 1 zu Spalte 2 hinzufügen

Inhalt hinzufügen

In der zweiten Spalte ist das erste Modul, das wir benötigen, ein Personenmodul. Füllen Sie die Felder Name und Position aus.

Hintergrundfarbe

Gehen Sie zu den Hintergrundeinstellungen und fügen Sie eine transparente Hintergrundfarbe hinzu.

• Hintergrundfarbe: rgba(255,255,255,0.7)

Texteinstellungen

Ändern Sie dann die Textausrichtung in den Texteinstellungen.

• Textausrichtung: Mitte

Einstellungen für Titeltext

Ändern Sie auch die Einstellungen für den Titeltext.

• Titelschriftart: Abril Fatface
• Titeltextfarbe: #000000
• Titeltextgröße: 40px

Textkörpereinstellungen

Zusammen mit den Textkörpereinstellungen.

• Schriftgewicht des Körpers: Leicht
• Textkörperfarbe: #000000
• Körpertextgröße: 15px

Abstand

Wir erstellen eine Überlappung, indem wir einen negativen linken Rand in den Abstandseinstellungen verwenden.

• Linker Rand: -21,64 vw (Desktop), -46.1 vw (Tablet), 0 vw (Telefon)
• Obere Polsterung: 30px
• Untere Polsterung: 30px

Box Schatten

Und wir wenden auch einen subtilen Kastenschatten an.

• Stärke der Box-Schattenunschärfe: 80px

Personenmodul #2 zu Spalte 2 hinzufügen

Inhalt hinzufügen

Das zweite Modul, das wir in Spalte 2 benötigen, ist ein weiteres Personenmodul. Hier fügen wir die Social-Media-Links und die Beschreibung hinzu.

Symboleinstellungen

Fahren Sie fort, indem Sie zur Registerkarte Design gehen und die Symbolfarbe in den Symboleinstellungen ändern.

• Symbolfarbe: #000000

Abstand

Fügen Sie auch einige benutzerdefinierte Rand- und Abstandswerte hinzu.

• Oberer Rand: 3vw
• Obere Polsterung: 30px
• Untere Polsterung: 30px
• Linke Polsterung: 30px
• Rechte Polsterung: 30px

Beispiel 3 neu erstellen

Neuen Abschnitt hinzufügen

Auf zum dritten Beispiel! Fügen Sie Ihrer Seite einen neuen Abschnitt hinzu.

Neue Zeile hinzufügen

Spaltenstruktur

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

Größe

Öffnen Sie die Zeileneinstellungen und ändern Sie die Größeneinstellungen.

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja

Abstand

Fügen Sie auch einige benutzerdefinierte Füllwerte hinzu.

• Obere Polsterung: 100px (Desktop), 80px (Tablet & Telefon)
• Untere Polsterung: 100px (Desktop), 80px (Tablet & Telefon)
• Linke Polsterung: 100px (Desktop), 30px (Tablet), 25px (Telefon)
• Rechte Polsterung: 100px (Desktop), 30px (Tablet), 25px (Telefon)

Personenmodul Nr. 1 zu Spalte 1 hinzufügen

Inhalt hinzufügen

Zeit, Module hinzuzufügen! Fügen Sie das erste Personenmodul zu Spalte 1 hinzu und füllen Sie die Felder Name und Position aus.

Hintergrundfarbe

Fügen Sie dann dem Modul eine Hintergrundfarbe hinzu.

• Hintergrundfarbe: #ffffff

Einstellungen für Titeltext

Ändern Sie auch die Einstellungen für den Titeltext.

• Schriftstärke des Titels: Ultra Bold
• Titeltextfarbe: #000000
• Titeltextgröße: 40px
• Abstand der Titelbuchstaben: -4px

Textkörpereinstellungen

Machen Sie dasselbe für die Textkörpereinstellungen.

• Schriftgewicht des Körpers: Leicht
• Textkörperfarbe: #000000
• Körpertextgröße: 15px

Abstand

Fahren Sie fort, indem Sie zu den Abstandseinstellungen gehen und einige benutzerdefinierte Werte für Rand und Abstand hinzufügen.

• Oberer Rand: 40 Pixel (Desktop), 0 Pixel (Tablet und Telefon)
• Obere Polsterung: 30px
• Untere Polsterung: 30px
• Linke Polsterung: 30px
• Rechte Polsterung: 30px

Grenze

Fügen Sie auch in den Rahmeneinstellungen '20px' zur oberen linken Ecke hinzu.

Box Schatten

Und geben Sie dem Modul einen bunten Kastenschatten.

• Stärke der Box-Schattenunschärfe: 140px
• Schattenfarbe: rgba(31,15,255,0.66)

Personenmodul #2 zu Spalte 1 hinzufügen

Inhalt hinzufügen

Auf zum Zweitpersonenmodul in Spalte 1! Verwenden Sie dieses Modul, um die Social-Media-Links und die Beschreibung anzuzeigen.

Hintergrundfarbe

Gehen Sie dann zu den Hintergrundeinstellungen und fügen Sie eine weiße Hintergrundfarbe hinzu.

• Hintergrundfarbe: #ffffff

Symboleinstellungen

Ändern Sie auch die Symbolfarbe.

• Symbolfarbe: #000000

Abstand

Fahren Sie fort, indem Sie einige benutzerdefinierte Abstandswerte in den Abstandseinstellungen hinzufügen.

Grenze

Und fügen Sie '20px' in die untere linke Ecke ein.

Box Schatten

Zu guter Letzt fügen Sie den Boxschatten hinzu.

• Vertikale Position des Kastenschattens: 50px
• Stärke der Box-Schattenunschärfe: 140px
• Stärke der Box-Schattenausbreitung: -10px
• Schattenfarbe: rgba(2,219,219,0.26)

Bildmodul zu Spalte 2 hinzufügen

Bild hochladen

Das nächste Modul, das wir brauchen, ist ein Bildmodul. Fahren Sie fort und fügen Sie ein Bild in die zweite Spalte ein und laden Sie ein Bild Ihrer Wahl hoch.

Grenze

Geben Sie diesem Modul '20px' abgerundeter Ecken in den Rahmeneinstellungen.

Box Schatten

Und fügen Sie einen subtilen Kastenschatten hinzu.

Filter

Auch hier können Sie mit den Filtereinstellungen herumspielen, um das Erscheinungsbild des Bildes zu ändern.

Beispiel 4 neu erstellen

Neuen Abschnitt hinzufügen

Auf zum vierten Beispiel! Fügen Sie Ihrer Seite einen neuen Abschnitt hinzu.

Neue Zeile hinzufügen

Spaltenstruktur

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

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Größeneinstellungen.

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja

Abstand

Ändern Sie auch die Abstandseinstellungen.

• Obere Polsterung: 100px (Desktop), 80px (Tablet & Telefon)
• Untere Polsterung: 100px (Desktop), 80px (Tablet & Telefon)
• Linke Polsterung: 100px (Desktop), 30px (Tablet), 25px (Telefon)
• Rechte Polsterung: 100px (Desktop), 30px (Tablet), 25px (Telefon)

Personenmodul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Zeit, Module hinzuzufügen! Fügen Sie in Spalte 1 ein Personenmodul hinzu und füllen Sie alle Felder aus.

Symboleinstellungen

Gehen Sie dann zu den Symboleinstellungen und ändern Sie die Symbolfarbe.

• Symbolfarbe: #000000

Texteinstellungen

Ändern Sie auch die Textausrichtung in den Texteinstellungen.

• Textausrichtung: Mitte

Einstellungen für Titeltext

Öffnen Sie dann die Titeltexteinstellungen und nehmen Sie einige Änderungen vor.

• Schriftstärke des Titels: Ultra Bold
• Titeltextfarbe: #000000
• Titeltextgröße: 40px
• Abstand der Titelbuchstaben: -4px

Textkörpereinstellungen

Ändern Sie auch die Textkörpereinstellungen.

• Schriftgewicht des Körpers: Leicht
• Textkörperfarbe: #000000
• Körpertextgröße: 15px
• Körperlinienhöhe: 2em

Abstand

Und erstellen Sie eine Form mit benutzerdefinierten Abstandswerten in den Abstandseinstellungen.

• Obere Polsterung: 280px (Desktop), 200px (Tablet), 50px (Telefon)
• Untere Polsterung: 280px (Desktop), 200px (Tablet), 50px (Telefon)
• Linke Polsterung: 200px (Desktop), 150px (Tablet), 20px (Telefon)
• Rechte Polsterung: 200px (Desktop), 150px (Tablet), 20px (Telefon)

Grenze

Erstellen Sie einen Kreis, indem Sie in den Randeinstellungen '700px' zu jeder der Ecken hinzufügen und fügen Sie auch einen subtilen Rand hinzu.

• Randbreite: 1px
• Randfarbe: #333333

Bildmodul zu Spalte 2 hinzufügen

Bild hochladen

Fahren Sie fort, indem Sie ein Bildmodul zur zweiten Spalte hinzufügen und ein kariertes Bild Ihrer Wahl hochladen.

Abstand

Ändern Sie die Abstandseinstellungen dieses Moduls.

• Obere Marge: 7vw (Desktop), -15vw (Tablet), -5vw (Telefon)
• Linker Rand: -5vw (Desktop), 0vw (Tablet & Telefon)

Grenze

Erstellen Sie aus diesem Bild eine Kreisform, indem Sie an jeder Ecke des Moduls '1000px' hinzufügen.

Box Schatten

Fügen Sie auch einen subtilen Kastenschatten hinzu.

• Stärke der Box-Schattenunschärfe: 160px
• Stärke der Box-Schattenausbreitung: -10px

Filter

Und beenden Sie das Design, indem Sie mit den Filtereinstellungen des Bildes herumspielen.

• Sättigung: 0%
• Kontrast: 130%

Beispiel #5 neu erstellen

Neuen Abschnitt hinzufügen

Auf zum nächsten und letzten Beispiel! Fügen Sie Ihrer Seite einen neuen Abschnitt hinzu.

Neue Zeile hinzufügen

Spaltenstruktur

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

Spalte 1 Hintergrund mit Farbverlauf

Öffnen Sie die Zeileneinstellungen und fügen Sie einen Farbverlaufshintergrund für Spalte 1 hinzu.

• Farbe 1: #dddddd
• Farbe 2: #ffffff
• Spalte 1 Gradientenrichtung: 90deg
• Spalte 1 Startposition: 40%
• Spalte 1 Endposition: 40%

Größe

Gehen Sie dann zu den Größeneinstellungen und nehmen Sie einige Änderungen vor.

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Abstand

Fügen Sie der Zeile auch einige benutzerdefinierte Auffüllungswerte hinzu.

• Obere Polsterung: 100px (Desktop), 80px (Tablet & Telefon)
• Untere Polsterung: 100px (Desktop), 80px (Tablet & Telefon)
• Linke Polsterung: 100px (Desktop), 30px (Tablet), 25px (Telefon)
• Rechte Polsterung: 100px (Desktop), 30px (Tablet), 25px (Telefon)

Personenmodul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Zeit, Module hinzuzufügen! Fügen Sie in Spalte 1 ein Personenmodul hinzu und füllen Sie alle Felder aus.

Symboleinstellungen

Ändern Sie dann die Symbolfarbe in den Symboleinstellungen.

• Symbolfarbe: #000000

Texteinstellungen

Ändern Sie auch die Textausrichtung in den Texteinstellungen.

• Textausrichtung: Rechts

Einstellungen für Titeltext

Nehmen Sie als Nächstes einige Änderungen an den Einstellungen für den Titeltext vor.

• Titelschriftart: Chenla
• Titeltextfarbe: #000000
• Titeltextgröße: 50px
• Abstand der Titelbuchstaben: -1px

Textkörpereinstellungen

Machen Sie dasselbe für die Textkörpereinstellungen.

• Schriftgewicht des Körpers: Leicht
• Textkörperfarbe: #000000
• Körpertextgröße: 15px
• Körperlinienhöhe: 2em

Abstand

Fahren Sie fort, indem Sie den Abstandseinstellungen des Moduls einige benutzerdefinierte Abstandswerte hinzufügen.

• Obere Polsterung: 200px (Desktop), 100px (Tablet & Telefon)
• Untere Polsterung: 200px (Desktop), 100px (Tablet & Telefon)
• Linke Polsterung: 500px (Desktop), 250px (Tablet), 50px (Telefon)
• Rechte Polsterung: 200px (Desktop), 100px (Tablet), 50px (Telefon)

Grenze

Schließlich fügen Sie dem Modul einen Rahmen hinzu.

Bildmodul zu Spalte 2 hinzufügen

Bild hochladen

Das nächste Modul, das wir benötigen, ist ein Bildmodul in Spalte 2. Laden Sie ein kariertes Bild Ihrer Wahl hoch.

Abstand

Nehmen Sie dann einige Änderungen an den Abstandseinstellungen dieses Moduls vor.

• Obere Marge: 7vw (Desktop), -2vw (Tablet & Telefon)
• Linker Rand: -10vw (Desktop), 0vw (Tablet & Telefon)

Box Schatten

Geben Sie dem Image-Modul auch einen Box-Schatten.

• Stärke der Box-Schattenunschärfe: 160px
• Stärke der Box-Schattenausbreitung: -10px

Filter

Und um das Ganze abzurunden, spielen Sie mit den Filtereinstellungen herum.

• Sättigung: 50%
• Kontrast: 130%

Vorschau

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

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen 5 verschiedene Möglichkeiten gezeigt, wie Sie mit dem Divi Person Module kreativ werden können. Sie können diese Beispiele für jede Website verwenden, die Sie erstellen, und Ihre eigenen alternativen Versionen erstellen, indem Sie die Einstellungen jedes Designelements optimieren. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!