Divi 5'in Flexbox Düzen Sistemi ile dikey olarak nasıl hizalanır

Modern web tasarımında görsel olarak dengeli ve duyarlı düzenler oluşturmak esastır ve Divi 5'in yeni Flexbox Düzeni sistemi, dikey hizalama elde etmeyi her zamankinden daha kolay hale getirir. Bu güçlü yeni özellik, Divi kullanıcılarının dikey konumlandırma üzerinde tam kontrol sağlayan esnek, dinamik düzenler tasarlamalarına olanak tanır. Bir bölümde metni hizalama, ister çok sütunlu satırlarda içeriği dengelemek veya duyarlı tasarımlar oluşturma, Divi 5 işlemi doğrudan görsel oluşturucuya inşa edilmiş sezgisel kontrollerle basitleştirir.

Bu yazıda, dikey hizalamaya hakim olma, gerçek dünya örnekleri sunma ve duyarlı, cilalı düzenler oluşturmak için ipuçları sunma adımlarında size yol göstereceğiz. Divi 5'in Flexbox Düzen Sisteminin yaklaşımınızı dikey hizalamaya nasıl dönüştürebileceğini keşfedelim.

Divi 5'in FlexBox Düzen Sistemini Anlamak

Flexbox veya esnek kutu düzeni, bir kap içindeki elemanların düzenlenmesini basitleştirmek için tasarlanmış bir CSS düzeni modelidir, bu da onu yatay ve dikey hizalama için ideal hale getirir. Şamandıra veya kenar boşlukları gibi geleneksel yöntemlerin aksine, Flexbox içerik düzenlemeye basit bir yaklaşım sağlar. Elemanların, konteynerin boyutlarına ve görünümüne göre boyutlarını, sıralarını ve hizalamalarını dinamik olarak ayarlamasına izin verir ve düzenlerin tüm ekran boyutlarında tutarlı ve duyarlı olmasını sağlar.

FlexBox ile içeriği zahmetsizce ortalayabilir, alanı eşit olarak dağıtabilir veya öğeleri belirli bir sırada yığınlayabilirsiniz. Bu esneklik, web tasarımcıları için bir zorunluluk haline getirir ve Divi 5, kullanıcıların CSS hakkında gelişmiş bilgiye ihtiyaç duymadan sofistike düzenler oluşturmalarına izin verme gücünü kullanır.

Divi 5 Flexbox'ı Nasıl Entegre eder?

Divi 5 kısa süre önce Flexbox Düzen sistemini tanıttı. Bu sistem FlexBox'ı doğrudan görsel oluşturucuya entegre ederek kullanıcıların sezgisel ayarlarla bölümü, satır, sütun ve modül düzenlemelerini kontrol etmesine izin verir.

Temel özellikler, tek sütunlardan çoklu sıra bölümlere kadar çeşitli yeni satır şablonları içerir ve Divi'de düzenler oluşturmayı her zamankinden daha kolay hale getirir.

Divi 5'in FlexBox kontrolleri, düzenlerinizin yönünü kontrol etmenize, yatay ve dikey boşlukları ayarlamanıza, içeriği başlangıç, merkez veya bitişe haklı çıkarmanıza, sargıyı etkinleştirmenize ve daha fazlasını etkinleştirmenize olanak tanır.

Divi 5'in yeni değişiklik sütun yapısı özelliği, sütunların daha küçük cihazlarda nasıl davrandığı konusunda daha fazla kontrol sağlar. Sütun sayısını kolayca değiştirebilir veya yeniden sıralayabilir, tasarımların herhangi bir ekran boyutunda harika görünmesini sağlayabilirsiniz.

Divi 5, modası geçmiş bölüm türlerine güvenmeden karmaşık, duyarlı tasarımlar oluşturmak için sıralar artık birbirlerinin içine yerleştirilebileceğinden, özel ve tam genişlik bölümlerinden uzaklaşıyor. Bu gelişmeler, Divi 5'in Flexbox Düzen Sistemini doğrudan inşaatçı içinde modern, uyarlanabilir düzenler oluşturmak için güçlü bir araç haline getiriyor.

Divi 5'te dikey hizalamayı ayarlama

Divi 5'in Flexbox Düzen Sistemi, görsel oluşturucuya sorunsuz bir şekilde entegre edilmiştir, bu da kullanıcıların esnek ve duyarlı tasarımlar oluşturmasını erişilebilir hale getirir. Başlamak için, görsel oluşturucuyu yeni veya mevcut bir sayfada açın ve bir bölüm ve satır ekleyin. Öğeleri çeşitli senaryolarda dikey olarak hizalamak için adımlardan geçebilmemiz için tüm bir düzen oluşturduk.

Bir bölümde dikey hizalama

Bölümün ayarlarında, Tasarım sekmesine gidin ve FlexBox kontrollerini bulacağınız yerleşim seçeneklerini bulun.

Flex'in düzen stili altında seçildiğinden emin olun. Bu, bölüm için FlexBox'ın etkinleştirilmesini sağlar.

Varsayılan olarak, Başlat (Flex-START) Justify içeriği altında seçilir. Bu, kabın başlangıcındaki tüm öğeleri hizalar. Bu örnekte, eşyaları dikey olarak ortalamak isterken, bunları merkeze , alana veya uzaya eşit olarak hizalamayı seçebilirsiniz. İç içe satır dahil tek bir satırımız olduğundan, bölümümüzdeki tüm tasarım öğeleri yukarıda belirtilen herhangi bir seçenekle dikey olarak ortalanır.

Bir arka arkaya dikey hizalama

Ayrıca içeriği satır seviyesinde dikey olarak hizalayabilirsiniz. Bununla birlikte, bu örnekte, satır içindeki modülleri dikey olarak hizalamak için içeriği haklı çıkarmak yerine Hizalama öğelerini kullanacağız. Satır için tasarım sekmesinde , düzen ayarlarını bulun. Flex'i etkinleştirdiğinizden ve Hizalama Öğeleri Ayarlarını bulduğunuzdan emin olun. Varsayılan olarak, Start seçilir ve bu, satırdaki tüm modülleri kabın üstüne hizalar.

Elemanları nasıl hizalamak istediğinize bağlı olarak birkaç seçenek vardır. Sıradaki öğelerin dikey olarak ortadan ortalamasını isterseniz merkezi seçin. Sonu seçerken, tüm öğeler satırın altına hizalanır. Stretch, tüm öğelerin satırın yüksekliğini doldurmasını sağlar.

Çok sıralı bölümlerde dikey hizalama

Bu senaryoda, bir bölümde tek sütunlu bir satır ve iki üç sütunlu satır da dahil olmak üzere üç satırımız var. Satırlar içindeki tüm içeriği dikey olarak hizalamak için haklı içerik ayarlarını kullanacağız.

Bir bölüm sütunları düzen yönü olarak kullandığında, içeriği haklı olarak satırlarını dikey olarak hizalayacaktır. Başlat varsayılan olarak seçilir. Tüm satırları bölümün üstüne hizalar. Sıralar üst kenardan başlayarak birlikte paketlenecektir. Merkez bölümdeki tüm satırları dikey olarak hizalar. Sıralar alt kenardan başlayarak birlikte paketlenecektir. Uç seçtiğinizde, tüm satırlar bölümün altına hizalanır. Sıralar alt kenardan başlayarak birlikte paketlenecektir.

Arasındaki boşluk, sıraları ana eksen (dikey) boyunca eşit olarak dağıtır. İlk sıra bölümün üstüne, alt kısımlara karşı son sırada ve aradaki tüm satırların onları ayıran eşit miktarda alana sahip olacaktır. Çevresindeki boşluk, her öğenin etrafında eşit boşlukla satırları dağıtır.

Bitişik sıralar arasındaki boşluk, sıraların uçlarındaki boşluğun iki katı olacaktır (bölümün birinci sıra ile üst kısmı ile son sıra ile bölümün alt kısmı arasındaki boşluk). Son olarak, alan eşit olarak uzaya benzer, ancak her satır arasındaki boşluğun aynı olmasını sağlar ve bölümün başındaki ve sonundaki boşluğun da bu aralığa eşit olmasını sağlar.

Modül gruplarında dikey hizalama

Divi 5'in Flexbox sistemi, özellikle dinamik içerik için Loop Builder gibi özellikleri kullanırken modül gruplarında dikey hizalamayı da basitleştirir. Resim, yayın başlığı, yazısı yayın ve bir düğmeli blog yayınlarını görüntüleyen bir modül grubu düşünün. Uygun hizalama olmadan, düğmeler gibi öğeler sütunlar arasında yanlış hizalanmış görünebilir. Önceki Divi sürümlerinde, bu eşit sütun yükseklikleri ve özel CSS gerektiriyordu. Divi 5, bu işlemi Flexbox ile düzenler.

Elemanları hizalamak için, modül grubunun ilk sütununa tıklayın, Tasarım sekmesine gidin ve Flex ayarlarını bulun. İçeriğini Alan Alanı'na gerekçelendirin . Bu, sütun içindeki modülleri eşit olarak dağıtarak, özel CSS olmadan tüm sütunlardaki daha fazla okuma düğmesini mükemmel bir şekilde hizalayın. Bu yaklaşım, blog ızgaraları veya ürün listeleri gibi dinamik içerik için tutarlı, profesyonel düzenler sağlar.

Dosyaları İndirin

Ücretsiz indir

Divi bültenine katılın, size Ultimate Divi açılış sayfası düzen paketinin bir kopyasının yanı sıra tonlarca şaşırtıcı ve ücretsiz divi kaynakları, ipuçları ve püf noktalarının bir kopyasını e -postayla göndereceğiz. Takip et ve hiçbir zaman bir divi ustası olacaksınız. Zaten abone olduysanız, aşağıdaki e -posta adresinizi yazın ve Düzen Paketine erişmek için İndir'i tıklayın.

İNDİRMEK

Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ Haftalık Divi Düzen Paketlerine erişin!

Duyarlı dikey hizalama için ipuçları

Divi 5'in FlexBox Düzen Sistemi, içeriği dikey olarak hizalamayı kolaylaştırır, ancak dikkate alınması gereken bazı ipuçları vardır. Divi 5, duyarlı tasarım için sağlam araçlar sunar ve tüm cihazlarda dikey hizalamayı ince ayarlamanıza izin verir. İster bir kahraman bölümünde içerik merkezlendiriyor olun, ister çok sütunlu bir düzende düğmeleri hizalayın, aşağıdaki ipuçları tutarlı, profesyonel düzenleri korumak için Divi 5'in özelliklerinden yararlanmanıza yardımcı olacaktır.

Divi 5'in özelleştirilebilir duyarlı kesme noktalarını kullanın

Divi 5'in FlexBox sistemi, farklı ekran boyutları için modül siparişini ve hizalamasını özelleştirmenize olanak tanıyarak düzenlerinizin tüm ekran boyutlarına uyum sağlamasını sağlar. Visual Builder'da, düzenlerin cihazlarda nasıl göründüğünü kontrol etmek için yedi özelleştirilebilir duyarlı kesme noktası kullanabilirsiniz .

Dikey hizalamayı optimize etmek için tablet ve mobil cihazlardaki sütun yapılarını ayarlayabilirsiniz. Bu, düzenlerinizin her ekran boyutunda mükemmel görünmesini sağlar. Örneğin, bir tablette iki sütun ve mobil cihazlarda yalnızca bir sütun isteyebilirsiniz.

Divi 5'in FlexBox Düzen Sistemi, mobil cihazlardaki sütunlarınızın sırasını değiştirmenize ve mobil kullanıcıların bir bölümde veya satırda ilk gördüğünü kontrol etmenizi sağlar.

Divi 5'in tasarım değişkenlerini kullanın

Divi 5'in tasarım değişkenleri özelliği, duyarlı görünümlerde tutarlı aralık ve hizalamayı korumak için mükemmeldir. Tasarım değişkenleri, dolgu, kenar boşlukları ve yazı tipi boyutları gibi özellikler için yeniden kullanılabilir değerleri tanımlamanıza izin vererek düzenlerinizde homojenlik sağlar. Dikey hizalama için, sıralar veya bölümler içindeki aralığı standartlaştırmak için dikey dolgu için bir değişken oluşturabilirsiniz. Örneğin, Divi'nin değişken yöneticisinde dikey dolgu adlı bir tasarım değişkeni 30 piksel olarak ayarlayın.

Değişkeni bir satıra uygulamak için Tasarım sekmesine gidin, Aralık açılır menüsünü tıklayın ve kullanmak için Dinamik İçerik simgesini tıklayın.

Flexbox dikey hizalamayı kolaylaştırır

Divi 5'in FlexBox Düzeni sistemi, cilalı düzenler oluşturmak için esnek ve duyarlı bir çözüm sunarak dikey hizalamayı kolaylaştırır. FlexBox'ı görsel oluşturucuya entegre ederek, Divi 5, CSS'nin gelişmiş bilgisine ihtiyaç duymadan bölümlerin, satırların, sütunların ve modül gruplarının hizalanmasını hassasiyetle kontrol etmelerini sağlar. Özellikleri tüm cihazlarda tutarlı, profesyonel tasarımlar sağlar. İster içerik merkezlendirin, ister dinamik modül gruplarını hizalama veya çoklu sıra düzenler oluşturursanız, Divi 5 sonuçları verirken işlemi basitleştirir.

En son Divi 5 alfa'yı indirin ve yeni bir projede Flexbox Düzen Sistemi ile deneyin.