Eine Leistungsseite erstellen.

DXPR Builder lernenReferenzHilfe erhalten

Hier bauen Sie eine Seite, die listet, was Sie anbieten. Sie hat einen Header, drei Leistungen mit Icons, eine Leistung im Detail neben einem Foto, Kundenlogos und eine Aufforderung. Nutzen Sie sie, wenn Sie mehrere Leistungen verkaufen. Für eine Seite über ein Angebot folgen Sie stattdessen Eine Marketing-Landingpage erstellen.

Das Video baut die Leistungsseite einer Digitalagentur.

Bevor Sie beginnen

  • Ihre Rolle hat die Berechtigung Edit with DXPR Builder.
  • Die Medienbibliothek enthält ein Foto für die Leistung im Detail und vier Kundenlogos.
  • 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.
  • 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 Elemente einer Spalte in umgekehrter Reihenfolge hinzu oder ziehen Sie sie danach an ihren Platz.

Schritt 1: Den Header 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, öffnen Sie More > Settings, wählen Sie das Navyblau als Background im Panel Style und klicken Sie auf Save.
  2. Klicken Sie auf + auf dem Abschnitt und wählen Sie Jumbotron aus dem Tab Content.
  3. Setzen Sie den Title auf „Unsere Leistungen“, den Lead auf eine Zeile über Ihr Angebot und den Type auf Primary, und klicken Sie dann auf Save.

Schritt 2: Die Leistungsübersicht hinzufügen

  1. Fahren Sie über den Abschnitt und klicken Sie auf Add Section Below. Geben Sie dem neuen Abschnitt die Klasse Align text center.
  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 der ersten Spalte auf + und wählen Sie Text. Geben Sie „Design“ als Heading 3 ein, fügen Sie eine Zeile hinzu und klicken Sie auf Save.
  4. Klicken Sie in derselben Spalte auf + und wählen Sie Icon; es landet über dem Text. Wählen Sie das Set Font Awesome Free Solid, suchen Sie nach palette und klicken Sie auf das Icon. Setzen Sie Size auf Very Large (3x), öffnen Sie Icon utilities, setzen Sie Style auf Circle und klicken Sie auf Save.
  5. Wiederholen Sie das für „Entwicklung“ mit code und „Marketing“ mit bullhorn.

Schritt 3: Eine Leistung im Detail hinzufügen

  1. Fügen Sie mit Add Section Below einen dritten Abschnitt hinzu, dann eine Row; sie kommt mit zwei gleichen Spalten.
  2. Klicken Sie in der linken Spalte auf + und wählen Sie Image. Klicken Sie auf Select Image, haken Sie ein Foto an und klicken Sie auf Insert selected. Geben Sie das Alt attribute im Panel SEO ein und klicken Sie auf Save.
  3. Klicken Sie in der rechten Spalte auf + und wählen Sie Button. Setzen Sie Title auf „Angebot einholen“, Link auf /contact und Type auf Primary, und klicken Sie dann auf Save.
  4. Klicken Sie erneut in der rechten Spalte auf + und wählen Sie Text; er landet über dem Button. Geben Sie „Design“ als Heading 2 ein, fügen Sie die Beschreibung und den Leistungsumfang hinzu und klicken Sie auf Save.

Schritt 4: Kundenlogos hinzufügen

  1. Fügen Sie einen vierten Abschnitt hinzu und öffnen Sie sein More > Settings. Wählen Sie Align text center unter HTML classes und ein hellgraues Background im Panel Style. Klicken Sie auf Save.
  2. Klicken Sie auf + auf dem Abschnitt und wählen Sie Marquee. Entfernen Sie die drei Beispielbilder mit dem × auf jedem. Klicken Sie auf Select Image, suchen Sie nach Ihren Logos, haken Sie vier davon an und klicken Sie auf Insert selected. Schalten Sie Gray scale ein und klicken Sie auf Save.
  3. Klicken Sie erneut auf + auf dem Abschnitt und wählen Sie Text; er landet über dem Marquee. Geben Sie „Führende Marken vertrauen uns“ als Heading 2 ein und klicken Sie auf Save.

Schritt 5: Die Aufforderung 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 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 „Beratung vereinbaren“, 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 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.

Weiter gehen

Nicht im Video gezeigt:

  • Ein Detailabschnitt pro Leistung: Wiederholen Sie Schritt 3 für Entwicklung und Marketing. Schalten Sie Mirror row in den Einstellungen jeder zweiten Zeile ein, sodass die Fotos auf Tablets und Desktops die Seiten wechseln.
  • Sprunglinks: Setzen Sie die HTML ID jedes Detailabschnitts (design, development, marketing). Fügen Sie unter jedem Übersichtstext einen Button mit Link #design und so weiter hinzu.
  • Testimonials: Fügen Sie pro Kunde ein Block quote über den Logos hinzu.

Was Sie sehen

Ein Navyblau-Band eröffnet die Seite, mit „Unsere Leistungen“ in großer weißer Schrift über einer einzeiligen Zusammenfassung. Es folgen drei zentrierte Leistungen, jede ein Icon im Kreis über ihrem Namen und ihrer Zeile. Design erhält ein eigenes Band mit einem Foto, einer Beschreibung und Angebot einholen. Graue Kundenlogos scrollen auf einem hellen Band vorbei, und ein violettes Band schließt die Seite.

Wenn Sie die Seite nicht wie gezeigt sehen

  • Das Marquee zeigt noch die Beispiel-Logos. Die drei Beispielbilder bleiben, bis Sie sie entfernen. Öffnen Sie die Marquee-Einstellungen, klicken Sie auf das × auf jedem Beispielbild und speichern Sie.
  • Die Logos sind farbig. Gray scale ist aus. Öffnen Sie die Marquee-Einstellungen, schalten Sie es ein und klicken Sie auf Save.
  • Die Icons haben keinen Kreis. Style sitzt im Panel Icon utilities, nicht in General. Öffnen Sie die Icon-Einstellungen, öffnen Sie Icon utilities und setzen Sie Style auf Circle.
  • 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?