--- url: 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/elements/button' title: 'Einen Button hinzufügen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-23T23:54:21+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Sie erhalten einen deutlichen Call-to-Action-Button, der Besucher genau dorthin bringt, wo Sie sie haben möchten. Verlinken Sie damit zum Beispiel ein Anmeldeformular, eine Produktseite oder eine Kontaktseite.' tags: - Marketing 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: 'Einen Button hinzufügen' description: 'Sie erhalten einen deutlichen Call-to-Action-Button, der Besucher genau dorthin bringt, wo Sie sie haben möchten. Verlinken Sie damit zum Beispiel ein Anmeldeformular, eine Produktseite oder eine Kontaktseite.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-23T23:54:21+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/elements/button' articleSection: Marketing - '@type': WebPage '@id': 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/elements/button' description: 'Sie erhalten einen deutlichen Call-to-Action-Button, der Besucher genau dorthin bringt, wo Sie sie haben möchten. Verlinken Sie damit zum Beispiel ein Anmeldeformular, eine Produktseite oder eine Kontaktseite.' 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) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Marketing](/hc/documentation/learn-dxpr-builder/elements/marketing) # Einen Button hinzufügen. Learn DXPR BuilderBuild pagesAdd contentMarketing ## In this guide Related guides - [Das Aussehen eines Elements im Style-Tab ändern](/de/hc/documentation/learn-dxpr-builder/element-settings/style-tab) Sie erhalten einen deutlichen Call-to-Action-Button, der Besucher genau dorthin bringt, wo Sie sie haben möchten. Verlinken Sie damit zum Beispiel ein Anmeldeformular, eine Produktseite oder eine Kontaktseite. ## Einen Button hinzufügen Öffnen Sie Ihre Seite im angemeldeten Zustand: Wenn Sie mit der Maus über den Inhaltsbereich fahren, erscheinen die Steuerelemente des Builders. [Ihre erste Seite](/de/hc/documentation/learn-dxpr-builder/getting-started/first-page) zeigt die Grundlagen. 1. Fahren Sie mit der Maus über die Spalte und klicken Sie in ihrer Steuerleiste auf **+**; klicken Sie auf einer leeren Seite auf **Add Elements**. Öffnen Sie den **Content**-Tab und klicken Sie auf **Button**. Der Button landet oben in der Spalte und sein Einstellungsdialog öffnet sich. 2. Ersetzen Sie den Standardtext unter **Title** durch Ihre Button-Beschriftung. 3. Tragen Sie unter **Link** das Ziel ein, zum Beispiel `/contact` oder `https://example.com`. 4. Wählen Sie unter **Type** eine Farbe. Hier wählen wir **Success**. 5. Wählen Sie die **Size**. Hier wählen wir **Large**. 6. Klicken Sie im Dialog auf **Speichern**. Klicken Sie dann in der Symbolleiste oben im Inhaltsbereich auf **Speichern**, um die Seite zu speichern. ## Was Sie sehen Oben in der Spalte erscheint ein Button mit der von Ihnen eingegebenen Beschriftung. Im Video ist er groß und grün und trägt die Aufschrift Register for Open Day. Links öffnen sich während der Bearbeitung nicht. Um Ihren Button zu testen, speichern Sie die Seite, wählen Sie im Ansichtsmenü der Symbolleiste **Preview** und klicken Sie auf den Button. Besucher sehen ihn, sobald Sie die Seite speichern und sie veröffentlicht ist. ## Ihren Button einrichten Fahren Sie mit der Maus über das Element und öffnen Sie in seiner Steuerleiste **More > Settings**. Optionen: - **Title:** der Text auf dem Button. - **Link:** das Ziel des Buttons: ein Pfad auf Ihrer Website, zum Beispiel `/contact`, oder eine vollständige URL. - **Link target:** öffnet den Link im selben Fenster (Same window) oder in einem neuen Fenster (New window). Wird angezeigt, sobald **Link** einen Wert hat. - **Type:** der Farbstil: Primary, Secondary, Success, Info, Warning, Danger, Link, Light oder Dark. - **Block button:** zieht den Button über die volle Breite der Spalte auf. - **Outline style:** zeigt einen farbigen Rahmen und Text ohne Füllung. Der Typ Link hat keinen Rahmen und sieht immer wie ein Textlink aus. - **Size:** Normal, Large oder Small. ## Wenn Sie es nicht sehen - **Der Button ist nicht im Content-Tab.** Ihr Benutzerprofil blendet ihn aus. Bitten Sie die Administration, ihn unter [User Profiles](/de/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin) zu aktivieren. - **Es ist nach dem Neuladen verschwunden.** Die Seite wurde nicht gespeichert. Fügen Sie es erneut hinzu und klicken Sie in der Symbolleiste oben im Inhaltsbereich auf **Speichern**. - **Ein Klick führt zu „page not found“.** Der Pfad unter **Link** ist falsch. Pfade auf Ihrer Website beginnen mit `/`, zum Beispiel `/contact`. Fahren Sie mit der Maus über das Element und öffnen Sie **More > Settings**, um ihn zu korrigieren. - **Der Button sieht anders aus als im Video.** Sein Aussehen bestimmen **Type**, **Outline style**, **Block button** und **Size**. Fahren Sie mit der Maus über das Element und öffnen Sie **More > Settings**, um sie zu prüfen. - **Der Link öffnet sich im selben Tab.** **Link target** steht auf Same window. Füllen Sie zuerst **Link** aus und wählen Sie dann New window. ## Wie geht es weiter? [Style-Tab](/de/hc/documentation/learn-dxpr-builder/element-settings/style-tab), um Abstände und Hintergrund Ihres Buttons zu ändern.