Skip to main content

Ontwerprigting

Die Ontwerprigting-stap laat jou toe om die visuele ontwerp van jou tema te hersien, te verfyn en te finaliseer voordat Theme Builder die volledige tema genereer.

Oorsig​

Nadat jy die Discovery Interview voltooi het, toon Theme Builder jou ontwerprigting met desktop- en mobiele vooruitsig-rendering. Dit laat jou toe om presies te sien hoe jou ontwerp op verskillende toestelle sal lyk voordat jy jou toewyding aan die tema maak.

Ontwerprigting Komponente​

1. Kleurepalet​

Jou tema se kleurskema, insluitend:

  • Primêre kleur — die hoofmerkkleur wat vir knoppies, skakels en aksente gebruik word
  • Sekondêre kleur — 'n aanvullende kleur vir variasie
  • Aksentkleur — die hoëligkleur vir belangrike elemente
  • Neutrale kleure — grys en wit vir agtergronde en teks
  • Tekstekleur — die primêre tekskleur vir leesbaarheid

2. Tipografie​

Letterkeuse vir:

  • Kopfont — gebruik vir bladsytitels en seksiekoppe
  • Hoofteksfont — gebruik vir paragraafteks en inhoud
  • Lettergrootte — responsiewe grootte vir verskillende skermgroottes
  • Lynhoogte — spasie tussen lyne vir leesbaarheid
  • Lettergewigte — vet, normaal en ligte variasies

3. Lêuiting en Spasering​

  • Containerbreedte — maksimum breedte vir inhoud
  • Padding en marges — spasie rondom elemente
  • Roosterstelsel — kolom-leuiting vir responsief ontwerp
  • Komponent-spasering — afstand tussen UI-elemente

4. Visuele Elemente​

  • Knopstyles — primêre, sekondêre en tersiêre knopontwerpe
  • Kaartontwerpe — lêuitings vir inhoudblokke
  • Ikoon — ikoonstyl en grootte
  • Bande en skaduwees — subtiele visuele diepte
  • Hover-effekte — interaktiewe toestandstyling

Vooruitsig-Rendering​

Desktop Vooruitsig​

Die desktopvooruitsig toon jou ontwerp by volle breedte (gewoonlik 1200px of breër):

  • Volledige navigasieblaaie
  • Volledige lêuiting met alle kolomme
  • Groot tipografie en spasie
  • Alle visuele elemente in volle grootte

Mobiele Vooruitsig​

Die mobiele vooruitsig toon jou ontwerp by mobiele breedte (gewoonlik 375px):

  • Responsiewe navigasie (hamburgerblaaie)
  • Eengestelde kolom-leuiting
  • Aangepaste tipografie en spasie
  • Aanraakvriendelike knoppie-grootte

Responsiewe Brekingspunte​

Theme Builder render vooruitsigte by hierdie brekingspunte:

ToëstelBreedteVooruitsig
Mobiel375pxPortretfoon
Tablet768pxLandskaptablet
Desktop1200pxVolle-breedte desktop
Groot Desktop1920pxUltra-wyd skerm

Jou Ontwerp Verfyn​

Aanpassings Maak​

Jy kan jou ontwerprigting verfyn deur:

  1. Kleure aanpas — verander enige kleur in die palet
  2. Fonts verander — kies verskillende lettertipe
  3. Spasering wysig — pas padding en marges aan
  4. Lêuiting opdateer — verander containerbreedtes en roosterkolomme
  5. Elemente aanpas — wysig knopstyles, kaartontwerpe, ens.

Vooruitsig Opdaterings​

Veranderinge word in real-time weerspieël:

  • Die desktopvooruitsig word onmiddellik opgedateer
  • Die mobiele vooruitsig word onmiddellik opgedateer
  • Alle responsiewe brekingspunte word opgedateer
  • Jy kan tussen vooruitsigte skakel om veranderinge te verifieer

Vergelykingsuitsig​

Vergelyk jou ontwerprigting met:

  • Oorspronklike ontwerp — sien wat verander het
  • Mededingersontwerpe — vergelyk met inspirasiewe webwerwe
  • Vorige weergawes — keer terug na vroeëre ontwerprigting

Ontwerprigting Goedkeuring​

Sodra jy tevrede is met jou ontwerp:

  1. Beoordeel beide vooruitsigte — verifieer dat desktop en mobiel goed lyk
  2. Kontroleer alle kleure — verseker kontras en toeganklikheid
  3. Toets tipografie — verifieer leesbaarheid by alle groottes
  4. Bevestig lêuiting — kyk na spasie en uitdrywing
  5. Ontwerp goedkeur — gaan voort met tema-generasie

Volgende Stappe​

Nadat jy jou ontwerprigting goedgekeur het:

  1. Theme Builder genereer jou volledige tema
  2. Die tema word op jou WordPress-webwerf geïnstalleer
  3. Jy kan verder aanpas met die WordPress customizer
  4. Gaan voort na Hospitality Menus of ander kenmerke

Beste Praktyke​

  • Toets op regte toestelle — gebruik werklike fone en tablette indien moontlik
  • Kontroleer leesbaarheid — verseker dat teks by alle groottes leesbaar is
  • Verifieer kontras — gebruik Validate Palette Contrast vir toeganklikheid
  • Neem prestasie in ag — optimaliseer beelde en fonts vir spoed
  • Beplan vir inhoud — verseker dat die lêuiting werk met jou werklike inhoud

Probleemoplossing​

Vooruitsig Werk Nie Op Nie​

  • Herlaai die bladsy
  • Maak die browser-cache skoon
  • Probeer 'n ander browser
  • Kontroleer internetverbinding

Kleure Lyk Anders​

  • Kontroleer monitorkleurinstellings
  • Probeer op verskillende toestelle
  • Verifieer kleurkontras met toeganklikheidstoue
  • Neem kleurblindheid-simulators in ag

Tipografieprobleme​

  • Verifieer dat letterbestye laai
  • Kontroleer lettergrootte by verskillende brekingspunte
  • Toets met werklike inhoud
  • Neem lynlengte vir leesbaarheid in ag

Verwante Dokumentasie​