Beaver Builder eklentimiz, şablonlar ve modüllerle eksiksiz web siteleri oluşturmanıza yardımcı olur. Ancak, sitenizi daha da özelleştirmek istediğiniz zamanlar olabilir. Beaver Builder kısa kodları ile modüller, üstbilgiler, altbilgiler ve kenar çubuklarına fazladan içerik ekleyebilirsiniz.

Bu gönderide, Beaver Builder kısa kodlarını tanıtacağız ve bunları içeriğinize nasıl ekleyeceğinizi göstereceğiz. Ayrıca web sitenizin tasarımını geliştirebilecek bazı örnekleri inceleyeceğiz. Hadi atlayalım!

Beaver Builder Kısa Kodlarına Giriş

Daha önce WordPress web siteleriyle çalıştıysanız, kısa kodlara zaten aşina olabilirsiniz. Bunlar, sitenize işlevsellik katan küçük kod parçacıklarıdır.

Kod düzenleyiciyi kullanarak her şeyi HTML'de yazmak yerine, sayfanıza bir kısa kod ekleyebilirsiniz. Bu, modül, satır veya sütun gibi bir Beaver Builder öğesine karşılık gelen bir bilgi veya kimliğe sahip olacaktır. Gönderiler, sayfalar veya düzen şablonları için kısa kodlar da kullanabilirsiniz.

Bu örnekte, bir HTML modülüne kaydedilmiş bir satır ekliyoruz:

Kaydet'e tıkladığımızda, Beaver Builder kısa kodu otomatik olarak karşılık gelen kayıtlı satıra dönüştürür:

Yazının ilerleyen kısımlarında, editöre nasıl kısa kod ekleyeceğinizi göstereceğiz. Şimdilik, Beaver Builder kısa kodlarını kullanmanın faydalarını tartışalım.

Kısa kodlar, metin tabanlı alanlara görsel öğeler eklemek için kullanışlı olabilir. Örneğin, bir Fiyatlandırma modülü oluşturabilir ve bir ürün fotoğrafı eklemek için bir kısa kod kullanabilirsiniz. Bu şekilde, birleştirilecekleri için iki ayrı modülle (Fiyatlandırma ve Fotoğraf) çalışmanız gerekmeyecek:

Kısa kodlar, WordPress Blok Düzenleyici ile çalışırken içeriğinize Beaver Builder öğeleri eklemenizi de sağlar. Bu, modül, satır veya sütun eklemek için Beaver Builder düzenleyicisine geçmeniz gerekmeyeceği anlamına gelir.

Herhangi bir Beaver Builder modülüne bir metin alanı içeren kısa kodlar ekleyebilirsiniz:

• HTML
• Metin
• başlık
• Çağırmak
• Simge
• Sekmeler

Ancak, çok fazla kısa kod eklemek akıllıca olmayabilir. Bu, sunucunun her kısa kod için CSS ve Javascript dosyalarını istemesi gerektiğinden yükleme sürelerini artırabilir. Sayfa başına en fazla iki tane kullanmanızı öneririz.

5 Faydalı Beaver Builder Kısa Kod Örneği

Beaver Builder kısa kodları için birçok kullanım durumu vardır. Birkaç yararlı örneğe bakalım.

1. Fiyatlandırma Tablosundaki Harekete Geçirici Mesaj Düğmeleri

Bir açılış sayfasında veya satış sayfasında birden çok ürün seçeneğine sahip bir fiyatlandırma tablonuz olduğunu varsayalım. Fiyatları listeleyebilir ve ardından müşterileri sayfanın altındaki bir düğmeyle ödemeye yönlendirebilirsiniz. Ancak, kullanıcıların daha fazla aşağı kaydırması gerekecek, bu da Kullanıcı Deneyimine (UX) potansiyel olarak zarar verebilir.

Bunun yerine, müşterilerin ürünü satın almasını isteyen bir Harekete Geçirici Mesaj (CTA) düğmesi oluşturabilirsiniz. Bu, müşterilerin daha fazla gezinmesine gerek kalmayacak şekilde doğrudan ödeme sayfasına bağlanacaktır. Ardından, bu düğmeyi bir kısa kodla fiyatlandırma tablonuza ekleyebilirsiniz:

Görsel markanıza uyacak şekilde CTA düğmesini özelleştirmeyi unutmayın.

2. Sekmede Bir İletişim Formu

Bir işletme siteniz varsa, Hakkında bölümünüze bazı sekmeler ekleyebilirsiniz. Bu şekilde, kullanıcılar sayfayı aşağı kaydırmak zorunda kalmadan şirketiniz hakkında daha fazla bilgi edinebilirler.

Potansiyel müşterilerin de okumayı bitirir bitirmez hizmetleriniz hakkında sizinle iletişime geçmesini istediğinizi varsayalım. Kullanıcılar zaten sekmeleriniz arasında geçiş yapmak için zaman harcıyor. Onları başka bir yere yönlendirmek, onlara ulaşma kararlarını yeniden düşünmeleri için fazladan birkaç saniye verebilir.

Bunun yerine, bir kısa kod kullanarak sekmelerinizden birine bir iletişim formu ekleyebilirsiniz:

Bu kadar kolay! Artık müşteriler sayfadan ayrılmak zorunda kalmadan sizinle iletişime geçebilir.

3. Metin Kutusundaki Görüntüler

Sayfalarınızı oluştururken, tek bir modüle resim ve metin eklemeyi tercih edebilirsiniz. İki ayrı modül kullanabilmenize rağmen, içerik bölünecek ve resmi metnin ortasına koyamayacaksınız.

Metin ve resimleri birleştirmek, ürünleri çevrimiçi mağazanızda sergilemenin etkili bir yoludur. Örneğin, farklı ürün özelliklerini sergilemek için Fiyatlandırma Kutusu modülünüze resimler ekleyebilirsiniz:

Teorik olarak, aynı düzeni üst üste yığılmış farklı modüllerle bir araya getirebilirsiniz. Ancak, bir görüntü kısa kodu kullanmak tasarım sürecini hızlandırabilir.

4. Blok Düzenleyicideki Herhangi Bir Modül

Blok Düzenleyici ile çalışırken Beaver Builder kısa kodlarını da kullanabilirsiniz. Bu, özellikle bir blog yazısı yazıyorsanız ve makalenize etkileşimli öğeler eklemek istiyorsanız kullanışlı olabilir.

Bir Beaver Builder modülünü Blok Düzenleyiciden çıkmadan sayfaya kolayca bırakabilirsiniz. Basitçe bir Kısa Kod bloğu ekleyin ve kodunuzu içine yapıştırın:

Gönderiyi yayınladığınızda, kısa kod içeriği ön uçta görüntüler:

Örneğin, bir İletişim Formu modülü ekleyebilirsiniz. Ayrıca, müşterileri mağazanıza yönlendiren bir Harekete Geçirici Mesaj veya mağaza konumunuzun yerleşik bir haritasını da ekleyebilirsiniz.

5. Tarih (Yalnızca Beaver Builder Teması)

Beaver Builder Temamız özel bir Tarih kısa koduyla birlikte gelir. Bu, üstbilgiler, altbilgiler ve kenar çubukları dahil olmak üzere sayfanızın herhangi bir bölümünde geçerli tarihi görüntüler:

Bir haber sitesi işletiyorsanız bu kısa kod kullanışlı olabilir. Aşağıdaki kısa kodlardan herhangi birini kullanarak tarihi ekleyebilirsiniz:

Bu kısa kodu, altbilgideki telif hakkı mesajınızın yanında da kullanmak isteyebilirsiniz. Bu şekilde, her zaman güncel olduğundan emin olabilirsiniz.

Beaver Builder ile Kısa Kodlar Nasıl Eklenir (2 Adımda)

Beaver Builder kısa kodlarının tasarım sürecinizi hızlandırıp basitleştirebileceği birkaç senaryoyu ele aldık. Şimdi bunları sitenize nasıl ekleyeceğinize bakalım:

Adım 1: Kısa Kodunuzu Oluşturun

Kısa kodlar web sitenizde kolayca bulunmaz. Kısa kod olarak eklemeden önce Beaver Builder öğelerini kaydetmeniz gerekir. Bu unsurlar şunları içerebilir:

• Modüller
• satırlar
• Sütunlar
• şablonlar

Örneğin, özel bir İletişim Formu modülü tasarlamak istediğinizi varsayalım. Bunu Beaver Builder > Saved Modules > Add New'e giderek yapabilirsiniz:

Daha sonra modülünüzü adlandırmanız ve türünü seçmeniz istenecektir:

Kayıtlı Modül Ekle'ye tıklayın. Sonraki sayfada, düzenleyiciye erişmek için Beaver Builder'ı Başlat'ı seçin. Burada, iletişim formunu beğeninize göre özelleştirebilirsiniz:

Hazır olduğunuzda, modülünüzü yayınladığınızdan emin olun. Şimdi Kayıtlı Modüller sayfanızda görünecek. Beaver Builder'ın en son sürümünü kullanıyorsanız, otomatik olarak oluşturulan kısa kodları görebileceksiniz:

ShortCode sütununu göremiyorsanız, kodu manuel olarak oluşturmanız gerekir. Bunu yapmak için modülün slug'una ihtiyacınız olacak.

Modülünüzün altındaki Düzenle düğmesine tıklarsanız, onun bilgisini görebilmeniz gerekir. Göremiyorsanız, Ekran Seçenekleri menüsünü açın ve Slug öğesinin yanındaki kutuyu işaretleyin:

Artık bu modül için bir kısa kod oluşturmak için aşağıdaki kodu kullanabilirsiniz:

 [fl_builder_insert_layout slug="my-post-slug"]

“post-slug” ifadesini Beaver Builder modülünüzün bilgisiyle değiştirmeyi unutmayın. Örneğimizde şöyle görünecek:

 [fl_builder_insert_layout slug="contact-form"]

İşte bu – artık Beaver Builder modülleri için nasıl kısa kodlar oluşturacağınızı biliyorsunuz.

2. Adım: Kısa Kodu Sayfanıza Ekleyin

Son adım, kısa kodu sayfanıza eklemektir. Çoğu durumda, bu işlem, snippet'in bir modülün Metin alanına yapıştırılmasını içerir.

İşte daha önceki Fiyatlandırma Tablomuz örneği. Gördüğünüz gibi, Özellik 5 metin kutusuna CTA düğmesinin kısa kodunu ekledik:

Beaver Builder bir ön uç düzenleyici kullandığından, kayıtlı modülünüzü hemen görebileceksiniz. Bazı durumlarda (bir HTML modülü kullanırken olduğu gibi), kısa kod görsel öğeye dönüşmeden önce değişikliklerinizi kaydetmeniz gerekebilir.

Çözüm

Beaver Builder kısa kodları, sayfalarınızın farklı bölümlerine hızlı bir şekilde kaydedilmiş modüller, satırlar, sütunlar veya düzenler eklemenizi sağlar. Tasarım sürecini hızlandırmak ve güzel WordPress sayfaları oluşturmak için bunları kullanabilirsiniz.

Özetlemek gerekirse, aşağıdaki basit adımları izleyerek Beaver Builder kısa kodlarını kullanabilirsiniz:

1. Bir öğeyi (modül, satır, sütun veya düzen) kaydedin ve kısa kodunu veya bilgisini arayın.
2. Kısa kodu, bir Beaver Builder modülü içindeki bir metin alanına veya Blok Düzenleyici'deki Kısa Kod bloğuna ekleyin.

Siteniz için çarpıcı sayfalar oluşturmaya hazır mısınız? Beaver Builder'ın kullanıcı dostu özelliklerinin tam listesine göz atın!

İLGİLİ SORULAR

Beaver Builder Kısa Kodlar Kullanıyor mu?

Beaver Builder, modüller, satırlar, sütunlar ve şablonlar gibi kayıtlı öğeler için kısa kodlar sağlar. Daha sonra bu parçacıkları metin tabanlı alanlara ve modüllere ekleyebilirsiniz. Bu, hem Beaver Builder ön uç düzenleyicisinde hem de WordPress Blok Düzenleyicisinde mümkündür. Ek olarak, kısa kodlar, Beaver Builder ile birlikte diğer favori eklentilerinizi kullanmanızı sağlar.

Kısa Kodları Kullanmak için Beaver Builder Temasına ihtiyacınız var mı?

Kısa kodları kullanmak için resmi Beaver Builder temasına ihtiyacınız yok. Sayfa oluşturucu eklentisini kullanarak çoğu temaya sahip sayfalar oluşturabilir ve kısa kodlar ekleyebilirsiniz. Ancak, Date kısa kodu gibi bazı kısa kodlar yalnızca Beaver Builder temasıyla çalışır.

Beaver Builder ve Beaver Themer Arasındaki Fark Nedir?

Beaver Builder, modüller ve şablonlar kullanarak sayfaların ve gönderilerin içerik alanını düzenlemenizi sağlayan bir sayfa oluşturma aracıdır. Buna karşılık, Beaver Themer, sitenizin üstbilgiler, altbilgiler ve kenar çubukları gibi genellikle temanız tarafından kontrol edilen alanlarını düzenlemenize izin veren bir eklenti eklentisidir. Bu içerik, tema şablonlarını, şablon parçalarını ve gönderi ızgaralarını içerir.