Skip to main content

ທິດທາງການອອກແບບ

ຂັ້ນຕອນ ທິດທາງການອອກແບບ ຊ່ວຍໃຫ້ທ່ານກວດທານ, ປັບປຸງ ແລະ ສະຫຼຸບການອອກແບບພາບລັກຂອງ theme ຂອງທ່ານ ກ່ອນທີ່ Theme Builder ຈະສ້າງ theme ທີ່ສົມບູນ.

ພາບລວມ​

ຫຼັງຈາກສຳເລັດການສຳພາດຄົ້ນຫາແລ້ວ, Theme Builder ຈະສະແດງທິດທາງການອອກແບບຂອງທ່ານພ້ອມກັບ ການສະແດງຕົວຢ່າງສຳລັບ desktop ແລະ ມືຖື. ນີ້ຊ່ວຍໃຫ້ທ່ານເຫັນໄດ້ຢ່າງແນ່ນອນວ່າການອອກແບບຂອງທ່ານຈະມີຮູບລັກຢ່າງໃດໃນອຸປະກອນຕ່າງໆ ກ່ອນຕັດສິນໃຈນຳໃຊ້ theme.

ອົງປະກອບຂອງທິດທາງການອອກແບບ​

1. ຊຸດສີ​

ໂຄງສີຂອງ theme ຂອງທ່ານ, ລວມມີ:

  • ສີຫຼັກ — ສີຫຼັກຂອງແບຣນທີ່ໃຊ້ສຳລັບປຸ່ມ, ລິ້ງ ແລະ ຈຸດເນັ້ນ
  • ສີຮອງ — ສີທີ່ເສີມກັນເພື່ອຄວາມຫຼາກຫຼາຍ
  • ສີເນັ້ນ — ສີສຳລັບເນັ້ນອົງປະກອບສຳຄັນ
  • ສີກາງ — ສີເທົາ ແລະ ສີຂາວສຳລັບພື້ນຫຼັງ ແລະ ຂໍ້ຄວາມ
  • ສີຂໍ້ຄວາມ — ສີຂໍ້ຄວາມຫຼັກເພື່ອຄວາມອ່ານງ່າຍ

2. ຕົວພິມ​

ການເລືອກຟອນສຳລັບ:

  • ຟອນຫົວຂໍ້ — ໃຊ້ສຳລັບຊື່ໜ້າ ແລະ ຫົວຂໍ້ຂອງພາກ
  • ຟອນເນື້ອຫາ — ໃຊ້ສຳລັບຂໍ້ຄວາມຍໍ້ໜ້າ ແລະ ເນື້ອຫາ
  • ຂະໜາດຟອນ — ຂະໜາດທີ່ປັບຕາມໜ້າຈໍສຳລັບຂະໜາດໜ້າຈໍຕ່າງໆ
  • ຄວາມສູງຂອງແຖວ — ໄລຍະຫ່າງລະຫວ່າງແຖວເພື່ອຄວາມອ່ານງ່າຍ
  • ນ້ຳໜັກຟອນ — ຮູບແບບໜາ, ປົກກະຕິ ແລະ ບາງ

3. ໂຄງວາງ ແລະ ໄລຍະຫ່າງ​

  • ຄວາມກວ້າງຂອງ container — ຄວາມກວ້າງສູງສຸດສຳລັບເນື້ອຫາ
  • Padding ແລະ margins — ໄລຍະຫ່າງຮອບອົງປະກອບ
  • ລະບົບ grid — ໂຄງວາງເປັນຄໍລຳສຳລັບການອອກແບບທີ່ປັບຕາມໜ້າຈໍ
  • ໄລຍະຫ່າງຂອງສ່ວນປະກອບ — ໄລຍະຫ່າງລະຫວ່າງອົງປະກອບ UI

4. ອົງປະກອບພາບລັກ​

  • ສະໄຕລ໌ປຸ່ມ — ການອອກແບບປຸ່ມຫຼັກ, ປຸ່ມຮອງ ແລະ ປຸ່ມລຳດັບສາມ
  • ການອອກແບບກາດ — ໂຄງວາງສຳລັບບລັອກເນື້ອຫາ
  • ໄອຄອນ — ສະໄຕລ໌ ແລະ ຂະໜາດຂອງໄອຄອນ
  • ຂອບ ແລະ ເງົາ — ມິຕິພາບລັກທີ່ລະອຽດອ່ອນ
  • ເອັບເຟັກເມື່ອເລື່ອນເມົາສ໌ຜ່ານ — ສະໄຕລ໌ສະຖານະໂຕ້ຕອບ

ການສະແດງຕົວຢ່າງ​

ຕົວຢ່າງ Desktop​

ຕົວຢ່າງ desktop ສະແດງການອອກແບບຂອງທ່ານໃນຄວາມກວ້າງເຕັມ (ໂດຍທົ່ວໄປ 1200px ຫຼື ກວ້າງກວ່າ):

  • ເມນູນຳທາງເຕັມຮູບແບບ
  • ໂຄງວາງຄົບຖ້ວນພ້ອມທຸກຄໍລຳ
  • ຕົວພິມ ແລະ ໄລຍະຫ່າງຂະໜາດໃຫຍ່
  • ອົງປະກອບພາບລັກທັງໝົດໃນຂະໜາດເຕັມ

ຕົວຢ່າງມືຖື​

ຕົວຢ່າງມືຖືສະແດງການອອກແບບຂອງທ່ານໃນຄວາມກວ້າງມືຖື (ໂດຍທົ່ວໄປ 375px):

  • ການນຳທາງທີ່ປັບຕາມໜ້າຈໍ (ເມນູ hamburger)
  • ໂຄງວາງແບບຄໍລຳດຽວ
  • ຕົວພິມ ແລະ ໄລຍະຫ່າງທີ່ປັບແລ້ວ
  • ຂະໜາດປຸ່ມທີ່ເໝາະສຳລັບການສຳຜັດ

ຈຸດປ່ຽນຕາມໜ້າຈໍ​

Theme Builder ສະແດງຕົວຢ່າງທີ່ຈຸດປ່ຽນເຫຼົ່ານີ້:

ອຸປະກອນຄວາມກວ້າງຕົວຢ່າງ
ມືຖື375pxໂທລະສັບແນວຕັ້ງ
ແທັບເລັດ768pxແທັບເລັດແນວນອນ
Desktop1200pxdesktop ແບບຄວາມກວ້າງເຕັມ
Desktop ຂະໜາດໃຫຍ່1920pxຈໍສະແດງຜົນກວ້າງພິເສດ

ການປັບປຸງການອອກແບບຂອງທ່ານ​

ການປັບແກ້​

ທ່ານສາມາດປັບປຸງທິດທາງການອອກແບບຂອງທ່ານໄດ້ໂດຍ:

  1. ປັບສີ — ປ່ຽນສີໃດໆໃນຊຸດສີ
  2. ປ່ຽນຟອນ — ເລືອກຮູບແບບຕົວພິມອື່ນ
  3. ປັບໄລຍະຫ່າງ — ປັບ padding ແລະ margins
  4. ອັບເດດໂຄງວາງ — ປ່ຽນຄວາມກວ້າງຂອງ container ແລະ ຄໍລຳ grid
  5. ປັບແຕ່ງອົງປະກອບ — ປັບສະໄຕລ໌ປຸ່ມ, ການອອກແບບກາດ ແລະ ອື່ນໆ

ການອັບເດດຕົວຢ່າງ​

ການປ່ຽນແປງຈະສະແດງໃນເວລາຈິງ:

  • ຕົວຢ່າງ desktop ອັບເດດທັນທີ
  • ຕົວຢ່າງມືຖືອັບເດດທັນທີ
  • ຈຸດປ່ຽນຕາມໜ້າຈໍທັງໝົດຖືກອັບເດດ
  • ທ່ານສາມາດສະຫຼັບລະຫວ່າງຕົວຢ່າງເພື່ອກວດຢືນຢັນການປ່ຽນແປງ

ມຸມມອງປຽບທຽບ​

ປຽບທຽບທິດທາງການອອກແບບຂອງທ່ານກັບ:

  • ການອອກແບບດັ່ງເດີມ — ເບິ່ງວ່າມີຫຍັງປ່ຽນໄປ
  • ການອອກແບບຂອງຄູ່ແຂ່ງ — ປຽບທຽບກັບ site ແຮງບັນດານໃຈ
  • ເວີຊັນກ່ອນໜ້າ — ຍ້ອນກັບໄປຫາທິດທາງການອອກແບບກ່ອນໜ້າ

ການອະນຸມັດທິດທາງການອອກແບບ​

ເມື່ອທ່ານພໍໃຈກັບການອອກແບບຂອງທ່ານແລ້ວ:

  1. ກວດທານຕົວຢ່າງທັງສອງ — ກວດຢືນຢັນວ່າ desktop ແລະ ມືຖືເບິ່ງດີ
  2. ກວດສີທັງໝົດ — ໃຫ້ແນ່ໃຈວ່າມີ contrast ແລະ accessibility
  3. ທົດສອບຕົວພິມ — ກວດຢືນຢັນຄວາມອ່ານງ່າຍໃນທຸກຂະໜາດ
  4. ຢືນຢັນໂຄງວາງ — ກວດໄລຍະຫ່າງ ແລະ ການຈັດແນວ
  5. ອະນຸມັດການອອກແບບ — ດຳເນີນຕໍ່ໄປສູ່ການສ້າງ theme

ຂັ້ນຕອນຕໍ່ໄປ​

ຫຼັງຈາກອະນຸມັດທິດທາງການອອກແບບຂອງທ່ານແລ້ວ:

  1. Theme Builder ສ້າງ theme ທີ່ສົມບູນຂອງທ່ານ
  2. theme ຖືກຕິດຕັ້ງໃນ site WordPress ຂອງທ່ານ
  3. ທ່ານສາມາດປັບແຕ່ງເພີ່ມເຕີມໂດຍໃຊ້ WordPress customizer
  4. ດຳເນີນຕໍ່ໄປທີ່ ເມນູສຳລັບການບໍລິການຕ້ອນຮັບ ຫຼື ຄຸນສົມບັດອື່ນໆ

ແນວປະຕິບັດທີ່ດີທີ່ສຸດ​

  • ທົດສອບໃນອຸປະກອນຈິງ — ໃຊ້ໂທລະສັບ ແລະ ແທັບເລັດຈິງຖ້າເປັນໄປໄດ້
  • ກວດຄວາມອ່ານງ່າຍ — ໃຫ້ແນ່ໃຈວ່າຂໍ້ຄວາມອ່ານໄດ້ງ່າຍໃນທຸກຂະໜາດ
  • ກວດຢືນຢັນ contrast — ໃຊ້ ກວດສອບ Contrast ຂອງຊຸດສີ ເພື່ອ accessibility
  • ພິຈາລະນາປະສິດທິພາບ — ປັບຮູບພາບ ແລະ ຟອນໃຫ້ເໝາະສຳລັບຄວາມໄວ
  • ວາງແຜນສຳລັບເນື້ອຫາ — ໃຫ້ແນ່ໃຈວ່າໂຄງວາງໃຊ້ໄດ້ກັບເນື້ອຫາຈິງຂອງທ່ານ

ການແກ້ໄຂບັນຫາ​

ຕົວຢ່າງບໍ່ອັບເດດ​

  • ໂຫຼດໜ້າໃໝ່
  • ລຶບ browser cache
  • ລອງໃຊ້ browser ອື່ນ
  • ກວດການເຊື່ອມຕໍ່ internet

ສີເບິ່ງແຕກຕ່າງ​

  • ກວດການຕັ້ງຄ່າສີຂອງຈໍພາບ
  • ລອງໃນອຸປະກອນອື່ນ
  • ກວດຢືນຢັນ color contrast ດ້ວຍເຄື່ອງມື accessibility
  • ພິຈາລະນາເຄື່ອງຈຳລອງຕາບອດສີ

ບັນຫາຕົວພິມ​

  • ກວດຢືນຢັນວ່າໄຟລ໌ຟອນກຳລັງໂຫຼດ
  • ກວດຂະໜາດຟອນໃນຈຸດປ່ຽນຕາມໜ້າຈໍຕ່າງໆ
  • ທົດສອບກັບເນື້ອຫາຈິງ
  • ພິຈາລະນາຄວາມຍາວແຖວເພື່ອຄວາມອ່ານງ່າຍ