Divi’de içerik dikey olarak nasıl uyumlaştırılır
Divi ile bir site oluştururken içeriği dikey olarak uyumlu hale getirme yeteneği, tasarım alet kemerinize rahat bir katkı olabilir. Bazen bazı düzenler içeriğin farklı şekillerde (orta, alt, üst) dikey olarak hizalanmasını ister. En yaygın ihtiyaç, içeriğinizi dikey olarak merkezi hale getirmektir. Bu, içeriğiniz için bazı sütun düzenleri kullanırken çok yararlı olan eğlenceli simetrik alanlara dokunur. Ayrıca, dikey olarak ortalanan içerik, benzer bir yanıt almak için dolgu veya özel marj uygulamasının ham çalışmasını ortadan kaldıran tarayıcının farklı genişliğinde merkezli kalır.
Bu öğreticide, içeriği dikey olarak uyumlu hale getirmek için herhangi bir sütuna nasıl küçük CSS parçaları ekleyebileceğinizi göstereceğim. Bunun nasıl yapılacağına dair örnekler için bazı Divi önceden hazırlanmış düzen kullanacağım. CSS hakkında fazla bir şey bilmiyorsanız, endişelenmenize gerek yoktur. Bu, saniyeler içinde kendi düzeninize uygulamak için yeterince kolay olacaktır. Flex ve Divi özelliği CSS Flex (veya Flexbox) ‘ı anlamak, elemanları yatay ve/veya dikey kazıklara (tablolar gibi) konumlandırmanın bir yoludur. Geleneksel tablolardan farklı olarak, Flex özelliği, tuttuğu içeriğin boyutu ile ayarlanan veya “esnek” bir kutu yapmanıza olanak tanır.
DIVI, “Sütun Yüksekliklerini Eşitle” i hat ayarlarınız olarak her seçtiğinizde Flex özelliğini kullanır. Bu, sütunun boyutunun en fazla içerikle sütunun boyutuna göre ayarlanmasını sağlar. Ve “Sütun Yüksekliklerini Eşitleyin”, satır kapları için Flex’i etkinleştirdiğinden, her sütunun (veya kutunun) içeriğini ayarlamak için sütununuza CSS ekleyerek kolayca kullanabilirsiniz. Örneğin, bir satırdaki herhangi bir sütuna “Margin: Otomatik” eklerseniz, sütun içeriği (bir veya daha fazla modül olsun) dikey olarak ortalanır. Ayrıca, “Hizalama-öğeler: Center; Satırınıza göre, tüm sütunlarınız (ve içerikleriniz) dikey olarak ortalanır. Tabii ki, temanız için uygulayabileceğiniz daha sofistike CSS ile birlikte web tasarımında Flex Property için daha fazla kullanım vardır. Ama bu öğretici için her şeyi basit tutmak istiyorum. Bu gerçekten gerekli mi? Teknik olarak hayır. İçeriğinizi/modülünüzü özel alanları (dolgu ve kenar boşluğu) kullanarak sütunda dikey olarak uyumlu hale getirebilirsiniz. Örneğin, modülü sütuna dikey olarak odaklamak için aynı kolonun üst ve alt yatağını sağlamak için Divi boşluk seçeneğini kullanabilirsiniz. Veya, aşağıda düz bir içerik oluşturmak için yalnızca üst dolguyu sütuna ekleyebilirsiniz. Ancak, sayfanızı daha fazla içerikle güncellerken mesafeyi ayarlamanız gerekebilir. Ayrıca, bu uyumu tarayıcının farklı genişliğinde korumak zor olabilir.
Bu nedenle, özel alanları düşünmek zorunda kalmadan içeriği dikey olarak uyumlu hale getirmek için bir çözüm arıyorsanız, bunu yararlı bulacağınızı düşünüyorum. Başlayalım! Önceden yapılan düzeni sayfanıza yükleyin Başlamak için, İç Tasarım Şirketi Portföy sayfasının düzenini kullanacağım. Bu düzeni sayfanızda almak için yeni bir sayfa oluşturun. Ardından sayfanızdaki başlığı verin. “Divi Builder’ı kullanın” ve ardından “Visual Builder kullanın”. Ardından “Önceden Yapılan Bir Düzen Seç” seçeneğini seçin. Ardından kütüphaneden Popup Load’dan İç Tasarım Şirketi Düzen Paketini seçin. Son olarak, mizanpaj listesinden portföy sayfasını seçin ve “Bu düzeni kullan” ı tıklayın. Düzen sayfanıza yüklendikten sonra ayrılmaya hazırsınız. Yöntem 1: Flex ve otomatik kenar boşluğunu kullanarak içerik dikey olarak nasıl uyumlu hale getirilir, satır ayarlarını sayfadaki ikinci satırdan açın (sayfa başlığının hemen altında). Tasarım ayarlarının altında, boyutlandırma seçeneği grubunu açın ve “sütun yüksekliklerini eşitleme” nin etkin olduğunu unutmayın. Bu, hattın şimdi bir Flex özelliğine (“Ekran: Flex;”) sahip olduğu anlamına gelir.
Şimdi aynı satır için gelişmiş sekme ayarlarını açın ve aşağıdaki CSS parçalarını sütun 2’nin ana öğesinin giriş kutusunun altına ekleyin.
Her bir sütuna tek tek “Marj: Otomatik” eklemek yerine satırınızdaki tüm sütunlar için içeriği dikey olarak uyumlu hale getirin, satırınızın ana öğelerine aşağıdaki görüntüleri ekleyerek tüm sütunların içeriğini dikey olarak dikey olarak odaklayabilirsiniz. Ayar -TEMS: Merkez; Veya tüm sütun içeriğinizin paralel olmasını istiyorsanız, şu snippet’ü ekleyebilirsiniz: Hizalama: Flex-end; Ayrıca, CSS parçalarınızla ana öğeye doğru katlayarak ve “Ana öğeyi genişlet” ü tıklayarak Divi Extend Styles özelliğinden yararlanabileceğinizi unutmayın.
Ardından, sayfadaki her bir sütunun tüm içeriğini dikey olarak odaklamak için CSS ana öğesini tüm sayfaların (veya parçaların) tüm sıralarına genişletin. Şimdi her şey dikey olarak ortalanmış.
Ancak, beyaz sütunun arka plan renginin artık yüksek satırı kaplamadığını fark etmiş olabilirsiniz. Bunun nedeni sütuna “Margin: Otomatik” ekledik. Bunu düzeltmek için, satırın arka plan rengini beyaz olarak değiştirebilir ve dolgu sırasını kaldırabilirsiniz. Ancak bunun yerine, size marjı değiştirmeden sütun içeriğinizi odaklamanın bir yolunu göstereceğim. Yöntem 2: İçeriği dikey olarak uyumlu hale getirme İlk yöntemde sütun fleksiyonunun yönünü kullanarak satıra eklenen esnek özelliği kullanırız. Bu, sütunlarımızın her birinin sadece kenar boşluğunu ayarlayarak dikey olarak hizalanabilen bir “esnek kutu” olmasını sağlar. Ancak, sütunumuzu (ve sütunun arka planını) aynı boyutta yapan “Sütun Yüksekliği” etkisini kaybetmeden sütun içeriğimizi uyumlu hale getirmek için esnek yönlendirme için kullanılan yollar da vardır. Bunu yapmak için, sütunundaki tüm modüllerin dikey olarak istiflenmesi ve daha sonra ortalanması için sütunumuza birkaç sıra CSS ekliyoruz. Önceki örnekte satırımıza dönelim. Satır ayarlarını açın ve özel CSS’ye sağa tıklayarak ve “CSS özel stilini yeniden yazın” tıklayarak orada olabileceğiniz özel CSS’yi kaldırın, ardından Sütun 2: Display: Flex; Esnek yönlendirme: sütun; Gerekçelendirme: Merkez;
Ya da içeriği uyumlu hale getirmek istersem, “Justify-consent: Center” ı “Justify-Content: Flex-end” olarak değiştirin.
Bu ayarla ilgili harika olan şey, içeriğimi dikey olarak ortalarsam ve tam geniş bir çizgi oluşturursam, içerik ortada kalır.
Çeşitli paralel metinlere sahip bir bulanıklık yapmak, sütun içeriğinizi dikey olarak dikey olarak dikey olarak açıklama için yararlı hale getirir. Bildiğiniz gibi, her açıklama özellikleri veya hizmetleri tanımlamak için kullanılan doğru miktarda metin bulunmayacaktır. Bu açıklamayı yapmak dikey olarak ortalanır, düzeniniz için iyi bir tasarım yapabilir. Bu örnek için, dijital ödeme sayfalarının düzenindeki açıklamayı dikey olarak hizalayacağım. Her şeyden önce, sitenin neye benzediğinin daha gerçekçi bir temsilini sağlamak için açıklamaya farklı miktarda metin ekleyeceğim. Şimdi, satır ayarlarına gitmeliyim ve “sütun yüksekliklerini dengelemeliyim”.
Şimdi içeriğimi uyumlu hale getirmek ve tasarımı değiştirmek için CSS parçalarımı ekleyebilirim. Satır ayarlarınızın devam eden sekmesi altında, ana öğenin altına aşağıdakileri ekleyerek sütun içeriğimizi dikey olarak odaklayabiliriz: Hizalama-öğeler: Center; Veya düz hale getirmek için aşağıdakilere geçin. Hizalama öğeleri: Flex-end; Veya özel CSS kuvvetinizi sıfırlayabilir ve aşağıdaki ilk düz sütunu ve üçüncü üçüncü sütun üstünü oluşturmak için aşağıdaki özel marjı ekleyebilirsiniz. Sütun 1 Ana Element CSS: Marj: Otomatik Otomatik 0; Sütun 3 Ana öğeler CSS: Marj: 0 Otomatik Otomatik;
