Skip to main content

Dezajna Direkto

La paŝo Dezajna Direkto permesas al vi revizii, rafini kaj finpretigi la vidan dezajnon de via theme antaŭ ol Theme Builder generas la kompletan theme.

Superrigardo​

Post kompletigo de la Malkovra Intervjuo, Theme Builder prezentas vian dezajnan direkton kun antaŭvida bildigo por labortablo kaj poŝtelefono. Tio permesas al vi vidi precize kiel via dezajno aspektos sur malsamaj aparatoj antaŭ ol vi devontiĝas al la theme.

Komponantoj de Dezajna Direkto​

1. Kolora Paletro​

La kolorskemo de via theme, inkluzive de:

  • Ĉefa koloro — ĉefa markokoloro uzata por butonoj, ligiloj kaj akcentoj
  • Duaranga koloro — kompletiga koloro por varieco
  • Akcenta koloro — emfaza koloro por gravaj elementoj
  • Neŭtralaj koloroj — grizoj kaj blankoj por fonoj kaj teksto
  • Teksta koloro — ĉefa tekstokoloro por legebleco

2. Tipografio​

Tiparelektoj por:

  • Titola tiparo — uzata por paĝotitoloj kaj sekciaj kapoj
  • Korpa tiparo — uzata por alineoteksto kaj enhavo
  • Tipargrandoj — respondema grandigo por malsamaj ekrangrandoj
  • Linialteco — interspaco inter linioj por legebleco
  • Tiparpezoj — grasaj, regulaj kaj malpezaj variaĵoj

3. Aranĝo kaj Interspacado​

  • Uja larĝo — maksimuma larĝo por enhavo
  • Internaj kaj eksteraj marĝenoj — interspaco ĉirkaŭ elementoj
  • Kradsistemo — kolumna aranĝo por respondema dezajno
  • Komponenta interspacado — distanco inter UI-elementoj

4. Vidaj Elementoj​

  • Butonaj stiloj — ĉefaj, duarangaj kaj triarangaj butonaj dezajnoj
  • Kartaj dezajnoj — aranĝoj por enhavoblokoj
  • Piktogramoj — piktograma stilo kaj grandigo
  • Randoj kaj ombroj — subtila vida profundo
  • Ŝvebaj efikoj — interaga statostilado

Antaŭvida Bildigo​

Labortabla Antaŭvido​

La labortabla antaŭvido montras vian dezajnon je plena larĝo (tipe 1200px aŭ pli larĝa):

  • Plena naviga menuo
  • Kompleta aranĝo kun ĉiuj kolumnoj
  • Granda tipografio kaj interspacado
  • Ĉiuj vidaj elementoj je plena grandeco

Poŝtelefona Antaŭvido​

La poŝtelefona antaŭvido montras vian dezajnon je poŝtelefona larĝo (tipe 375px):

  • Respondema navigado (hamburga menuo)
  • Unukolumna aranĝo
  • Alĝustigita tipografio kaj interspacado
  • Tuŝ-amikecaj butongrandoj

Respondemaj Rompopunktoj​

Theme Builder bildigas antaŭvidojn ĉe ĉi tiuj rompopunktoj:

AparatoLarĝoAntaŭvido
Poŝtelefono375pxVertikala telefono
Tabulkomputilo768pxHorizontala tabulkomputilo
Labortablo1200pxPlenlarĝa labortablo
Granda Labortablo1920pxUltra-larĝa ekrano

Rafini Vian Dezajnon​

Fari Alĝustigojn​

Vi povas rafini vian dezajnan direkton per:

  1. Alĝustigi kolorojn — ŝanĝu ajnan koloron en la paletro
  2. Ŝanĝi tiparojn — elektu malsamajn tiparojn
  3. Modifi interspacadon — alĝustigu internajn kaj eksterajn marĝenojn
  4. Ĝisdatigi aranĝon — ŝanĝu ujajn larĝojn kaj kradkolumnojn
  5. Agordi elementojn — modifu butonajn stilojn, kartajn dezajnojn, ktp.

Antaŭvidaj Ĝisdatigoj​

Ŝanĝoj speguliĝas en reala tempo:

  • Labortabla antaŭvido tuj ĝisdatiĝas
  • Poŝtelefona antaŭvido tuj ĝisdatiĝas
  • Ĉiuj respondemaj rompopunktoj estas ĝisdatigitaj
  • Vi povas ŝanĝi inter antaŭvidoj por kontroli ŝanĝojn

Kompara Vido​

Komparu vian dezajnan direkton kun:

  • Origina dezajno — vidu kio ŝanĝiĝis
  • Konkurantaj dezajnoj — komparu kun inspiraj sites
  • Antaŭaj versioj — revenigu pli fruajn dezajnajn direktojn

Aprobo de Dezajna Direkto​

Kiam vi estas kontenta pri via dezajno:

  1. Reviziu ambaŭ antaŭvidojn — kontrolu ke labortablo kaj poŝtelefono aspektas bone
  2. Kontrolu ĉiujn kolorojn — certigu kontraston kaj alireblecon
  3. Testu tipografion — kontrolu legeblecon ĉe ĉiuj grandoj
  4. Konfirmu aranĝon — kontrolu interspacadon kaj vicigon
  5. Aprobu dezajnon — daŭrigu al theme-generado

Sekvaj Paŝoj​

Post aprobo de via dezajna direkto:

  1. Theme Builder generas vian kompletan theme
  2. La theme estas instalita sur via WordPress site
  3. Vi povas plu agordi uzante la WordPress-agordilon
  4. Daŭrigu al Gastigaj Menuoj aŭ aliaj funkcioj

Bonaj Praktikoj​

  • Testu sur realaj aparatoj — uzu realajn telefonojn kaj tabulkomputilojn se eblas
  • Kontrolu legeblecon — certigu ke teksto estas legebla ĉe ĉiuj grandoj
  • Kontrolu kontraston — uzu Validigi Paletran Kontraston por alirebleco
  • Konsideru rendimenton — optimumigu bildojn kaj tiparojn por rapideco
  • Planu por enhavo — certigu ke aranĝo funkcias kun via reala enhavo

Problemsolvado​

Antaŭvido Ne Ĝisdatiĝas​

  • Refreŝigu la paĝon
  • Malplenigu la retumilan kaŝmemoron
  • Provu malsaman retumilon
  • Kontrolu interretan konekton

Koloroj Aspektas Malsame​

  • Kontrolu ekranajn koloragordojn
  • Provu sur malsamaj aparatoj
  • Kontrolu kolorkontraston per alireblecaj iloj
  • Konsideru simulilojn de kolorblindeco

Tipografiaj Problemoj​

  • Kontrolu ke tipardosieroj ŝargiĝas
  • Kontrolu tipargrandon ĉe malsamaj rompopunktoj
  • Testu kun reala enhavo
  • Konsideru linilongon por legebleco