{"id":259,"date":"2025-04-23T01:28:25","date_gmt":"2025-04-23T01:28:25","guid":{"rendered":"https:\/\/teknohazu.com\/blog\/?p=259"},"modified":"2025-04-23T02:34:55","modified_gmt":"2025-04-23T02:34:55","slug":"seni-hasilkan-layout-wordpress-yang-buat-orang-taknak-klik-close","status":"publish","type":"post","link":"https:\/\/teknohazu.com\/blog\/2025\/04\/23\/seni-hasilkan-layout-wordpress-yang-buat-orang-taknak-klik-close\/","title":{"rendered":"Seni Hasilkan Layout WordPress yang Buat Orang Taknak Klik \u2018Close\u2019"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Pernah tak bila kita masuk satu website, rasa macam \u201cWah, clean gila\u2026 tenang je tengok.\u201d Tapi ada juga website yang kita baru buka dua saat terus tekan butang \u2018X\u2019. Bezanya bukan pada warna semata-mata, bukan juga sebab font dia lawa. Tapi <em><strong>layout<\/strong><\/em>. Susunan. Aliran mata. Tenaga visual yang buat kita nak terus scroll sampai habis.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dalam WordPress, seni hasilkan layout bukan lagi sekadar seret lepas tu lepas tangan. Nak hasilkan laman yang betul-betul <em>engage<\/em> dan kemas, kena tahu beberapa benda yang nampak kecil \u2014 tapi bila digabungkan, dia boleh jadi <em>masterpiece<\/em>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Yang pertama, kita kena jadi \u2018mesra\u2019 dengan <strong>Container block<\/strong>. Ini bukan sekadar kotak kosong, tapi dia ibarat \u2018rumah\u2019 untuk segala isi kandungan laman web kita. Bila kita pandai main dengan Container, kita boleh kawal semua benda \u2014 dari jarak antara elemen, susunan layout ikut skrin, sampai ke warna latar belakang yang smooth gila. Dan dalam dunia visual, susunan ni penting. Orang suka benda yang tersusun. Hati pun jadi tenang bila tengok laman tu tak serabut.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tapi seni sebenar bermula bila kita mula letak <strong>Container dalam Container<\/strong>. Ha, ini dia \u2014 <em>layer dalam layer<\/em>. Bayangkan kita buat satu bahagian khas untuk testimoni. Dalam testimoni tu pula, ada gambar orang tu, ada nama, jawatan dia, ada komen dia dan mungkin bintang rating sekali. Semua tu boleh dibahagi-bahagi guna Container kecil dalam Container besar. Bila susunan kita kemas, mesej yang kita sampaikan pun jadi jelas. Website bukan lagi sekadar paparan info, tapi jadi pengalaman. Bila orang rasa seronok scroll, dia lebih cenderung untuk percaya dan beli.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Satu lagi kegunaan best bila kita main Container dalam Container \u2014 ialah bila kita nak kawal <strong>luas background<\/strong>. Kadang kita nak satu section ada background warna lain, tapi kita tak nak semua isi kandungan melimpah ke tepi skrin. Kita nak background tu lebar, tapi konten tetap dalam ruang tengah. Dengan teknik nesting ni, kita boleh buat satu Container luar yang pegang background, dan satu Container dalam yang pegang konten. Jadi background nampak penuh, tapi teks tetap kemas dalam ruang baca. <em>Balance.<\/em> Inilah beza laman yang nampak pro dengan laman yang macam belum siap.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nak lagi power? Kita kena kenal dua benda ni \u2014 <strong>Flexbox<\/strong> dan <strong>Grid<\/strong>. Dua-dua ni macam sistem tulang belakang dalam susunan elemen. <strong>Flexbox<\/strong> ni macam barisan. Semua benda dalam satu line, tersusun kiri ke kanan, atas ke bawah. Sesuai sangat untuk baris ikon, butang, atau kotak-kotak perkhidmatan. <strong>Grid<\/strong> pula macam papan catur. Kita boleh susun dalam bentuk baris dan kolum sekaligus. Nak letak 3 produk dalam 2 baris? Gunalah Grid. Nak buat galeri gambar yang responsive? Grid juga jawapannya.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bila kita tahu bila nak guna Flex, bila nak guna Grid \u2014 kita sebenarnya dah ada kuasa untuk bentuk apa saja rupa laman yang kita nak. Tak payah lagi ikut template orang. Tak perlu lagi tengok laman lain sebagai \u2018rujukan\u2019. Sebab sekarang, kita dah tahu cara nak bina dari kosong. Dan kosong itu\u2026 ada potensinya bila kita tahu cara isi.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Akhirnya, seni reka bentuk laman web ni bukan tentang siapa paling banyak elemen, atau paling fancy animasi. Ia tentang <em>intention<\/em> \u2014 niat kita waktu susun elemen tu. Adakah kita susun sebab nak tunjuk cantik, atau sebab nak bantu pengunjung faham mesej dengan lebih mudah?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Kalau kita jujur dalam niat reka bentuk, dan kita gabungkan ilmu teknikal dengan sentuhan estetik\u2026 laman yang kita bina akan jadi lebih dari sekadar laman. Ia boleh jadi pengalaman. Dan pengalaman itulah yang buat orang datang, dan kekal.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pernah tak bila kita masuk satu website, rasa macam \u201cWah, clean gila\u2026 tenang je tengok.\u201d Tapi ada juga website yang [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":262,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"iawp_total_views":0,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-259","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"_links":{"self":[{"href":"https:\/\/teknohazu.com\/blog\/wp-json\/wp\/v2\/posts\/259","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teknohazu.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/teknohazu.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/teknohazu.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teknohazu.com\/blog\/wp-json\/wp\/v2\/comments?post=259"}],"version-history":[{"count":2,"href":"https:\/\/teknohazu.com\/blog\/wp-json\/wp\/v2\/posts\/259\/revisions"}],"predecessor-version":[{"id":264,"href":"https:\/\/teknohazu.com\/blog\/wp-json\/wp\/v2\/posts\/259\/revisions\/264"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/teknohazu.com\/blog\/wp-json\/wp\/v2\/media\/262"}],"wp:attachment":[{"href":"https:\/\/teknohazu.com\/blog\/wp-json\/wp\/v2\/media?parent=259"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teknohazu.com\/blog\/wp-json\/wp\/v2\/categories?post=259"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teknohazu.com\/blog\/wp-json\/wp\/v2\/tags?post=259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}