--- url: 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/design/card-styles' title: 'Karten stylen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T04:01:53+00:00' updated: '2026-10-24T06:23:23+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Geben Sie Ihren Karten einen Look, der zu Ihrer Website passt: ein Farbschema aus dem Type der Karte, runde Ecken und Schatten aus dem Panel Style. Am Ende haben Sie eine Karte, die Sie über eine Zeile wiederholen können, für Features, Teammitglieder oder Preise. Um zuerst eine Karte zu platzieren, siehe Karte hinzufügen. Das Video folgt den Schritten unten: Es gibt einer Karte einen hellen Look, runde Ecken und einen weichen Schatten. tags: - Ontwerpgidsen image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T06:23:23+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Karten stylen' description: |- Geben Sie Ihren Karten einen Look, der zu Ihrer Website passt: ein Farbschema aus dem Type der Karte, runde Ecken und Schatten aus dem Panel Style. Am Ende haben Sie eine Karte, die Sie über eine Zeile wiederholen können, für Features, Teammitglieder oder Preise. Um zuerst eine Karte zu platzieren, siehe Karte hinzufügen. Das Video folgt den Schritten unten: Es gibt einer Karte einen hellen Look, runde Ecken und einen weichen Schatten. 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:53+0000' dateModified: '2026-10-24T06:23:23+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/design/card-styles' articleSection: Ontwerpgidsen - '@type': WebPage '@id': 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/design/card-styles' description: |- Geben Sie Ihren Karten einen Look, der zu Ihrer Website passt: ein Farbschema aus dem Type der Karte, runde Ecken und Schatten aus dem Panel Style. Am Ende haben Sie eine Karte, die Sie über eine Zeile wiederholen können, für Features, Teammitglieder oder Preise. Um zuerst eine Karte zu platzieren, siehe Karte hinzufügen. Das Video folgt den Schritten unten: Es gibt einer Karte einen hellen Look, runde Ecken und einen weichen Schatten. 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) /[Elementen stylen](/hc/documentation/learn-dxpr-builder/element-settings) /[Ontwerpgidsen](/hc/documentation/learn-dxpr-builder/design/overview) # Karten stylen. Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen ## In this guide Related guides - [Eine Card hinzufügen](/de/hc/documentation/learn-dxpr-builder/elements/card) - [Elemente bei Hover reagieren lassen](/de/hc/documentation/learn-dxpr-builder/design/hover-effects) - [Markenfarben nutzen](/de/hc/documentation/learn-dxpr-builder/design/colour-and-branding) Geben Sie Ihren Karten einen Look, der zu Ihrer Website passt: ein Farbschema aus dem **Type** der Karte, runde Ecken und Schatten aus dem Panel **Style**. Am Ende haben Sie eine Karte, die Sie über eine Zeile wiederholen können, für Features, Teammitglieder oder Preise. Um zuerst eine Karte zu platzieren, siehe [Karte hinzufügen](/de/hc/documentation/learn-dxpr-builder/elements/card). Das Video folgt den Schritten unten: Es gibt einer Karte einen hellen Look, runde Ecken und einen weichen Schatten. ## Karte stylen 1. Zeigen Sie auf die Karte, öffnen Sie **More** und wählen Sie **Settings**. 2. Wählen Sie unter **Type** die Option **Light**. 3. Öffnen Sie das Panel **Style**. 4. Setzen Sie **Border radius** auf 8. 5. Setzen Sie **Drop shadow** auf 2. 6. Klicken Sie auf **Save**. ## Was Sie sehen Die Karte hat einen hellen Hintergrund, runde Ecken und einen weichen Schatten. Ihre Leiste **Header** sitzt oben, ihr **Title** eröffnet den Body, und die darin hinzugefügten Elemente folgen darunter. Ein **Type** färbt die ganze Karte, nicht nur den Header. **Primary**, **Secondary**, **Success**, **Info**, **Warning**, **Danger** und **Dark** füllen die Karte mit dieser Theme-Farbe und machen den Text weiß. **Light** gibt einen hellen Hintergrund mit normalem Text. **Default** überlässt die Karte Ihrem Theme. ## Settings | Einstellung | Wo | Was sie bewirkt | |---|---|---| | **Header** | **General** | Text in einer Leiste oben auf der Karte; leer lassen für keine Leiste | | **Title** | **General** | Eine Überschrift oben im Karten-Body | | **Type** | **General** | Das Farbschema der ganzen Karte; Standard **Default** | | **Background**, **Font color** | **Style** | Eigene Farben, wenn **Type** gleich **Default** | | **Border radius** | **Style** | Runde Ecken, in Pixeln | | **Drop shadow** | **Style** | Tiefe, von 1 bis 5 | | **Border** (Boxmodell), **Border style**, **Border color** | **Style** | Ein Rahmen auf einer oder mehreren Seiten | ## Kartenmuster - **Flache Karte**: **Border style** **Solid**, eine helle **Border color**, **Border radius** 4, kein Schatten. - **Erhabene Karte**: **Drop shadow** 2, **Border style** **None**, **Border radius** 8. - **Hervorgehobene Karte**: Setzen Sie die linke Seite von **Border** im Boxmodell auf 4, **Border style** **Solid** und eine Akzent-**Border color**. - **Karte, die sich hebt**: **Drop shadow** 1 in **Style** und 4 in **Hover style**; siehe [Elemente bei Hover reagieren lassen](/de/hc/documentation/learn-dxpr-builder/design/hover-effects). ## Karten in einer Zeile Für ein Raster aus Feature-Karten, Teammitgliedern oder Preisen: 1. Fügen Sie eine Zeile hinzu und wählen Sie ein Layout mit drei oder vier gleichen Spalten. 2. Fügen Sie jeder Spalte eine Karte hinzu und geben Sie jeder Karte dieselben **Type**- und **Style**-Werte. 3. Öffnen Sie das Menü **More** der Zeile, wählen Sie **Settings** und schalten Sie **Equal-height columns** ein. Die Spalten stehen auf einer Linie, aber jede Karte bleibt so hoch wie ihr Inhalt. Halten Sie den Text jeder Karte etwa gleich lang, damit die Karten gleich hoch enden. Für eine Preistabelle heben Sie den empfohlenen Tarif mit einem anderen **Type** oder tieferem **Drop shadow** hervor. ## Wenn Sie den Stil nicht sehen - **Background oder Font color im Style-Panel wirken nicht.** Ein **Type** außer **Default** setzt die Kartenfarben mit Theme-Klassen, die über dem Panel **Style** gewinnen. Setzen Sie **Type** auf **Default** und wählen Sie eigene Farben. - **Weißer Text auf farbiger Karte ist schwer lesbar.** Die Farben **Warning** und **Info** vieler Themes sind blass, und diese Typen setzen immer weißen Text. Wählen Sie ein dunkleres **Type**, oder **Light**, das die normale Textfarbe behält. - **Der Schatten erscheint nicht.** **Drop shadow** ist 0, was kein Schatten heißt. Setzen Sie ihn auf 1 oder höher. ## Wie geht es weiter? - [Karte hinzufügen](/de/hc/documentation/learn-dxpr-builder/elements/card): Karte hinzufügen und mit Elementen füllen. - [Elemente bei Hover reagieren lassen](/de/hc/documentation/learn-dxpr-builder/design/hover-effects): Karten heben lassen, wenn Besuchende darauf zeigen. - [Markenfarben nutzen](/de/hc/documentation/learn-dxpr-builder/design/colour-and-branding): Kartenfarben beim Rest der Website halten.