Karten stylen.

Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen

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.

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.

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?