--- url: 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/getting-started/first-page' title: 'Ihre erste Seite erstellen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-23T23:55:43+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Bauen Sie eine Seite mit DXPR Builder: ein Bild neben einer Überschrift, einen kurzen Absatz und einen Button. Sie können auch mit einer fertigen Vorlage beginnen und ihre Wörter ändern. Beides dauert wenige Minuten und Sie enden mit einer gespeicherten Seite, deren Vorschau Sie so ansehen, wie Besucher sie sehen werden. Nutzen Sie diese Seite nach der Installation von DXPR Builder. Das Video baut die Seite von Grund auf: Section, Row, Image, Button und Text, dann Speichern und Vorschau. tags: - 'Je eerste pagina bouwen' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Ihre erste Seite erstellen' description: |- Bauen Sie eine Seite mit DXPR Builder: ein Bild neben einer Überschrift, einen kurzen Absatz und einen Button. Sie können auch mit einer fertigen Vorlage beginnen und ihre Wörter ändern. Beides dauert wenige Minuten und Sie enden mit einer gespeicherten Seite, deren Vorschau Sie so ansehen, wie Besucher sie sehen werden. Nutzen Sie diese Seite nach der Installation von DXPR Builder. Das Video baut die Seite von Grund auf: Section, Row, Image, Button und Text, dann Speichern und Vorschau. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-23T23:55:43+0000' dateModified: '2026-10-24T09:09:48+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/getting-started/first-page' articleSection: 'Je eerste pagina bouwen' - '@type': WebPage '@id': 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/getting-started/first-page' description: |- Bauen Sie eine Seite mit DXPR Builder: ein Bild neben einer Überschrift, einen kurzen Absatz und einen Button. Sie können auch mit einer fertigen Vorlage beginnen und ihre Wörter ändern. Beides dauert wenige Minuten und Sie enden mit einer gespeicherten Seite, deren Vorschau Sie so ansehen, wie Besucher sie sehen werden. Nutzen Sie diese Seite nach der Installation von DXPR Builder. Das Video baut die Seite von Grund auf: Section, Row, Image, Button und Text, dann Speichern und Vorschau. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Startseite item: 'https://dxpr.com/de' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: de --- [Help Center](/de/hc)/[Documentation](/de/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Start here](/hc/documentation/learn-dxpr-builder/start-here) /[Je eerste pagina bouwen](/hc/documentation/learn-dxpr-builder/start-here/first-steps) # Ihre erste Seite erstellen. Learn DXPR BuilderStart hereJe eerste pagina bouwen ## In this guide Bauen Sie eine Seite mit DXPR Builder: ein Bild neben einer Überschrift, einen kurzen Absatz und einen Button. Sie können auch mit einer fertigen Vorlage beginnen und ihre Wörter ändern. Beides dauert wenige Minuten und Sie enden mit einer gespeicherten Seite, deren Vorschau Sie so ansehen, wie Besucher sie sehen werden. Nutzen Sie diese Seite nach der [Installation von DXPR Builder](/de/hc/documentation/learn-dxpr-builder/getting-started/installation). Das Video baut die Seite von Grund auf: Section, Row, Image, Button und Text, dann Speichern und Vorschau. ## Bevor Sie beginnen - DXPR Builder ist mit Ihrem Produktschlüssel installiert ([DXPR Builder auf Ihrer Drupal-Website installieren](/de/hc/documentation/learn-dxpr-builder/getting-started/installation)). - Ein Inhaltstyp zeigt den Builder: Sein Textfeld nutzt den **DXPR Builder**-Formatierer, wie **Drag and drop Page** aus `dxpr_builder_page`. - Ihre Rolle hat die Berechtigung **Edit with DXPR Builder**. ## Die Seite erstellen 1. Gehen Sie zu **Inhalt** > **Inhalt hinzufügen** und wählen Sie einen Inhaltstyp, der den Builder zeigt. 2. Geben Sie einen **Title** ein und klicken Sie auf **Speichern**. Die gespeicherte Seite öffnet sich mit einem leeren Builder. DXPR Builder arbeitet auf dieser Seite, nicht auf dem Bearbeitungsformular. ## Option A: Mit einer Vorlage beginnen Der Tab **Saved templates** listet Layouts auf, die Personen auf Ihrer Website zur Wiederverwendung gespeichert haben. DXPR CMS liefert mehrere mit, zum Beispiel **Colored icon boxes**. Auf anderen Websites kann der Tab leer sein; **Choose a template** auf der leeren Seite bietet dann die Seitenvorlagen, die DXPR Builder mitbringt. [Eine gespeicherte Vorlage einfügen](/de/hc/documentation/learn-dxpr-builder/reusable-templates/saved-templates-tab)zeigt diese Schritte in einem Video. 1. Klicken Sie auf **Add Elements**, um die Elementauswahl zu öffnen. 2. Wechseln Sie zum Tab **Saved templates**. 3. Klicken Sie auf eine Vorlage, um sie einzufügen. Ihre Sections, Rows und Elemente erscheinen auf der Seite, bereit zur Bearbeitung. 4. Klicken Sie in der Symbolleiste auf **Speichern**. 5. Öffnen Sie das Augen-Menü und wählen Sie **Preview**, um die Seite so zu sehen, wie Besucher sie sehen. ## Option B: Von Grund auf bauen Das Video oben folgt diesen Schritten. 1. Klicken Sie auf **Add Elements** und wählen Sie **Section** auf dem **Layout**-Tab. 2. Klicken Sie auf das **+** auf der Steuerleiste der Section und wählen Sie **Row**. 3. Klicken Sie auf das Raster-Icon auf der Row, wählen Sie eine Spaltenvorgabe wie 1/3 + 2/3 und klicken Sie auf **Speichern**. 4. Klicken Sie auf das **+** in der linken Spalte, öffnen Sie den **Content**-Tab und wählen Sie **Image**. 5. Klicken Sie auf **Select Image**, durchsuchen Sie die Medienverwaltung mit **Apply filters**, kreuzen Sie ein Foto an und klicken Sie auf **Insert selected**. 6. Öffnen Sie das **SEO**-Panel, geben Sie das **Alt attribute** ein und klicken Sie auf **Speichern**. 7. Klicken Sie auf das **+** in der rechten Spalte und wählen Sie **Button**. 8. Geben Sie **Title** und **Link** ein, wählen Sie einen **Type** und klicken Sie auf **Speichern**. 9. Klicken Sie auf das **+** auf der Steuerleiste der breiten Spalte und wählen Sie **Text**. 10. Geben Sie eine Überschrift ein, stellen Sie sie auf **Heading 2**, geben Sie darunter einen Absatz ein und klicken Sie auf **Speichern**. 11. Klicken Sie in der Symbolleiste auf **Speichern**. 12. Öffnen Sie das Augen-Menü und wählen Sie **Preview**, um die Seite so zu sehen, wie Besucher sie sehen. Wählen Sie **Edit** im selben Menü, um weiterzuarbeiten. ## Das Hinzugefügte ändern - **Text**: Klicken Sie auf ein Text-Element, um es direkt zu bearbeiten. Eine Symbolleiste bietet Fett, Kursiv, Überschriften, Links, Listen, Schriftfarbe und mehr. Ihr [Benutzerprofil](/de/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin) entscheidet, welche Schaltflächen erscheinen. - **Settings**: Öffnen Sie **More** auf der Steuerleiste eines Elements und wählen Sie **Settings**. Ein Image hat Breite, Höhe, einen Link und seinen Alternativtext; ein Button hat einen **Type**, eine Größe und einen Link. - **Order**: Ziehen Sie ein Element an seiner Steuerleiste an eine andere Stelle. Klicken Sie in der Symbolleiste auf **Speichern**, wenn Sie fertig sind. Der Browser warnt Sie, wenn Sie versuchen, die Seite mit ungespeicherten Änderungen zu verlassen. ## Was Sie sehen In **Preview** sitzt das Bild links. Überschrift, Absatz und Button sitzen rechts, ohne Steuerleisten. Zurück in **Edit** zeigt jedes Element seine Steuerleiste, wenn Sie mit der Maus darüberfahren. DXPR Builder speichert die Seite als HTML in dem Feld, das es bearbeitet, meist **Body**. Besucher sehen die Seite, sobald der Inhalt veröffentlicht ist. ## Wenn Sie den Add-Elements-Button nicht sehen - **Die leere Seite zeigt „Choose a template“ und „Or add elements using the +“.** **Enable page creation assistant** ist unter `/admin/dxpr_studio/dxpr_builder/ai_settings` ausgeschaltet. Klicken Sie stattdessen auf das **+** in der Builder-Symbolleiste, um die Elementauswahl zu öffnen. - **Die Seite zeigt gar keinen Builder.** Der Inhaltstyp nutzt den **DXPR Builder**-Formatierer nicht oder Ihrer Rolle fehlt **Edit with DXPR Builder**. Folgen Sie [Die Installation überprüfen](/de/hc/documentation/learn-dxpr-builder/getting-started/installation#verify-the-installation). - **Der Tab Saved templates listet keine Vorlagen.** Niemand auf der Website hat bisher eine gespeichert oder Ihr Benutzerprofil blendet sie aus. Nutzen Sie **Choose a template** auf der leeren Seite oder [speichern Sie eine eigene](/de/hc/documentation/learn-dxpr-builder/reusable-templates/user-templates). - **Ihre Änderungen sind nach einem Neuladen weg.** Die Seite wurde nicht gespeichert. Klicken Sie in der Builder-Symbolleiste auf **Speichern**, bevor Sie die Seite verlassen. ## Wie geht es weiter? - [Die Bearbeitungswerkzeuge](/hc/documentation/learn-dxpr-builder/editing): Jedes Steuerelement, plus Tastaturkürzel. - [Elements](/hc/documentation/learn-dxpr-builder/elements): Alle 22 Inhalts- und 6 Layout-Elemente. - [Layout](/hc/documentation/learn-dxpr-builder/layout/overview): Sections, Rows und Columns, die sich jedem Bildschirm anpassen.