Używaj kolorów marki.

Poznaj DXPR BuilderBuduj stronyStylizuj elementyPrzewodniki projektowe

Nadaj sekcjom, tekstowi i przyciskom kolory marki, aby każda strona wyglądała jak część tej samej witryny. Każde pole koloru w kreatorze DXPR pokazuje paletę motywu jako próbki, więc wybierasz kolory marki zamiast zgadywać kody. Przykład nadaje sekcji podstawowy kolor marki z białym tekstem.

Film podąża za poniższymi krokami: koloruje sekcję próbką marki i sprawia, że jej tekst jest biały.

Zanim zaczniesz

  • Twoje kolory marki znajdują się w motywie. W motywie DXPR ustaw je w Appearance > Settings > DXPR Theme (/admin/appearance/settings/dxpr_theme), w panelu Colors.
  • Kreator DXPR pokazuje pierwsze dziesięć różnych kolorów tej palety jako próbki.

Kolorowanie sekcji

  1. Najedź na sekcję, otwórz More i wybierz Settings.
  2. Otwórz panel Style.
  3. Kliknij przycisk koloru Background. Próbnik kolorów otworzy się z twoimi próbkami.
  4. Kliknij podstawową próbkę marki.
  5. Kliknij przycisk koloru Font color i wybierz biel.
  6. Kliknij Save. Tekst akapitu staje się biały; nagłówki zachowują kolor nagłówków motywu.
  7. Aby nagłówek też był biały, otwórz Settings jego elementu Text, wybierz biel dla Font color w jego panelu Style i kliknij Save.

Co widzisz

Sekcja wypełnia się kolorem marki, a jej tekst akapitu i nagłówek stają się białe. Te same próbki pojawiają się w każdym polu koloru. Dotyczy to paneli Style i Hover style oraz Start color i End color tła Gradient sekcji.

Aby użyć koloru spoza palety, wpisz jego kod w polu tekstowym próbnika, na przykład #2196F3. Przesuń suwak krycia dla koloru przejrzystego. Clear usuwa kolor.

Trzymaj kolory powiązane z motywem

Próbka kopiuje kod koloru do elementu. Jeśli później zmienisz paletę motywu, element zachowa stary kolor.

Aby element podążał za paletą, użyj zamiast tego klasy koloru. Otwórz Settings elementu i wybierz chip w HTML classes:

Chip Do czego służy
Primary background, Secondary background i inne Kolory Bootstrapa z twojego motywu
Primary text color, Secondary text color i inne Kolory tekstu Bootstrapa z twojego motywu
Background color: DXPR Theme primary Kolor Primary motywu DXPR, z pasującym kolorem tekstu
Text color: DXPR Theme accent1 Kolor Secondary motywu DXPR dla tekstu

Chipy DXPR Theme pojawiają się tylko, gdy motyw DXPR jest włączony.

Pola koloru dla elementu

Gdzie Co koloruje
Style: Font color, Border color, Background Sam element
Hover style: te same pola Element, gdy wskaźnik na nim jest
Button: Type Gotowy schemat kolorów przycisku
Card: Type Tło i tekst całej karty
Alert: Type Success, Info, Warning albo Danger
Section: Background effects > Gradient Mieszankę dwóch kolorów

Czytelny kolor

  • Zachowaj wystarczający kontrast tekstu i tła. WCAG 2.1 poziom AA wymaga co najmniej 4,5 do 1 dla zwykłego tekstu.
  • Nie używaj samego koloru do niesienia znaczenia; połącz go z etykietą albo ikoną.
  • Naprzemiennie stosuj tła sekcji, na przykład biel, jasną szarość i kolor marki, aby nadać długim stronom rytm.

Jeśli nie widzisz swoich kolorów

  • Próbnik kolorów nie pokazuje próbek. Domyślny motyw witryny nie dostarcza palety kolorów. Wpisuj kody kolorów albo użyj motywu z paletą, na przykład motywu DXPR.
  • Element zachowuje stary kolor po zmianie palety motywu. Próbka przechowuje stały kod koloru. Wybierz nową próbkę albo przełącz się na chip koloru w HTML classes, który podąża za paletą.
  • Background albo Font color nie działa na karcie. Type karty inny niż Default ustawia jej kolory klasami motywu, które wygrywają. Najpierw ustaw Type na Default.

Co dalej?