Tersedia di

HVACool

HVACool adalah tema yang dirancang khusus untuk vendor HVAC residensial—dibuat dengan memahami kenyataan bahwa situs seperti ini jarang dikunjungi sekadar karena penasaran. Pengunjung datang karena kepanasan, kedinginan, atau khawatir ada kebocoran dan perlu bertindak cepat. Tema ini menjaga informasi penting bisnis agar selalu terlihat, menyediakan navigasi yang langsung tersedia, dan tidak mengganggu.

Kolom tetap, informasi penting didahulukan

Struktur tiga kolom menjaga identitas bisnis (logo, navigasi, CTA) tetap terkunci di bilah sisi kiri, sementara detail kontak tertambat di sisi kanan, sehingga informasi yang dibutuhkan pelanggan dalam situasi darurat—nomor telepon, tautan pemesanan, alamat—selalu terlihat, di mana pun posisi mereka di halaman. Kolom tengah (60% dari lebar) menampilkan konten seperti tajuk utama, deskripsi layanan, dan berita.

Sudut membulat dan satu warna aksen yang menyatukan semuanya

Palet warna dibangun di atas ketegangan yang disengaja: latar belakang nyaris hitam, permukaan konten putih gading, dan satu warna hijau asam yang dicadangkan khusus untuk elemen yang menuntut perhatian segera—blok logo, CTA utama, lencana ikon, dan status hover. Empat variasi palet disertakan dalam tema ini, memadukan warna aksen dengan nada dasar yang lebih hangat, lebih dingin, dan netral untuk mengubah kesan keseluruhan.

Tipografi ditangani sepenuhnya oleh keluarga font Google Sans—Display (72pt) untuk judul dan Text (24pt) untuk isi—demi menjaga sistem tetap kohesif dan tetap efisien, menggunakan satu keluarga font di semua bobot dan konteks.

Gerakan yang bermakna dan fondasi teknis yang bersih

Animasi ringan dan efek hover menambahkan karakter tanpa bersaing dengan konten. Detail-detail ini memperkuat kesan siap-bertindak dari tema dengan memberi sinyal interaktivitas pada momen yang tepat. Gaya tombol kustom didaftarkan di theme.json dan ditampilkan melalui functions.php, sehingga dapat digunakan langsung pada antarmuka tombol bawaan tanpa pemilik situs perlu menambahkan CSS Khusus. Secara keseluruhan, CSS-nya ringkas, terorganisasi, dan diberi komentar dengan baik.

Animasikan bagian hero Anda

Halaman depan HVACool menyambut pengunjung dengan rangkaian animasi singkat: avatar teknisi muncul dengan efek pop, gelembung percakapan tampil seolah sedang diketik, lalu tombol ajakan bertindak memudar masuk di bagian akhir. Anda dapat menggunakan kembali animasi ini pada blok Anda sendiri — tanpa perlu menulis kode.

Cara kerjanya

Animasi ini menggunakan tiga kelas CSS. Tambahkan ke blok mana pun di halaman depan melalui Pengaturan Blok → Lanjutan → Kelas CSS tambahan:

• anim-avatar — efek pop membesar dan memantul yang ceria. Digunakan pada gambar teknisi, tetapi berfungsi pada blok gambar mana pun.
• anim-pill — efek khas pengungkapan teks. Jika elemen teks pertama dalam blok adalah paragraf, teks akan diketik karakter demi karakter. Jika berupa judul, teks akan bergeser ke atas dan memudar masuk — mengetik judul multi-baris akan menyisakan tinggi penuhnya sejak awal dan membuat gelembung kosong muncul sesaat di layar.
• anim-buttons — efek memudar sambil naik yang halus untuk baris ajakan bertindak Anda, dengan waktu kemunculan yang diatur setelah animasi pill selesai.

Urutannya selalu berjalan tetap: pop avatar → setiap blok anim-pill beranimasi satu per satu (sesuai urutan kemunculannya di halaman) → tombol memudar masuk. Animasi dimulai saat bagian tersebut mulai terlihat di layar.

Perlu diketahui

• Hanya halaman depan. Skrip untuk menjalankan rangkaian animasi ini hanya dimuat di halaman depan. Menambahkan kelas-kelas ini ke blok di halaman lain tidak akan menganimasikannya — ini memang disengaja, agar situs tetap cepat. (Pengembang dapat menonaktifkan pembatas is_front_page() di functions.php untuk mengubah perilaku ini.)
• Aksesibilitas sudah diperhitungkan. Pengunjung yang mengaktifkan “Kurangi Gerakan” di pengaturan sistem mereka akan langsung melihat konten tanpa animasi. Pengunjung tanpa JavaScript juga tetap melihat semuanya — tidak ada yang tersembunyi.
• Campur dan padukan. Anda dapat menggunakan satu, dua, atau ketiga kelas sekaligus. Beberapa blok anim-pill juga tidak masalah; semuanya akan beranimasi sesuai urutan kemunculannya di halaman.