Ana İçeriğe Geç

Divi üzerinde aynı satırdaki elemanlar nasıl hizalanır

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Divi ile bir site oluştururken içeriği dikey olarak hizalama imkanı, tasarım aracınıza pratik bir katkı olabilir. Bazen belirli bir düzen, içeriğin farklı şekillerde (ortalanmış, alt, üst) dikey olarak hizalanmasını gerektirir. En yaygın ihtiyaç, içeriğinizi dikey olarak ortalamaktır.

İç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 eğiticide, içeriği dikey olarak hizalamak için herhangi bir sütuna bazı küçük CSS parçalarının nasıl ekleneceğini göstereceğim. Bunun nasıl yapılacağına dair örnekler için Divi'nin önceden oluşturulmuş bazı düzenlerini kullanacağım. CSS hakkında fazla bir 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 her seçtiğinizde flex özelliğini kullanır. Yalnızca sütunlarınızın boyutunun en fazla içeriğe sahip sütunun boyutuna ayarlanmasını sağlar. Ve "Sütun Yüksekliklerini Eşitle" satır kapsayıcısı için esnekliği 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.

şablon divi teması wordpress.png

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.

columns.png'nin yüksekliklerini uyumlu hale getirin

Ş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.

marginauto;

otomatik kenar boşluğu divi.png

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

Ş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:

marginauto 0;

marjı divi line.png

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;

divi.png öğelerini hizalayın

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.

ana element.png uzatı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.

divi.png'deki stilleri genişlet

Şimdi her şey dikey olarak ortalanır.

divi.png değişikliklerinin görünümü

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.

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

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;

esnek-column.png Direksiyon

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.

esnek hizalama end.png

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.

boxes.png görüntüsü

Farklı miktarlarda dikey olarak hizalanmış metinlerle bulanıklaştırma (Özet) yapın

Sütun içeriğinizi dikey olarak ortalamak da bulanıklıklar için yararlı olabilir. Bildiğiniz gibi, tüm bulanıklıklar özelliği veya hizmeti açıklamak için kullanılan tam metin miktarını içermeyecektir. Bu bulanıklıkları dikey olarak ortalamak, düzeniniz 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.

blorbds.png hizalama

Şimdi satır ayarlarına gitmem ve "Sütun yüksekliklerini harmonize etmem" gerekiyor.

columns.png uyumlu hale getirmek

Ş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;

İçerik hizalamasını değiştir divi.png

Ya da onları sıraya dizmek için takip ederek değiştirin.

align-items: flex-end;

alt divi.png hizalama

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

Ö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ı:

marginauto auto 0;

3 sütun CSS ana elemanı:

margin0 auto auto;

Özetler divi.png'ın hizalamasını özelleştirin

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.

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
4 hisseleri
hisse2
cıvıltı
Enregistrer2