Dikey olarak hizalama yeteneği içindekiler ile bir site oluştururken Divi tasarım aracınıza kullanışlı bir eklenti olabilir. Bazen belirli bir hüküm, içindekiler dikey olarak farklı şekillerde (ortalanmış, alt, üst) hizalanmıştır. En yaygın ihtiyaç, odağınızı merkeze almaktır. içindekiler dikeyleştirme.
İçeriğiniz için birden çok sütun düzeni kullanırken kullanışlı olan lezzetli bir simetrik boşluk dokunuşu sağlar. Ek olarak, dikey olarak ortalanmış içerik, farklı tarayıcı genişliklerinde ortalanmış olarak kalır ve benzer yanıt hızına ulaşmak için özel dolgu veya kenar boşlukları uygulama zorluğunu ortadan kaldırır.
Bu öğreticide, içeriği dikey olarak hizalamak için herhangi bir sütuna birkaç küçük CSS parçacığını nasıl ekleyeceğinizi göstereceğim. Önceden hazırlanmış düzenlerden bazılarını kullanacağım Divi Bunun nasıl yapılacağına dair örnekler için. CSS hakkında fazla bilginiz yoksa endişelenmenize gerek yok. Saniyeler içinde kendi düzenlerinize uygulamak oldukça kolay olacaktır.
Flex ve Divi'yi Anlama
Css Flex (veya Flexbox) özelliği, öğeleri yatay ve / veya dikey yığınlarda (bir tablo gibi) konumlandırmanın bir yoludur. Geleneksel tablolardan farklı olarak flex özelliği, içerdiği içeriğin boyutuna göre ayarlanan kutular oluşturmanıza olanak tanır.
Divi satır parametresi olarak "Sütun Yüksekliklerini Eşitle" seçeneğini seçtiğinizde flex özelliğini kullanır. Bu, sütunlarınızın boyutunun en fazla içeriğe sahip sütunun boyutuna göre ayarlanmasını sağlar. Ve "Sütun Yüksekliklerini Eşitle" satır kapsayıcısı için esneklik sağladığından, her bir sütunun (veya alanın) içeriğini ayarlamak için sütunlarınıza css ekleyerek bundan kolayca yararlanabilirsiniz.
Örneğin, bir satırdaki bir sütuna "margin: auto" eklerseniz, o sütunun içeriği (bir veya daha fazla modül olsun) dikey olarak ortalanacaktır.
Ayrıca, satırınıza "align-items: center" eklerseniz, tüm sütunlarınız (ve içeriklerinin) dikey olarak ortalanır.
Elbette, web tasarımında Flex özelliğinin birçok başka kullanımının yanı sıra temanıza uygulayabileceğiniz daha gelişmiş CSS vardır. Ancak bu eğitim için basit tutmak istedim.
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ütunda dikey olarak hizalayabilirsiniz. Örneğin, modül (ler) i sütunda dikey olarak ortalamak için üst ve alt dolguya eşit bir sütun vermek için Divi'nin aralık seçeneklerini kullanabilirsiniz. Ayrıca, alt içeriği hizalamak için bir sütuna yalnızca üst dolgu ekleyebilirsiniz. Ancak, sayfanızı daha fazla içerikle güncellerken aralığı ayarlamanız gerekebilir. Ek olarak, bu hizalamayı farklı tarayıcı genişliklerinde korumak zor olabilir.
Dolayısıyla, özel boşluk bırakmayı 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.
Hadi başlayalım!
Önceden tanımlanmış düzeni sayfanıza yükleyin
Başlamak için, İç Tasarım Şirketi Portföy serisindeki düzeni 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 “Görsel Oluşturucu Kullan” seçeneğine tıklayın. Ardından "Temel bir düzen seçin" seçeneğini seçin. Ardından Kitaplıktan Yükle açılır penceresinden İç Tasarım Şirketi yerleşim kitini seçin. Son olarak, düzen listesinden Portföy sayfasını seçin ve "Bu düzeni kullan" ı tıklayın.
Düzen sayfanıza yüklendikten sonra gitmeye hazırsınız.
Yöntem 1: Flex ve Otomatik Kenar Boşluğu Kullanarak İçeriği Dikey Olarak Hizalama
Sayfanın ikinci satırı (sayfa başlığının bulunduğu satırın hemen altındaki) için satır ayarlarını açın. Tasarım ayarlarının altında, boyutlandırma seçeneği grubunu açın ve "Sütun Yüksekliklerini Eşitle" seçeneğinin zaten etkin olduğuna dikkat edin. Bu, satıra artık flex özelliğinin ("display: flex;") eklendiği anlamına gelir.
Şimdi aynı satır için Gelişmiş sekmesinin ayarlarına gidin ve 2. sütunun ana öğesinin giriş kutusunun altına aşağıdaki css parçacığını ekleyin.
margin: auto; |
Şimdi ikinci sütunun içeriği dikey olarak ortalanacak şekilde taşındı.
Daha düşük içeriği hizalayın
İçeriğinizi aşağıya hizalamak istiyorsanız, tüm modüller sütununun altına istiflenecek şekilde, kenar boşluğu değerini aşağıdaki gibi ayarlayabilirsiniz:
margin: auto 0; |
Satıcınızdaki tüm sütunlar için içeriğin dikey hizalanması
Her bir sütuna ayrı ayrı "margin: auto" eklemek yerine, aşağıdaki parçacığı 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 en altta hizalanmasını istiyorsanız, bu alıntıyı ekleyebilirsiniz:
align-items: flex-end; |
Ayrıca, CSS pasajınız ile ana öğeye sağ tıklayıp "Ana öğeyi genişlet" seçeneğine tıklayarak Divi'nin Genişletme Stilleri özelliğinden yararlanabileceğinizi unutmayın.
Ardından, bu ana css öğesini, sayfanın her bir sütununun tüm içeriğini dikey olarak ortalamak için sayfanın (veya bölümün) tüm satırlarına uzatın.
Şimdi her şey dikey olarak ortalanır.
Ancak, beyaz sütunun arka plan renginin artık satırın tüm yüksekliğini kapsamadığını fark etmiş olabilirsiniz. Bunun nedeni, sütuna "margin: auto" eklememizdir. Bu sorunu çözmek için, çizginin arka plan rengini beyaza çevirebilir ve dolguyu çizgiden kaldırabilirsiniz. Ancak bunun yerine, kenar boşluğunu değiştirmeden sütun içeriğinizi ortalamanın bir yolunu göstereceğim.
Yöntem 2: Sütun esnek yönünü kullanarak içeriği dikey olarak hizalayın
İlk yöntemde satıra eklenen flex özelliğinden yararlandık. Bu, sütunlarımızın her birini, sadece kenar boşluğunu ayarlayarak dikey olarak hizalanabilen "esnek bir 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ütun içeriklerimizi hizalamanın esnek yönlü bir yolu da vardır. Bunu yapmak için, sütunumuza birkaç satır CSS ekleyeceğiz, böylece sütundaki 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" yı tıklayarak orada sahip olabileceğiniz tüm özel CSS'leri kaldırın.
Ardından, ana eleman olan 2 sütunun altına aşağıdaki CSS'yi ekleyin:
ekran: esnek; esnek yön: sütun; haklı içerik: merkez;
Ya da içeriği en altta hizalamak istersem, sadece "içeriği hakla: ortala" ile "içeriği hakla: esnek uç" ile değiştirin.
Bu kurulumla ilgili harika olan şey, içeriğim dikey olarak ortalanırsa ve satır genişliğine ulaşılırsa, içeriğin ortalanmış kalmasıdır.
Farklı miktarlarda dikey olarak hizalanmış metinlerle bulanıklaştırma (Özet) yapın
Sütun içeriğinizi dikey olarak ortalamak, tanıtım yazıları için de faydalı olabilir. Bildiğiniz gibi, tüm tanıtım yazıları, d için kullanılan tam metin miktarını içermeyecektir.yazmak işlev veya hizmet. Bu tanıtım yazılarını dikey olarak ortalamak, mizanpajınız için güzel bir tasarım oluşturabilir.
Bu örnek için, afişleri Dijital Ödemeler ana sayfa düzenine dikey olarak hizalayacağım.
Bir sitenin neye benzeyebileceğinin daha gerçekçi bir temsilini vermek için ilk olarak bulanıklıklara farklı miktarlarda gövde metni ekleyeceğim.
Şimdi satır ayarlarına gitmem ve "Sütun yüksekliklerini harmonize etmem" gerekiyor.
Şimdi içeriğimi hizalamak ve tasarımı değiştirmek için CSS snippet'leri ekleyebilirim.
Satır ayarlarınızın Gelişmiş sekmesi altında, Ana Öğenin altına aşağıdakileri ekleyerek sütunlarımızın içeriğini dikey olarak ortalayabiliriz:
align-items: center; |
Ya da onları sıraya dizmek için takip ederek değiştirin.
align-items: flex-end; |
Özel CSS stillerinizi sıfırlayabilir ve birinci sütun altını ve üçüncü hizalanmış sütun üstünü hizalamak için aşağıdaki özel kenar boşluklarını ekleyebilirsiniz.
1 sütun CSS ana elemanı:
margin: auto auto 0; |
3 sütun CSS ana elemanı:
margin: 0 auto auto; |
Peki ya tek sütun düzenleri?
Teknik olarak, sütun içeriğinizi dikey olarak ortalamak için herhangi bir CSS veya esnek snippet'e ihtiyacınız yoktur. Yapmanız gereken tek şey, 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, kullanıcılar, bitişik içeriğin mükemmel bir şekilde sıralanmasını istedikleri için, birden çok sütuna sahip düzenlerde ortalanmış dikey içeriğe ihtiyaç duyar.
Öğeleri Divi'de aynı satırda nasıl hizalayacağınızı gösteren bu eğitim için hepsi bu.
