Skip to main content

Diseinuaren norabidea

Diseinuaren norabidea urratsak zure theme-aren diseinu bisuala berrikusi, findu eta amaitzeko aukera ematen dizu, Theme Builder-ek theme osoa sortu aurretik.

Ikuspegi orokorra​

Discovery Interview osatu ondoren, Theme Builder-ek zure diseinuaren norabidea aurkezten du desktop eta mobile aurrebistaren errendatzearekin. Horri esker, theme-a onartu aurretik zure diseinua gailu desberdinetan zehazki nola ikusiko den ikus dezakezu.

Diseinuaren norabidearen osagaiak​

1. Kolore-paleta​

Zure theme-aren kolore-eskema, honako hauek barne:

  • Kolore nagusia — botoietarako, esteketarako eta azentuetarako erabiltzen den marka-kolore nagusia
  • Bigarren mailako kolorea — aniztasunerako kolore osagarria
  • Azentu-kolorea — elementu garrantzitsuetarako nabarmentze-kolorea
  • Kolore neutroak — atzeko planoetarako eta testurako grisak eta zuriak
  • Testu-kolorea — irakurgarritasunerako testu-kolore nagusia

2. Tipografia​

Letra-tipoen hautaketak honako hauetarako:

  • Izenburuen letra-tipoa — orrialde-izenburuetarako eta atal-buruetarako erabiltzen da
  • Gorputzaren letra-tipoa — paragrafo-testurako eta edukirako erabiltzen da
  • Letra-tamaina — pantaila-tamaina desberdinetarako tamaina moldakorra
  • Lerro-altuera — irakurgarritasunerako lerroen arteko tartea
  • Letra-lodierak — aldaera lodiak, arruntak eta arinak

3. Diseinua eta tarteak​

  • Edukiontziaren zabalera — edukiaren gehieneko zabalera
  • Padding eta marjinak — elementuen inguruko tartea
  • Sare-sistema — diseinu moldakorrerako zutabe-diseinua
  • Osagaien arteko tartea — UI elementuen arteko distantzia

4. Elementu bisualak​

  • Botoi-estiloak — botoi nagusi, bigarren mailako eta hirugarren mailakoen diseinuak
  • Txartel-diseinuak — eduki-blokeetarako diseinuak
  • Ikonoak — ikonoen estiloa eta tamaina
  • Ertzak eta itzalak — sakontasun bisual sotila
  • Hover efektuak — egoera interaktiboaren estiloa

Aurrebistaren errendatzea​

Desktop aurrebista​

Desktop aurrebistak zure diseinua zabalera osoan erakusten du (normalean 1200px edo zabalagoa):

  • Nabigazio-menu osoa
  • Zutabe guztiekin diseinu osoa
  • Tipografia eta tarte handiak
  • Elementu bisual guztiak tamaina osoan

Mobile aurrebista​

Mobile aurrebistak zure diseinua mobile zabaleran erakusten du (normalean 375px):

  • Nabigazio moldakorra (hamburger menu)
  • Zutabe bakarreko diseinua
  • Egokitutako tipografia eta tarteak
  • Ukitzeko egokiak diren botoi-tamainak

Breakpoint moldakorrak​

Theme Builder-ek breakpoint hauetan errendatzen ditu aurrebistak:

GailuaZabaleraAurrebista
Mobile375pxTelefono bertikala
Tablet768pxTablet horizontala
Desktop1200pxZabalera osoko desktop
Large Desktop1920pxPantaila ultra-zabala

Zure diseinua fintzea​

Doikuntzak egitea​

Zure diseinuaren norabidea honela findu dezakezu:

  1. Koloreak doituz — paletako edozein kolore aldatu
  2. Letra-tipoak aldatuz — tipografia desberdinak hautatu
  3. Tarteak aldatuz — padding eta marjinak doitu
  4. Diseinua eguneratuz — edukiontzi-zabalerak eta sare-zutabeak aldatu
  5. Elementuak pertsonalizatuz — botoi-estiloak, txartel-diseinuak, etab. aldatu

Aurrebisten eguneraketak​

Aldaketak denbora errealean islatzen dira:

  • Desktop aurrebista berehala eguneratzen da
  • Mobile aurrebista berehala eguneratzen da
  • Breakpoint moldakor guztiak eguneratzen dira
  • Aurrebisten artean alda dezakezu aldaketak egiaztatzeko

Konparazio-ikuspegia​

Konparatu zure diseinuaren norabidea honekin:

  • Jatorrizko diseinua — ikusi zer aldatu den
  • Lehiakideen diseinuak — alderatu inspirazio-guneekin
  • Aurreko bertsioak — itzuli lehenagoko diseinu-norabideetara

Diseinuaren norabidearen onarpena​

Zure diseinuarekin pozik zaudenean:

  1. Berrikusi bi aurrebistak — egiaztatu desktop eta mobile itxura ona dutela
  2. Egiaztatu kolore guztiak — ziurtatu kontrastea eta irisgarritasuna
  3. Probatu tipografia — egiaztatu irakurgarritasuna tamaina guztietan
  4. Berretsi diseinua — egiaztatu tarteak eta lerrokatzea
  5. Onartu diseinua — jarraitu theme-a sortzera

Hurrengo urratsak​

Zure diseinuaren norabidea onartu ondoren:

  1. Theme Builder-ek zure theme osoa sortzen du
  2. Theme-a zure WordPress gunean instalatzen da
  3. Gehiago pertsonaliza dezakezu WordPress customizer erabiliz
  4. Jarraitu Ostalaritzako menuak atalera edo beste eginbide batzuetara

Jardunbide egokiak​

  • Probatu benetako gailuetan — erabili benetako telefonoak eta tabletak ahal bada
  • Egiaztatu irakurgarritasuna — ziurtatu testua tamaina guztietan irakurgarria dela
  • Egiaztatu kontrastea — erabili Baliozkotu paletaren kontrastea irisgarritasunerako
  • Kontuan hartu errendimendua — optimizatu irudiak eta letra-tipoak abiadurarako
  • Planifikatu edukia kontuan hartuta — ziurtatu diseinuak zure benetako edukiarekin funtzionatzen duela

Arazoak konpontzea​

Aurrebista ez da eguneratzen​

  • Freskatu orrialdea
  • Garbitu nabigatzailearen cachea
  • Saiatu beste nabigatzaile batekin
  • Egiaztatu interneteko konexioa

Koloreek itxura desberdina dute​

  • Egiaztatu monitorearen kolore-ezarpenak
  • Probatu gailu desberdinetan
  • Egiaztatu kolore-kontrastea irisgarritasun-tresnekin
  • Kontuan hartu daltonismo-simulagailuak

Tipografia-arazoak​

  • Egiaztatu letra-tipoen fitxategiak kargatzen ari direla
  • Egiaztatu letra-tamaina breakpoint desberdinetan
  • Probatu benetako edukiarekin
  • Kontuan hartu lerro-luzera irakurgarritasunerako