Beaver Builder'da nasıl daha hızlı düzenler inşa edeceğinizi mi merak ediyorsunuz? Bir süredir WordPress ile inşa ediyorsanız, muhtemelen sıralar ve sütunlar kullanarak karmaşık düzenlerin nasıl yapılandırılacağını bulmak için bolca zaman harcadınız. İşe yaradı - ama her zaman en esnek veya verimli yaklaşım olmadı.

Bu yüzden Beaver Builder 2.9 benim için böyle bir oyun değiştirici oldu. Bu güncelleme, sayfaları nasıl oluşturduğumu tamamen dönüştüren iki önemli iyileştirme getirdi ve bence iş akışınıza getirdiği esnekliği seveceksiniz:

• Kutu modülü ve döngü modülü gibi konteyner modülleri artık üst düzey düzen öğeleri olarak kullanılabilir-bu, ihtiyaç duyulmadıklarında sıraları ve sütunları tamamen atlayabileceğiniz anlamına gelir.
• Temel Modüller Artık Temizleyici HTML'yi Varsayılan olarak Çıktır, Ekstra Sarma <div> s'yi kaldırır ve sayfalarınızın daha hızlı yüklenmesini ve arama motorlarında potansiyel olarak daha iyi sıralanmasını sağlar.

Bunlar sadece güzel özellikler değil, WordPress sitelerini oluşturmanın daha sezgisel, performans odaklı bir yoluna doğru bir kaymayı temsil ediyorlar. İş akışınızı, sayfa hızınızı ve kod kalitenizi geliştirmek istiyorsanız, bu güncelleme kesinlikle keşfetmeye değer.

Konteynerler merkez aşamalı

Önce en büyük değişiklik hakkında konuşalım. Beaver Builder'ın önceki sürümlerinde, satır ve sütun sistemi, düzenleri yapılandırmak için tek seçeneğinizdi. Sayfanızdaki her öğe bu çerçevenin içinde yaşamak zorunda kaldı.

Bu ortak senaryoyu hayal edin: Başlık, biraz metin ve bir düğme içeren basit bir harekete geçirici mesaj bölümü oluşturmak istersiniz. Eski yaklaşımda, bir satır oluşturur, o satıra bir sütun eklersiniz, ardından modüllerinizi sütunun içine eklersiniz. İşe yaradı, ancak gerçekten ihtiyacınız olmayan yapı katmanları ekledi.

İşte böyle görünüyordu:

Sıra
└yo sütunu
└yo kutu modülü
└yo Başlık Modülü
└yo metin modülü
└yo Düğme Modülü

Şimdi Beaver Builder 2.9'da bu ekstra katmanları tamamen ortadan kaldırabilirsiniz. Kutu modülü gibi konteyner modülleri artık sayfa yapınızın en üst seviyesinde oturan birincil düzen öğeleriniz olarak hizmet edebilir.

Yeni, aerodinamik yaklaşım şuna benziyor:

Kutu modülü
└yo Başlık Modülü
└yo metin modülü
└yo Düğme Modülü

Bu sadece arayüzde daha az tıklama ile ilgili değil (bu da güzel olsa da). Tasarım hakkında gerçekten nasıl düşündüğünüze uygun düzenler inşa etmekle ilgilidir. Eğer benim gibiyseniz, bir içeriğin bir bölümü öngördüğünüzde, kapları ve içine girenleri düşünüyorsunuz - etrafına sarılan soyut satır ve sütun ızgarası hakkında değil.

Bu yaklaşım neden mantıklı

Bu değişiklik, özellikle Flexbox ve CSS Grid ile modern CSS'nin nasıl çalıştığı ile mükemmel bir şekilde uyumludur. Bu teknolojiler, karmaşık iç içe yapılara ihtiyaç duymadan sofistike düzenler yaratmanıza izin verir ve şimdi Beaver Builder'ın arayüzü bu gerçeklikle eşleşir.

Faydalar basitliğin ötesine geçer. Konteyner modüllerini birincil düzen öğeleriniz olarak kullandığınızda:

• Aralık, hizalama ve duyarlı davranış üzerinde daha doğrudan kontrol . Birden fazla yuvalama seviyesinde ayarları yönetmek yerine, her şeyi konteyner seviyesinde işleyebilirsiniz.
• Daha hızlı tasarım yinelemeleri, çünkü yapı katmanlarında gezinmek ve gerçek tasarıma odaklanmak için daha fazla zaman harcıyorsunuz.
• Daha az HTML işaretlemesi tarayıcı tarafından oluşturulduğundan ve işlendiğinden daha iyi performans .
• Daha sonra geri dönmeniz ve daha sonra düzenleri değiştirmeniz gerektiğinde daha kolay bakım - bu siz veya ekibinizdeki başka biri olsun.

Kutu Modülü: Düzen Powerhouse'unuz

Kutu modülü oyun değiştiren bir yükseltme aldı. Bir zamanlar basit bir yardımcı aracı olan şey, Beaver Builder'da esnek, modern düzenler oluşturmak için temel temelde gelişti. Bu küçük bir güncelleme değil-kutu modülünü sayfa oluşturma sürecinizin merkezine konumlandıran tam bir yeniden tasarım:

Yeni bir üst düzey düzen öğesi olarak işlev görme yeteneği ile kutu modülü, arka plan renklerinden ve görüntülerden dolgu ve kenar boşluklarına kadar her şeyi yöneterek-ekstra bir üst kabına ihtiyaç duymadan geleneksel satır sarmalayıcıların yerini alabilir.

Ayrıca, kutu modülü FlexBox özelliklerini tamamen destekler ve düzeninizdeki çocuk öğelerinin hizalanması, aralığı ve dağıtımı üzerinde kesin kontrol sağlar. İster metin, görüntüler, düğmeler, formlar veya başka bir içerik modülünü yuvalamak isteyin, kutu modülü sorunsuz bir şekilde işler.

Bu, yalnızca kutu modülünü ve gerçekten ihtiyacınız olan içerik modüllerini kullanarak karmaşık, duyarlı düzenler oluşturabileceğiniz anlamına gelir. Artık arayüz gerektirdiğinden yapısal öğeler yaratmayacak.

Kaputun altında daha temiz html

Beaver Builder 2.9'da düzenleri nasıl yapılandırdığınızı yeniden düşünürken, inşaatçının kendisi perde arkasında biraz temizlik yapıyor. Bu sürümdeki ikinci büyük güncelleme, temel modüllerden gereksiz ambalaj <div> öğelerini kaldırır - bu da önemli ölçüde daha yalın HTML çıkışına neden olur.

Daha önceki sürümlerde, başlıklar, resimler ve düğmeler gibi modüller, gerçek içeriğin etrafında ekstra <div> s'dir. Aşağıdaki örnekte gösterildiği gibi işaretlemeye karmaşıklık ve şişkinlik ekledi:

Beaver Builder 2.9'dan önce:

 <div class="fl-module fl-module-heading"> <div class="fl-module-content"> <h2>Welcome to Our Site</h2> </div> </div>

Beaver Builder 2.9'dan sonra:

 <h2>Welcome to Our Site</h2>

Bu değişiklik sadece daha temiz koddan daha fazlasını sunar-gerçek dünyadaki performansı artırır:

• Basitleştirilmiş Stil: Daha az sargı sınıfı ile CSS'yi daha doğrudan yazabilirsiniz - daha fazla iç içe seçicilerle savaşmak.
• Daha hızlı yükleme süreleri: Daha az öğe, tarayıcının işlemesi için daha az anlamına gelir.
• Daha iyi SEO: Daha temiz, daha semantik HTML, arama motorlarının içeriğinizi anlamasına yardımcı olur.

Özel temalar veya müşteri siteleri üzerinde çalışan bir geliştirici veya ajanssanız, bu güncellemenin getirdiği netliği ve verimliliği takdir edersiniz. Değişiklik yalnızca 2.9'dan sonra eklenen modüller için geçerli olduğundan (veya eski ayarını etkinleştirmedikçe), mevcut düzenleriniz güvenli ve uyumlu kalır.

Bir şeyleri kırmadan esneklik

Şimdi, “Bekle - özel CSS'm bu sargı sınıflarına güveniyor!” -Merak etme. Beaver Builder 2.9 bunu göz önünde bulundurarak tasarlanmıştır. Eski stil ile uyumluluğu korumak için, tek bir ayarla Wrapper <div> s'yi yeniden etkinleştirebilirsiniz:

Eski Sarma İşaretlemesi Nasıl Geri Yüklenir:

1. WordPress Gösterge Tablonuza Git
2. Ayarlar> Beaver Builder> Gelişmiş'e gidin
3. "Force Modül Sarma Divs" i etkinleştirin

Ancak, kesinlikle gerekli olmadıkça bu özelliği kapatmanızı öneririz. Temizleyici işaretlemesi sadece performansı iyileştirmekle kalmaz, aynı zamanda modern web geliştirme en iyi uygulamalarını da yansıtır. Eski CSS'ye güveniyorsanız, bu basitlik ve uzun vadeli sürdürülebilirlik için yeniden düzenlemek için harika bir fırsat olabilir.

Geriye dönük uyumluluk yerleşik

Beaver Builder 2.9'un en iyi bölümlerinden biri? Mevcut sitelerinizi kırma riski olmadan tüm bu modern iyileştirmeleri elde edersiniz.

İşte böyle çalışıyor:

• Mevcut modüller (2.9'a güncellemeden önce yerleştirilenler) orijinal sargı yapılarıyla oluşturmaya devam edecektir.
• Güncellemeden sonra eklenen yeni modüller, varsayılan olarak yeni temizleyici işaretlemesini otomatik olarak kullanacaktır.

Bu ikili oluşturma stratejisi size sorunsuz bir geçiş yolu sağlar: mevcut düzenleriniz bozulmadan kalırken, daha hızlı, daha hafif yapıdan faydalandığınız yeni içerik.

Bu değişiklikler web sitenizi nasıl geliştirir?

Beaver Builder 2.9, web sitelerinizin daha hızlı yüklenmesine, daha yükseğe çıkmasına ve daha yumuşak bir kullanıcı deneyimi sunmasına yardımcı olan güçlü performans ve iş akışı iyileştirmeleri getirdi.

Daha hızlı, daha yalın sayfalar
Azaltılmış ambalaj <div> öğeleri ve konteyner modülleri için üst düzey öğeler olarak destek ile düzenleriniz daha temiz ve daha hafiftir-daha hızlı yük sürelerine ve daha iyi SEO'ya geçer.

Daha akıllı iniş sayfaları
Gereksiz sıraların ve sütunların dağınıklığını atlayın. Artık kahraman bölümleri ve CTA'lar için kutu modülü gibi sadece konteyner modüllerini kullanarak esnek, yüksek dönüştürücü iniş sayfaları oluşturabilirsiniz.

Temiz başlıklar ve altbilgiler
Kutu modülü ayrıca üstbilgiler ve altbilgilerde parlar, daha az çaba ve daha fazla kontrol ile yapılandırılmış, duyarlı düzenler oluşturmanıza yardımcı olur.

Geliştirici dostu işaretleme
Aşırı yuvalamaya veda edin. Aerodinamik HTML çıkışı, CSS hedeflemesini basitleştirir ve özgüllük sorunlarını azaltır, bu da özel gelişimi daha kolay ve daha fazla korunabilir hale getirir.

Müşteri kazanan performans
Ajanslar için faydalar açıktır: daha hızlı siteler, daha temiz kod ve daha modern bir yapı süreci. Müşterileriniz “Dev” konuşmasa bile, performans ve cila farkını fark edecekler.

Düzenler oluşturmanın daha akıllı bir yolu

Beaver Builder 2.9 sadece başka bir özellik güncellemesi değil, düzen binasına nasıl yaklaştığımız konusunda düşünceli bir adım. Konteyner modüllerini esnek düzen temelleri olarak tanıtarak ve HTML çıkışını düzene sokarak, bu sürüm Beaver Builder'ı modern tasarım ve geliştirme uygulamalarına uygun olarak getiriyor.

Sonuç? Zaman kazandıran ve daha iyi performans gösteren sayfalar sunan daha hızlı, daha temiz, daha sezgisel bir iş akışı. İster basit bir broşür sitesi hazırlıyor olun, ister karmaşık bir müşteri projesini yönetiyor olun, bu geliştirmeler daha kolay ve güvenle oluşturmanıza yardımcı olur.

Düzenlerinizi seviyelendirmeye hazır mısınız?
Beaver Builder 2.9'a güncelleme ve bugün daha akıllı, yalın ve daha gelecekteki daha hazır siteler inşa etmeye başlayın.