İçindekiler
- Giriş
- HubSpot'un Tasarım Yöneticisine Erişim
- Şablonlarınızı Ayarlama
- Modüller Ekleme
- Izgara Düzeninizden En İyi Şekilde Yararlanma
- Ön Uç Şablon Modül Düzenleyicisinde Seçenekler Sunma
- Kullanıcı Tanımlı Arka Plan Görsellerini Ayarlama
- Sonuç
- SSS'ler
Giriş
Dijital pazarlamanın hızla evrilen peyzajında, güçlü ve özelleştirilebilir bir içerik yönetim sistemi (CMS), önemli bir avantaj sağlayabilir. HubSpot'un İçerik Optimizasyon Sistemi (COS) olarak adlandırılan ve kendi yeteneklerini kanıtlayan bir platform, mobil uyumlu web siteleri, bloglar, açılış sayfaları ve e-postalar oluşturmanıza olanak tanır ve HubSpot'un gelişmiş einbound pazarlama araçları ile tam entegre çalışır.
Bu blog yazısında, HubSpot'un COS içinde özel şablonlar oluşturmanın temel yönlerini keşfedeceğiz. Şablon düzeninizi oluşturma, dinamik modüller entegre etme ve belirli içerik deneyimleri sunmak için sembolleri ve koşullu mantığı kullanma gibi gelişmiş özelliklerle etkileşime geçme konularına değineceğiz.
Kılavuzun sonunda, HubSpot'un araçlarını kullanarak, işinizin özel ihtiyaçlarına uygun, hem işlevsel hem de uyarlanabilir özel CMS şablonları geliştirmenin nasıl yapıldığı hakkında kapsamlı bir anlayışa sahip olacaksınız.
HubSpot'un Tasarım Yöneticisine Erişim
Özel şablonlar oluşturmaya başlamak için öncelikle HubSpot'un Tasarım Yöneticisine erişim sağlamamız gerekiyor. Bu, HubSpot hesabınıza giriş yaparak üst gezinme çubuğunda yer alan İçerik > Tasarım Yöneticisi sayfasına giderek yapılabilir.
Şablonlarınızı Ayarlama
İlk Adımlar
- Yeni Bir Dosya Oluşturma: Tasarım Yöneticisinin içinde, "Yeni Dosya" seçerek yeni bir dosya oluşturun. Bir pencere açılır ve şablon türünü seçmeniz istenir.
- Kod Düzenleyici Seçeneğini Seçme: Özel şablonlar oluşturmak için, Kod Düzenleyici altında HTML & HubL seçeneğini seçin. Bu, başlangıç için temel bir işaretleme oluşturacaktır.
Şablon Oluşturucu vs. Sıfırdan Kodlama
HubSpot, temel bir düzeni hızlı bir şekilde oluşturmak için bir Şablon Oluşturucusu sunar. İsterseniz, Şablon Oluşturucusunu seçtiğiniz şablondan yeni bir dosyaya klonlayabilirsiniz. Bu, ihtiyaç duyulan HubL koduyla bir HTML dosyası oluşturur. Şablon Oluşturucusunu kullanmak zaman kazandırabilir, ancak dikkatli yönetim olmadan karmaşık hale gelebilir. Alternatif olarak, gerekli modül etiketlerini ve standart başlık ve dipnot sembollerini içeren sıfırdan kodlayabilirsiniz.
Modüller Ekleme
Dinamik modüller, çok yönlü şablonlar oluşturmanın anahtarıdır. HubSpot'ta, standart modüller arasından seçim yapabilir veya sıfırdan özelleştirebilirsiniz. Standart modüle özgü sözdizimi kullanıcı dostudur ve çeşitli içerik türlerini destekler.
İki Önemli Modül Parametresi
-
Export_to_template_context=True:Bu parametre, modülden şablona veri aktarmanıza olanak sağlar. Özellikle daha özel özelliklere sahip şablonlar oluştururken faydalıdır.
-
No_wrapper=True: HubSpot, modül içeriğini varsayılan olarak div veya span etiketleri içine alır. Şablon gereksinimlerinize bağlı olarak bunu devre dışı bırakmak için no_wrapper=True parametresini ekleyebilirsiniz.
Izgara Düzeninizden En İyi Şekilde Yararlanma
HubSpot, Bootstrap 2'ye dayanan 12 sütunlu bir ızgara sistemini kullanır (ancak Bootstrap 4 en son sürümdür). Bu çerçeveyi takip edebilir veya daha karmaşık tasarımlar için özel bir ızgara düzeni oluşturabilirsiniz.
Ön Uç Şablon Modül Düzenleyicisinde Seçenekler Sunma
Kod Düzenleyici'nin kullanılması, şablon tasarımı ve işlevselliği üzerinde daha fazla kontrol sağlar. HTML konusunda deneyimi olmayan kullanıcılar, modüller ve koşullu mantık kullanarak doğrudan ön uç şablon düzenleyicisinde ayarlamalar yapabilir.
Choice Modülünü Ayarlama
Choice modülü, son kullanıcılar için önceden belirlenmiş değerler listesi sağlar. Modül etiketi genellikle şuna benzer:
{% module "optional_content_block" choice_value="No,Yes" export_to_template_context=True %}
Şablon modül düzenleyicisinde, bu seçenekler kullanıcıların isteğe bağlı içerik için "Hayır" veya "Evet" seçmelerine izin veren bir açılır liste olarak görüntülenir.
Koşullu Mantık Entegrasyonu
HubSpot'un koşullu mantık etiketleri, modül seçimlerine dayalı olarak dinamik içerik sağlar. Örneğin:
{% if optional_content_block == "Yes" %}
<!-- Your content here -->
{% endif %}
Bu kod, içerik bloğunun yalnızca "Evet" seçildiğinde görüntülenmesini sağlar ve kullanıcıların ne gördüğü hakkında esneklik ve kontrol sağlar.
Kullanıcı Tanımlı Arka Plan Görsellerini Ayarlama
Dinamik arka plan görselleri eklemek şablonlarınızı önemli ölçüde geliştirebilir. Bu süreçte, bir görüntü modülü dahil etmeniz ve uygun sembolle bir CSS ayarlamanız gerekmektedir.
Adımlar:
- Bir Görüntü Modülü Ekleyin: Şablonda daha üst bir konumlandırma önerilir.
- CSS'yi Yapılandırın: Özel arka plan görselleri için CSS'nize görüntü modülünün sembolünü yerleştirin.
Sonuç
HubSpot'un COS içinde özel CMS şablonları oluşturmak etkileyici esneklik ve işlevsellik sağlar. İlk şablonları ayarlama, dinamik modüller entegrasyonu ve koşullu mantık ve özel arka plan görselleri gibi gelişmiş özellikleri kullanma becerisi sayesinde, markanızın ihtiyaçlarına uygun, kullanıcı dostu şablonlar oluşturabilirsiniz.
Şablonlarla uygulamalar oluşturmak, doğru araçları ve yaklaşımları kullanarak karmaşık bir süreç olmak zorunda değildir. Belirtilen adımları izleyerek ve daha fazla ileri düzey özellikleri keşfederek HubSpot'un İçerik Optimizasyon Sistemini tam olarak kullanabilirsiniz.
SSS'ler
S: HubSpot'un Tasarım Yöneticisinde sıfırdan özel modüller oluşturabilir miyim?
A: Evet, HubSpot'un Kod Düzenleyicisi'ni kullanarak özel modüller oluşturabilirsiniz. Platform, modül türlerini tanımlamanıza ve bunları şablolarınıza sorunsuz bir şekilde entegre etmenize izin verir.
S: 'export_to_template_context=True' parametresini kullanmanın faydası nedir?
A: Bu parametre, modül verilerini şablona aktarmanıza olanak tanır ve şablonunuzun işlevselliği üzerinde daha fazla esneklik ve kontrol sağlar.
S: HubSpot'un Şablon Oluşturucusunu kullanmak için kodlama bilgisi gerekiyor mu?
A: Kodlama bilgisi daha ileri düzey özelleştirmeler için kullanılabilir, ancak HubSpot'un Şablon Oluşturucusu, kapsamlı bir kodlama becerisine ihtiyaç olmaksızın temel düzenler oluşturmak için kullanıcı dostu bir arayüz sunar.
S: HubSpot'un ızgara sistemi nasıl çalışır?
A: HubSpot, Bootstrap 2'ye dayanan 12 sütunlu bir ızgara sistemini kullanır. İhtiyaçlarınıza göre bu çerçeveyi takip edebilir veya özel bir ızgara düzeni oluşturabilirsiniz.
S: HubSpot'ta modül içeriğinin varsayılan sarmalama işlevini devre dışı bırakabilir miyim?
A: Evet, modül sözdiziminizde 'no_wrapper=True' parametresini ekleyerek HubSpot'un içeriği div veya span etiketleriyle sarmalamasını önleyebilirsiniz.
Bu kapsamlı kılavuz, HubSpot ile özel CMS şablonları oluşturmanın uygulanabilir bilgilerini sağlayarak, markanızın ihtiyaçlarına uygun, dinamik ve işlevsel web varlıkları oluştururken donanımlı olmanızı hedeflemektedir. İyi tasarımlar!
