Divi 2.4'ü Keşfetmek: Satırlar Neden Artık Divi'nin En Çok Yönlü Parçasıdır ve Bunları Nasıl Etkili Bir Şekilde Kullanabilirsiniz?

Geçen hafta, Divi tarihindeki en büyük yükseltme ve en popüler WordPress temamız için dev bir adım olan Divi 2.4'ü tanıttık. Bu güncellemede keşfedilecek o kadar çok harika özellik var ki, hepsini sürüm gönderisinde açıklamak zordu, bu yüzden size nasıl alınacağını öğretmeyi amaçlayan 2 haftalık bir dizi bilgilendirici blog gönderisi yapmaya karar verdik. Divi 2.4'ün tam avantajı ve yeni seçenekleri. Bu dizinin yedinci bölümünde, Divi'nin yeni Satır ve Bölümler seçeneklerini keşfediyoruz ve size Satırların neden her zamankinden daha çok yönlü olduğunu gösteriyorum.

Divi 2.4 Hakkında Her Şeyi Buradan Öğrenin

Yeni Nesil Divi Düzenleri

Divi kullanıcısıysanız, Divi Builder ile oluşturulan düzenlerin üç öğeye bölündüğünü bilirsiniz: Bölümler, Sıralar ve Modüller. Bölümler, sayfadaki büyük içerik bloklarını ayırmak için kullanılan en büyük organizasyon öğenizdir. Her bölümün içine sütun sıraları yerleştirilmiştir ve her sütunun içinde herhangi bir sayıda Modül olabilir. Bunlar sayfanızın yapı taşlarıdır. Modüller içeriktir, ancak Satırlar bu içeriğin nasıl düzenlendiğini kontrol eder. Sütun düzeninin farklı kombinasyonlarını kullanarak çok sayıda düzen oluşturabilirsiniz.

Divi'de hep böyle olmuştur. Ancak Divi 2.4'te, oluşturulabilecek düzenlerin aralığını büyük ölçüde artıran bir dizi yeni Rows seçeneği sunduk. Satırlar ve yeni düzen seçenekleri, dinamik ve benzersiz görünen sayfaların kilidini açmanın anahtarıdır. Bu yazıda Divi 2.4'e eklenen yeni Satır seçeneklerini keşfedecek ve bu yeni seçeneklerin gerçekten harika tasarımlar oluşturmak için birlikte nasıl kullanılabileceğini tartışacağız. Başlayalım!

Yeni Seçeneklere Bir Bakış

Divi'nin önceki sürümlerinde satırların herhangi bir ayarı yoktu. Her satırı benzersiz kılan, yalnızca onun için seçtiğiniz sütun yapısıydı. Divi 2.4, sayfanızdaki herhangi bir satırın sol üst köşesindeki ayarlar simgesine tıklayarak erişebileceğiniz Satır Seçeneklerini sunar.

Farklı kategorilere ayrılmış düzinelerce yeni ayar var:

Yeni Genel Ayarlar

Burada, genel satır yapısını etkileyen genel yerleşim ayarlarını bulacaksınız. Ayarların sık kullanılacağını ve yeni müşteriler tarafından kolayca anlaşılabileceğini düşündüğümüzde Genel Ayarlar sekmesine yerleştirme eğilimindeyiz.

Tam Genişlik Sıraları – Tam genişlikli sıra seçenekleri inanılmaz derecede güçlüdür. Geçmişte, bir öğeyi tarayıcının tüm genişliği boyunca genişletmenin tek yolu Tam Genişlik Satırı kullanmaktı. Bu, daha küçük Tam Genişlik Modülleri koleksiyonumuzla sınırlı olduğunuz anlamına geliyordu. Divi 2.4'te artık durum böyle değil. Artık herhangi bir satır tam genişlikte yapılabilir ve bu yeni tam genişlikli sıraların içinde herhangi bir modül kullanılabilir.

Ayarlanabilir Oluk Genişliği – Bu yeni seçenek, satırınızdaki her sütun arasındaki boşluğu ayarlamanıza olanak tanır. Bu boşluk artırılabilir veya azaltılabilir ve hatta sıfıra indirilebilir (modüllerinizin uçtan uca temas etmesine izin verir). Bu, görüntü modülleri veya arka plan renkleri/görüntüleri olan modüller ile harika çalışır.

Özel Satır Genişlikleri – Bir satırı ekranın tüm genişliğine genişletmenin yanı sıra özel bir genişlik de tanımlayabilirsiniz. Örneğin, görüntülemeye çalıştığınız içeriğe bağlı olarak tek bir satırı çevresindeki satırlardan daha büyük veya daha küçük yapabilirsiniz. Bu, sayfanıza çeşitlilik ekleyerek içeriğiniz için daha iyi bir ritim oluşturmanın harika bir yoludur.

Özel Dolgu – Her satırın üstünde ve altında dolgu vardır. Bu, Divi'nin hiyerarşiyi ve okunabilirliği geliştirmek için öğeleri ayıran doğal yapısının bir parçasıdır. Bu boşluk, gerektiğinde içeriğinize uyacak şekilde ayarlanabilir.

Mobil Dolgu Ayarı – Varsayılan olarak, mobil cihazlara özel Satır dolgusu uygulanmaz. Masaüstünde iyi görünen büyük dolgu değerleri genellikle bir akıllı telefonda harika görünmez, ancak isterseniz bu dolgu değerlerini uygulamayı seçebilirsiniz.

CSS Kimliği – Tüm Divi Modüllerinde olduğu gibi, Satırlar artık bağlantı bağlantıları kullanılarak hedeflenebilen veya Alt Temanızda veya ePanel CSS'nizde biçimlendirilebilen özel CSS Kimlikleri atamanıza izin verir.

CSS Sınıfı – Satırlar, stil sayfanıza özel stil eklemek için kullanılabilecek özel CSS Sınıflarına da sahip olabilir.

Tüm Yeni Sütun Ayarları

Eklediğiniz satırın türüne ve satırın kaç sütun içerdiğine bağlı olarak, Gelişmiş Tasarım Ayarları sekmesinde bir dizi yeni sütun ayarı bulacaksınız. Burada, satır içindeki her bir sütun için stili ayarlayabilirsiniz.

Sütun Arka Plan Rengi – Artık her birinin içindeki ayrı sütunlara kendi arka plan rengi uygulanabilir. Satır ayarları açılır penceresini açtığınızda, düzenlediğiniz satırda kaç sütun olduğuna bağlı olarak her sütun için seçenekler göreceksiniz.

Sütun Arka Plan Görüntüsü – Arka plan renkleri gibi, her sütunun da bir arka plan görüntüsü olabilir.

Sütun Dolgusu – Sütunlar için dolguyu ayarlamak, özellikle tam genişlikteki satırlar için kullanışlıdır. Sütunların etrafına ek dolgu eklemek, boyutları tarayıcının genişliğiyle birlikte arttıkça her sütundaki içeriğe nefes alması için daha fazla alan verebilir.

Gelişmiş Tasarım Ayarları

Gelişmiş Tasarım Ayarlarının içinde, sıranızın görünümünü her açıdan ayarlamanıza izin veren bir sürü yeni seçenek bulacaksınız. Genel Ayarların çok kalabalık olmaması için bunları kendi sekmelerine ayırıyoruz. Satırınızın tasarımı üzerinde ekstra kontrol istiyorsanız, bu yeni sekmeye giriş yapabilirsiniz.

Arka Plan Resmi – Bölümlere çok benzer şekilde, satırlar artık bir arka plan görüntüsüne sahip olabilir. Bu, satırınızdaki modüllerin arkasına bir resim yerleştirecektir.

Arka Plan Rengi – Arka plan renkleri satırlara da uygulanabilir.

Arka Plan Videosu – Son olarak, video arka planları (önceden yalnızca Bölümler için mevcuttu) artık bir bölüm içindeki tek tek satırlar için kullanılabilir.

Paralaks Modu – Yukarıdaki ayarı kullanarak bir arka plan görüntüsü uygularsanız, bu görüntüye paralaks efekti uygulayabilirsiniz. Paralaks modu, arka plan görüntüsünü kaydırdığınız hızdan biraz daha yavaş bir hızda hareket ettirerek bir derinlik yanılsaması yaratır (tıpkı başka bir nesnenin arkasındaki bir nesnenin, etrafında dönerseniz hareket etmesi gibi).

Sütun Yüksekliklerini Eşitle – Bu, herhangi bir satırdaki her sütununuzdaki içerik miktarı konusunda endişelenmenize gerek kalmadan tasarımlarınızın dengeli görünmesini sağlayacak harika bir yeni seçenektir. Bu seçenek etkinleştirildiğinde, tüm satırlar “eşitlenir” ve yükseklikleri aynı yapılır. Her sütun, satırdaki en uzun sütunun yüksekliğini alır. Bu, özellikle sütunlarınızın her birine bir arka plan rengi uyguladığınızda kullanışlıdır.

Özel CSS

Bölümler ve Modüller gibi, Satırlar da artık Özel CSS sekmesi altında Özel CSS seçeneklerine sahiptir. Burada, CSS konusunda bilgili geliştiriciler, satır tasarım seçeneklerini kullanarak zaten mümkün olmayan her şeyi kesinlikle yapabilirler. Temanızı güncellediğinizde Özel CSS'yi arka arkaya kullanmak asla kaybolmaz ve bu nedenle Alt Tema kullanmaya harika bir alternatiftir.

Bazı Şaşırtıcı Sonuçlar İçin Bu Seçenekleri Birleştirin

Bir araya getirildiğinde, bu yeni sıra seçeneklerinin tümü, çok ilginç tasarım olanakları sunar. Bu yeni ayarları yeni web sitesi tasarımınıza nasıl uygulayacağınıza dair birkaç örnek vereyim.

Yukarıdaki bu örnekte, 3 sütunlu bir satırın içine 3 tanıtım yazısı yerleştirilmiştir. Satırı tarayıcının tüm genişliği boyunca genişletmek için “Tam Genişlik Yap” seçeneğini etkinleştirdik. Ardından, “oluk aralığı” seçeneğini en düşük ayara getirerek her sütun arasındaki boşluğu kaldırdık. Ardından, her sütuna, güzel ve kusursuz bir geçiş oluşturmak için altındaki tam genişlikteki görüntüyle eşleşen özel bir arka plan rengi uyguladık. Son olarak, sütunlarımızın her birinin ve özel arka plan renklerinin birbirine mükemmel şekilde uymasını sağlamak için "sütun yüksekliklerini eşitle" seçeneğini etkinleştirdik. Sonuç tamamen yeni ve ferahlatıcı bir şey.

Satırlar artık kendi tam genişlikte resim galerinizi oluşturmak için kullanılabilir! Yukarıdaki bu örnekte, "fullwidth" ayarı etkinken 3 görüntü modülünü 2 farklı satıra yerleştirdik. Ardından, “dolgu” seçeneklerini “0” olarak ayarlayarak her satırdaki dolguyu kaldırdık. Son olarak, satırımızın oluk aralığı ayarını en düşük değere düşürerek her sütun arasındaki boşluğu tamamen kaldırdık. Bu, her görüntünün kenarlarının birbirine değmesine ve satırın genişliğinin ekranın tüm genişliğini genişletmesine neden olur.

Aynı galeri ızgara efekti, metin ve görüntü kaydırıcılarıyla da birleştirilebilir. Yukarıdaki örnekte, oluksuz ve tam genişlikte medya ekranı oluşturmak için resim modülleri, resim galerisi modülleri ve metin modüllerinin bir karışımını ve eşleşmesini oluşturduk.

Bazen tasarımınız nefes almak için biraz daha fazla alana ihtiyaç duyar. Bu örnekte, satırın üstündeki ve altındaki dolguyu artırmak için satırın dolgu seçeneklerini kullandık. Bu, tek bir sütunun içinde ortalanmış tanıtım modülünün üstünde ve altında çok fazla alan yerleştirir.

Karışıma sütun arka plan resimleri eklediğinizde, daha da fazla olasılık kullanılabilir hale gelir. Yukarıdaki örnekte, özel bir arka plan görüntüsü ile boş bir sütun kullanılmıştır. Tam genişlikte yapıldığında ve her iki tarafta bir CTA modülü ile eşleştirildiğinde, mobil cihazlarda güzel yanıt veren kareli bir efekt elde edebiliyoruz.

İmkanlar sonsuzdur

Rows'un Divi Builder'ın en çok yönlü parçası haline geldiğini söylediğimde, ciddiyim! Divi 2.4'ün yeni satır seçeneklerini denemeye ve düzen kelime dağarcığınızı genişletmeye başladığınızda, her modül için yeni ve yaratıcı kullanımların kilidini de açmaya başlayacaksınız. Farklı genişlikte ve dolgulu sıraların içine yerleştirildiğinde, her modül farklı bir kişilik kazanabilir. Birlikte, geçmişte oluşturabildiğiniz her şeyden çok daha üstün olan çeşitli düzenler oluşturmaya başlayabilirsiniz. Umarım bu size bir sonraki web siteniz için biraz ilham verir ve umarım Divi'nin yeni satır seçenekleriyle oynamaktan zevk alırsınız! İyi eğlenceler