Co ta strona robi

Menedżer stylu pozwala dostosować wygląd i dotyk witryny bez pisania żadnego kodu. Kliknij na dowolny element, który widzisz na swojej stronie i zmienić jego kolory, czcionki, odstępy, cienie i więcej. Możesz stworzyć różne style dla trybu światła i ciemnego, sprawdzić, jak rzeczy wyglądają na urządzeniach mobilnych, i zastosować zmiany na określonych stronach lub całej swojej stronie.

Pomyśl o tym jak edytor wizualny, który siedzi na górze witryny, pozwalając wskaż i kliknij, aby dokonać zmian projektowych natychmiast.

[Screenshot: konkurs-przegląd]

Jak się tu dostać?

Przejdź do Panel administracyjny > Szablony > Menedżer stylu

Zrozumienie strony

Po pierwszym otwarciu menedżera stylu, zobaczysz dwa główne obszary obok siebie:

Lewy panel: Edytor stylu

To jest panel kontrolny z siedmioma zakładkami do różnych opcji stylizacji:

• Kolory - Kolory tekstu i tła (w tym gradienty)
• Typografia - Czcionki, rozmiary i formatowanie tekstu
• Odstęp - Wyściełanie i marże
• Granice - Style graniczne, szerokość, kolory i cienie
• Układ - Ustawienia wyświetlacza, pozycjonowanie i flexbox
• Skutki - Nieprzezroczystość, transformacje i filtry
• Rozmiar - Szerokość, wysokość i proporcje

Po wybraniu elementu na swojej stronie panel ten pokazuje aktualne style i pozwala je zmieniać.

Prawy panel: Podgląd na żywo

To pokazuje Twoją rzeczywistą stronę internetową w oknie podglądu. Możesz:

• Przejdź do różnych stron
• Kliknij elementy, aby wybrać i styl ich
• Przełączanie między pulpitem, tabletem i widokami mobilnymi
• Przełączanie pomiędzy trybami światła i ciemności
• Zobacz swoje zmiany natychmiast jak je robisz

Górne kontrole

Pasek nagłówka zawiera:

• Tryb światła / tryb ciemności przyciski - Wybierz tryb edycji
• Zapisz wszystko - Zapisz wszystkie zmiany stylu
• Zresetuj wszystkie - Usuń wszystkie niestandardowe style i zacznij od nowa

Wspólne zadania

Jak stylizować element

To jest podstawowy przepływ pracy, którego użyjesz do wszystkich zadań.

1. Kliknij Tryb edycji przycisk (ikona kursora) w pasku narzędzi podglądu.
2. Zielony wskaźnik "Edytuj tryb aktywny" pojawia się na górze ekranu.
3. Przesuń mysz nad elementami w podglądzie - będą one podkreślać z niebieskim obrysem.
4. Kliknij element, aby go wybrać.
5. Informacje o wybranym elemencie znajdziesz na górze lewego panelu.
6. Użyj zakładek (Kolory, Typografia itp.), aby zmienić wygląd.
7. Obserwuj zmiany pojawiające się natychmiast w podglądzie.
8. Kiedy jesteś zadowolony ze zmian, kliknij Zapisz zmiany na dole lewego panelu.

[Screenshot: selekcjonowanie i edytowanie - element]

Jak zmienić kolory

Po wybraniu elementu:

1. Kliknij Kolory tab w lewym panelu.
2. Rozszerzenie Kolor tekstu sekcja do zmiany koloru tekstu.
3. Kliknij pasek kolorów (kolorowy kwadrat), aby otworzyć wybielacz kolorów.
4. Wybierz kolor lub wpisz kod szesnastkowy w polu tekstowym.
5. Element aktualizuje się natychmiast w podglądzie.

Aby zmienić tło:

1. W Kolory tab, rozszerzyć Kontekst sekcja.
2. Wybierz Stałe dla pojedynczego koloru lub Gradient za mieszankę kolorów.
3. Aby uzyskać solidne tło, kliknij przycisk koloru i wybierz kolor.
4. Sprawdź Przezroczysty jeśli w ogóle nie chcesz mieć doświadczenia.

[Screenshot: color- picker- interface]

Jak utworzyć tło gradientu

Gradienty łączą wiele kolorów gładko.

1. Wybierz element i przejdź do Kolory Tab.
2. Rozszerz Kontekst i kliknij Gradient Przycisk.
3. Wybierz kierunek klikając jeden z 8 przycisków kierunkowskazów (lub wprowadzając niestandardowy kąt).
4. Zobaczysz co najmniej 2 kolory zatrzymuje. Kliknij każdy przycisk koloru, aby wybrać kolory.
5. Ustaw suwaki pozycji (0- 100%), aby kontrolować, gdzie pojawia się każdy kolor.
6. Kliknij + Dodaj Stop aby dodać więcej kolorów do gradientu.
7. Kliknij przycisk X obok zatrzymania koloru, aby go usunąć (należy zachować co najmniej 2).
8. Obserwuj aktualizację paska podglądu gradientu podczas dokonywania zmian.

[Screenshot: gradient- builder]

Jak zmienić czcionki i tekst

Po wybraniu tekstu lub dowolnego elementu z tekstem:

1. Kliknij Typografia Tab.
2. Rozszerz Czcionka Rodzina i Rozmiar.
3. Wybierz czcionkę Rodzina czcionek spadek (Roboto, Inter, Montserrat itp.).
4. Ustaw Rozmiar czcionki przy użyciu wejścia liczby i wybrać jednostkę (px, rem, em lub%).
5. Wybierz Masa czcionki aby tekst cieńszy lub śmielszy (400 jest normalne, 700 jest odważne).

Dla formatowania tekstu:

1. Rozszerzenie Formatowanie tekstu sekcja.
2. Kliknij przycisk wyrównania, aby wyrównać w lewo, w środku, w prawo lub uzasadnić.
3. Wybierz Transformacja tekstu aby tekst UPPERCASE, małe, lub Capitalised.
4. Wybierz Dekoracja tekstu dodawanie podkreśleń, przeskoków lub przekroczeń.

[Screenshot: typography- options]

Jak dodać odstępy

Odstęp kontroluje puste miejsce wokół i wewnątrz elementów.

1. Wybierz element i kliknij Odstęp Tab.
2. Rozszerz Wyściełanie i wprowadzić liczbę, aby dodać przestrzeń wewnątrz elementu.
3. Rozszerz Margines i wprowadzić liczbę, aby dodać przestrzeń poza elementem.

Jak dodać granice i cienie

Po wybraniu elementu:

1. Kliknij Granice Tab.
2. Rozszerz Granica by dostosować granicę.
3. Wybierz Styl graniczny (Solid, Dashed, Dotted itd.).
4. Ustaw Szerokość graniczna w pikselach.
5. Kliknij Kolor granic swatch, aby wybrać kolor.
6. Ustaw Promień graniczny Za zakręty.

Aby dodać cień:

1. Rozszerzenie Pole Cień sekcja.
2. Kliknij przycisk shadow preset (None, SM, MD, LG, XL) dla wspólnych stylów shadow.
3. Lub wpisz niestandardową wartość cienia w Niestandardowy cień Pole.

[Screenshot: kontrola granic i cieni]

Jak stylowe efekty Hover

Efekty Hover uruchamiają, gdy ktoś przesuwa mysz nad elementem (jak przyciski).

1. Wybierz element, do którego chcesz dodać efekty hover.
2. Poszukaj Wybór państwa bar poniżej informacji o elemencie.
3. Kliknij : hover Przycisk.
4. Wyświetlacz selector aktualizuje, aby pokazać, że edytujesz style hoverów.
5. Dokonaj zmian - spróbuj zmienić kolor tła lub dodać transformatę.
6. Przesuń mysz nad elementem w podglądzie, aby zobaczyć efekt hover.
7. Kliknij Zapisz zmiany Kiedy będzie po wszystkim.

[Screenshot: state-selector-hover]

Jak styl dla światła i ciemnego trybu oddzielnie

Twoja strona może wyglądać inaczej w trybie światła i ciemności.

1. Kliknij Tryb oświetlenia w nagłówku do edycji stylów trybu światła.
2. Wybierz elementy i dostosować je zgodnie z życzeniem.
3. Kliknij Zapisz zmiany dla każdego elementu.
4. Kliknij Tryb ciemny w nagłówku, aby przejść do edycji trybu ciemnego.
5. Podgląd automatycznie przełącza się do trybu ciemnego, aby zobaczyć, co edytujesz.
6. Wybierz te same elementy i dostosować je do trybu ciemnego.
7. Zapisz zmiany w trybie ciemnym.

Jak stosować style do konkretnych stron

Domyślnie style odnoszą się do całej witryny. Ale można zrobić style, które pojawiają się tylko na niektórych stronach.

Menedżer stylu automatycznie wykrywa, którą stronę przeglądasz:

Aby zastosować style specialne:

1. Użyj nawigacji podglądu, aby przejść do strony, którą chcesz dostosować.
2. Kliknij Tryb edycji i wybrać elementy na tej stronie.
3. Zmień styl.
4. Kliknij Zapisz zmiany.
5. Style te będą miały zastosowanie tylko do tej konkretnej strony.

Jak resetować style

Resetuj pojedynczy element:

1. Wybierz element, który chcesz zresetować.
2. Kliknij Zresetuj element na dole lewego panelu.
3. Potwierdź klikając OK W wyskakującym.
4. Wszystkie niestandardowe style dla tego elementu są usuwane.
5. Element powraca do pierwotnego wyglądu.

Resetuj wszystko:

1. Kliknij Zresetuj wszystkie w nagłówku.
2. Przeczytaj uważnie ostrzeżenie - to usuwa WSZYSTKIE niestandardowe style.
3. Kliknij OK Potwierdzić.
4. Wszystkie niestandardowe style na całej stronie są usuwane.
5. Twoja strona powraca do domyślnego wyglądu.

Podgląd

Pasek nawigacyjny

Pasek narzędzi na górze podglądu pozwala nawigować i kontrolować podgląd:

Podgląd urządzenia

Sprawdź, jak twój styl wygląda na różnych rozmiarach ekranu klikając te przyciski w nagłówku podglądu:

Podgląd kurczy się do wybranego rozmiaru z cieniem granicy, dzięki czemu można zobaczyć dokładnie, jak użytkownicy mobilni będą zobaczyć swoją stronę.

[Screenshot: responsive-preview- modes]

Włączenie trybu ciemnego

Ikona Księżyca w nagłówku podglądu włącza podgląd pomiędzy trybem światła i ciemności. Jest to oddzielone od przycisków trybu w nagłówku głównym:

• Przyciski trybu nagłówka - Kontrola, które style jesteś Saving (światło lub ciemno)
• Podgląd przycisku Księżyca - Kontrola, który tryb jesteś WIEWING

Zrozumienie tab stylu

Każda zakładka w lewym panelu skupia się na różnych właściwościach wizualnych.

Kolory Tab

• Kolor tekstu - Kolor tekstu wewnątrz elementu
• Kontekst - Solidny kolor, gradient lub przezroczyste tło
• Gradient Builder - Tworzenie gładkich mieszanek kolorów z wieloma zatrzymaniami kolorów

Taba typograficzna

• Rodzina czcionek - Wybierz spośród profesjonalnych czcionek internetowych
• Rozmiar czcionki - Rozmiar tekstu z elastycznymi jednostkami (px, rem, em,%)
• Masa czcionki - Jak cienki lub pogrubiony pojawia się tekst
• Wysokość linii - Przestrzeń między wierszami tekstu
• Odstęp literowy - Przestrzeń pomiędzy poszczególnymi literami
• Formatowanie tekstu - Dostosowanie, kapitalizacja, podkreślenie, itp.

Tabulacja odstępów

• Wyściełanie - Przestrzeń wewnątrz elementu (między treścią a granicą)
• Margines - Przestrzeń poza elementem (między elementem a sąsiadami)

Karta graniczna

• Styl graniczny - Linie stałe, przerywane, przerywane lub dekoracyjne
• Szerokość graniczna - Jak gruba jest granica
• Kolor granic - Kolor linii granicznej
• Promień graniczny - Jak zaokrąglone rogi są
• Pole Cień - Drop shadows to create depth

Karta układu

• Wyświetl - Jak zachowuje się element (blokowanie, inline, flex, grid, itp.)
• Pozycja - W jaki sposób element jest umieszczony (statyczny, względny, bezwzględny itp.)
• Flexbox - Urządzenia sterujące do układania elementów dziecięcych w rzędach lub kolumnach

Efekty Tab

• Nieprzezroczystość - Jak przezroczysty jest element (0% = niewidzialny, 100% = stały)
• Transformacja - Skaluj, obracaj lub przesuwaj element
• Filtry - Efekty rozmycia, jasności, kontrastu i skali szarości

Tabela rozmiarów

• Szerokość - Jak szeroki jest element
• Wysokość - Jak wysoki jest element
• Min / Max szerokość i wysokość - Ograniczenia wielkości
• Dopasowanie obiektu - Jak obrazy i filmy pasują do ich kontenerów
• Wskaźnik prawdopodobieństwa - Utrzymać proporcje (kwadrat, 16: 9 itd.)

Porady dla nowych użytkowników

Rozwiązywanie problemów

Podgląd nie wczytuje lub nie pokazuje pustej strony

Co widzisz: Prawy panel jest pusty, biały lub pokazuje błąd.

Jak to naprawić:

1. Kliknij Odśwież przycisk w pasku narzędzi podglądu.
2. Sprawdź, czy Twoja strona działa otwierając ją w nowej zakładce przeglądarki.
3. Jeśli strona działa, ale podgląd nie, skontaktuj się z administratorem witryny - to może być problem konfiguracji.

Nie mogę wybrać elementów po kliknięciu

Co widzisz: Kliknięcie elementów w podglądzie nic nie da.

Jak to naprawić:

1. Upewnij się, że Tryb edycji przycisk (ikona kursora) jest podświetlany na zielono.
2. Spróbuj odświeżyć podgląd za pomocą przycisku odświeżania.
3. Niektóre bardzo małe elementy (mniejsze niż 5x5 pikseli) nie mogą być wybrane - spróbuj kliknąć w pobliskie elementy.

Moje zmiany nie pojawiają się na żywo

Co widzisz: Zmiany pokazują w podglądzie, ale nie na rzeczywistej stronie.

Jak to naprawić:

1. Upewnij się, że kliknąłeś Zapisz zmiany na dole lewego panelu (nie tylko Zapisz wszystko).
2. Oczyść pamięć podręczną przeglądarki i odśwież stronę na żywo.
3. Jeśli przeglądasz stronę w innym trybie (światło vs ciemno), przełącz tryby, aby zobaczyć, czy zmiany mają zastosowanie tam.

Efekty nie działają.

Co widzisz: Wystylizowałeś: "Hover State", ale nic się nie dzieje, gdy się unosisz.

Jak to naprawić:

1. Upewnij się, że kliknąłeś : hover przycisk w selektorze stanu przed dokonaniem zmian.
2. Efekty Hover działają tylko z myszką - użytkownicy mobilni ich nie zobaczą.
3. Sprawdź, czy Twoje oryginalne style strony mają sprzeczne efekty hover, które nadrabiają swoje.

Kolory wyglądają źle lub nie pasują do tego, co wybrałem

Co widzisz: Wybór koloru pokazuje jeden kolor, ale element pokazuje inny.

Jak to naprawić:

1. Kliknij element ponownie, aby go ponownie wybrać i odświeżyć aktualne wartości kolorów.
2. Upewnij się, że edytujesz właściwą właściwość - Kolor tekstu jest oddzielony od tła.
3. Zapisz i odśwież podgląd, aby zobaczyć wynik końcowy.

Nie mogę zapisać zmian (przycisk Zapisz jest szary)

Co widzisz: Przyciski Zapisz wszystko i Reset Wszystkie są wyłączone i szarości.

Jak to naprawić:
Pomarańczowy baner na górze strony wskazuje tryb demo jest włączony. Tryb demo zapobiega zapisywaniu zmian. Jeśli chcesz zapisać zmiany, skontaktuj się z administratorem witryny, aby wyłączyć tryb demo.

Mój gradient się nie pojawia.

Co widzisz: Stworzyłeś gradient, ale element nadal pokazuje stały kolor.

Jak to naprawić:

1. Upewnij się, że kliknąłeś Gradient przycisk (nie Solid) w sekcji Tło.
2. Sprawdź, czy masz co najmniej 2 przystanki kolorów w różnych kolorach.
3. Zapisz zmiany i odśwież podgląd.

Strony powiązane

Ten przewodnik jest dla właścicieli i operatorów serwisu ComusThumbz. Koncentruje się na użyciu interfejsu Style Manager do dostosowania wyglądu witryny bez kodowania.