Stylizacja i personalizacja

Motywy, czcionki, kolory, własne swatche, zmienne CSS — pełna kontrola nad wyglądem.

#Motyw (tryb kolorystyczny)

Strona może działać w trybie jasnym lub ciemnym. Zmień w edytorze: Styl strony → Styl

Tryb jasny

Jasne tło, ciemny tekst — tradycyjny, czytelny wygląd.

Tryb ciemny

Ciemne tło, jasny tekst — nowoczesny, elegancki.

#Paleta kolorów

Foodyo używa 4 globalnych zmiennych CSS, które kontrolują całą paletę strony. Zmień kolory w edytorze

Zmienna CSSRolaPrzykład
--color-primaryKolor główny — przyciski, akcenty, linki#ff8c00 (pomarańczowy)
--color-bgTło strony#ffffff lub #0d0d0d
--color-accentKolor dodatkowy — hover, highlights#e67e00
--color-textKolor tekstu#1a1a1a lub #f5f5f5

#Pikier kolorów

Klikając dowolny kolor w edytorze otworzysz pikier z dwoma trybami:

Tryb niestandardowy

Ręczny wybór koloru z gradientu, suwaka, lub wpisanie wartości HEX.

Tryb globalny

Wybór z palety zmiennych CSS (primary, accent, bg, text) — kolor podąża za zmianami globalnymi.

Własne swatche kolorów

  1. 1
    Wybierz dowolny kolor w pikierze.
  2. 2
    Kliknij + Dodaj aktualny kolor pod paletą.
  3. 3
    Swatch pojawi się w sekcji „Własne kolory".
  4. 4
    Kliknij dwukrotnie nazwę swatcha aby ją zmienić.
  5. 5
    Kliknij ✕ aby usunąć swatch.
Własne swatche zapisują się w draftData i są dostępne w całym edytorze. Nie są widoczne na stronie publicznej.

#Czcionki

Zmień czcionkę: Styl strony → Czcionka

PresetCzcionka GoogleCharakter
NowoczesnaInterCzysta, uniwersalna, sans-serif
KlasycznaPlayfair DisplayElegancka, serif, idealna do restauracji fine dining
RetroSpace MonoMonospace, vintage, characterful
EleganckaCormorant GaramondWyrafinowana, light serif
PrzyjaznaNunitoZaokrąglona, ciepła, family-friendly
MinimalnaDM SansGeometryczna, neutralna, nowoczesna

#SEO i meta dane

Otwórz: Styl strony → SEO

PoleOpis
Tytuł stronyTag <title> — widoczny w zakładce przeglądarki i wynikach Google
Opis metaKrótki opis strony (~160 znaków) dla wyszukiwarek
Open GraphObraz i opis wyświetlany przy dzieleniu się linkiem na Facebook/Twitter

#Zmienne CSS — dokumentacja techniczna

Globalne zmienne kolorów
--color-primary    /* Kolor główny */
--color-accent     /* Kolor dodatkowy */
--color-bg         /* Tło strony */
--color-text       /* Kolor tekstu */
--color-text-secondary  /* Tekst drugorzędny */
--color-border     /* Obramowania */
--color-section-bg /* Tło sekcji */
Zmienne są ustawiane w runtime przez konfigurator na podstawie draftData.theme.colors. Na stronie publicznej są wstawiane inline w HTML.
System menuPanel restauratora