Ein Teamverzeichnis erstellen.

DXPR Builder lernenSeiten erstellenTutorial folgen

Hier bauen Sie eine Teamseite: eine zentrierte Kopfzeile, drei Leadership-Cards mit einem LinkedIn-Link unter der dritten und ein Grid mit vier Team-Cards. Nutzen Sie sie, wenn das ganze Team leicht zu finden sein soll. Für einen kurzen Teamabschnitt auf Ihrer Unternehmensseite folgen Sie stattdessen Eine About-Us-Seite erstellen.

Das Video baut die Teamseite eines Logistikunternehmens.

Bevor Sie beginnen

  • Ihre Rolle hat die Berechtigung Edit with DXPR Builder.
  • Die Seite ist im Builder geöffnet. Für eine neue gehen Sie zu Content > Add content > Landing Page (/node/add/landing_page) und klicken Sie auf Save.
  • Neue Elemente landen oben in ihrem Abschnitt oder ihrer Spalte. Darum kommen die Social Links vor die Card darüber.

Schritt 1: Die Kopfzeile hinzufügen

  1. Klicken Sie auf Add Elements auf der leeren Seite und wählen Sie Section aus dem Tab Layout.
  2. Fahren Sie über den Abschnitt und öffnen Sie More > Settings. Wählen Sie unter HTML classes Align text center und klicken Sie auf Save.
  3. Klicken Sie auf + auf dem Abschnitt und wählen Sie Text aus dem Tab Content.
  4. Geben Sie „Our team“ als Heading 2 ein, fügen Sie eine Einführungszeile hinzu und klicken Sie auf Save. Das Theme gibt den Seitentitel als Heading 1 der Seite aus. Um stattdessen diese Überschrift zur Heading 1 zu machen, siehe SEO-freundliche Seiten erstellen.

Schritt 2: Die Leadership-Cards hinzufügen

  1. Fahren Sie über den Abschnitt und klicken Sie auf Add Section Below. Öffnen Sie More > Settings des neuen Abschnitts, wählen Sie einen hellgrauen Background im Panel Style und klicken Sie auf Save.
  2. Klicken Sie auf + auf dem Abschnitt und wählen Sie Row. Klicken Sie auf sein Grid-Icon (Column layout), wählen Sie das Preset 1/3 + 1/3 + 1/3 und klicken Sie auf Save.
  3. Klicken Sie auf + in der ersten Spalte und wählen Sie Card. Öffnen Sie ihr More > Settings, setzen Sie den Header auf die Rolle und den Title auf den Namen und klicken Sie auf Save.
  4. Fügen Sie der zweiten Spalte genauso eine Card hinzu.
  5. Klicken Sie auf + in der dritten Spalte und wählen Sie Social links. Sie kommt mit zwei Beispielzeilen. Geben Sie linkedin über „Facebook“ in der ersten Zeile ein und die Profil-URL daneben. Entfernen Sie die zweite Zeile mit ihrem ×, setzen Sie Style auf Circle und Size auf 2x und klicken Sie auf Save.
  6. Klicken Sie auf + in derselben Spalte und wählen Sie Card; sie landet über den Links. Setzen Sie Header und Title genauso und klicken Sie auf Save.
  7. Klicken Sie auf + auf dem Abschnitt und wählen Sie Text; es landet über der Zeile. Geben Sie „Leadership“ als Heading 2 ein und klicken Sie auf Save.

Schritt 3: Das Team-Grid hinzufügen

  1. Fügen Sie mit Add Section Below einen dritten Abschnitt hinzu, dann eine Row. Klicken Sie auf sein Grid-Icon (Column layout), wählen Sie das Preset 1/4 + 1/4 + 1/4 + 1/4 und klicken Sie auf Save.
  2. Fügen Sie jeder Spalte eine Card hinzu. Öffnen Sie ihr More > Settings, setzen Sie die Rolle als Header und den Namen als Title und klicken Sie auf Save.
  3. Klicken Sie auf + auf dem Abschnitt und wählen Sie Text; es landet über der Zeile. Geben Sie „The team“ als Heading 2 ein und klicken Sie auf Save.

Schritt 4: Speichern und Vorschau

  1. Klicken Sie auf Save in der Builder-Symbolleiste.
  2. Öffnen Sie das Ansichtsmenü (das Augen-Icon) und wählen Sie Preview.

Weiter gehen

Nicht im Video gezeigt:

  • Photos and biographies: Klicken Sie auf + auf einer Card und fügen Sie eine Text-Biografie hinzu. Klicken Sie dann erneut auf + auf der Card und fügen Sie ein Image hinzu; es landet über dem Text. Füllen Sie das Alt attribute mit dem Namen der Person.
  • Rounded photos: Setzen Sie auf jedem Bild Border radius im Panel Style. Der Wert ist in Pixeln, bis 100.
  • Lift on hover: Setzen Sie in der Card im Panel Hover style Drop shadow auf 2.
  • Team that updates itself: Erstellen Sie einen Inhaltstyp „Team member“ und eine Grid-Ansicht mit Blockanzeige. Fügen Sie die Ansicht über den Tab Drupal Views ein, und die Redaktion fügt Personen hinzu, ohne die Seite anzufassen.

Was Sie sehen

„Our team“ sitzt zentriert oben. Auf dem grauen Band zeigen drei Leadership-Cards jede Rolle im Header und den Namen darunter, mit einem runden LinkedIn-Icon unter der dritten. „The team“ folgt mit vier Cards nebeneinander.

Wenn Sie die Seite nicht wie gezeigt sehen

  • Eine Card zeigt nach dem Hinzufügen keinen Einstellungsdialog. Cards öffnen sich leer, ohne Dialog. Fahren Sie über die Card und öffnen Sie More > Settings, um Header und Title auszufüllen.
  • Ein Social Link zeigt „No matching brand icon found“. Die Marke ist kein bekannter Icon-Name. Geben Sie sie klein ein, etwa linkedin.
  • Das LinkedIn-Icon sitzt über der Card. Die Card kam vor den Links hinein, und neue Elemente landen oben in ihrer Spalte. Ziehen Sie die Card am Zieh-Anfasser in ihrer Kontrollleiste über die Links.
  • Ihre Änderungen sind nach einem Neuladen weg. Sie haben die Seite verlassen, bevor Sie auf Save in der Builder-Symbolleiste geklickt haben. Wenn Save einen Fehler zeigt, siehe Änderungen speichern nicht.

Wie geht es weiter?