Zmień wygląd elementu w panelu Styl.
Użyj panelu Styl, gdy jeden element na jednej stronie potrzebuje własnego wyglądu: kolorowa karta, wyblakłe logo, przycisk w kolorach kampanii. Każdą zmianę widzisz na stronie na bieżąco. Dla wyglądu, który ma dzielić każda strona, na przykład koloru wszystkich przycisków, zmień zamiast tego motyw. Jedna edycja tam aktualizuje całą witrynę.
Film podąża za pierwszą recepturą poniżej: wycisza logo partnera, aż dotrze do niego wskaźnik.
Zanim zaczniesz
- Otwórz stronę w DXPR Builder; wskazanie elementu pokazuje jego pasek sterowania z opcją More. Nowy w kreatorze? Zobacz Twoja pierwsza strona.
- Zapisz w oknie zachowuje zmianę w edytorze. Zapisz na pasku narzędzi kreatora nad treścią zapisuje stronę i pokazuje „Saved field”.
Ustawienia w panelu Styl należą do jednego elementu. Zapisują się w treści tej strony, nie w twoim motywie. Jeśli kolor marki zmieni się w przyszłym roku, każdy element pokolorowany ręcznie zachowa stary kolor, dopóki go nie wyedytujesz.
- Użyj wyglądu ponownie, zapisując ostylowany element opcją More > Save as template albo nadając elementom wspólną klasę w polu HTML classes. Zobacz szablony użytkownika i HTML ID i klasy.
- Wybieraj kolory z próbek, gdy witryna je pokazuje. Pochodzą z palety kolorów twojego motywu. Próbka kopiuje kolor, więc późniejsza zmiana palety go nie zaktualizuje.
Przepis: przygaszanie logo, aż dotrze do nich wskaźnik
Rząd logo partnerów wygląda spokojniej, gdy logo są wyciszone. Ta receptura przygasza jedno logo i przywraca je po najechaniu.
- Najedź na element obrazu, który pokazuje logo, kliknij More, a potem Settings.
- Otwórz panel Styl i przeciągnij Krycie do 0,5. Logo blednie podczas przeciągania.
- Otwórz panel Styl najechania poniżej i przeciągnij Krycie do 1.
- Kliknij Zapisz w oknie, a potem Zapisz na pasku narzędzi.
- Otwórz menu widoku (ikona oka) na pasku narzędzi kreatora, wybierz Podgląd i wskaż logo. Przełącza się na pełną moc i gaśnie ponownie, gdy wskaźnik zejdzie.
Powtórz kroki dla każdego logo w rzędzie.
Przepis: przycisk w kolorach kampanii
Twój motyw nadaje przyciskom kolor najechania. Tło ustawione przez ciebie też zastępuje ten kolor najechania, więc ustaw oba.
- Najedź na element przycisku, kliknij More, a potem Settings.
- W panelu Styl wybierz Tło i Kolor czcionki. Kliknij próbkę albo wpisz swój kod koloru, na przykład #e4002b, w polu koloru.
- W panelu Styl najechania wybierz ciemniejsze Tło.
- Kliknij Zapisz w oknie, a potem Zapisz na pasku narzędzi.
- Wybierz Podgląd w menu widoku i wskaż przycisk. Przyjmuje ciemniejszy kolor.
Co widzisz
Gdy okno jest otwarte, element pokazuje każdą zmianę. W Podglądzie przygaszone logo wraca do pełnej mocy pod wskaźnikiem, a przycisk kampanii przyjmuje swój ciemniejszy kolor. Oba wyglądy zostają po przeładowaniu strony, ponieważ Zapisz na pasku narzędzi je zapisał.
Jakie wartości przyjmują ustawienia
| Ustawienie | Zakres | Jednostka |
|---|---|---|
| Kolor czcionki, Kolor ramki, Tło | dowolny kolor, z przezroczystością | kolor |
| Obraz tła | zdjęcie z biblioteki mediów albo URL | |
| Styl tła, Pozycja tła, Styl ramki | lista zaczynająca się od Theme defaults | |
| Rozmiar czcionki | 0 do 100 | px |
| Promień rogów | 0 do 100 | px |
| Krycie | 0 do 1, co 0,01 | |
| Cień | poziomy 0 do 5 | |
| Model pudełkowy Margines | -200 do 200 | PX albo % |
| Model pudełkowy Padding | 0 do 200 | PX albo % |
| Model pudełkowy Ramka | 0 do 50 | px |
| szerokość × wysokość w modelu pudełkowym | 0 do 2000 | PX albo % |
Wpisana wartość spoza zakresu jest obcinana do najbliższego limitu. Model pudełkowy i jego kłódki wyjaśnia strona odstępów.
Jak zachowują się ustawienia
Domyślne motywu
Pusty kolor, suwak na 0, lista na Theme defaults i bok modelu pudełkowego z „-” znaczą to samo. DXPR Builder nic nie zapisuje i decyduje twój motyw. Zatem Krycie 0 nie ukrywa elementu, a Rozmiar czcionki 0 zachowuje rozmiar motywu. Aby wrócić do wyglądu motywu, kliknij Clear w selektorze koloru, przesuń suwak na 0 albo wybierz ponownie Theme defaults.
Gdzie lądują ustawienia
Każde ustawienie Styl oprócz Drop shadow zapisuje się jako styl wstawiony w elemencie. Style wstawione biją zwykły CSS motywu. Dwie rzeczy wciąż wygrywają: reguły motywu oznaczone !important i bootstrapowe klasy narzędziowe w polu HTML classes, które też niosą !important.
Na niektórych elementach ustawienia kładą się na wewnętrzną część. Na przycisku stylują przycisk, na obrazie zdjęcie, na linku link, a na mapie ramkę mapy.
Każdy rozmiar ekranu
Ustawienia panelu Styl nie mają punktów przerwania. 64 px paddingu to 64 px także na telefonie. Wartości procentowe rosną i maleją z szerokością strony. Dla różnych wartości na rozmiar ekranu użyj klas responsywnych, jak pokazuje strona HTML ID i klasy.
Krycie wygasza wszystko w środku
Krycie działa na cały element. Wygasza blok, ramkę, tekst i każdy element w środku. Dla przejrzystego bloku za jednolitym tekstem pozostaw Krycie na 0. Wybierz zamiast tego kolor Tła z pewną przezroczystością: selektor koloru ma do tego własny suwak krycia.
Styl najechania
Styl najechania to osobny panel pod Stylem. Ma te same ustawienia, z własnym modelem pudełkowym. Jego wartości obowiązują, gdy wskaźnik stoi nad elementem. W przeciwieństwie do wartości Styl są same oznaczone !important, więc biją twoje wartości Styl, klasy narzędziowe w polu HTML classes i większość reguł motywu.
Tylko Drop shadow pojawia się płynnie, w 0,15 sekundy. Pozostałe zmiany najechania przełączają się od razu, chyba że motyw je animuje. Przyciski bootstrapowe łagodzą kolory w 0,15 sekundy.
Telefony i tablety nie mają wskaźnika. Odwiedzający zobaczą tam wygląd najechania dopiero po stuknięciu, więc nigdy nie umieszczaj w nim informacji, których potrzebują.
Elementy z własnymi ustawieniami
Niektóre elementy mają własne ustawienie do tej samej roboty. Ich własne ustawienie wygrywa, a ustawienie Styl nic nie robi.
| Element | Ignoruje w Styl | Użyj zamiast tego |
|---|---|---|
| Licznik kołowy | Tło, Rozmiar czcionki, szerokość × wysokość | Background color i Dimension w General, Rozmiar czcionki w Circle content |
| Pasek postępu | Tło, szerokość × wysokość | Back color, Front color i Bar height w General |
| Separator | Tło, szerokość | Color i Length w General |
| Licznik liczbowy | Rozmiar czcionki | Font size w General |
| Obraz | szerokość × wysokość | Image width i Image height w General |
| Mapa | szerokość × wysokość | Map width i Map height w General |
| Marquee | szerokość × wysokość | Image width i Height w General |
| Wideo, Lokalne wideo | szerokość | Video width w General |
| Warstwy pozycjonowane | szerokość × wysokość | Width i Height w General |
Jeśli nie widać twojej zmiany
- Zmiana zniknęła po zamknięciu okna. Zamknięto je opcją Cancel, ikoną zamknięcia albo klawiszem Escape, co przywróciło stare ustawienia. Wprowadź zmianę ponownie i kliknij Zapisz w oknie.
- Zmiany nie ma po przeładowaniu strony. Zapisz w oknie zachowuje zmianę tylko w edytorze. Kliknij Zapisz na pasku narzędzi, zanim opuścisz stronę.
- Wygląd motywu zostaje. Bootstrapowa klasa narzędziowa w polu HTML classes albo reguła motywu z
!importantwygrywa. Otwórz panel Ogólne i usuń chip klasy, na przykład Primary background, albo zapytaj webmastera o regułę motywu. - Ustawienie w ogóle nic nie daje. Niektóre elementy mają własne ustawienie do tej samej roboty. Zobacz Elementy z własnymi ustawieniami.
- Przycisk już nie zmienia koloru po najechaniu. Twoje Tło zastępuje kolor najechania motywu. Ustaw Tło także w panelu Styl najechania.
- Tekst zbladł razem z blokiem. Krycie wygasza cały element. Ustaw je z powrotem na 0 i użyj koloru Tła z przezroczystością.
- Krycie 0 nie ukrywa elementu. 0 znaczy Domyślne motywu. Dodaj zamiast tego klasę Hide element (d-none) w polu HTML classes.
Co dalej?
- Tła: umieść zdjęcie za nagłówkiem i utrzymaj czytelność nagłówka.