Edycja stylów

Chcesz zmienic kolory, czcionki, odstepy lub inne wlasciwosci wizualne? Edytor stylow w narzedziu edycji pozwala precyzyjnie dostosowyac wyglad kazdego elementu na stronie.

Edycja stylow

Chcesz zmienic kolory, czcionki, odstepy lub inne wlasciwosci wizualne? Edytor stylow w narzedziu edycji pozwala precyzyjnie dostosowyac wyglad kazdego elementu na stronie.

Dostep do edycji stylow

  1. Wlacz tryb edycji
  2. Kliknij na element, ktory chcesz stylizowac
  3. Wybierz zakladke Styl w panelu edycji

Dostepne opcje stylow

Kolory

Zmieniaj kolory dla:

  • Kolor tla - Tlo elementu
  • Kolor tekstu - Kolor czcionki
  • Kolor obramowania - Kolor obramowania/konturu

Jak zmieniac kolory

  1. Kliknij na wlasciwosc koloru
  2. Uzyj selektora kolorow lub
  3. Wpisz kod hex (#FF5733)
  4. Zobacz zmiane natychmiast

Typografia

Modyfikuj wyglad tekstu:

  • Rozmiar czcionki - Powieksz lub pomniejsz tekst
  • Grubosc czcionki - Pogrubienie, normalna, cienka
  • Wyrownanie tekstu - Do lewej, do srodka, do prawej
  • Wysokosc wiersza - Odstep miedzy liniami

Odstepy

Dostosuj biala przestrzen:

  • Padding - Przestrzen wewnatrz elementu
  • Margines - Przestrzen na zewnatrz elementu
  • Przerwa - Przestrzen miedzy elementami podrzednymi

Obramowania

Dostosuj obramowania:

  • Szerokosc obramowania - Grubosc
  • Styl obramowania - Ciagly, przerywany, kropkowany
  • Kolor obramowania - Kolor obramowania
  • Zaokraglenie rogow - Zaokraglone narozniki

Rozmiar

Kontroluj wymiary:

  • Szerokosc - Szerokosc elementu
  • Wysokosc - Wysokosc elementu
  • Maks/Min - Ograniczenia

Korzystanie z edytora stylow

Wprowadzanie zmian

  1. Znajdz wlasciwosc, ktora chcesz zmienic
  2. Dostosuj wartosc za pomoca:
  • Suwakow
  • Pol tekstowych
  • Selektorow kolorow
  • Rozwijanych menu
  1. Zmiany stosuja sie w czasie rzeczywistym

Podglad zmian

Podczas dostosowywania stylow:

  • Widzisz zmiany natychmiast w podgladzie
  • Przelaczaj miedzy stanem przed/po
  • Testuj na roznych rozmiarach urzadzen

Zapisywanie zmian

Zmiany stylow zapisuja sie automatycznie, gdy:

  • Zaznaczysz inny element
  • Zamkniesz tryb edycji
  • Klikniesz poza panelem

Typowe edycje stylow

Zmiana kolorow przyciskow

  1. Zaznacz przycisk
  2. Przejdz do zakladki Styl
  3. Zmien Kolor tla na kolor przycisku
  4. Zmien Kolor tekstu na kolor etykiety
  5. Opcjonalnie dostosuj Zaokraglenie rogow dla owalnosci

Dostosowywanie tla sekcji

  1. Zaznacz kontener sekcji
  2. Przejdz do zakladki Styl
  3. Zmien Kolor tla
  4. Lub ustaw Obraz tla

Modyfikacja stylow tekstu

  1. Zaznacz element tekstowy
  2. Przejdz do zakladki Styl
  3. Dostosuj:
  • Rozmiar czcionki
  • Grubosc czcionki
  • Kolor tekstu
  • Wysokosc wiersza

Dodawanie zaokraglonych rogow

  1. Zaznacz element
  2. Przejdz do zakladki Styl
  3. Znajdz Zaokraglenie rogow
  4. Zwieksz wartosc dla wiekszego zaokraglenia

Wskazowki dotyczace stylow

Spojnosc jest kluczowa

  • Uzywaj tych samych kolorow na calej stronie
  • Utrzymuj spojne rozmiary czcionek dla podobnych elementow
  • Zachowuj jednolite odstepy

Testuj responsywnosc

Po wprowadzeniu zmian stylow:

  • Sprawdz widok komputerowy
  • Sprawdz widok tabletowy
  • Sprawdz widok mobilny

Niektore style moga wymagac dostosowania dla roznych ekranow.

Nie przesadzaj

  • Subtelne zmiany czesto dzialaja lepiej
  • Unikaj zbyt wielu roznych kolorow
  • Utrzymuj spojne odstepy

Uzywaj kolorow marki

Jesli masz wytyczne marki:

  • Uzyj glownego koloru marki dla przyciskow CTA
  • Uzyj kolorow dodatkowych jako akcentow
  • Zachowaj neutralne tla

Zaawansowane opcje stylow

Cienie

Dodaj glebie za pomoca cieni:

  • Cienie pudelkowe dla kontenerow
  • Cienie tekstu dla naglowkow

Przezroczystosc

Kontroluj przezroczystosc:

  • Ustaw elementy jako polprzezroczyste
  • Tworzenie efektow nakladki

Przejscia

Niektore elementy moga miec:

  • Efekty najechania
  • Wlasciwosci animacji

Kiedy uzyc czatu zamiast edytora

Przy zlozonych potrzebach stylizacyjnych uzyj czatu z AI:

  • Globalne zmiany stylow - "Zmien wszystkie przyciski na niebieskie"
  • Dostosowania responsywne - "Powieksz tekst na urzadzeniach mobilnych"
  • Nowe elementy stylowe - "Dodaj tlo gradientowe"
  • Zlozone efekty - "Dodaj efekt przewijania paralaksy"

Cofanie zmian stylow

Wprowadziles zmiane, ktora Ci sie nie podoba?

Natychmiastowe cofniecie

  • Kliknij przycisk resetowania/cofania w panelu stylow
  • Niektore wlasciwosci maja opcje "Resetuj"

Uzycie historii wersji

  • Przejdz do historii wersji
  • Przywroc poprzednia wersje

Popros AI

  • "Przywroc kolory przyciskow do tego, co bylo wczesniej"