Divi 5'teki özel bölümlere karşı iç içe satırlar (ve neden bunlardan yararlandığımız)

Divi uzun zamandır güzel web siteleri inşa etmek için bir güç merkezi olmuştur. Özel bölümler, normal bölümlerin işleyemediği karmaşık, iç içe sütun yapılarını mümkün kılarak Divi'nin düzen yeteneklerini yıllarca genişletti. Ancak bu yaklaşım, Divi'nin eski kısa kod çerçevesine derinlemesine bağlı olan karmaşıklığı ve sınırlamaları ile geldi.

Şimdi, Divi 5 iç içe sıralarla birlikte geliyor - sıralar, normal bölümler içinde her yerde sütunların içine sıralar yerleştirmenizi sağlayan yerel bir özellik. Bu özellik, önceki kısıtlamaları kaldırır ve düzgün, esnek bir bölüm türü altında düzen binasını birleştirir. İç içe sıralarla, özel bölümlerin izin verdiği, ancak daha sezgisel olarak aynı karmaşık, asimetrik düzenleri oluşturabilirsiniz.

Bu yazıda, özel bölümlerden uzaklaşmayı ve iç içe geçmiş sıralar ve Divi 5'in yeniden tasarlanan düzen sisteminin karmaşık düzenler oluşturmak için nasıl daha iyi bir yol sağladığını tartışacağız. Divi'nin geleceği burada ve daha basit, daha esnek ve sınırsız yaratıcılık için inşa edilmiş.

YouTube kanalımıza abone olun

Divi 5 bugün yeni web sitelerinde kullanılmaya hazır.

Özel bölümlerin retrospektifi

Normal bölümlerin sınırlamalarını ele almak için Divi'de (2014) özel bölümler tanıtıldı. Kenar çubukları ve asimetrik düzenler dahil olmak üzere daha karmaşık sütun yapılarına, normal bölümlerle imkansız olan daha karmaşık sütun yapılarına izin verdiler.

Divi'nin kısay kodu tabanlı çerçevesi, yuvalama derinliğini kısıtlayarak ve performans darboğazlarını getirerek temelde sınırlı düzen karmaşıklığı. Karmaşık iç içe yerleşimlerin inşa edilmesi zordu ve sorunları ortaya koymaya eğilimli, bu yüzden özel bölümlere kadar mümkün değildi.

Bununla birlikte, özel bölümler kendi işleri olduğu için ek karmaşıklık getirdiler (bu bölümler için ekstra sütun geçişine ve CSS seçeneklerine dikkat edin). Bunlar kötü değildi, ama kesinlikle normal bölümlerden, satırlardan ve sütunlardan farklı davrandılar .

Özel bölümler, gerekli olan ancak builder seçeneklerinin geri kalanı ile tutarsız olan ekstra dolgu ve CSS sınıfı/kimlik alanları ekledi.

Özel bölümler, kısa kod kurallarını bükerek, normal bölümlerde mümkün olmayanı oluşturarak sahte olmayan sütun yapılarını etkinleştirdi.

Normal bölümler onlardan ihtiyacınız olanı yapacak kadar güçlü olsaydı güzel olmaz mıydı?

İç içe sıralar ve sayfalar oluşturmanın daha iyi bir yolu

Divi 5 ile, iç içe satırlar resmi olarak satırların (ve sütunlarını) diğer satırların ve sütunların içine yerleştirmeye izin verir. Bu, birbirinin içinde sınırsız sütun ve satırlarla derin iç içe yerleşim düzenleri oluşturabileceğiniz anlamına gelir. Özel bölümlere olan ihtiyacı ortadan kaldırır.

Bu yeni özellik aynı zamanda sütunlara boyutlandırma seçenekleri ekledi, yani tüm konteyner öğelerini boyutlandırmanın ve şekillendirmenin tutarlı bir yolu var.

Bir özel bölümü iç içe satırlarla nasıl kolayca yeniden oluşturulur

Scooter kiralama düzeni paketi (özellikle ana sayfanın kahraman bölümü), anahtar öğeleri konumlandırmak için bir uzmanlık bölümü kullanır. Bununla birlikte, benzersiz ayarlarıyla bir uzmanlık bölümü kullanmak yerine, benzer bir etki elde etmek için iç içe satırları kullanacağız.

Not: Divi 5'in şu anda özel bölümleri vardır, ancak sonunda kullanımdan kaldırılacaklar (ancak şu anda var oldukları sayfalarda çalışacak ve yinelenebilirler).

Sayfanıza standart bir bölüm ekleyin ve arka plan rengini siyah olarak ayarlayın (düzeni sayfanıza aktarırsanız, üst merkez konumu ve gerçek boyutta arka plan görüntüsü olarak kullanmak için nokta daire görüntüsüne sahipsiniz).

Bölümün genişliğini ve maksimum genişliğini%100 olarak ayarlayın.

Bölümün içindeki satırın iki sütunlu bir yapıya ve 3/5 + 2/5 bölünmesine sahip olduğundan emin olun. Ayrıca, satırın genişliğini ve maksimum genişliğini%100 olarak ayarlayın.

Diğer yeni özellikleri kullanmak istiyorsanız, içeride iki modül grubu olan tek bir sütun ekleyin. Divi'nin varsayılan sütun yapılarına güvenmek yerine gruplar için boyutlandırma seçenekleri kullanacaksınız.

Sol sütun daha karmaşık tarafı (modüller açısından) barındıracak ve sağ sütun büyük özellikli görüntüyü barındıracaktır.

Düzeni anlamak için tüm modüllerimizi ekleyeceğiz. Buna önce bir başlık veya metin modülü, daha sonra iç içe bir satır (eşit genişliğe sahip iki sütun), sol sütundaki bir görüntü modülü ve sağ sütundaki bir metin modülü ve bir düğme modülü içerir. Üst satıra geri dönün, sağ sütunda bir görüntü modülü ekleyin.

Yalnızca, iç içe satırları kullanarak uzmanlık bölümünü nasıl yeniden oluşturabileceğimizi göstermek için masaüstündeki boşluğu/boyutlandırmayı çoğaltacağız. Devam edin ve içeriği ve resimleri ekleyin (yine, düzeni sitenizdeki bir sayfaya aktarırken görüntüler kullanılabilir). Uygun gördüğünüz gibi metin ve renk stillerini eşleşecek şekilde de değiştirebilirsiniz. Sağ sütundaki ana görüntü arka plan görüntüsü ve daha sonra alacağımız aksan görüntüsü ile görüntü modülü uygulanmalıdır.

Satırın sol sütunu doğrudan bölümün altındaki soldan sol taraftan uzaya ~% 10 sol dolgu ekleyin (bu şekilde yapmak, her bir kırılma noktası için bir şeyler yeniden boyutlandırmanız gerektiği anlamına gelir).

Şimdi, sağ sütunun ayarlarını doğrudan üst satırın altına açın. Bir sütun arka plan görüntüsü kullanın.

Bu sütunun içindeki görüntü modülü, bir filtre> karışım> kaplama ayarlanmalıdır. Gelişmiş> Konumunda, görüntü kesinlikle konumlandırılır ve sol alt kısıma sabitlenir.

Ve bu neredeyse uzmanlık bölümünün (masaüstünde) rekreasyonu için. Önceden ayarlanmış sütun yapısını (3/5 + 2/5 sütun) kullandığımızdan, Divi'nin ele alınması gereken çeşitli kesme noktalarında bazı varsayılan boyutlandırma ve konumlandırma vardır. Bu bölümün sol ve sağ tarafları için içeriği tutmak için tek bir ana sütun ancak modül grupları kullanarak bundan kaçınabilirsiniz.

Ancak en azından bu noktada, satırları yuva yapmanın ve özel bölümleri yeniden oluşturmanın mümkün olduğunu biliyorsunuz.

Yeni bir geleceğe adım atmak

Divi 5 bir beta sürümüne yakın, ancak Divi'nin tasarım sistemini elden geçirmek için zaten önemli çabalar gösterdik.

• FlexBox Düzenleri (çok yakında) : Sıralar içindeki alanın hizalanması ve dağıtımında daha fazla kontrol sunacaktır.
• İç içe sıralar : Yerel şamandıra tabanlı satır sistemi ile biraz karmaşıklık yaratmak için satır ve sütun yapılarının sonsuz yuvalama.
• Gelişmiş Kolon Boyutlandırma : Sütun genişlikleri ve yükseklikler için eksik boyutlandırma kontrolleri eklendi.
• Modül Grupları : Daha kolay yönetim ve stil için modüllerin gruplandırılmasını sağlar.
• Tasarım Değişkenleri : Tüm öğeler ve alanlarda küresel değişkenleri (renkler, yazı tipleri, aralık, görüntü, metin) tanımlayın ve yeniden kullanın.
• HSL ile göreceli renkler (yakında geliyor) : Ton, doygunluk ve hafifliğe dayalı dinamik, marka tutarlı renk kontrolü.

Bu özelliklerin tümü Divi'nin yeniden icatının bir parçasıdır ve geri dönüşüne çok önemlidir. Son iki yıldır inşa ettiğimiz vakfın buna değdiğini kanıtlıyoruz. D4'te mümkün olmayan özellikler oluşturabiliriz ve her birini birkaç hafta içinde yapıyoruz.

Divi 5 bugün yeni web sitelerinde kullanılmaya hazır.

Divi 5'i daha fazla indirin Divi 5