Eine Produktseite erstellen.

DXPR Builder lernenSeiten erstellenTutorial folgen

Hier bauen Sie eine Seite für ein Produkt. Ein Foto sitzt neben Name, Preis und Buy now-Button, gefolgt von drei Leistungen, einer Spezifikationsliste und einer Verkaufsaufforderung. Nutzen Sie sie für alles, was Sie verkaufen. Um mehrere Tarife zu vergleichen, fügen Sie eine Preistabelle hinzu.

Das Video baut die Seite eines Hardwareprodukts namens Insight Hub.

Bevor Sie beginnen

  • Ihre Rolle hat die Berechtigung Edit with DXPR Builder.
  • Die Medienbibliothek enthält ein Foto des Produkts.
  • 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 ihrer Spalte. Darum wird die rechte Spalte vom Button aufwärts gebaut.

Schritt 1: Das Produkt hinzufügen

  1. Klicken Sie auf Add Elements auf der leeren Seite und wählen Sie Section aus dem Tab Layout.
  2. Klicken Sie auf + auf dem Abschnitt und wählen Sie Row; sie kommt mit zwei gleichen Spalten.
  3. Klicken Sie auf + in der linken Spalte und wählen Sie Image. Klicken Sie auf Select Image, wählen Sie das Produktfoto und klicken Sie auf Insert selected. Geben Sie das Alt attribute im Panel SEO und klicken Sie auf Save.
  4. Klicken Sie auf + in der rechten Spalte und wählen Sie Button. Setzen Sie Title auf „Buy now“, Link auf Ihren Shop, Type auf Primary und Size auf Large und klicken Sie auf Save.
  5. Klicken Sie erneut auf + in der rechten Spalte und wählen Sie Text; es landet über dem Button. Geben Sie den Preis als Heading 2 und klicken Sie auf Save.
  6. Klicken Sie noch einmal auf + und wählen Sie Text; es landet ganz oben. Geben Sie den Produktnamen als Heading 2 ein, fügen Sie eine Beschreibungszeile 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 Leistungen 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 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 Text. Geben Sie den Leistungsnamen als Heading 3 ein, fügen Sie eine Zeile hinzu und klicken Sie auf Save.
  4. Klicken Sie auf + in derselben Spalte und wählen Sie Icon; es landet über dem Text. Wählen Sie das Set Font Awesome Free Solid, suchen Sie nach plug 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 es für die zweite Spalte mit cloud und die dritte mit battery-full.

Schritt 3: Die Spezifikationen hinzufügen

  1. Fügen Sie mit Add Section Below einen dritten Abschnitt hinzu. Öffnen Sie sein More > Settings, 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 Text. Geben Sie „Specifications“ als Heading 2 ein, dann eine Spezifikation pro Zeile, und klicken Sie auf Save.

Schritt 4: Die Aufforderung 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, dann den lilafarbenen Background und weiße 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 „Talk to sales“, Link auf /contact, Type auf Light und Size auf Large und klicken Sie auf Save.
  3. Klicken Sie erneut auf + und wählen Sie Text; es landet über dem Button. Geben Sie „Insight Hub from 249 euro“ als Heading 2 ein und fügen Sie eine Zeile hinzu. Setzen Sie Font color auf Weiß und klicken Sie auf Save.

Schritt 5: 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:

  • Specification table: Fügen Sie mit dem Button Table in der Text-Symbolleiste eine Tabelle ein statt einer Zeile pro Spezifikation.
  • Gallery: Ersetzen Sie das einzelne Foto durch ein Image carousel mit Produktbildern.
  • Plans: Verlinken Sie den Preis mit einer Preistabelle.

Was Sie sehen

Das Produktfoto füllt die linke Hälfte, mit Name, Preis und Buy now-Button rechts. Drei zentrierte Leistungen folgen, jede ein eingekreistes Icon über ihrem Namen und ihrer Zeile. Die Spezifikationen stehen auf einem grauen Band, und ein lilafarbenes Band schließt die Seite mit Talk to sales.

Wenn Sie die Seite nicht wie gezeigt sehen

  • Name, Preis und Button sind in der falschen Reihenfolge. Sie kamen von oben nach unten hinein, und neue Elemente landen oben in ihrer Spalte. Ziehen Sie sie am Zieh-Anfasser in ihrer Kontrollleiste an ihren Platz.
  • Die Icons haben keinen Kreis. Style sitzt im Panel Icon utilities, nicht in General. Öffnen Sie die Einstellungen des Icons, öffnen Sie Icon utilities und setzen Sie Style auf Circle.
  • Die Überschrift bleibt dunkel auf Lila. Das Text-Element hat keine eigene Font color. Öffnen Sie sein Panel Style und setzen Sie Font color auf Weiß.
  • 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?