Skip to main content

Cyfeiriad Dylunio

Mae cam Cyfeiriad Dylunio yn eich galluogi i adolygu, mireinio, a chwblhau dyluniad gweledol eich theme cyn i Theme Builder gynhyrchu'r theme cyflawn.

Trosolwg

Ar ôl cwblhau'r Cyfweliad Darganfod, mae Theme Builder yn cyflwyno eich cyfeiriad dylunio gyda rendro rhagolwg desktop a mobile. Mae hyn yn eich galluogi i weld yn union sut bydd eich dyluniad yn edrych ar wahanol ddyfeisiau cyn ymrwymo i'r theme.

Cydrannau Cyfeiriad Dylunio

1. Palet Lliwiau

Cynllun lliwiau eich theme, gan gynnwys:

  • Lliw cynradd — prif liw brand a ddefnyddir ar gyfer botymau, dolenni, ac acenion
  • Lliw eilaidd — lliw ategol ar gyfer amrywiaeth
  • Lliw acen — lliw amlygu ar gyfer elfennau pwysig
  • Lliwiau niwtral — llwydion a gwynion ar gyfer cefndiroedd a thestun
  • Lliw testun — lliw testun cynradd ar gyfer darllenadwyedd

2. Teipograffeg

Dewisiadau ffont ar gyfer:

  • Ffont pennawd — a ddefnyddir ar gyfer teitlau tudalennau a phenawdau adrannau
  • Ffont corff — a ddefnyddir ar gyfer testun paragraffau a chynnwys
  • Meintiau ffont — meintio ymatebol ar gyfer gwahanol feintiau sgrin
  • Uchder llinell — bylchau rhwng llinellau ar gyfer darllenadwyedd
  • Pwysau ffont — amrywiadau trwm, rheolaidd, ac ysgafn

3. Cynllun a Bylchau

  • Lled cynhwysydd — lled mwyaf ar gyfer cynnwys
  • Padding ac ymylon — bylchau o amgylch elfennau
  • System grid — cynllun colofnau ar gyfer dylunio ymatebol
  • Bylchau cydrannau — pellter rhwng elfennau UI

4. Elfennau Gweledol

  • Arddulliau botymau — dyluniadau botymau cynradd, eilaidd, a thrydyddol
  • Dyluniadau cardiau — cynlluniau ar gyfer blociau cynnwys
  • Eiconau — arddull a maint eiconau
  • Borderi a chysgodion — dyfnder gweledol cynnil
  • Effeithiau hover — steilio cyflwr rhyngweithiol

Rendro Rhagolwg

Rhagolwg Desktop

Mae'r rhagolwg desktop yn dangos eich dyluniad ar led llawn (yn nodweddiadol 1200px neu'n ehangach):

  • Dewislen lywio lawn
  • Cynllun cyflawn gyda'r holl golofnau
  • Teipograffeg a bylchau mawr
  • Pob elfen weledol ar faint llawn

Rhagolwg Mobile

Mae'r rhagolwg mobile yn dangos eich dyluniad ar led mobile (yn nodweddiadol 375px):

  • Llywio ymatebol (dewislen hamburger)
  • Cynllun un golofn
  • Teipograffeg a bylchau wedi'u haddasu
  • Meintiau botymau cyfeillgar i gyffwrdd

Torbwyntiau Ymatebol

Mae Theme Builder yn rendro rhagolygon ar y torbwyntiau hyn:

DyfaisLledRhagolwg
Mobile375pxFfôn portread
Tablet768pxTabled tirwedd
Desktop1200pxDesktop lled llawn
Large Desktop1920pxDangosydd uwch-lydan

Mireinio Eich Dyluniad

Gwneud Addasiadau

Gallwch fireinio eich cyfeiriad dylunio drwy:

  1. Addasu lliwiau — newid unrhyw liw yn y palet
  2. Newid ffontiau — dewis teipiau gwahanol
  3. Addasu bylchau — addasu padding ac ymylon
  4. Diweddaru cynllun — newid lledau cynwysyddion a cholofnau grid
  5. Addasu elfennau — newid arddulliau botymau, dyluniadau cardiau, ac ati.

Diweddariadau Rhagolwg

Mae newidiadau'n cael eu hadlewyrchu mewn amser real:

  • Mae rhagolwg desktop yn diweddaru ar unwaith
  • Mae rhagolwg mobile yn diweddaru ar unwaith
  • Mae pob torbwynt ymatebol yn cael ei ddiweddaru
  • Gallwch newid rhwng rhagolygon i wirio newidiadau

Golwg Gymharu

Cymharwch eich cyfeiriad dylunio â:

  • Dyluniad gwreiddiol — gweld beth newidiodd
  • Dyluniadau cystadleuwyr — cymharu â safleoedd ysbrydoliaeth
  • Fersiynau blaenorol — dychwelyd at gyfeiriadau dylunio cynharach

Cymeradwyo Cyfeiriad Dylunio

Unwaith y byddwch yn fodlon â'ch dyluniad:

  1. Adolygu'r ddau ragolwg — gwirio bod desktop a mobile yn edrych yn dda
  2. Gwirio pob lliw — sicrhau cyferbyniad a hygyrchedd
  3. Profi teipograffeg — gwirio darllenadwyedd ar bob maint
  4. Cadarnhau cynllun — gwirio bylchau ac aliniad
  5. Cymeradwyo dyluniad — symud ymlaen i gynhyrchu theme

Camau Nesaf

Ar ôl cymeradwyo eich cyfeiriad dylunio:

  1. Mae Theme Builder yn cynhyrchu eich theme cyflawn
  2. Caiff y theme ei osod ar eich safle WordPress
  3. Gallwch addasu ymhellach gan ddefnyddio addasydd WordPress
  4. Symudwch ymlaen i Fwydlenni Lletygarwch neu nodweddion eraill

Arferion Gorau

  • Profi ar ddyfeisiau go iawn — defnyddiwch ffonau a thabledi go iawn os yw'n bosibl
  • Gwirio darllenadwyedd — sicrhau bod testun yn ddarllenadwy ar bob maint
  • Gwirio cyferbyniad — defnyddiwch Dilysu Cyferbyniad Palet ar gyfer hygyrchedd
  • Ystyried perfformiad — optimeiddiwch ddelweddau a ffontiau ar gyfer cyflymder
  • Cynllunio ar gyfer cynnwys — sicrhau bod y cynllun yn gweithio gyda'ch cynnwys gwirioneddol

Datrys Problemau

Rhagolwg Ddim yn Diweddaru

  • Adnewyddwch y dudalen
  • Cliriwch storfa'r porwr
  • Rhowch gynnig ar borwr gwahanol
  • Gwiriwch y cysylltiad rhyngrwyd

Lliwiau'n Edrych yn Wahanol

  • Gwiriwch osodiadau lliw'r monitor
  • Rhowch gynnig ar wahanol ddyfeisiau
  • Gwiriwch gyferbyniad lliw gydag offer hygyrchedd
  • Ystyriwch efelychwyr dallineb lliw

Problemau Teipograffeg

  • Gwiriwch fod ffeiliau ffont yn llwytho
  • Gwiriwch faint ffont ar wahanol dorbwyntiau
  • Profwch gyda chynnwys gwirioneddol
  • Ystyriwch hyd llinell ar gyfer darllenadwyedd