Eine Fallstudie schreiben.

DXPR Builder lernenWebsite verwaltenDrupal-Funktionen verbinden

Hier beschreiben Sie ein Kundenprojekt in drei Teilen: Herausforderung, Lösung und Ergebnisse. Am Ende haben Sie sieben Bänder: einen Foto-Hero, einen Überblick mit der wichtigsten Zahl, die Herausforderung, die Lösung neben einem Foto, drei Zähler, ein Zitat und eine Aufforderung. Um viele Projekte auf einer Seite zu zeigen, folgen Sie stattdessen Eine Portfoliogalerie erstellen.

Das Video beschreibt die Arbeit einer Agentur für Northwind Retail.

Bevor Sie beginnen

  • Ihre Rolle hat die Berechtigung Edit with DXPR Builder.
  • Die Medienbibliothek enthält ein breites Foto für den Hero und ein Foto dessen, was Sie geliefert haben.
  • 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. Fügen Sie die Elemente einer Spalte in umgekehrter Reihenfolge hinzu oder ziehen Sie sie danach an ihren Platz.

Schritt 1: Den Hero hinzufügen

  1. Klicken Sie auf der leeren Seite auf Add Elements und wählen Sie Section aus dem Tab Layout. Fahren Sie darüber und öffnen Sie More > Settings.
  2. Wählen Sie unter HTML classes Align text center.
  3. Öffnen Sie das Panel Style. Klicken Sie unter Background image auf Select Image, haken Sie ein Foto an und klicken Sie auf Insert selected. Setzen Sie Background style auf Cover.
  4. Wählen Sie ein dunkles Navyblau als Background und Weiß als Font color und klicken Sie dann auf Save. Die Farbe zeigt sich, während das Foto lädt.
  5. Klicken Sie auf + auf dem Abschnitt und wählen Sie Button. Setzen Sie Title auf „Website besuchen“, Link auf die URL des Kunden, Type auf Light und Size auf Large, und klicken Sie dann auf Save.
  6. Klicken Sie erneut auf + und wählen Sie Text; er landet über dem Button. Geben Sie den Kundennamen als Heading 2 und eine einzeilige Zusammenfassung darunter ein. Setzen Sie Font color im Panel Style auf Weiß 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: Den Überblick hinzufügen

  1. Fahren Sie über den Hero und klicken Sie auf Add Section Below. Fügen Sie dem neuen Abschnitt eine Row hinzu, klicken Sie auf ihr Grid-Icon (Column layout), wählen Sie das Preset 2/3 + 1/3 und klicken Sie auf Save.
  2. Klicken Sie in der breiten Spalte auf + und wählen Sie Text. Geben Sie „Überblick“ als Heading 2 ein, fügen Sie die Zusammenfassung hinzu und klicken Sie auf Save.
  3. Klicken Sie in der schmalen Spalte auf + und wählen Sie Text. Geben Sie die Beschriftung der Kennzahl ein, „Mehr Online-Bestellungen“, und klicken Sie auf Save.
  4. Klicken Sie erneut in der schmalen Spalte auf + und wählen Sie Number counter; er landet über der Beschriftung. Setzen Sie End auf 32, Suffix auf %, Thousands separator auf Comma, setzen Sie Speed auf 2500 und klicken Sie dann auf Save.

Der Zähler hat kein eigenes Beschriftungsfeld; das Text-Element darunter übernimmt das.

Schritt 3: Die Herausforderung 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 Text. Geben Sie „Die Herausforderung“ als Heading 2 ein, beschreiben Sie das Problem und klicken Sie auf Save.

Schritt 4: Die Lösung hinzufügen

  1. Fügen Sie einen vierten Abschnitt hinzu, dann eine Row; sie kommt mit zwei gleichen Spalten.
  2. Klicken Sie in der linken Spalte auf + und wählen Sie Text. Geben Sie „Die Lösung“ als Heading 2 ein, beschreiben Sie, was Sie gebaut haben, und klicken Sie auf Save.
  3. Klicken Sie in der rechten Spalte auf + und wählen Sie Image. Klicken Sie auf Select Image, haken Sie ein Foto des Ergebnisses an und klicken Sie auf Insert selected. Geben Sie das Alt attribute im Panel SEO ein und klicken Sie auf Save.

Schritt 5: Die Ergebnisse hinzufügen

  1. Fügen Sie einen fünften Abschnitt hinzu und öffnen Sie sein More > Settings. Wählen Sie Align text center unter HTML classes, dann das Navyblau als Background und Weiß als Font color im Panel Style. 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 zuerst eine Text-Beschriftung hinzu, dann einen Number counter darüber, wie in Schritt 2: End 32 mit Suffix %, End 2 mit Suffix s und End 15000.

Schritt 6: Das Zitat hinzufügen

  1. Fügen Sie einen sechsten Abschnitt hinzu.
  2. Klicken Sie auf + auf dem Abschnitt und wählen Sie Block quote. Geben Sie die Worte des Kunden ein, füllen Sie Cite mit Name und Funktion aus und klicken Sie auf Save.

Schritt 7: Die Aufforderung hinzufügen

  1. Fügen Sie einen siebten Abschnitt hinzu und öffnen Sie sein More > Settings. Wählen Sie Align text center unter HTML classes, dann das violette Background und Weiß als Font color im Panel Style. Klicken Sie 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 + und wählen Sie Text; er landet über dem Button. Geben Sie „Bereit für den Start?“ als Heading 2 ein und fügen Sie eine Zeile hinzu. Setzen Sie Font color auf Weiß und klicken Sie auf Save.

Schritt 8: 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.

Was Sie sehen

Der Kundenname und der Button Website besuchen sitzen zentriert auf dem Foto. Der Überblick zeigt 32 % neben seiner Zusammenfassung; Besucher sehen die Zahl hochzählen, wenn sie ins Sichtfeld scrollt. Die Herausforderung steht auf einem grauen Band, und die Lösung sitzt neben ihrem Foto.

Auf dem Navyblau-Band zählen die drei Ergebnisse hoch, wenn sie ins Sichtfeld scrollen: 32 %, 2 s und 15.000. Das Kundenzitat und ein violettes Band mit „Kontakt aufnehmen“ schließen die Seite.

Wenn Sie die Seite nicht wie gezeigt sehen

  • Das Hero-Foto füllt den Abschnitt nicht. Background style steht noch auf Theme defaults. Öffnen Sie das Panel Style des Abschnitts und setzen Sie es auf Cover.
  • Der letzte Zähler zeigt 15000 ohne Komma. Thousands separator steht noch auf None. Öffnen Sie die Zählereinstellungen und wählen Sie Comma.
  • Eine Beschriftung sitzt über ihrem Zähler. Der Zähler kam vor seiner Beschriftung hinein, und neue Elemente landen oben in ihrer Spalte. Ziehen Sie die Beschriftung am Zieh-Anfasser in ihrer Kontrollleiste unter den Zähler.
  • 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?