Eine About-Us-Seite erstellen.

DXPR Builder lernenReferenzHilfe erhalten

Hier bauen Sie eine About-Us-Seite: einen Leitbild-Header, Ihre Geschichte neben einem Foto, drei hochzählende Zahlen, Team-Cards und eine abschließende Aufforderung. Nutzen Sie sie, wenn eine Seite Besuchern sagen soll, wer Sie sind. Für eine Seite, die alle Teammitglieder listet, folgen Sie stattdessen Ein Teamverzeichnis erstellen.

Das Video baut die Seite für ein Designstudio in Rotterdam.

Bevor Sie beginnen

  • Ihre Rolle hat die Berechtigung Edit with DXPR Builder.
  • Die Medienbibliothek enthält ein Foto Ihres Büros, Teams oder Produkts.
  • Die Seite existiert: Gehen Sie zu Content > Add content > Landing Page (/node/add/landing_page), geben Sie „Über uns“ als Title ein und klicken Sie auf Save. Die Seite öffnet sich mit dem Builder darauf.
  • Blenden Sie auf DXPR CMS den Seitentitel des Themes auf dieser Seite aus: Öffnen Sie in ihrem Bearbeitungsformular DXPR Theme Settings und haken Sie Page Title unter DXPR Hide Regions an. Der Title des Jumbotrons ist dann die einzige Heading 1 der Seite, wie SEO-freundliche Seiten erstellen erklärt.
  • Neue Elemente landen oben in ihrem Abschnitt oder ihrer Spalte. Fügen Sie die Zeilen eines Abschnitts oder die Elemente einer Spalte in umgekehrter Reihenfolge hinzu oder ziehen Sie sie danach an ihren Platz.

Schritt 1: Einen Leitbild-Header hinzufügen

  1. Klicken Sie auf der leeren Seite auf Add Elements und wählen Sie Section aus dem Tab Layout.
  2. Fahren Sie über den Abschnitt und öffnen Sie More > Settings. Öffnen Sie das Panel Style, wählen Sie ein dunkles Background-Farbfeld und klicken Sie auf Save.
  3. Klicken Sie auf + auf dem Abschnitt und wählen Sie Jumbotron aus dem Tab Content.
  4. Geben Sie Ihr Leitbild als Title ein: „Wir bauen Websites, die Menschen gern nutzen“.
  5. Geben Sie einen Begleitsatz im Feld Lead ein: „Ein 24-köpfiges Studio in Rotterdam, das seit 2012 mit Marken in ganz Europa arbeitet“.
  6. Setzen Sie Type auf Primary für weißen Text auf Ihrer Primärfarbe und klicken Sie dann auf Save.

Schritt 2: Ihre Unternehmensgeschichte erzählen

  1. Fahren Sie über den Abschnitt und klicken Sie auf Add Section Below, das + darunter.
  2. Klicken Sie auf + auf dem neuen Abschnitt und wählen Sie Row; sie kommt mit zwei gleichen Spalten. Klicken Sie auf das Grid-Icon (Column layout) in der Zeile, wählen Sie das Preset 2/3 + 1/3 und klicken Sie auf Save.
  3. Klicken Sie in der breiteren Spalte auf + und wählen Sie Text. Geben Sie „Unsere Geschichte“ als Heading 2 ein, dann zwei kurze Absätze: wie Sie angefangen haben und wie ein Projekt abläuft. Klicken Sie auf Save.
  4. Klicken Sie in der schmaleren Spalte auf + und wählen Sie Image.
  5. Klicken Sie auf Select Image, durchsuchen Sie die Medienbibliothek mit Apply filters, haken Sie ein Foto Ihres Büros oder Teams an und klicken Sie auf Insert selected.
  6. Öffnen Sie das Panel SEO, füllen Sie das Alt attribute aus und klicken Sie auf Save.

Tipp

Halten Sie die Geschichte kurz und gliedern Sie sie mit einer Zwischenüberschrift. Besucher überfliegen, bevor sie lesen.

Schritt 3: Kennzahlen mit Zählern hinzufügen

  1. Fügen Sie mit Add Section Below einen dritten Abschnitt hinzu. Öffnen Sie sein More > Settings, wählen Sie ein hellgraues Background im Panel Style und klicken Sie auf Save.
  2. Klicken Sie auf + auf dem Abschnitt und wählen Sie Row. Klicken Sie auf ihr Grid-Icon (Column layout), wählen Sie das Preset 1/3 + 1/3 + 1/3 und klicken Sie auf Save.
  3. Fügen Sie in jeder Spalte ein Text-Element mit der Beschriftung der Kennzahl hinzu: „Abgeschlossene Projekte“, „Jahre im Geschäft“, „Wiederkehrende Kunden“.
  4. Klicken Sie in jeder Spalte erneut auf + und wählen Sie Number counter; er landet über der Beschriftung. Setzen Sie:
    • End: die Kennzahl (140, 12, 98)
    • Suffix: „+“ oder „%“, wo es passt
    • Thousands separator: Comma
    • Speed: 2500, die Millisekunden, die das Zählen dauert
  5. Klicken Sie auf jedem Zähler auf Save.

Der Zähler hat kein eigenes Beschriftungsfeld, weshalb ein Text-Element darunter sitzt.

Schritt 4: Einen Teamabschnitt bauen

  1. Fügen Sie mit Add Section Below einen vierten Abschnitt hinzu.
  2. Klicken Sie auf + auf dem Abschnitt und wählen Sie Row. Klicken Sie auf ihr Grid-Icon (Column layout), wählen Sie das Preset 1/3 + 1/3 + 1/3 und klicken Sie auf Save.
  3. Klicken Sie in jeder Spalte auf + und wählen Sie Card. Öffnen Sie ihr More > Settings, setzen Sie den Header auf den Namen der Person („Sofia Andersen“) und den Title auf ihre Funktion („Creative Director“), und klicken Sie dann auf Save.
  4. Klicken Sie auf + auf dem Abschnitt selbst und wählen Sie Text; er landet über der Card-Zeile. Geben Sie „Lernen Sie das Team kennen“ als Heading 2 ein, zentrieren Sie ihn und klicken Sie auf Save.

Schritt 5: Einen Schlussabschnitt hinzufügen

  1. Fügen Sie mit Add Section Below einen letzten Abschnitt hinzu und öffnen Sie sein More > Settings. Wählen Sie unter HTML classes Align text center, sodass Text und Button gemeinsam zentriert sind. Wählen Sie im Panel Style Ihre Markenfarbe als Background und Weiß als Font color, und klicken Sie dann auf Save.
  2. Klicken Sie auf + auf dem Abschnitt und wählen Sie Button. Setzen Sie Title auf „Kontakt aufnehmen“, Link auf /contact, Type auf Light und Size auf Large, und klicken Sie dann auf Save.
  3. Klicken Sie erneut auf + auf dem Abschnitt und wählen Sie Text; er landet über dem Button. Geben Sie „Möchten Sie mit uns arbeiten?“ als Heading 2 ein, dann „Wir nehmen jedes Quartal eine Handvoll neuer Kunden an.“ Setzen Sie im Panel Style Font color auf Weiß und klicken Sie dann auf Save.

Schritt 6: Speichern und Vorschau

  1. Klicken Sie in der Builder-Symbolleiste auf Save.
  2. Öffnen Sie das Ansichtsmenü (das Augen-Icon) und wählen Sie Preview.
  3. Scrollen Sie durch die Seite, um jeden Abschnitt zu prüfen.

Weiter gehen

Nicht im Video gezeigt, aber des Hinzufügens wert:

  • Einen Bio-Text und ein Porträt-Image in jeder Card sowie Social links darunter
  • 100% height in den Einstellungen des ersten Abschnitts für einen Header, der den Bildschirm füllt

Was Sie sehen

Die Vorschau zeigt fünf Bänder. Der dunkle Header trägt Ihr Leitbild und seinen Begleitsatz in Weiß. Ihre Geschichte sitzt neben dem Foto. Auf dem grauen Band zählen die drei Zahlen von null hoch, wenn sie ins Sichtfeld scrollen.

Die Teamüberschrift sitzt zentriert über drei Cards, jede mit einem Namen und einer Funktion. Das Schlussband zentriert eine weiße Überschrift über einem hellen Button Kontakt aufnehmen. Wählen Sie Edit im Augen-Menü, um weiterzuarbeiten.

Wenn Sie die Seite nicht wie gezeigt sehen

  • Es gibt keinen Add-Elements-Button auf der leeren Seite. Der Seitenerstellungs-Assistent ist ausgeschaltet, sodass die Seite nur Choose a template anbietet. Klicken Sie stattdessen auf den leeren Bereich, um den Element-Picker zu öffnen.
  • Ein neues Element sitzt über dem zuvor hinzugefügten. Der Builder fügt neue Elemente oben in ihrem Abschnitt oder ihrer Spalte ein. Ziehen Sie es am Zieh-Anfasser in seiner Kontrollleiste an seinen Platz.
  • Number counter oder Card fehlt im Picker. Ihr Builder-Benutzerprofil blendet es aus. Bitten Sie die Website-Administration, es unter Elements unter DXPR Studio > DXPR Builder > User Profiles (/admin/dxpr_studio/dxpr_builder/profile) anzuhaken.
  • 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 werden nicht gespeichert.

Wie geht es weiter?