Ihre Website-Besucher wollen wissen, wer hinter der Marke steckt Eine gut gestaltete Elementor-Teammitglied Abschnitt stellt Ihrem Unternehmen Gesichter, baut Vertrauen auf und gibt Ihrer Website das Gefühl, persönlich und nicht unternehmerisch zu sein Das Problem? Elementor wird nicht sofort mit einem dedizierten Teammitglieds-Widget ausgeliefert.
Da ist Master-Addons für Elementor Kommt rein Es gibt dir zwei speziell dafür erstellte Widgets: die MA-Teammitglied Widget (für Gitterlayouts) und die Karussell für MA-Teammitglieder (für gleitende Teamabschnitte).Beides ist kostenlos, und beide kommen mit 11 einzigartigen Designvariationen, die Sie mit einem Klick anwenden können.
In diesem Ratgeber erfahren Sie genau, wie man Erstellen Sie einen Bereich für Teammitglieder in Elementor Mit beiden Methoden passen Sie das Design an und nutzen Sie jede verfügbare Designoption optimal.
Warum jede Website einen Teammitgliedsbereich benötigt
Menschen kaufen bei Menschen Eine Studie von Edelmans Trust Barometer ergab, dass Verbraucher einem Unternehmen weitaus eher vertrauen, wenn sie echte Menschen dahinter sehen können Ihre “Über” - oder “Team” - Seite ist oft eine der meistbesuchten Seiten auf Ihrer gesamten Seite.
Hier ist, was ein gutes Abschnitt für Teammitglieder in Elementor Tut für Ihre Website:
- Baut Glaubwürdigkeit auf „Besucher können sehen, mit wem sie zusammenarbeiten, bevor sie Kontakt aufnehmen
- Schafft persönliche Verbindungen Fotos und kurze Bios machen Ihre Marke sympathisch
- Erhöht Conversions Vertrauen Signale wie Teamfotos reduzieren Zögern beim Kauf
- Verbessert Employer Branding Stellenausschreibung Ihr Team zieht bessere Bewerber an
- Reduziert Absprungraten Die visuellen Abschnitte von Engaging halten die Besucher länger auf der Seite
Ganz gleich, ob Sie eine kleine Agentur, ein SaaS-Unternehmen oder ein lokales Unternehmen leiten, das Hinzufügen eines Teambereichs zu Ihrer WordPress-Website dauert 10 Minuten und hat messbare Auswirkungen.
Was Sie in Ihren Teammitgliedsbereich aufnehmen sollten
Bevor Sie irgendein Widget auf die Seite ziehen, planen Sie ein, welche Informationen die einzelnen Teamkarten anzeigen sollen Hier eine kurze Aufschlüsselung, was Sie einbinden und was Sie überspringen sollten:
| Element | Vorrangige Priorität | Warum es wichtig ist |
|---|---|---|
| Foto | Wesentlich | Menschen verarbeiten Gesichter schneller als Text Verwenden Sie konsistente, professionelle Kopfschüsse. |
| Name | Wesentlich | Sollte direkt neben oder unter dem Foto erscheinen, damit die Verbindung sofort erfolgt. |
| Bezeichnung / Berufsbezeichnung | Wesentlich | Sagt den Besuchern, welche Rolle diese Person im Team spielt. |
| Kurzbeschreibung | Empfohlen | Eine 1-2 Satz Bio Halten Sie es menschlich und persönlichkeitsgetrieben. |
| Social-Media-Links | Empfohlen | Ermöglicht Besuchern die Verbindung auf LinkedIn, Twitter oder anderen Kanälen. |
| E-Mail oder Telefon | Optional | Nur hinzufügen, wenn Sie direkten Kontakt wünschen (üblich für verkaufslastige Teams). |
Profi-Tipp: Halten Sie die Kopfschüsse im gesamten Team konsistent. Gleiche Hintergrundfarbe, ähnliches Zuschneiden und passende Bildabmessungen (300x300 px oder 400x400 px funktioniert gut) sorgen dafür, dass der gesamte Abschnitt poliert aussieht.
Was Sie vor dem Start brauchen
Um diesem Tutorial zu folgen, stellen Sie sicher, dass Sie Folgendes haben:
- WordPress Installiert und ausgeführt (jede aktuelle Version)
- Elementor (kostenlos oder Pro) funktioniert das mit beiden
- Master-Addons für Elementor (kostenlose Version) Download von WordPress.org
- Fotos der Teammitglieder zum Hochladen bereit (Headshots, quadratisches Verhältnis empfohlen)
Sobald Master Addons installiert und aktiviert sind, finden Sie die MA-Teammitglied und Karussell für MA-Teammitglieder Widgets im Inneren des Elementor-Editors unter der Registerkarte “MASTER ADDONS”.
So erstellen Sie einen Abschnitt zum Elementor-Team-Mitgliedsgitter
Das Rasterlayout ist perfekt, wenn Sie Ihr Team in einem sauberen, strukturierten Format mit mehreren Spalten darstellen möchten, so richten Sie es Schritt für Schritt ein:
Schritt 1: Fügen Sie einen neuen Abschnitt ein
Öffnen Sie eine beliebige Seite im Elementor-Editor Klicken Sie auf das Symbol “+”, um einen neuen Abschnitt hinzuzufügen Wählen Sie Ihre bevorzugte Spaltenstruktur Für einen Team-Abschnitt funktioniert ein 3-Spalten - oder 4-Spalten-Layout am besten.
Schritt 2: Fügen Sie einen inneren Abschnitt hinzu
Wenn Sie mehr Kontrolle über Abstand und Layout benötigen, ziehen Sie eine Innerer Abschnitt Widget innerhalb Ihres Hauptbereichs Dadurch erhalten Sie verschachtelte Spalten, in denen jede Teammitgliedskarte unabhängig sitzt.
Erstellen Sie so viele Spalten, wie Sie für Ihre Teamgröße benötigen Drei Spalten pro Zeile sind die häufigste Wahl für Desktop-Displays.
Schritt 3: Ziehen Sie das Widget für MA-Teammitglieder
Scrollen Sie im Elementorfeld auf der linken Seite nach unten MASTER-ADDONS Tab (oder suchen Sie einfach in der Suchleiste nach “MA Team Member”) Ziehen Sie die MA-Teammitglied Widget in eine Ihrer Spalten.
Sie sehen sofort, dass eine Standardkarte für Teammitglieder mit einem Platzhalterbild, einem Namen, einer Bezeichnung und sozialen Symbolen angezeigt wird.
Schritt 4: Wiederholen Sie dies für jedes Teammitglied
Duplizieren Sie das Widget oder ziehen Sie ein neues MA-Teammitglied Widget in jede verbleibende Spalte Jedes Widget repräsentiert ein Teammitglied, sodass Sie die volle Kontrolle über einzelne Karten haben.
Profi-Tipp: Klicken Sie mit der rechten Maustaste auf das Widget und wählen Sie “Duplizieren”, um es mit intaktem Styling zu kopieren. Dann tauschen Sie einfach das Foto und den Text für jedes neue Teammitglied aus.
Anpassen des Elementor-Team-Mitglieds-Widget-Inhalts
Klicken Sie auf ein beliebiges MA-Teammitglied Widget zum Öffnen seiner Einstellungen Die Inhaltstabelle Dort fügen Sie alle persönlichen Daten für jedes Teammitglied hinzu.
Details zum Teammitglied
Die Registerkarte Inhalt im Elementor-Teammitglieds-Widget Felder gibt für:
- Bild „Den Foto per Kopfschuss oder Team herunterladen. Sie können auch die Bildgröße festlegen und ein benutzerdefiniertes Seitenverhältnis auswählen.
- Name Der vollständige Name des Teammitglieds wird als Überschriftsetikett gerendert, also wählen Sie ein entsprechendes HTML-Tag aus (H3 oder H4 ist typisch für Teamkarten).
- Bezeichnung “Lead Designer” oder “Co-Founder & CEO”) zu besetzen.
- Beschreibung 2 Sätze für den saubersten Look.
Social-Media-Profile
Unter den Hauptdetails finden Sie den Social Media Bereich Fügen Sie Links zu den Profilen der einzelnen Teammitglieder hinzu Das Widget unterstützt alle wichtigen Plattformen, darunter:
- Twitter / X
- GitHub
- Benutzerdefinierte URLs mit benutzerdefinierten Symbolen
Soziale Links erscheinen als kleine Symbole unter den Informationen des Teammitglieds. Sie öffnen sich standardmäßig in einem neuen Tab, sodass Besucher Ihre Seite nicht verlassen.
Style Tab: Designvariationen und Voreinstellungen
Hier befindet sich die MA-Teammitglied Widget hebt sich wirklich von grundlegenden Elementor-Workarounds ab Anstatt Teamkartendesigns von Grund auf zu erstellen, erhalten Sie 11 einzigartige Designvariationen und 5 Stilvoreinstellungen Auswahl zu treffen.
Designvariationen
Klicken Sie auf die Stil TabÖffnen Sie dann die Allgemeine Stile Panel. Sie finden einen Dropdown mit der Aufschrift “Design-Variante” Wählen Sie eine der 11 Optionen aus, und das Widget strukturiert das Kartenlayout sofort um Einige Variationen stapeln das Bild über dem Text Andere verwenden nebeneinander liegende Layouts Einige fügen Overlay-Effekte beim Hover hinzu.
Das Beste daran: Der Wechsel zwischen Variationen löscht Ihre Inhalte nicht aus Ihr Name, Ihr Foto, Ihre Bio- und soziale Links bleiben alle intakt. Sie können jede Variation ausprobieren und sich auf die Variante einigen, die zum Design Ihrer Website passt.
5 Stilvoreinstellungen
Im General Styles-Panel finden Sie auch 5 Stilvoreinstellungen. Dies sind vorkonfigurierte Farb - und Layoutkombinationen, die Ihnen mit einem einzigen Klick ein poliertes Aussehen verleihen.
Manuelle Stilsteuerungen
Für die vollständige kreative Kontrolle können Sie mit der Registerkarte Stil auch Folgendes anpassen:
- Hintergrundfarbe Ein einfarbiger, Farbverlauf oder transparenter Hintergrund für jede Karte
- Inhaltsangleichung „Alle Texte und Symbole werden nach rechts ausgerichtet
- Typografie „Vollständige Kontrolle über Schriftfamilie, Größe, Zeilenhöhe, Buchstabenabstand für den Namen, Bezeichnung und Beschreibung separat
- Textfarben Verschiedene Farben für Name, Bezeichnung und Beschreibungstext
- Farben sozialer Symbole Customize-Symbolfarben sowohl für normale als auch für Hover-Zustände
- Abstand und Polsterung Stimmen Sie den Abstand zwischen den Elementen innerhalb der Karte ab
- Grenz- und Grenzradius Ränder oder um die Ecken von
- Kastenschatten Feine Schatteneffekte für die Tiefe
Für einen vollständigen Komplettdurchgang aller Stiloptionen überprüfen Sie die Dokumentation der MA-Teammitglieder.
So erstellen Sie ein Teammitgliedskarussell in Elementor
Ein größeres Team haben? die Karussell für MA-Teammitglieder Mit dem Widget können Sie unbegrenzt Teammitglieder in einem einzigen, verschiebbaren Abschnitt hinzufügen. Es passt besser, wenn Sie 6+ Teammitglieder haben und nicht eine ganze Seite mit einem Raster füllen möchten.
So wird die Teammitgliedskarussell in Elementor Werke:
Schritt 1: Ziehen Sie das Karussell-Widget der MA-Teammitglieder
Im Gegensatz zur Gittermethode tun Sie dies Nicht Innenausschnitt oder mehrere Spalten benötigen Fügen Sie einfach einen neuen Abschnitt mit einer einzigen Spalte hinzu, suchen Sie dann nach “MA Team Members Carousel” und ziehen Sie ihn hinein.
Schritt 2: Fügen Sie Ihre Teammitglieder hinzu
Im Inneren des Widgets sehen Sie ein Repeater-Feld Jedes Element im Repeater repräsentiert ein Teammitglied Klicken Sie auf “Element hinzufügen”, um neue Karten zu erstellen. Für jede Karte füllen Sie aus:
- Foto
- Name
- Bezeichnung
- Beschreibung
- Social-Media-Links
Sie können beliebig viele Teammitglieder hinzufügen Es gibt keine Begrenzung Das Karussell behandelt 5 Mitglieder oder 50 Mitglieder mit gleicher Leichtigkeit.
Schritt 3: Legen Sie den Titel-Tag fest
Definieren Sie das HTML-Überschrift-Tag für Ihre Teammitgliedsnamen (H2, H3, H4 usw).Für die meisten Seiten ist H3 oder H4 die richtige Wahl, da die Abschnittüberschrift oben normalerweise ein H2 ist.
Karusselleinstellungen: Navigation, Spalten und Autoplay
Das Karussell-Widget wird mit einem speziellen Einstellungsfeld geliefert, um das Verhalten des Schiebereglers zu steuern. Folgendes können Sie konfigurieren:
Spalten und zu scrollende Elemente
Legen Sie fest, wie viele Teammitglieder auf einmal auf dem Bildschirm erscheinen Sie können je nach Layoutbreite 2, 3, 4 oder mehr Spalten anzeigen Die Einstellung “Items to Scroll” steuert, wie viele Karten sich bewegen, wenn ein Besucher auf den Navigationspfeil klickt.
| Bildschirmgröße | Empfohlene Spalten | Zu scrollende Elemente |
|---|---|---|
| Desktop (1200px+) | 3-4 Spalten | 1-2 |
| Tablette (768 px-1199px) | 2-3 Spalten | 1 |
| Mobil (unter 768 x) | 1 Spalte | 1 |
Navigationsstil
Sie erhalten zwei Navigationstypen:
- Pfeile „Am besten für Desktop-Interaktionen, bei denen Hover üblich ist, sind die Tasten mit dem rechten Pfeil an den Seiten des Karussells.
- Punkte „Small-Dot-Indikatoren unterhalb des Karussells, die die Gesamtrutschen und die aktuelle Position anzeigen. Funktioniert sowohl auf dem Desktop als auch auf dem Mobilgerät gut.
Sie können eine, beide oder keine aktivieren, wenn Sie die automatische Wiedergabe aktivieren, benötigen einige Benutzer möglicherweise nicht einmal eine manuelle Navigation.
Autoplay
Autoplay einschalten und Dauer in Millisekunden einstellen Ein Wert von 3000-5000 ms (3-5 Sekunden) gibt den Besuchern genügend Zeit, jede Karte zu lesen, bevor sich der Schieberegler bewegt Sie können auch Pause-on-Hover aktivieren, damit der Schieberegler stoppt, wenn jemand über einer Karte schwebt.
Optionen im Karussellstil
Genau wie das Grid-Widget wird das Karussell mitgeliefert 5 Stilvoreinstellungen und volle manuelle Kontrolle über:
- Artikelpolsterung (Platz zwischen jeder Teamkarte)
- Typografie für Name, Bezeichnung und Beschreibung
- Farben für jedes Textelement
- Hintergrund - und Randeinstellungen pro Karte
- Navigationspfeil/Punkt-Styling und Farben
Die vollständige Einstellungsreferenz finden Sie im Karusselldokumentation der Teammitglieder.
Tipps für eine bessere Teamabteilung
Nach dem Aufbau von hunderten Team-Abschnitten hier die kleinen Details, die eine gute Team-Seite von einer tollen trennen:
- Verwenden Sie echte Fotos, keine Stockbilder. Besucher können den Unterschied erkennen Authentische Kopfschüsse bauen mehr Vertrauen auf, als polierte Stockfotos es jemals tun werden.
- Halten Sie Beschreibungen kurz und konsistent. Hat eine Person eine 3-Satz-Bio und eine andere einen vollen Absatz, entsteht dadurch ein visuelles Ungleichgewicht, zielen Sie auf alle Karten gleich lang.
- Bildmaße genau aufeinander abstimmen. Alle Headshots mit der gleichen Auflösung hochladen (z.B. 400x400 px) Nicht übereinstimmende Größen unterbrechen die Gitterausrichtung.
- Nur aktive soziale Profile einbeziehen. Ein toter LinkedIn-Link ist schlimmer als gar kein Link. Halten Sie sich an Plattformen, die Ihr Team tatsächlich nutzt.
- Test auf Mobilgeräten. Karussellabschnitte benötigen vor allem mobile Tests, stellen Sie sicher, dass Karten lesbar sind und Navigationspunkte leicht zu tippen sind.
- Benutze das Karussell für 6+ Mitglieder. Wenn du 3-4 Teammitglieder hast, sieht ein Raster sauberer aus Speichern Sie das Karussell für größere Teams, bei denen Scrollen notwendig wird.
MA-Teammitglied vs. MA-Teammitglieder Karussell: Was sollten Sie verwenden?
| Merkmal | MA-Teammitglied (Grid) | Karussell für MA-Teammitglieder |
|---|---|---|
| Am besten für | Kleine Teams (2-6 Mitglieder) | Größere Teams (6+ Mitglieder) |
| Layout | Statische Spalten (Sie steuern das Raster) | Schiebekarussell mit Auto-/Manual-Navigation |
| Einrichtung | Ein Widget pro Teammitglied in inneren Abschnitten | Einzel-Widget mit Repeater-Feld |
| Designvariationen | 11 Variationen | 5 Stilvoreinstellungen |
| Navigation | Keine benötigt (alle sichtbar) | Pfeile, Punkte, Autoplay |
| Seitenraum | Nimmt mehr vertikalen Platz | Kompakt, spart Platz |
| Individuelle Kartensteuerung | Vollständig (jedes Widget ist unabhängig) | Einheitliches Styling über alle Karten hinweg |
Für die meisten Websites kleiner Unternehmen ist der Grid-Ansatz mit 3-4 Teammitgliedern der Sweet Spot, wenn Ihr Team über 6 Personen hinaus wächst, wechseln Sie zum Karussell, um die Seite sauber zu halten.
Möchten Sie die vollständige Liste der verfügbaren Widgets erkunden? Schauen Sie sich die an Komplette Master Addons Widget-Bibliothek Mit 80+ Widgets und Erweiterungen.
Häufig gestellte Fragen
Verfügt Elementor über ein integriertes Teammitglieds-Widget?
Nr. Elementor (kostenlos oder Pro) enthält kein dediziertes Teammitglieds-Widget Sie benötigen ein Addon eines Drittanbieters wie Master Addons Zweckgebauten zu bekommen Elementor-Teammitglieds-Widget Mit Designvoreinstellungen, sozialen Links und Karusselloptionen.
Ist das MA Team Member Widget kostenlos?
Ja. Sowohl die MA Team Member als auch MA Team Members Carousel Widgets sind in der kostenlosen Version von Master Addons for Elementor verfügbar Sie können Download bei WordPress.org Kostenlos Einige erweiterte Designvarianten erfordern möglicherweise die Pro-Version.
Wie viele Teammitglieder kann ich dem Karussell hinzufügen?
Es gibt keine Begrenzung Das MA Team Members Carousel verwendet ein Repeater-Feld, sodass Sie so viele Teammitglieder hinzufügen können, wie Ihre Seite benötigt Das Widget verarbeitet 5 oder 50 Karten ohne Leistungsprobleme. Legen Sie einfach die sichtbaren Spalten fest und lassen Sie den Rest vom Schieberegler erledigen.
Kann ich verschiedene Designs für verschiedene Teammitglieder verwenden?
Mit dem Rasterlayout (MA Team Member Widget), ja Da jedes Teammitglied ein separates Widget ist, können Sie auf jede Karte eine andere Designvariation anwenden Im Karussell haben alle Karten das gleiche Design, das für die visuelle Konsistenz voreingestellt ist.
Welche Bildgröße sollte ich für Teammitgliederfotos verwenden?
Quadratische Bilder zwischen 300x300 px und 500x500 px funktionieren am besten Halten Sie alle Fotos in den gleichen Abmessungen für eine gleichmäßige Ausrichtung JPEG oder WebP-Format mit 80% Qualität gibt Ihnen eine gute visuelle Qualität ohne große Dateigrößen, die Ihre Seite verlangsamen.
Verwandte Lektüre
Einwickelnd
Erstellen eines Abschnitt für Teammitglieder in Elementor Benötigt keinen benutzerdefinierten Code oder teure Seitenersteller-Add-ons Mit den zwei Team-Widgets von Master Addons können Sie in weniger als 10 Minuten von einem leeren Abschnitt zu einer vollständig gestylten Team-Seite gelangen.
Für kleine Teams nutzen Sie die MA-Teammitglied Widget in einem Grid-Layout Bei größeren Teams wechseln Sie auf die Karussell für MA-Teammitglieder Für einen platzsparenden Schieberegler Beide Optionen bieten Ihnen Design-Voreinstellungen, Social-Media-Integration sowie vollständige Typografie- und Farbsteuerungen.
Starten Sie mit Master Addons durch und bauen Sie einen Teambereich auf, dem Ihre Besucher tatsächlich vertrauen.
