Manchmal müssen wir Teammitglieder auf unseren Websites anzeigen. Dies ist eine hervorragende Möglichkeit, unsere geschickten Teammitglieder der Außenwelt zu präsentieren. Wir können ihr Bild, ihren Namen und ihre Bezeichnung im Unternehmen anzeigen. Um ihnen mehr Aufmerksamkeit zu verleihen, können Sie ihre Social-Media-Links zum Design hinzufügen. Normalerweise fügen die Leute diese Links unter dem Namen und der Bezeichnung hinzu, aber es ist an der Zeit, den klugen Zug zu machen und die Art des Designs zu ändern. Im heutigen Divi- Tutorial erfahren Sie, wie Sie eine Teammitgliedsseite erstellen, bei der die Social-Media-Symbole über dem Bild schweben. Lassen Sie uns nicht mehr Zeit verschwenden und machen Sie es!

Schleichspitze

Dies wird unser heutiges Design sein.

Teil 1: Designmodul

Einstellungen: Abschnitt Eins

Hintergrundfarbe

Beginnen Sie damit, die Farbe des ersten Abschnitts auf die Seite zu ändern, an der Sie gerade arbeiten. Öffnen Sie die Abschnittseinstellungen und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #0f0f0f

Abstand

Jetzt von der Design-Registerkarte und ändern Sie die Abstandseinstellungen.

Erstellen Sie erstaunliche Websites

Mit dem besten kostenlosen Seite Builder Elementor

Jetzt anfangen

• Obere Polsterung: Desktop und Tablet: 100px und Telefon: 50px
• Untere Polsterung: Desktop und Tablet: 100px und Telefon: 50px

Neue Zeilen hinzufügen

Spaltenstruktur

Fügen Sie nun eine neue Zeile mit folgender Spaltenstruktur hinzu.

Spalte: Textmodul 1

H1-Inhalt hinzufügen

Jetzt fügen wir diesem Modul mit H1-Inhalten einen Kontext unserer Wahl hinzu.

H1-Texteinstellungen

Nehmen Sie nun einige Änderungen am Modul auf der Registerkarte Design vor. Ändern Sie zuerst die Kurseinstellungen.

• Überschrift Schriftart: Alata
• Textfarbe der Überschrift: #ffffff
• Überschrift Textgröße: Desktop: 50px, Tablet: 45px und Telefon: 35px
• Höhe der Überschriftslinie: 1.2em

Spalte: Teilermodul

Sichtweite

Fügen wir ein Teilermodul hinzu. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Linie

Ändern Sie auf der Registerkarte Design die Linienfarbe.

• Linienfarbe: #ffffff

Größe

Ändern Sie die Größe dieses Teilermoduls.

• Teilergewicht: 2px
• Maximale Breite: 100px
• Höhe: 2px

Spalte: Textmodul 1

Beschreibenden Kontext hinzufügen

Hier fügen wir ein weiteres Textmodul hinzu, in das wir Inhalte unserer Wahl einfügen.

Texteinstellungen

Ändern Sie auf der Registerkarte "Design" die Texteinstellungen entsprechend.

• Textschriftart: Alata
• Textfarbe: #7c7c7c
• Textgröße: 17px
• Textzeilenhöhe: 1.9em

Abstand

Nehmen Sie im Abstandsabschnitt die folgende Änderung vor.

• Unterer Rand: 0px

Hinzufügen und Einstellungen: Abschnitt zwei

Fügen Sie nun einen weiteren regulären Abschnitt unter dem vorherigen hinzu.

Hintergrund mit Farbverlauf

Verwenden Sie nun einen Verlaufshintergrund für diesen Abschnitt.

• Farbe 1: #0f0f0f
• Farbe 2: #000000
• Startposition: 10%
• Endposition: 10%

Abstand

Ändern Sie als Nächstes die Abstandseinstellungen.

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

Neue Zeilen hinzufügen

Spaltenstruktur

Fügen Sie nun in diesem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzu.

Größe

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

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 2px

Spalte 1: Social Media Follow-Modul

Soziale Netzwerke hinzufügen

Jetzt fügen wir Spalte 1 ein Social Media Follow-Modul hinzu und setzen die gewünschten Social Media-Verbindungen

Hintergrundfarbe von Social Media Icons entfernen Remove

Klicken Sie für jedes Symbol auf Einstellungen, gehen Sie dann zum Hintergrund und wählen Sie transparent aus. Sie können auch auf Farbe klicken und sie entfernen.

Link zu jedem sozialen Netzwerk hinzufügen Link

Fügen Sie auch jedem sozialen Netzwerk einen entsprechenden Link hinzu.

Standardhintergrundfarbe

Fügen Sie in der Option Moduleinstellungen diese Farbe als Hintergrund hinzu.

• Hintergrundfarbe: rgba(0,0,0,0)

Hintergrundfarbe schweben

Ändern Sie die Hintergrundfarbe für den Hover-Effekt.

• Hintergrundfarbe schweben: #494949

Hintergrundbild

Laden Sie dann ein Bild eines Teammitglieds als Hintergrund hoch.

• Hintergrundbildgröße: Cover
• Hintergrundbild-Mischung: Multiplizieren

Ausrichtung

Ändern Sie auf der Registerkarte Design des Moduls die Ausrichtungseinstellungen.

• Modulausrichtung: Mitte

Symbol

Ändern Sie nun die Symbolfarbe.

• Symbolfarbe: rgba(0,0,0,0)

Abstand

Gehen Sie dann zu den Abstandseinstellungen und wenden Sie die folgenden Werte an:

• Unterer Rand: 0px
• Obere Polsterung: Desktop: 250px, Tablet: 450px und Telefon: 200px
• Untere Polsterung: 20px

Rand

Ändern Sie nun die Rahmeneinstellung entsprechend.

• Alle Ecken: 100px
• Randbreite: 2px
• Rahmenfarbe: rgba(255,255,255,0)

Grenze schweben

Verwenden Sie nun einen Rahmen für den Hover.

• Hover-Rahmenfarbe: #ffffff

CSS-Klasse

Fügen Sie nun auf der Registerkarte "Erweitert" eine benutzerdefinierte CSS-Klasse hinzu.

• CSS-Klasse: team-socials

Bewegen Sie den Mauszeiger vor dem Element

Beenden Sie nun die Moduleinstellungen, indem Sie den folgenden CSS-Code auf das Element before anwenden. Stellen Sie sicher, dass Sie es auf den Hover stellen.

content: "Say Hello To Me!";
font-family: "Alata";
color: white !important;
position: absolute;
margin-top: -30px;
padding-left: 30px;

Spalte 1: Personenmodul

Inhalt hinzufügen

Das letzte Modul, das wir in dieser Spalte verwenden werden, ist ein Personenmodul. Fügen Sie das Modul und die darin enthaltenen Informationen hinzu.

Texteinstellungen

Auf der Registerkarte Design des Personenmoduls und ändern Sie die Texteinstellungen wie folgt:

• Textausrichtung: Mitte
• Textfarbe: Hell

Einstellungen für Titeltext

Ändern Sie nun den Titeltextbereich.

• Titelschriftart: Alata
• Titeltextgröße: Desktop: 27px, Tablet: 25px und Telefon: 22px

Texteinstellungen positionieren

Ändern Sie die Einstellungen für Positionstext.

• Position Schriftart: Alata
• Positionstextgröße: Desktop: 17px Und Tablet und Telefon: 15px

Abstand

Wenden Sie eine benutzerdefinierte obere und untere Auffüllung auf die Abstandseinstellungen an.

• Obere Polsterung: 40px
• Untere Polsterung: 40px

Rand

Wenden Sie nun die folgenden Rahmeneinstellungen an und beenden Sie die Spalte.

• Randbreite: 1px
• Rahmenfarbe: #ffffff

Andere Spalten entfernen

Löschen Sie nun die Spalten für den Abschnitt.

Spalte zweimal klonen

Dupliziere nun die Spalte eins zweimal.

Ganze Zeile klonen

Duplizieren Sie nun die gesamte Zeile nach Bedarf. Hier werden wir es einmal duplizieren.

Doppelte Inhalte ändern

Jetzt werden wir die Bilder, Social-Media-Links und Personeninformationen für jede Person ändern.

Teil 2: Codemodul

Code-Modul in Abschnitt 1

Fügen Sie nun ein Codemodul unter dem Textmodul von Abschnitt eins hinzu.

CSS-Code hinzufügen

Kopieren Sie nun die folgenden CSS-Codezeilen und fügen Sie sie in das Codemodul ein und Sie sind fertig. Vergessen Sie nicht, sie in das Style- Tag einzufügen.

.team-socials:hover li a.icon:before {
  color: black !important;
}
 
.team-socials:hover li a.icon {
  background-color: white;
}

Endergebnis

Bisher haben wir alle Schritte erfolgreich abgeschlossen, so sehen unsere Ergebnisse aus.

Fazit

Im heutigen Tutorial haben wir versucht zu zeigen, wie kreativ wir eine Teammitgliederseite gestalten können. Durch den schwebenden Effekt des Divi- Themas lassen sich die sozialen Verbindungen der Teammitglieder so ästhetisch darstellen. Wir hoffen, dass Sie die heutigen Tutorials nützlich finden. Ein Austausch mit Ihrer Umgebung wird uns ermutigen, weitere neue und erstaunliche Divi- Tutorials zu entwickeln.