Divi'de İçeriği Dikey Olarak Hizalama

Divi ile bir site oluştururken içeriği dikey olarak hizalama yeteneği, tasarım alet kemerinize uygun bir ek olabilir. Bazen belirli bir düzen, içeriğin farklı şekillerde (orta, alt, üst) dikey olarak hizalanmasını gerektirir. En yaygın ihtiyaç, içeriğinizin dikey olarak ortalanmasıdır. İçeriğiniz için birden çok sütun düzeni kullanırken gerçekten kullanışlı olan hoş bir simetrik boşluk dokunuşu sağlar. Ayrıca, dikey olarak ortalanmış içerik, farklı tarayıcı genişliklerinde ortalanmış halde kalır, bu da benzer yanıtlar elde etmek için özel dolgu veya kenar boşlukları uygulama zahmetinden kurtulur.

Bu öğreticide, içeriği dikey olarak hizalamak için herhangi bir sütuna birkaç küçük CSS parçacığını nasıl ekleyebileceğinizi göstereceğim. Bunun nasıl yapılacağına dair örnekler için Divi'nin bazı hazır düzenlerini kullanacağım. CSS hakkında fazla bilginiz yoksa endişelenmenize gerek yok. Bu, saniyeler içinde kendi düzenlerinize uygulamak için yeterince kolay olacaktır.

Flex ve Divi'yi Anlamak

Flex (veya Flexbox) css özelliği, öğeleri yatay ve/veya dikey yığınlarda (bir tür tablo gibi) konumlandırmanın bir yoludur. Bunun dışında, geleneksel tabloların aksine, flex özelliği, içerdiği içeriğin boyutuna göre ayarlanan veya "esneyen" kutular oluşturmanıza olanak tanır.

Divi, satır ayarınız olarak "Sütun Yüksekliklerini Eşitle"yi seçtiğinizde flex özelliğini kullanır. Bu, sütunlarınızın boyutunun en çok içeriğe sahip sütunun boyutuna göre ayarlanmasını sağlar. Ve "Sütun Yüksekliklerini Eşitle", satır kapsayıcı için esnekliği etkinleştirdiğinden, her sütunun (veya kutunun) içeriğini ayarlamak için sütunlarınıza css ekleyerek bundan kolayca yararlanabilirsiniz.

Örneğin, bir satırdaki herhangi bir sütuna "margin: auto" eklerseniz, o sütunun içeriği (bir veya daha fazla modül olsun) dikey olarak ortalanır.

Ayrıca, “align-items:center;” eklerseniz satırınıza, tüm sütunlarınız (ve içerikleri) dikey olarak ortalanır.

Elbette, web tasarımında flex özelliğinin temanıza uygulayabileceğiniz daha gelişmiş CSS ile birlikte daha birçok kullanımı vardır. Ancak bu eğitim için işleri basit tutmak istedim.

Bu Gerçekten Gerekli mi?

Teknik olarak hayır. Özel boşluk (dolgu ve kenar boşluğu) kullanarak içeriğinizi/modüllerinizi bir sütun içinde dikey olarak hizalayabilirsiniz. Örneğin, modülleri sütun içinde dikey olarak ortalamak için bir sütuna eşit üst ve alt dolgu vermek için Divi'nin boşluk seçeneklerini kullanabilirsiniz. Veya içeriği alta hizalamak için bir sütuna yalnızca üst dolgu ekleyebilirsiniz. Ancak sayfanızı daha fazla içerikle güncellerken aralığı ayarlamanız gerekebilir. Ayrıca, bu hizalamayı farklı tarayıcı genişliklerinde tutmak zor olabilir.

Bu nedenle, özel boşluklar hakkında düşünmek zorunda kalmadan içeriği dikey olarak hizalamak için bir çözüm arıyorsanız, bunu faydalı bulacağınızı düşünüyorum.

Başlayalım!

Hazır Düzeni Sayfanıza Yükleyin

Başlamak için, İç Tasarım Şirketi Portföy Sayfa Düzenini kullanacağım. Bu düzeni sayfanıza almak için yeni bir sayfa oluşturun. Ardından sayfanıza bir başlık verin. “Divi Builder Kullan” ve ardından “Visual Builder Kullan” seçeneğine tıklayın. Ardından “Hazır Düzen Seçin” seçeneğini seçin. Ardından, Kütüphaneden Yükle açılır penceresinden İç Tasarım Şirketi Düzen Paketi'ni seçin. Son olarak, düzenler listesinden Portföy sayfasını seçin ve “Bu Düzeni Kullan”a tıklayın.

Düzen sayfanıza yüklendikten sonra, gitmeye hazırsınız.

Yöntem 1: Esnek ve Otomatik Kenar Boşluğu Kullanarak İçeriği Dikey Olarak Hizalama

Sayfadaki ikinci satırın satır ayarlarını açın (sayfa başlığının bulunduğu satırın hemen altındaki). Tasarım ayarları geçişi altında, Boyutlandırma seçenek grubunu açın ve “Sütun Yüksekliklerini Eşitle” öğesinin zaten etkin olduğuna dikkat edin. Bu, satırın artık kendisine eklenen flex özelliğine (“display: flex;”) sahip olduğu anlamına gelir.

Şimdi aynı satır için Gelişmiş sekme ayarlarına gidin ve Sütun 2 Ana Öğe giriş kutusunun altına aşağıdaki css parçacığını ekleyin.

margin: auto;

Şimdi ikinci sütun içeriği dikey olarak ortalanacak şekilde değişti.

İçeriği Alttan Hizalama

Tüm modüllerin sütununuzun altında yığılacağı şekilde içeriğinizi alta hizalamak istiyorsanız, kenar boşluğu değerini aşağıdaki gibi ayarlayabilirsiniz:

margin: auto auto 0;

Satırınızdaki Tüm Sütunlar İçin İçeriği Dikey Olarak Hizalama

Her sütuna ayrı ayrı "margin:auto" eklemek yerine, aşağıdaki pasajı Satır ayarlarınızın ana öğesine ekleyerek satırınızdaki tüm sütunların içeriğini dikey olarak ortalayabilirsiniz.

align-items: center;

Veya sütunlarınızın tüm içeriğinin alta hizalanmasını istiyorsanız, bu parçacığı ekleyebilirsiniz:

align-items: flex-end;

Ayrıca, css snippet'inizle ana öğeye sağ tıklayıp “Ana Öğeyi Genişlet” seçeneğine tıklayarak Divi'nin Stilleri Genişlet özelliğinden yararlanabileceğinizi unutmayın.

Ardından, sayfadaki her sütunun tüm içeriğini dikey olarak ortalamak için bu ana css öğesini sayfa (veya bölüm) boyunca tüm satırlara genişletin.

Artık her şey dikey olarak ortalanmıştır.

Ancak, beyaz sütun arka plan renginin artık satırın tüm yüksekliğini kapsamadığını fark etmiş olabilirsiniz. Bunun nedeni, sütuna “margin: auto” eklemiş olmamızdır. Bunu düzeltmek için satır arka plan rengini beyaz olarak değiştirebilir ve satır dolgusundan kurtulabilirsiniz. Ama bunun yerine, sütununuzun içeriğini kenar boşluğunu değiştirmeden ortalamanın bir yolunu göstereceğim.

Yöntem 2: Sütun Esnek Yönünü Kullanarak İçeriği Dikey Olarak Hizalama

İlk yöntemde, satıra eklenen flex özelliğinden yararlandık. Bu, sütunlarımızın her birini, yalnızca kenar boşluğunu ayarlayarak dikey olarak hizalanabilen bir "esnek kutu" haline getirdi.

Ancak, sütunlarımızı (ve sütun arka planlarını) aynı boyutta tutan "Sütun Yüksekliğini Eşitle" efektini kaybetmeden sütunumuzun içeriğini hizalamak için esnek yön kullanmanın bir yolu da vardır. Bunu yapmak için sütunumuza birkaç satır CSS ekleyeceğiz, böylece sütun içindeki tüm modüller dikey olarak istiflenecek ve sonra ortalanacak.

Bir önceki örnekteki satırımıza geri dönelim. Satır Ayarlarını açın ve Özel CSS'ye sağ tıklayıp "Özel CSS Stillerini Sıfırla" seçeneğine tıklayarak orada olabilecek tüm özel css'leri çıkarın.

Ardından, Sütun 2 Ana Öğe altına aşağıdaki CSS'yi ekleyin:

display: flex;
flex-direction: column;
justify-content: center;

Veya içeriği alttan hizalamak istersem, “yaslı içerik: merkez” i “doğrulama içeriği: esnek uç” olarak değiştirin.

Bu kurulumla ilgili harika olan şey, içeriğimi dikey olarak ortalarsam ve satırı tam genişlikte yaparsam içeriğin ortalanmış kalmasıdır.

Dikey Olarak Hizalanmış Çeşitli Miktarlarda Metinle Bulanıklaştırma Yapma

Sütun içeriğinizi dikey olarak ortalamak, tanıtım yazıları için de kullanışlı olabilir. Bildiğiniz gibi, her tanıtım yazısı, özelliği veya hizmeti tanımlamak için kullanılan tam metin miktarına sahip olmayacaktır. Bu tanıtım yazılarını dikey olarak ortalayarak, mizanpajınız için güzel bir tasarım oluşturabilirsiniz.

Bu örnek için, Dijital Ödemeler Ana Sayfası Düzenindeki tanıtım yazılarını dikey olarak hizalayacağım.

Bir sitenin nasıl görünebileceğinin daha gerçekçi bir temsilini vermek için, önce tanıtım yazılarına farklı miktarlarda gövde metni ekleyeceğim.

Şimdi satır ayarlarına ve “Equalize Column Heights”a gitmem gerekiyor.

Artık içeriğimi hizalamak ve tasarımı değiştirmek için CSS parçacıklarımı ekleyebilirim.

Satır Ayarlarınızın Gelişmiş sekmesi altında, Ana Öğe altına aşağıdakileri ekleyerek sütunlarımızın içeriğini dikey olarak ortalayabiliriz:

align-items: center;

Veya alt hizalama yapmak için aşağıdakiyle değiştirin.

align-items: flex-end;

Veya özel css stillerinizi sıfırlayabilir ve ilk sütunu alta, üçüncü sütunu üste hizalamak için aşağıdaki özel kenar boşluklarını ekleyebilirsiniz.

Sütun 1 Ana Öğe CSS:

margin: auto auto 0;

Sütun 3 Ana Öğe CSS:

margin: 0 auto auto;

Bir Sütun Düzenleri Hakkında Ne?

Teknik olarak, tek sütunlu içeriğinizi dikey olarak ortalamak için bir css snippet'ine veya esnekliğine ihtiyacınız yoktur. Tek yapmanız gereken, içeriğinizin (veya modüllerinizin) üstünde ve altında eşit boşluk bıraktığınızdan emin olmaktır. Çoğu zaman, insanlar bitişik içeriğin mükemmel bir şekilde sıralanmasını istedikleri için birden çok sütunlu mizanpajlarda dikey merkezli içeriğe ihtiyaç duyarlar.

Çok sayıda Uygulama

Divi'de içeriğinizi dikey olarak hizalayan birçok faydalı uygulama vardır. Bu, bir sütunda başlık metni bulunan iki sütun düzenine sahip başlıklar için kullanışlı olacaktır ve diğer sütundaki bir CTA'nın (düğmenin) dikey olarak ortalandığından emin olmak istersiniz. Altı sütunlu bir düzende logoları dikey olarak ortalamak için de yararlı olacaktır (özellikle logoların boyutları biraz farklıysa).

Son düşünceler

Bu yöntem birkaç küçük özel CSS parçacığına dayansa da, uygulamanın bazen zahmetli bir sürece hızlı bir çözüm arayanlar için son derece yararlı olabileceğine inanıyorum. Bunun işe yarayabileceği başka örnekleri duymayı çok isterim.

Fikirlerinizi ve yorumlarınızı aşağıda paylaşmaktan çekinmeyin.

Şerefe!