Skip to main content

Modul 2 - Membina Laman Asas dengan YOOtheme

Objektif Modul

  1. Memahami struktur asas reka bentuk dalam YOOtheme. 
  2. Membina satu halaman web ringkas menggunakan elemen-elemen utama. 
  3. Menerapkan susun atur responsif dan konsisten. 

Struktur Asas YOOtheme

  1. Section: Bahagian besar untuk susun kandungan. 
  2. Container: Kawasan kandungan dengan padding/margin automatik. 
  3. Grid: Struktur baris & lajur. 
  4. Element: Kandungan seperti teks, gambar, butang dan sebagainya. 

Membina Halaman Asas

Langkah Membina Halaman

Tambah SECTION Baru
(Rangka utama sesuatu blok kandungan.)

  1. Pilih warna latar atau imej latar (optional).

Tambah ROW
(Baris dalam sesuatu section.)

  1. Klik pensil (Edit)
  2. Pilih Grid Layout.

    layout

Tambah ELEMEN
(Objek kandungan (Teks, Butang, Gambar, Slideshow, dsb.)

  1. Teks ➜ Letakkan tajuk dan isi.
  2. Imej ➜ Tambah gambar yang sesuai.
  3. Butang ➜ Untuk pautan ke halaman lain.

Fungsi BUILDER

  1. Susun atur halaman secara drag & drop.
  2. Tukar susunan elemen secara visual.
  3. Boleh preview terus perubahan yang dibuat (Live Preview).

Praktikal

  1. Refer design dari website.. Minta peserta dev page berdasarkan design tersebut. 
  2. Cipta satu halaman baharu bertajuk “Tentang Kami” 
  3. Gunakan sekurang-kurangnya 1 imej, 2 teks, dan 1 butang 
  4. Susun atur mesti responsif untuk mobile & desktop 
<< Back
Next >>