--- url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/design/schaltflaechenstile' title: 'Schaltflächenstile wählen, die Besucher führen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T04:01:50+00:00' updated: '2026-10-24T19:36:26+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Sie entscheiden, wie laut jede Schaltfläche ist. Eine volle Schaltfläche markiert die eine Aktion, die Sie am meisten wollen, und eine umrandete daneben bietet die Alternative, ohne zu konkurrieren. Diese Seite zeigt, wie Sie ein solches Paar stylen und welche Einstellung was ändert. Um eine Schaltfläche hinzuzufügen und ihren Link zu setzen, siehe Schaltfläche hinzufügen. Das Video folgt den Schritten unten: Es macht „Apply now“ zur Hauptschaltfläche und fügt eine umrandete zweite hinzu. tags: - 'Design guides' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T19:36:26+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Schaltflächenstile wählen, die Besucher führen' description: |- Sie entscheiden, wie laut jede Schaltfläche ist. Eine volle Schaltfläche markiert die eine Aktion, die Sie am meisten wollen, und eine umrandete daneben bietet die Alternative, ohne zu konkurrieren. Diese Seite zeigt, wie Sie ein solches Paar stylen und welche Einstellung was ändert. Um eine Schaltfläche hinzuzufügen und ihren Link zu setzen, siehe Schaltfläche hinzufügen. Das Video folgt den Schritten unten: Es macht „Apply now“ zur Hauptschaltfläche und fügt eine umrandete zweite hinzu. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T04:01:50+0000' dateModified: '2026-10-24T19:36:26+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/dokumentation/dxpr-builder-lernen/design/schaltflaechenstile' articleSection: Design-Leitfäden - '@type': WebPage '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/design/schaltflaechenstile' description: |- Sie entscheiden, wie laut jede Schaltfläche ist. Eine volle Schaltfläche markiert die eine Aktion, die Sie am meisten wollen, und eine umrandete daneben bietet die Alternative, ohne zu konkurrieren. Diese Seite zeigt, wie Sie ein solches Paar stylen und welche Einstellung was ändert. Um eine Schaltfläche hinzuzufügen und ihren Link zu setzen, siehe Schaltfläche hinzufügen. Das Video folgt den Schritten unten: Es macht „Apply now“ zur Hauptschaltfläche und fügt eine umrandete zweite hinzu. 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 --- [Hilfe-Center](/de/hc)/[Dokumentation](/de/hc/dokumentation) /[DXPR Builder lernen](/de/hc/documentation/learn-dxpr-builder) /[Seiten erstellen](/de/hc/documentation/learn-dxpr-builder/build) /[Elemente gestalten](/de/hc/documentation/learn-dxpr-builder/element-settings) /[Design-Leitfäden](/de/hc/documentation/learn-dxpr-builder/design/overview) # Schaltflächenstile wählen, die Besucher führen. DXPR Builder lernenSeiten erstellenElemente gestaltenDesign-Leitfäden ## In diesem Leitfaden Verwandte Leitfäden - [Einen Button hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/elemente/button) - [Elemente bei Hover reagieren lassen](/de/hc/dokumentation/dxpr-builder-lernen/design/hover-effekte) - [Markenfarben nutzen](/de/hc/dokumentation/dxpr-builder-lernen/design/farben-und-branding) Sie entscheiden, wie laut jede Schaltfläche ist. Eine volle Schaltfläche markiert die eine Aktion, die Sie am meisten wollen, und eine umrandete daneben bietet die Alternative, ohne zu konkurrieren. Diese Seite zeigt, wie Sie ein solches Paar stylen und welche Einstellung was ändert. Um eine Schaltfläche hinzuzufügen und ihren Link zu setzen, siehe [Schaltfläche hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/elemente/button). Das Video folgt den Schritten unten: Es macht „Apply now“ zur Hauptschaltfläche und fügt eine umrandete zweite hinzu. ## Haupt- und Zweitschaltfläche stylen Beginnen Sie mit einer Schaltfläche auf der Seite, etwa **Apply now**. 1. Zeigen Sie auf die Schaltfläche und öffnen Sie **More > Settings**. 2. Setzen Sie **Type** auf **Primary**. 3. Setzen Sie **Size** auf **Large** und klicken Sie auf **Save**. 4. Zeigen Sie erneut auf die Schaltfläche und öffnen Sie **More > Clone**. Die Kopie erscheint direkt unter dem Original. 5. Öffnen Sie **More > Settings** auf der Kopie. Ändern Sie ihren **Title**, zum Beispiel auf `Download brochure`, und ihren **Link**. 6. Schalten Sie **Outline style** ein und klicken Sie auf **Save**. 7. Klicken Sie in der Symbolleiste auf **Save**. ## Stil für jede Aktion wählen | Aktion | Stil | Beispiel | |---|---|---| | Die eine Aktion, die Sie am meisten wollen | Volles **Primary** | Apply now | | Eine Alternative | **Outline style** im selben **Type** | Download brochure | | Eine Nebenaktion | **Link**, das wie ein Textlink aussieht | Read the terms | | Eine Warnung oder ein letzter Schritt | **Danger** oder **Warning** | Cancel my booking | Nutzen Sie eine volle Schaltfläche pro Abschnitt, damit Besucher sofort sehen, wo zu klicken ist. Schreiben Sie Bezeichnungen, die sagen, was passiert: „Get started“ statt „Click here“, „Send message“ statt „Submit“. ## Was Sie sehen Zwei große Schaltflächen stapeln sich in der Spalte: eine volle in der Primärfarbe Ihres Themes und eine umrandete mit Rahmen und Text in derselben Farbe. Die volle zieht den Blick zuerst an. Links öffnen nicht, während Sie bearbeiten. Um sie zu testen, speichern Sie die Seite, öffnen Sie das Ansichtsmenü (das Augensymbol) und wählen Sie **Preview**. ## Settings | Einstellung | Was sie bewirkt | Standard | |---|---|---| | **Type** | Der Farbstil: **Primary**, **Secondary**, **Success**, **Info**, **Warning**, **Danger**, **Link**, **Light** oder **Dark**. Die Farben kommen aus Ihrem Theme. | **Primary** | | **Outline style** | Ein farbiger Rahmen und Text ohne Füllung | Aus | | **Size** | **Normal**, **Large** oder **Small** | **Normal** | | **Block button** | Dehnt die Schaltfläche über die volle Breite ihrer Spalte | Aus | | **Link target** | **Same window** oder **New window**. Erscheint, sobald **Link** einen Wert hat. | **Same window** | Für Theming: Jedes **Type** fügt die Bootstrap-Klasse `btn-` hinzu, etwa `btn-primary`. Mit eingeschaltetem **Outline style** wird daraus `btn-outline-`, außer bei **Link**, das immer `btn-link` bleibt. **Large** fügt `btn-lg` hinzu, **Small** fügt `btn-sm` hinzu und **Block button** fügt `btn-block` hinzu. ## Wenn Sie den Stil nicht sehen - **Die umrandete Schaltfläche zeigt keinen Rahmen.** **Type** ist **Link**, das immer wie ein Textlink aussieht, daher wirkt **Outline style** nicht. Wählen Sie ein anderes **Type** für eine umrandete Schaltfläche. - **Die Schaltfläche verschwindet fast.** **Light** ist nah an Weiß, daher verblasst es in einem weißen Abschnitt. Wählen Sie ein dunkleres **Type**, oder geben Sie dem Abschnitt eine Hintergrundfarbe. - **Der Link öffnet im selben Tab.** **Link target** ist **Same window**, und es erscheint erst, sobald **Link** einen Wert hat. Füllen Sie zuerst **Link** aus, dann wählen Sie **New window**. ## Wie geht es weiter? - [Schaltfläche hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/elemente/button): jede Schaltflächeneinstellung, mit Video. - [Hover-Effekte](/de/hc/dokumentation/dxpr-builder-lernen/design/hover-effekte): Schaltfläche abdunkeln oder Schatten hinzufügen, wenn der Zeiger sie erreicht. - [Farbe und Branding](/de/hc/dokumentation/dxpr-builder-lernen/design/farben-und-branding): Schaltflächenfarben bei Ihrer Marke halten.