paketinde mevcuttur

HVACool

HVACool, konut tipi HVAC satıcıları için özel olarak tasarlanmış bir temadır. Bu tema, kullanıcıların bu tür siteleri genelde keyif için değil, acil bir ihtiyaçla ziyaret ettiği düşünülerek geliştirilmiştir. Ziyaretçi ya sıcaktan bunalmıştır, ya üşümektedir ya da bir sızıntıdan endişe duyuyordur ve hızlı hareket etmesi gerekir. Tema, iş için kritik bilgileri her zaman görünür tutar, gezinmeyi kolayca erişilebilir hale getirir ve dikkat dağıtmaz.

 

Sabit sütunlar, kritik bilgiler önde

Üç sütunlu yapı, işletme kimliğini (logo, gezinme, harekete geçirici mesaj) sol kenar çubuğuna, iletişim bilgilerini ise sağ tarafa sabitler. Böylece müşterinin acil bir durumda ihtiyaç duyduğu bilgiler —telefon numarası, randevu bağlantısı, adres— sayfanın neresinde olursa olsun her zaman görünür kalır. Orta sütun (genişliğin %60’ı) başlıklar, hizmet açıklamaları ve haberler gibi içerikleri görüntüler.

Yuvarlatılmış köşeler ve her şeye hükmeden tek renkli bir vurgu

Renk paleti bilinçli olarak güçlü bir kontrast üzerine kurulmuştur: siyaha yakın arka planlar, kırık beyaz içerik yüzeyleri ve yalnızca anında dikkat gerektiren öğeler için ayrılmış tek bir asit yeşili — logo bloğu, birincil harekete geçirici mesajlar, simge rozetleri ve üzerine gelme durumları. Tema, vurgu rengini sıcak, soğuk ve nötr taban tonlarıyla eşleştiren; temanın karakterini değiştiren dört farklı renk paletiyle gelir.

Tipografinin tamamında Google Sans ailesi kullanılır: başlıklar için Display (72pt), gövde metni için Text (24pt). Tüm ağırlıklar ve kullanım bağlamlarında tek bir yazı tipi ailesi kullanılarak sistem tutarlı ve performans odaklı tutulur.

Amaca yönelik hareket ve temiz bir teknik altyapı

Hafif animasyonlar ve üzerine gelme efektleri, içerikle rekabet etmeden karaktere katkıda bulunur. Bu detaylar, doğru anlarda etkileşimi öne çıkararak temanın dinamik ve aksiyona hazır yapısını güçlendirir. Özel düğme stilleri theme.json dosyasında tanımlanır ve functions.php aracılığıyla sunulur; böylece site sahibinin Özel CSS yazmasına gerek kalmadan, yerleşik düğme arayüzü içinde kullanılabilir. Genel olarak CSS yalın, düzenli ve iyi yorumlanmıştır.

Hero bölümünüzü hareketlendirin

HVACool’un ön sayfası, ziyaretçileri kısa bir animasyonla karşılar: teknisyen avatarı belirir, konuşma balonlarındaki metinler kendiliğinden yazılır ve harekete geçirici düğmeler belirerek sahneyi tamamlar. Bu animasyonları kendi bloklarınızda da kullanabilirsiniz — kod gerekmez.

Nasıl çalışır

Animasyonlar üç CSS sınıfıyla yönetilir. Bunları ön sayfadaki herhangi bir bloğa Blok ayarları → Gelişmiş → Ek CSS sınıf(ları) yoluyla ekleyin:

• anim-avatar — eğlenceli bir ölçeklenme ve zıplama efekti. Teknisyen görseli için kullanılır, ancak herhangi bir görsel bloğunda da işe yarar.
• anim-pill — kendine özgü metin görünme efekti. Bloğun ilk metin öğesi bir paragrafsa karakter karakter yazılır. Bir başlıksa bunun yerine yukarı kayarak belirir — çok satırlı bir başlığın yazılması, tam yüksekliği en baştan ayırmayı gerektirir ve ekranda bir an boş bir balon bırakırdı.
• anim-buttons — harekete geçirici mesaj satırı için hafif bir belirme efekti; konuşma balonları tamamlandıktan sonra başlayacak şekilde ayarlanmıştır.

Animasyon her zaman aynı sırayla çalışır: avatar belirmesi → her anim-pill bloğu birbiri ardına (sayfa sırasına göre) canlanır → düğmeler belirir. Bölüm ekrana girdiğinde başlar.

Bilinmesinde fayda var

• Yalnızca ön sayfa. Diziyi çalıştıran betik yalnızca ön sayfada yüklenir. Sınıfları diğer sayfalardaki bloklara eklemek animasyon oluşturmaz — sitenin geri kalanını hızlı tutmak için bu bilinçli bir tercihtir. (Geliştiriciler bunu değiştirmek için functions.php dosyasındaki is_front_page() koşulunu kaldırabilir.)
• Erişilebilirlik yerleşik olarak sunulur. Sistem ayarlarında “hareketi azalt” seçeneğini etkinleştirmiş ziyaretçiler içeriği animasyonsuz, anında görür. JavaScript devre dışı olan ziyaretçiler de her şeyi görür — hiçbir şey gizli kalmaz.
• İstediğiniz gibi birleştirin. Bir, iki veya üç sınıfın tamamını kullanabilirsiniz. Birden fazla anim-pill bloğu birlikte sorunsuz şekilde çalışır; sayfada göründükleri sırayla canlanırlar.