4. Panduan Mengubah Section About

Section "About" atau "Tentang Kami" adalah bagian di halaman depan yang menjelaskan secara singkat keunggulan atau pilar utama dari sekolah Anda. Bagian ini terdiri dari gambar, judul, deskripsi, tiga poin keunggulan, dan sebuah tombol.

Seluruh bagian ini dikontrol melalui satu halaman khusus di dalam menu Pages.

Langkah-langkah Mengedit Section About

1. Dari menu utama di sebelah kiri, klik Pages.

2. Cari dan klik halaman yang berjudul About Section untuk membukanya di editor.

   

Mengubah Komponen Utama

Bagian utama seperti gambar, judul, dan paragraf deskripsi dapat diubah dengan mudah.

1. Mengubah Gambar: Klik pada gambar utama di bagian atas editor (Featured Image) untuk menggantinya dengan gambar baru.

2. Mengubah Judul Utama: Klik pada kartu judul di bawah gambar untuk mengubah teks judul utama (contohnya dari "About Section" menjadi "Tentang Sekolah Kami").

3. Mengubah Paragraf & URL: Buka panel Settings (ikon side panel di pojok kanan atas).

   • PENTING: ⚠️ Jangan pernah mengubah isi dari Page URL. Tema ini secara khusus memanggil halaman dengan URL about-section untuk ditampilkan di halaman depan. Mengubahnya akan menyebabkan section ini hilang.

   

   • Isi atau ubah teks di dalam kolom Excerpt. Teks inilah yang akan muncul sebagai paragraf deskripsi utama di halaman depan.

   

Mengubah Tiga Poin Keunggulan & Tombol

Tiga poin keunggulan dan tombol di bawahnya diatur menggunakan kode khusus di dalam editor. Anda akan melihat dua blok Embedded JavaScript.

1. Mengubah Tiga Poin Keunggulan

1. Arahkan mouse Anda ke blok JavaScript yang pertama, lalu klik ikon pensil (Edit) yang muncul.

   

2. Sebuah jendela editor kode akan muncul. Di sinilah Anda bisa mengubah isi dari ketiga poin tersebut.

   

   • Ubah nilai title untuk judul poin.
   • Ubah nilai description untuk deskripsi singkatnya.
   • Ubah nilai icon dengan kelas ikon dari Font Awesome (contoh: fas fa-quran, fas fa-globe).

2. Mengubah Tombol "Selengkapnya"

1. Klik ikon pensil pada blok JavaScript yang kedua.
2. Ubah nilai label untuk mengubah teks tombol, dan link untuk menentukan URL tujuan saat tombol diklik.

---

Contoh Kode (untuk disalin)

Jika Anda tidak sengaja menghapus kode di dalam blok JavaScript, Anda bisa menyalin template di bawah ini dan menempelkannya kembali.

Kode untuk Tiga Poin Keunggulan (Blok Pertama)

<script id="about-features-data" type="application/json">
  [
    {
      "title": "Pendidikan Qur'ani dan Berkarakter",
      "description": "Pembiasaan nilai-nilai Islam dan akhlak mulia dalam setiap aktivitas peserta didik.",
      "icon": "fas fa-quran",
      "bgColor": "bg-green-100",
      "textColor": "text-green-600"
    },
    {
      "title": "Wawasan Global & Pembelajaran Menyenangkan",
      "description": "Pembelajaran bilingual, tematik, dan interaktif dengan pengalaman berstandar internasional.",
      "icon": "fas fa-globe",
      "bgColor": "bg-blue-100",
      "textColor": "text-blue-600"
    },
    {
      "title": "Lingkungan Islami & Ramah Anak",
      "description": "Suasana belajar yang aman, nyaman, serta guru yang peduli dan profesional.",
      "icon": "fas fa-child",
      "bgColor": "bg-yellow-100",
      "textColor": "text-yellow-600"
    }
  ]
</script>

Kode untuk Tombol (Blok Kedua)

<script id="about-link-data" type="application/json">
  {
    "link": "#features",
    "label": "Selengkapnya"
  }
</script>

Simpan Perubahan

Setelah selesai melakukan semua perubahan, klik tombol Update di pojok kanan atas, atau tekan Ctrl + S di keyboard Anda.

Selesai! Section "Tentang Kami" di halaman depan Anda telah berhasil diperbarui.