Der Team Member Block ermöglicht es Ihnen, Ihre Teammitglieder auf jeder SeedProd-Seite mit einem vollständig anpassbaren Profil-Layout zu präsentieren. Zeigen Sie das Foto, den Namen, die Berufsbezeichnung, die Beschreibung und die Social-Media-Links jeder Person in einer polierten, professionellen Karte an.
Dieser Block ist ideal für „Über uns“-Seiten, Landingpages und jeden Abschnitt, in dem der Aufbau von Vertrauen und Glaubwürdigkeit wichtig ist. Sie haben die volle Kontrolle über die Bildform, die Trennlinien-Stile, das Aussehen der Social-Icons und den typografischen Stil jedes Textelements – so erhält Ihr Team-Abschnitt ein Aussehen, das zu Ihrer Marke passt.
Hinzufügen des Team Member Blocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Team Member Block zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter Design > Blöcke den Team Member Block in den gewünschten Abschnitt Ihrer Seite.
Schritt 2: Inhaltseinstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Team Member Block, um seine Einstellungen zu öffnen. Im Tab Inhalt sind die Einstellungen in vier Abschnitte unterteilt.
Allgemein:
- Bild: Laden Sie das Foto des Teammitglieds hoch oder wählen Sie es aus. Legen Sie die Bildbreite (in px oder %) fest und optional eine feste Höhe. Geben Sie alternativen Text ein, um das Bild für die Barrierefreiheit zu beschreiben.
- Bildposition: Wählen Sie, wo das Bild relativ zum Text angezeigt wird – Oben, Links oder Rechts.
- Name: Geben Sie den Namen des Teammitglieds ein (Standard: „John Doe“). Wählen Sie das HTML-Tag, das zum Rendern verwendet wird (H1–H6, div, span oder p), legen Sie die Textausrichtung fest und passen Sie den unteren Rand an.
- Bezeichnung anzeigen: Schalten Sie die Berufsbezeichnung ein oder aus (Ja/Nein). Wenn aktiviert, geben Sie den Text der Bezeichnung ein, legen Sie ihre Ausrichtung fest und passen Sie den unteren Rand an.
- Beschreibung anzeigen: Schalten Sie die Biografie oder Beschreibung ein oder aus (Ja/Nein). Wenn aktiviert, geben Sie den Beschreibungstext ein, legen Sie ihre Ausrichtung fest und passen Sie den unteren Rand an.
Bildbereich:
- Form: Wählen Sie die Form, die auf das Foto des Teammitglieds angewendet wird – Standard, Abgerundet, Kreis oder Benutzerdefiniert (ermöglicht individuelle Eckradius-Steuerelemente).
- Bild-Abstand unten: Legen Sie den Abstand unter dem Bild fest.
Trennlinie:
- Trennlinie: Schalten Sie eine dekorative Linie ein oder aus (Ja/Nein).
- Position: Wählen Sie, wo die Trennlinie erscheint – Unter Name, Unter Bezeichnung oder Unter Beschreibung.
- Breite: Legen Sie die Breite der Trennlinie fest.
- Stil: Wählen Sie den Linienstil – Durchgezogen, Gepunktet oder Gestrichelt.
- Dicke: Legen Sie die Dicke der Trennlinie in Pixeln fest.
- Farbe: Wählen Sie die Farbe der Trennlinie.
- Trennlinien-Ausrichtung: Legen Sie die horizontale Ausrichtung der Trennlinie fest – Links, Mitte oder Rechts.
- Trennlinien-Abstand unten: Legen Sie den Abstand unter der Trennlinie fest.
Soziale Symbole:
- Social Icons: Schalten Sie Social-Media-Icons ein oder aus (Ja/Nein).
- Icon-Elemente: Fügen Sie einzelne Social-Links hinzu, ordnen Sie sie neu an und konfigurieren Sie sie. Wählen Sie für jedes Element ein Symbol, geben Sie den angezeigten Titel und die Ziel-URL ein. Verwenden Sie Neues Element hinzufügen, um zusätzliche Symbole hinzuzufügen, oder ziehen Sie Elemente, um sie neu anzuordnen.
- Icon-Breite: Legen Sie die Größe der Social-Icons fest.
- Icon-Abstand: Legen Sie den Abstand innerhalb jedes Icon-Buttons fest.
- Form: Wählen Sie die Form der Icon-Container – Standard, Abgerundet, Kreis oder Benutzerdefiniert.
- Social-Icon-Ausrichtung: Legen Sie die horizontale Ausrichtung der Social-Icon-Reihe fest – Links, Mitte oder Rechts.
Schritt 2a: Wählen Sie einen Vorlagenstil
Im Tab Vorlagen können Sie ein voreingestelltes Design auf Ihren Team-Mitglied-Block anwenden. Drei Vorlagen sind verfügbar: Gestreifter Effekt, Trennlinie und Hintergrund. Die Auswahl einer Vorlage wendet deren Styling sofort an, das Sie dann in den Tabs Inhalt und Erweitert weiter anpassen können.
Schritt 3: Design anpassen
Im Tab Erweitert können Sie das visuelle Erscheinungsbild Ihres Team-Mitglied-Blocks anpassen.
Stile:
- Typografie Name: Legen Sie Schriftfamilie, Größe, Schriftschnitt, Stil, Zeilenhöhe, Buchstabenabstand und Groß-/Kleinschreibung für den Namen des Teammitglieds fest.
- Typografie Position: Legen Sie die typografischen Eigenschaften für den Text der Berufsbezeichnung fest.
- Typografie Beschreibung: Legen Sie die typografischen Eigenschaften für den Text der Biografie oder Beschreibung fest.
- Farbe Name: Legen Sie die Farbe für den Namen des Teammitglieds fest.
- Farbe Position: Legen Sie die Farbe für die Berufsbezeichnung fest.
- Farbe Beschreibung: Legen Sie die Farbe für den Beschreibungstext fest.
- Textschatten: Wenden Sie einen Schatten auf den Text an, indem Sie voreingestellte Größen verwenden (Keine, Haarlinie und größere Voreinstellungen).
Abstand:
- Abstand: Legen Sie den äußeren Abstand um den Block auf allen vier Seiten fest, mit unabhängigen Steuerelementen für Desktop, Tablet und Mobilgerät.
- Innenabstand: Legen Sie den inneren Abstand innerhalb des Block-Wrappers auf allen vier Seiten fest, mit geräteabhängigen Steuerelementen.
Rahmen:
- Randstil: Wählen Sie aus Keine, Durchgezogen, Gepunktet oder Gestrichelt.
- Randbreite: Legen Sie einzelne Breiten für die oberen, rechten, unteren und linken Ränder fest.
- Randfarbe: Wählen Sie die Randfarbe.
- Radius: Runden Sie die Ecken des Blocks für jede Ecke einzeln ab oder verwenden Sie den Synchronisationsschalter, um einen einheitlichen Radius anzuwenden.
Hintergrund:
- Hintergrundstil: Wählen Sie Volltonfarbe, Verlauf (mit Typ, Winkel, Position und zwei Farbstopps) oder Hintergrundbild (mit Optionen für Position, Wiederholung, Größe und Anhang).
- Hintergrundabdunkelung: Fügen Sie eine Überlagerung mit einstellbarer Deckkraft über einem Hintergrundbild hinzu, um die Lesbarkeit des Textes zu verbessern.
Attribute:
- Benutzerdefinierte Klasse: Fügen Sie dem Block-Wrapper eine oder mehrere benutzerdefinierte CSS-Klassen für gezieltes Styling hinzu.
- CSS-ID: SeedProd generiert automatisch eine eindeutige CSS-ID für diesen Block. Sie können diese verwenden, um den Block in benutzerdefiniertem CSS oder JavaScript zu referenzieren.
- Benutzerdefinierte Attribute: Fügen Sie dem Block-Wrapper-Element benutzerdefinierte HTML-Attribute hinzu. Geben Sie jedes Attribut in einer neuen Zeile im Schlüssel|Wert-Format ein.
Gerätesichtbarkeit:
- Auf Desktop ausblenden: Umschalten, um den Block auf Desktop-Bildschirmen auszublenden.
- Auf Tablet ausblenden: Umschalten, um den Block auf Tablet-Bildschirmen auszublenden.
- Auf Mobilgeräten ausblenden: Umschalten, um den Block auf Mobilgeräten auszublenden.
Animationseffekte:
- Scrolleffekt: Wenden Sie eine scrollgesteuerte Animation auf den Block an, einschließlich Optionen für vertikales und horizontales Scrollen mit Steuerelementen für Richtung, Geschwindigkeit und Ansichtsfensterversatz.
- Mauseffekt: Wenden Sie einen Parallax-Effekt auf den Block an, der durch Mausbewegungen gesteuert wird.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie die Konfiguration des Team-Mitglied-Blocks abgeschlossen und dessen Erscheinungsbild angepasst haben, stellen Sie sicher, dass Sie Ihre Arbeit speichern.
Sie haben erfolgreich einen Team-Mitglied-Block zu Ihrer Seite hinzugefügt! Ein gut gestalteter Team-Bereich schafft Glaubwürdigkeit und hilft Besuchern, sich mit den Menschen hinter Ihrer Marke zu verbinden. Experimentieren Sie mit Bildformen, Trennlinienstilen und Hintergrundoptionen, um eine Team-Präsentation zu erstellen, die professionell und markenkonform wirkt.