Preskoči na vsebino

Smer oblikovanja

Korak Smer oblikovanja vam omogoča, da pregledate, izpopolnite in dokončate vizualno zasnovo svoje teme, preden Theme Builder ustvari celotno temo.

Pregled​

Po dokončanju Discovery Interview vam Theme Builder prikaže smer oblikovanja z upodabljanjem predogleda za namizje in mobilne naprave. To vam omogoča, da natančno vidite, kako bo vaša zasnova videti na različnih napravah, preden se zavežete temi.

Komponente smeri oblikovanja​

1. Barvna paleta​

Barvna shema vaše teme, vključno z:

  • Primarna barva — glavna barva blagovne znamke, uporabljena za gumbe, povezave in poudarke
  • Sekundarna barva — dopolnilna barva za raznolikost
  • Poudarjena barva — barva za izpostavitev pomembnih elementov
  • Nevtralne barve — sive in bele za ozadja in besedilo
  • Barva besedila — primarna barva besedila za berljivost

2. Tipografija​

Izbire pisav za:

  • Pisava naslovov — uporabljena za naslove strani in glave razdelkov
  • Pisava telesa — uporabljena za besedilo odstavkov in vsebino
  • Velikosti pisav — odzivno prilagajanje velikosti za različne velikosti zaslonov
  • Višina vrstice — razmik med vrsticami za berljivost
  • Debeline pisave — krepke, običajne in lahke različice

3. Postavitev in razmiki​

  • Širina vsebnika — največja širina za vsebino
  • Notranji odmiki in robovi — razmiki okoli elementov
  • Mrežni sistem — postavitev stolpcev za odzivno oblikovanje
  • Razmik med komponentami — razdalja med elementi UI

4. Vizualni elementi​

  • Slogi gumbov — zasnove primarnih, sekundarnih in terciarnih gumbov
  • Zasnove kartic — postavitve za vsebinske bloke
  • Ikone — slog in velikost ikon
  • Obrobe in sence — subtilna vizualna globina
  • Učinki ob premiku kazalca — oblikovanje interaktivnih stanj

Upodabljanje predogleda​

Predogled za namizje​

Predogled za namizje prikazuje vašo zasnovo v polni širini (običajno 1200px ali širše):

  • Celoten navigacijski meni
  • Popolna postavitev z vsemi stolpci
  • Velika tipografija in razmiki
  • Vsi vizualni elementi v polni velikosti

Predogled za mobilne naprave​

Predogled za mobilne naprave prikazuje vašo zasnovo pri mobilni širini (običajno 375px):

  • Odzivna navigacija (hamburger meni)
  • Enostolpčna postavitev
  • Prilagojena tipografija in razmiki
  • Velikosti gumbov, prijazne dotiku

Odzivne prelomne točke​

Theme Builder upodobi predoglede pri teh prelomnih točkah:

NapravaŠirinaPredogled
Mobilna naprava375pxTelefon v pokončni usmerjenosti
Tablica768pxTablica v ležeči usmerjenosti
Namizje1200pxNamizje v polni širini
Veliko namizje1920pxUltraširok zaslon

Izpopolnjevanje vaše zasnove​

Izvajanje prilagoditev​

Svojo smer oblikovanja lahko izpopolnite tako, da:

  1. Prilagodite barve — spremenite katero koli barvo v paleti
  2. Spremenite pisave — izberete drugačne pisave
  3. Spremenite razmike — prilagodite notranje odmike in robove
  4. Posodobite postavitev — spremenite širine vsebnikov in stolpce mreže
  5. Prilagodite elemente — spremenite sloge gumbov, zasnove kartic itd.

Posodobitve predogleda​

Spremembe se odražajo v realnem času:

  • Predogled za namizje se posodobi takoj
  • Predogled za mobilne naprave se posodobi takoj
  • Vse odzivne prelomne točke so posodobljene
  • Preklapljate lahko med predogledi, da preverite spremembe

Primerjalni pogled​

Primerjajte svojo smer oblikovanja z:

  • Izvirno zasnovo — oglejte si, kaj se je spremenilo
  • Zasnove konkurentov — primerjajte s spletnimi mesti za navdih
  • Prejšnjimi različicami — vrnite se na prejšnje smeri oblikovanja

Odobritev smeri oblikovanja​

Ko ste zadovoljni s svojo zasnovo:

  1. Preglejte oba predogleda — preverite, da sta namizni in mobilni videz dobra
  2. Preverite vse barve — zagotovite kontrast in dostopnost
  3. Preizkusite tipografijo — preverite berljivost pri vseh velikostih
  4. Potrdite postavitev — preverite razmike in poravnavo
  5. Odobrite zasnovo — nadaljujte z ustvarjanjem teme

Naslednji koraki​

Po odobritvi svoje smeri oblikovanja:

  1. Theme Builder ustvari vašo celotno temo
  2. Tema je nameščena na vaše WordPress spletno mesto
  3. Nadaljnje prilagoditve lahko izvedete z uporabo WordPress customizerja
  4. Nadaljujte na Hospitality Menus ali druge funkcije

Najboljše prakse​

  • Preizkusite na resničnih napravah — po možnosti uporabite dejanske telefone in tablice
  • Preverite berljivost — zagotovite, da je besedilo berljivo pri vseh velikostih
  • Preverite kontrast — uporabite Validate Palette Contrast za dostopnost
  • Upoštevajte zmogljivost — optimizirajte slike in pisave za hitrost
  • Načrtujte za vsebino — zagotovite, da postavitev deluje z vašo dejansko vsebino

Odpravljanje težav​

Predogled se ne posodablja​

  • Osvežite stran
  • Počistite predpomnilnik brskalnika
  • Poskusite z drugim brskalnikom
  • Preverite internetno povezavo

Barve so videti drugačne​

  • Preverite nastavitve barv monitorja
  • Poskusite na različnih napravah
  • Preverite barvni kontrast z orodji za dostopnost
  • Razmislite o simulatorjih barvne slepote

Težave s tipografijo​

  • Preverite, ali se datoteke pisav nalagajo
  • Preverite velikost pisave pri različnih prelomnih točkah
  • Preizkusite z dejansko vsebino
  • Upoštevajte dolžino vrstice za berljivost