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 (ortalanmış, 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 ekler; bu, birden çok sütun düzeni kullanırken çok faydalıdır. Ayrıca, dikey olarak ortalanmış içerik, tarayıcı genişlikleri arasında ortalanmış halde kalır ve benzer yanıtları elde etmek için özel dolgu veya kenar boşluklarına olan ihtiyacı ortadan kaldırır.
Bu derste, birkaç basit CSS satırı kullanarak herhangi bir sütundaki içeriği dikey olarak nasıl hizalayacağınızı öğreteceğim. Gösteri amacıyla, Divi'nin birkaç prefabrik düzenini 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?
- Sayfanıza Önceden Yapılandırılmış Düzeni Ekleyin.
- Yöntem 1: İçeriği Esnek ve Otomatik Kenar Boşluğu ile Dikey Olarak Hizalama
- İçeriği Altta Hizalama
- Satırınızın Sütunları için Dikey İçerik Hizalama
- Yöntem 2: Sütun Esnek Yönünü Kullanarak İçeriği Dikey Olarak Hizalama
- Tek Sütunlu Düzenler Ne Olur?
- DIVI'nın Dikey ve Yatay Hizalaması Üzerine Son Düşünceler
Flex ve Divi Arasındaki Farkı Anlamak
Flex (veya Flexbox) CSS özelliği, öğeleri yatay ve dikey yığınlarda (bir tür tablo gibi) düzenlemenin bir yoludur. Bununla birlikte, tipik tabloların aksine, esnek özellik, içerdikleri içeriğin boyutuna göre "esneyen" kutular oluşturmanıza olanak tanır.
Satır ayarınız olarak "Sütun Yüksekliklerini Eşitle"yi seçtiğinizde Divi flex niteliğini kullanır. Basitçe söylemek gerekirse, bu, tüm sütunlarınızın boyutunun, en fazla bilgi içeren sütunun boyutuna ayarlanmasını sağlar. "Sütun Yüksekliklerini Eşitle", satır kapsayıcı için esnekliği tetiklediğinden, her sütunun (veya kutunun) içeriğini değiştirmek için sütunlarınıza CSS ekleyerek bundan yararlanabilirsiniz.
Eğer eklerseniz: Arka arkaya herhangi bir sütuna “margin auto”, ex için amp le, o sütunun içeriği ( 's bir veya birkaç modül olsun) dikey ortalanır.
“Hizalama öğeleri: merkez” eklerseniz, tüm sütunlarınız (ve içerikleri) dikey olarak ortalanır; senin sırana.
Elbette, flex özelliğinin web tasarımında daha birçok uygulaması ve temanızda kullanabileceğiniz daha gelişmiş CSS uygulamaları 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 (dolgu ve kenar boşluğu) içinde dikey olarak konumlandırmak için özel boşluk kullanabilirsiniz. Ex için amp le, bir sütun eşit üst ve alt dolgu vermek dikey kuyruğa içinde modülü (s) merkezi Divi'deki aralık seçenekleri kullanabilirsiniz. Ayrıca, bir sütuna üst dolgu ekleyerek içeriği alta hizalı hale getirebilirsiniz. Sayfanıza daha fazla içerik eklerken aralığı değiştirmeniz gerekebilir. Ayrıca, bu hizalamayı birden çok tarayıcı boyutunda sürdürmek sorunlu olabilir.
Bu nedenle, belirli boşluklar hakkında endişelenmenize gerek kalmadan bilgileri dikey olarak hizalamanın bir yolunu arıyorsanız, bunu faydalı bulacağınızı düşünüyorum.
Hadi bu partiyi başlatalım!
Sayfanıza Önceden Yapılandırılmış Düzeni Ekleyin.
İç Tasarım Şirketi Portföy Sayfa Düzeni ile başlayacağım. Bu düzenin sayfanızda olması için yeni bir sayfa oluşturun. Ardından sayfanıza bir isim verin. Açılır menüden "Divi Builder Kullan"ı ve ardından "Görsel Oluşturucu Kullan"ı seçin. Ardından açılır menüden "Önceden Hazırlanmış Bir Düzen Seçin"i seçin. Ardından, Kütüphaneden Yükle penceresinden Interior Design Company Layout Pack'i seçin. Son olarak, düzenleri seçerken 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 Esnek ve Otomatik Kenar Boşluğu ile Dikey Olarak Hizalama
İkinci satırın (sayfa başlığının bulunduğu satırın hemen altındaki) satır ayarlarını açın. Tasarım seçeneklerinde Boyutlandırma seçenek grubunu açın ve “Sütun Yüksekliklerini Eşitle”nin zaten etkin olduğunu unutmayın; Bu, satıra flex özelliğinin ("display: flex;") eklendiğini belirtir.
Sütun 2 Ana Öğe giriş kutusunun altında, aynı satır için Gelişmiş sekme 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 konumlandırıldı.
| 01 | kenar boşluğu: otomatik; |
İçeriği Altta Hizalama
Tüm modüllerin sütununuzun altında yığılması için içeriğinizi alta hizalamak için kenar boşluğu değerini aşağıdaki gibi değiştirebilirsiniz:
| 01 | kenar boşluğu: otomatik 0; |
Satırınızın Sütunları için Dikey İçerik Hizalama
Her bir 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 altta hizalanmasını istiyorsanız bu parçacığı da kullanabilirsiniz:
| 01 | hizalama öğeleri: esnek uç; |
Divi'nin Stilleri Genişlet özelliğini, CSS snippet'inizle ana öğeye sağ tıklayıp “Ana Öğeyi Genişlet” öğesini 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 sayfa (veya bölüm) boyunca tüm satırlara uygulayın.
Artık her şey dikey olarak dengelenmiştir.
Ancak, sütuna eklenen "margin: auto" nedeniyle beyaz sütun arka plan renginin artık tüm satırı kapsamadığını gözlemlemiş olabilirsiniz. Satır arka plan rengini beyaz olarak değiştirerek ve satır dolgusunu kaldırarak bunu çö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 önce 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 hizalanabilen 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 kuyruğumuza 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 ex için Let dönüşü amp le satırında. Özel CSS'ye sağ tıklayıp "Özel CSS Stillerini Sıfırla"yı seçerek, Satır Ayarlarında sahip olabileceğiniz herhangi bir özel CSS'yi kaldırabilirsiniz.
Ardından, Sütun 2 Ana Öğesinde aşağıdaki CSS'yi uygulayın:
| 010203 | ekran: esnek; esnek yön: sütun; haklı içerik: merkez; |
İçeriği alt hizaya getirmek için “yasla-içerik: merkez”i “doğrula-içerik: esnek uç” 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 Miktarlarda Metinle Dikey Olarak Hizalanmış Bulanıklıklar Oluşturma
Sütunlarınızın içeriğini dikey olarak ortalamak, tanıtım yazılarında da yardımcı olabilir. Bildiğiniz gibi, her tanıtım yazısı bir özelliği veya hizmeti açıklamak için aynı miktarda metne sahip olmayacaktır. Bu tanıtım yazılarını dikey olarak ortalamak, mizanpajınızın güzel görünmesine yardımcı olabilir.
Dijital Ödemeler Ana Sayfa Düzeni için, ben dikey bu ex için Diyor uyumlu hale getirecektir amp le.
Bir sitenin görünümünün daha gerçekçi bir tasvirini oluşturmak için, önce tanıtım yazılarına değişen miktarlarda vücut içeriği ekleyeceğim.
Şimdi satır ayarlarında "Sütun Yüksekliklerini Eşitle" yapmam gerekiyor.
Artık metnimi hizalayabilir ve tasarımı CSS parçacıklarını kullanarak ayarlayabilirim.
Satır Ayarlarımızın Gelişmiş sekmesinin 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; |
Altta hizalamak için lütfen aşağıdaki şekilde değiştirin.
| 01 | hizalama öğeleri: esnek uç; |
Ayrıca, özel CSS stillerinizi sıfırlayarak ve aşağıdaki özel kenar boşluklarını ekleyerek ilk sütunu alta hizalı ve üçüncü sütunu üste hizalı yapabilirsiniz.
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; |
Tek Sütunlu Düzenler Ne Olur?
Tek sütunlu içeriğinizi dikey olarak ortalamak için bir CSS parçacığına veya esnekliğe ihtiyacınız yoktur. Tek yapmanız gereken, metninizin üstünde ve altında (veya modüllerde) eşit boşluk olduğundan emin olmaktır. Çoğu tüketici, bitişik malzemenin doğru bir şekilde sıralanmasını istedikleri için birçok sütunlu mizanpajlarda dikey olarak ortalanmış içeriğe ihtiyaç duyar.
DIVI'nın Dikey ve Yatay Hizalaması Üzerine Son Düşünceler
Bu çözüm, özel CSS'nin birkaç küçük parçacığına dayansa da, zaman alan bir prosedüre hızlı bir çözüm arayan insanlar için yararlı olabileceğini düşünüyorum. Bu yaklaşımın üzerinde görüşlerini paylaşmak için çekinmeyin yanı sıra Lütfen ex amp les geçmişte size zaman ve emek tasarrufu sağladı nasıl.
Daha fazla bilgi edinin. Bij een Blog modülü, daha fazla bilgi için. Dan, 1 kolomda sıra sıra erdedir. Het aantal blogs naast elkaar, bepaald kapı modülüdür (varsayılan 3). Zijn hier de kolommen ook gelijk te yapılmış?
Merhaba, Hayır üzgünüm sadece klasik DIVI sütunları içindir, DIVI blog modülünün sütunları hizalamak için tamamen farklı bir kodu vardır.
Modülün aşağıdan 2/3 veya yukarıdan 1/3 oranında hizalanmasını ve tam ortada üstte veya altta olmamasını istiyorsanız ne olur?
Merhaba, korkarım bazı özel CSS yapılması gerekecek, varsayılan olarak böyle bir seçenek yok.
Belki içeriği ortada hizalamayı ve içeriğinize biraz dolgu eklemeyi deneyebilirsiniz, ancak lütfen tüm cihazlarda oluşturmayı dikkatlice kontrol edin.