Divi kullanarak bir site oluştururken içeriği dikey olarak hizalama seçeneği tasarım araç setinize değerli bir katkı olabilir. Düzene bağlı olarak içeriğin çeşitli şekillerde (ortalama, alt, üst) dikey olarak hizalanması gerekebilir. En yaygın ihtiyaç, malzemenizin dikey olarak hizalanmasıdır. İçeriğinize hoş bir simetrik boşluk dokunuşu katar; bu, birden fazla sütun düzeni kullanıldığında çok faydalıdır. Ayrıca, dikey olarak ortalanan içerik, tarayıcı genişlikleri boyunca ortalanmış olarak kalır ve benzer yanıt verme hızı elde etmek için özel dolgu veya kenar boşluklarına olan ihtiyacı ortadan kaldırır.
Bu derste size birkaç basit CSS satırı kullanarak herhangi bir sütundaki içeriği dikey olarak nasıl hizalayacağınızı öğreteceğim. Gösterim amacıyla Divi'nin prefabrik düzenlerinden birkaçını kullanacağım. CSS'ye aşina değilseniz endişelenmenize gerek yok. Birkaç saniye içinde bunu tasarımınıza uygulayabileceksiniz.
- Flex ve Divi Arasındaki Farkı Anlamak
- Bu gerekli mi?
- Önceden Yapılandırılmış Düzeni Sayfanıza Ekleyin.
- Yöntem 1: İçeriği Flex ve Otomatik Kenar Boşluğuyla Dikey Olarak Hizalama
- İçeriği Altta Hizalama
- Satırınızın Sütunları için Dikey İçerik Hizalaması
- Yöntem 2: Sütun Esnek Yönünü Kullanarak İçeriği Dikey Olarak Hizalama
- Yalnızca Tek Sütunlu Düzenler Ne Olacak?
- DIVI'nin Dikey ve Yatay Hizalanmasına İlişkin Son Düşünceler
Flex ve Divi Arasındaki Farkı Anlamak
Flex (veya Flexbox) CSS özelliği, öğeleri yatay ve dikey yığınlar halinde (bir tür tablo gibi) düzenlemenin yalnızca bir yoludur. Ancak tipik tabloların aksine esnek özellik, içerdikleri içeriğin boyutuna göre "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. Basitçe söylemek gerekirse bu, tüm sütunlarınızın boyutunun en fazla bilginin bulunduğu sütunun boyutuna göre ayarlanmasını sağlar. "Sütun Yüksekliklerini Eşitle" satır kabının esnekliğini tetiklediğinden, her sütunun (veya kutunun) içeriğini değiştirmek için sütunlarınıza CSS ekleyerek bundan yararlanabilirsiniz.
amp , satırdaki herhangi bir sütuna "margin: auto" ifadesini eklerseniz, o sütunun içeriği (ister bir ister birkaç modül olsun) dikey olarak ortalanacaktır.
"align-items: center;" eklerseniz tüm sütunlarınız (ve içerikleri) dikey olarak ortalanacaktır. senin sırana.
Elbette, flex özelliğinin web tasarımında çok daha fazla uygulaması ve temanızda kullanabileceğiniz daha gelişmiş CSS'leri vardır. Ancak bu eğitim için işleri basit tutmak istedim.
Bu gerekli mi?
Teknik anlamda hayır. İçeriğinizi/modüllerinizi bir sütun içinde dikey olarak konumlandırmak için özel aralık kullanabilirsiniz (dolgu ve kenar boşluğu). amp , bir sütuna eşit üst ve alt dolgu vermek amacıyla modülleri kuyrukta dikey olarak ortalamak için Divi'nin aralık seçeneklerini kullanabilirsiniz. Ayrıca bir sütuna üst dolgu ekleyerek içeriğin alta hizalanmasını da sağlayabilirsiniz. Sayfanıza daha fazla içerik eklerken aralığı değiştirmeniz gerekebilir. Ayrıca, bu hizalamayı birden fazla tarayıcı boyutunda sürdürmek sorunlu olabilir.
Dolayısıyla, belirli boşluklar konusunda endişelenmenize gerek kalmadan bilgileri dikey olarak hizalamanın bir yolunu arıyorsanız, bunun faydalı olacağını düşünüyorum.
Hadi bu partiyi başlatalım!
Önceden Yapılandırılmış Düzeni Sayfanıza Ekleyin.
İç Tasarım Şirketi Portföy Sayfa Düzeni ile başlayacağım. Sayfanızda bu düzenin olması için yeni bir sayfa oluşturun. Daha sonra sayfanıza bir isim verin. Açılır menüden “Divi Builder Kullan”ı ve ardından “Visual Builder Kullan”ı seçin. Daha sonra açılır menüden “Önceden Hazırlanmış Bir Düzen Seçin”i seçin. Ardından, Kitaplıktan Yükle penceresinden İç Tasarım Şirketi Yerleşim Paketini seçin. Son olarak, düzenleri seçerek Portföy sayfasını seçin ve "Bu Düzeni Kullan"ı tıklayın.
Düzen sayfanıza yüklendikten sonra başlamaya hazırsınız.
Yöntem 1: İçeriği Flex ve Otomatik Kenar Boşluğuyla Dikey Olarak Hizalama
İkinci satırın satır ayarlarını açın (sayfa başlığının bulunduğu satırın hemen altındaki satır). Tasarım seçeneklerinde Boyutlandırma seçenek grubunu açın ve "Sütun Yüksekliklerini Eşitle" seçeneğinin zaten etkin olduğunu unutmayın; Bu, flex özelliğinin (“display: flex;”) satıra eklendiğini belirtir.
Sütun 2 Ana Öğesi giriş kutusunun altında, aynı satır için Gelişmiş sekmesi ayarlarına gidin ve aşağıdaki CSS parçacığını ekleyin.
İkinci sütunun içeriği artık dikey olarak ortalanacak şekilde yeniden yerleştirildi.
| 01 | kenar boşluğu: otomatik; |
İçeriği Altta Hizalama
Tüm modüllerin sütununuzun altında yığılmasını sağlayacak şekilde içeriğinizi alta hizalamak için kenar boşluğu değerini aşağıdaki şekilde değiştirebilirsiniz:
| 01 | kenar boşluğu: otomatik 0; |
Satırınızın Sütunları için Dikey İçerik Hizalaması
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.
| 01 | hizalama öğeleri: merkez; |
Sütunlarınızdaki tüm bilgilerin alt tarafa hizalanmasını istiyorsanız bu pasajı da kullanabilirsiniz:
| 01 | hizalama öğeleri: esnek uç; |
Divi'nin Stilleri Genişletme özelliğini, CSS snippet'inizle ana öğeye sağ tıklayıp "Ana Öğeyi Genişlet"i seçerek kullanabileceğinizi unutmayın.
Ardından, sayfadaki her sütunun tüm içeriğini dikey olarak ortalamak için ana öğe CSS'yi sayfadaki (veya bölümdeki) tüm satırlara uygulayın.
Artık her şey dikey olarak dengelenmiştir.
Ancak sütuna "margin: auto" ifadesinin eklenmesi nedeniyle beyaz sütun arka plan renginin artık tüm satırı kaplamadığını gözlemlemiş olabilirsiniz. Satır arka plan rengini beyaza çevirerek ve satır dolgusunu kaldırarak bu sorunu çözebilirsiniz. Bunun yerine, kenar boşluğunu değiştirmek zorunda kalmadan sütununuzun içeriğini nasıl ortalayacağınızı öğreteceğim.
Yöntem 2: Sütun Esnek Yönünü Kullanarak İçeriği Dikey Olarak Hizalama
İlk olarak satıra eklenen flex özelliğini kullandık. Sonuç olarak, sütunlarımızın her biri, kenar boşluğu değiştirilerek dikey olarak hizalanabilecek bir "esnek kutu" haline geldi.
Ancak sütunlarımızı (ve sütun arka planlarını) aynı boyutta tutan "Sütun Yüksekliğini Eşitle" efektinden ödün vermeden sütunumuzun metnini hizalamak için esnek yönü kullanabiliriz. Bunu başarmak için sıramıza birkaç satır CSS ekleyeceğiz ve içindeki tüm modüllerin dikey olarak istiflenmesini ve ardından ortalanmasını sağlayacağız.
Önceki amp satıra dönelim. Özel CSS'ye sağ tıklayıp "Özel CSS Stillerini Sıfırla"yı seçerek, Satır Ayarlarında sahip olabileceğiniz tüm özel CSS'leri kaldırabilirsiniz.
Ardından Sütun 2 Ana Öğesinde aşağıdaki CSS'yi uygulayın:
| 010203 | ekran: esnek; esnek yön: sütun; yasla içerik: merkez; |
İçeriği alta hizalamak için "justify-content: center"ı "justify-content: flex-end" olarak değiştirin.
Bu yapılandırmayı seviyorum çünkü içeriğimi dikey olarak konumlandırırsam ve satırı tam genişlikte yaparsam içerik ortalanmış kalır.
Çeşitli Miktarda Metinlerle Dikey Olarak Hizalanmış Kısa Açıklamalar Yapmak
Sütunlarınızın içeriğini dikey olarak ortalamak da tanıtım yazılarına yardımcı olabilir. Farkında olabileceğiniz gibi, her tanıtım yazısı bir özelliği veya hizmeti açıklayan aynı miktarda metne sahip olmayacaktır. Bu tanıtıcı yazıların dikey olarak ortalanması, düzeninizin güzel görünmesine yardımcı olabilir.
Dijital Ödemeler Ana Sayfa Düzeni için, bu amp tanıtım yazılarını dikey olarak hizalayacağım.
Bir sitenin görünümünün daha gerçekçi bir tasvirini oluşturmak için öncelikle tanıtıcı yazılara değişen miktarlarda gövde içeriği ekleyeceğim.
Şimdi satır ayarlarında “Sütun Yüksekliklerini Eşitle” yapmam gerekiyor.
Artık metnimi hizalayabilir ve CSS parçacıklarını kullanarak tasarımı ayarlayabilirim.
Satır Ayarlarımızın Gelişmiş sekmesindeki Ana Öğe bölümüne aşağıdakileri ekleyerek sütunlarımızın içeriğini dikey olarak ortalayabiliriz:
| 01 | hizalama öğeleri: merkez; |
Lütfen bunları alta hizalamak için aşağıdaki şekilde değiştirin.
| 01 | hizalama öğeleri: esnek uç; |
Ayrıca, özel CSS stillerinizi sıfırlayıp aşağıdaki özel kenar boşluklarını ekleyerek ilk sütunu aşağıya, üçüncü sütunu üste hizalayabilirsiniz.
Sütun 1 Ana Öğe CSS:
| 01 | kenar boşluğu: otomatik otomatik 0; |
Sütun 3 Ana Öğe CSS:
| 01 | kenar boşluğu: 0 otomatik otomatik; |
Yalnızca Tek Sütunlu Düzenler Ne Olacak?
Tek sütunlu içeriğinizi dikey olarak ortalamak için bir CSS pasajına veya esnekliğe ihtiyacınız yoktur. Tek yapmanız gereken, metninizin üstünde ve altında (veya modüllerde) eşit aralık olduğundan emin olmaktır. Çoğu tüketici, bitişik malzemenin doğru şekilde sıralanmasını istediklerinden, çok sayıda sütun içeren düzenlerde dikey olarak ortalanmış içeriğe ihtiyaç duyar.
DIVI'nin Dikey ve Yatay Hizalanmasına İlişkin Son Düşünceler
Bu çözüm, birkaç küçük özel CSS parçacığına dayansa da, zaman alıcı bir prosedüre hızlı bir çözüm arayan insanlar için yararlı olabileceğini düşünüyorum. Lütfen bu yaklaşım hakkındaki görüşlerinizi ve bunun geçmişte zamandan ve emekten nasıl tasarruf sağladığına dair amp dersleri paylaşmaktan çekinmeyin.
Açık açıklama için teşekkürler. Ancak bu, Blog modülüyle çalışmaz. O zaman satırda sadece 1 sütun var. Yan yana olan blogların sayısı modül tarafından belirlenir (varsayılan 3). Buradaki sütunlar da eşitlenebilir mi?
Merhaba, Hayır, üzgünüm, bu sadece klasik DIVI sütunları içindir, DIVI blog modülü sütunları hizalamak için tamamen farklı bir koda sahiptir.
Peki ya modülün 2/3 oranında aşağıya veya üstten 1/3 oranında hizalanmasını ve tam olarak ortada, üstte veya altta hizalanmamasını istiyorsanız?
Merhaba, korkarım bazı özel CSS'ler gerektirecek, varsayılan olarak böyle bir seçenek yok.
Belki içeriği ortaya hizalamayı ve içeriğinize biraz dolgu eklemeyi deneyebilirsiniz, ancak lütfen tüm cihazlarda oluşturma işlemini dikkatlice kontrol edin.