Divi 5'te Flexbox ile Eşit Sütun Yükseklikleri Nasıl Oluşturulur

Temiz, profesyonel düzenler oluşturmak, etkili web tasarımının temel taşıdır ve eşit sütun yükseklikleri dengeli bir düzene katkıda bulunur. İster ürünler, hizmetler veya portföy öğeleri, kullanıcı deneyimini mükemmel bir şekilde artıran sütunlar. Divi 4'te eşit sütunlar mümkündür, ancak Divi 5 masaya çok daha fazlasını getirir.

Divi 5'te, FlexBox Düzen sisteminin entegrasyonu işlemi geliştirerek eşit sütun yükseklikleri oluşturmak için daha basit ve daha esnek bir yol sunar. Bu yazı, temiz, dengeli düzenler oluşturmanız için size rehberlik edecektir. Hadi dalalım!

Divi 4'te eşit sütun yükseklikleri

Divi 4'te, eşit yüksekliklere sahip sütunların elde edilmesi basit ancak sınırlıydı. Bir geçiş, en yüksek sütunun yüksekliğine uyacak şekilde arka arkadaki tüm sütunları etkinleştirdi. Bu özellik görsel tutarlılığı korumak için bir cankurtarandı, ancak genellikle geçici çözümler gerektiren sınırlamaları vardı.

Divi 4'teki eşit yükseklik etkisi sütun kaplarına uygulandı, yani arka plan renkleri, görüntüler veya sınırların sütun seviyesine ayarlanması gerekiyordu. Bu yaklaşım, sütunlar içindeki modüllere uzanmadı, bu da garip boşluklara yol açabilir. Örneğin, bir sütundaki kısa bir metin modülünün altındaki bir düğme, altında garip bir boşluk bırakırken, başka bir sütundaki daha uzun bir metin modülünün altındaki bir düğme, dengesiz bir görünüm oluşturarak doldurdu.

Tasarımcılar modül içeriğini dikey olarak hizalamak veya aralığı ayarlamak gibi daha fazla kontrol istediklerinde, genellikle özel CSS gerekliydi. Bu, özellikle yeni başlayanlar için, cilalı sonuçlar elde etmek için Divi'nin özel CSS alanlarına dalmak zorunda kaldıkları için bir zorluk yarattı. Örneğin, Divi 4'teki sütunun altına hizalanmasını istiyorsanız, bunu başarmak için CSS kullanmanız gerekir.

Divi 5'teki Flexbox nasıl eşit sütunları adresler

Flexbox, Divi 5'e sorunsuz bir şekilde entegre edilir, bu da eşit sütun yüksekliklerinin elde edilmesini kolaylaştırır. Divi 4'ün geçiş tabanlı seçeneğinin aksine, Divi 5, web sayfalarını tasarlamayı kolaylaştıran yerleşik kontroller sağlamak için FlexBox'tan yararlanır.

FlexBox ile, her iki sütun ve içerikleri için kesin hizalama seçenekleri sunarken en yüksek sütunları en uzun olana göre otomatik olarak uzatabilirsiniz. Bu, yeni başlayanlar ve profesyoneller için her Divi kullanıcısı için gelişmiş düzenleri mümkün kılan özel CSS ihtiyacını ortadan kaldırır. Divi 5'in Flexbox Düzen Sistemi, tasarımcıların kolayca tutarlı, profesyonel tasarımlar oluşturmasını sağlar.

Divi 5'te eşit sütun yükseklikleri nasıl oluşturulur

Divi 5'te eşit yüksekliğe sahip sütunlar oluşturmak, Flexbox entegrasyonu sayesinde bir esintidir. Aşağıdaki adımlarda, işleri nasıl ayarlayacağını göstereceğiz ve her şeyin mükemmel bir şekilde sıralanmasını sağlayacağız.

1. Adım: Tasarımınızı Oluşturun

Visual Builder'ı yeni veya mevcut bir sayfada açın. Yeni bir satır eklemek için Siyah + simgesini tıklayın.

Yeni bölüm iletişim kutusu göründüğünde, eşit sütunların altındaki üç sütun düzeni seçin.

İlk sütunda bir grup modülü ekleyin.

Ardından, ilk sütunda grup modülüne bir simge modülü ekleyin.

İçerik sekmesindeki kontrol simgesini seçin.

Tasarım sekmesinde simge rengini #2EA3F2 olarak ayarlayın ve simge boyutu 36 piksel.

Ardından, simge modülünün altına bir başlık modülü ekleyin. Gri yerine siyah + simgesini tıklayarak başlığı grup modülüne eklediğinizden emin olun.

İçerik sekmesindeki başlık olarak web tasarımı yazın.

Tasarım sekmesinde, başlık seviyesi olarak H5'i , başlık yazı tipi olarak inter ve başlık yazı tipi ağırlığı olarak ortamı seçin. Başlık yazı tipi stilini büyük harfe , başlık metni sola , baş metin rengini #000000'e ayarlayın ve başlık metni boyutunu varsayılan 16px boyutunda tutun.

Ardından, grup modülünün içindeki başlığın altına bir metin modülü ekleyin. Ayarları olduğu gibi bırakabilirsiniz.

Sütundaki son modül için bir düğme modülü ekleyeceğiz. Ancak, grup modülüne eklemek yerine, altına ekleyeceğiz. Bu, eşit sütun yükseklikleri oluşturmamıza izin verecek, ancak düğmeyi alttan hizalayarak tasarımı daha uyumlu hale getirecek.

Tasarım sekmesini tıklayın ve istediğiniz stil ayarlarını düğme modülüne atayın. Sol menüdeki katman görünümüne bakarak grup modülünün dışında olduğundan emin olmak için düğmenizi kontrol edin. Tamamlandığında, düğme aşağıdaki ekran görüntüsü gibi görünmelidir-mavi bir arka plan ve beyaz metin ile sol hizalanmıştır.

2. Adım: Sütunları çoğaltma

İlk sütun içerikle doldurulduktan sonra, içeriği ilk sütundaki ikinci ve üçüncü sütunlara kopyalayacağız ve birkaç değişiklik yapacağız. İkinci ve üçüncü sütunları silebilir ve birincisini çoğaltabilir veya grup modülünü ve düğmesini ikinci ve üçüncü sütunlara kopyalayıp yapıştırabilirsiniz.

Ardından, 2. sütundaki başlık başlığını kodlamaya ve 3. sütundaki başlık başlığını pazarlamaya değiştirin. Ayrıca, Divi 5'in FlexBox'ı değişen içerik uzunluklarıyla nasıl ele aldığını gösterebilmemiz için 2. sütundaki metin modülündeki içeriğin bir kısmını da sileceğiz. Gördüğünüz gibi, sütunlar düzensizdir.

Bir sonraki adıma geçmeden önce, ilk sütuna tıklayın ve sütunumuzun tüm taraflarına 25 piksel aralık ekleyin.

Ayrıca renk olarak #666666 ile 15 piksel sınır yarıçapı ve 1 piksel sınır genişliği ekleyeceğiz.

Satırımızı tasarlamanın son adımı, tasarım özniteliklerini 1. sütundan kopyalamak ve kalan sütunlara yapıştırmaktır. İlk sütuna sağ tıklayın ve öğe stillerini kopyalayın. Ardından, 2. sütuna sağ tıklayın ve öğe stilini yapıştırın. 3. sütun için bu eylemi de tekrarlayın.

Adım 3: Flexbox ayarlarını eşit yükseklikler için yapılandırın

Ardından, satır için FlexBox ayarlarımızı yapılandırmamız gerekecek. Divi 5, FlexBox kontrollerini düzen sistemine entegre ederek Divi 4'ün Sütun Heights geçişinin eşitleştirilmesinin ötesine geçer. Satır için tasarım sekmesine gidin ve Flex'in düzen altında seçildiğinden emin olun.

Ardından, satırın düzen yönü altında seçildiğinden emin olun, içerik altında başlayın ve esneme hizalama öğeleri altında seçildiğinden emin olun. Bu, Divi 5'e sütun yapısını korumasını, satır içindeki tüm öğeleri sola hizalamasını ve üst kabın içindeki mevcut alanı doldurmasını söyleyecektir.

Ardından, ilk sütunun ayarlarını tıklayın. Tasarım sekmesindeki ayarlarını açıklamak için Düzen açılır menüsünü tıklayın. Varsayılan olarak, Flex düzen altında seçilir. Düzen yön alanında sütunu seçin. İçeriği haklı çıkarın . Arasındaki boşluğu seçin. Tüm öğeleri başlangıçta (solda) hizalayın ve yerleşim ambalajını setlemeyi sarmaya bırakın.

2. ve 3. sütun için yukarıdaki adımları tekrarlayın. Aynı ayarları satırın geri kalan sütunlarına uygulamak için Kopyala/Yapıştır veya Genişletme Özelliklerini de kullanabilirsiniz.

Grup içindeki tüm modüller mevcut alanı doldurmak için gerilecek ve grubun dışındaki düğmeler dibe hizalanacaktır.

4. Adım: Test Duyarlılık

Divi 5'in özelleştirilebilir duyarlı kesme noktaları, eşit sütun yüksekliklerinizin tüm cihazlarda harika görünmesini sağlamayı kolaylaştırır. Visual Builder'daki düzeninizi önizlemek için Duyarlı Görünüm Değişimlerini kullanın. Varsayılan olarak, üç kesme noktası vardır. Bununla birlikte, Divi 5'in artık görsel oluşturucunun üst kısmındaki araç çubuğundaki Elipsis menüsünü tıklayarak kolayca etkinleştirilebilen 7'dir. İstediğiniz kesme noktalarını etkinleştirin ve bunları uygulamak için Kaydet'i tıklayın.

Tablet görünümünde düzeninizi önizlemek için tıklayın. Gördüğünüz gibi, Flexbox sütunları yan yana istiflenir.

Sütunların daha küçük cihazlarda dikey olarak istiflemesine izin vermek için sütun yapısını değiştirebilirsiniz. Tablet kesme noktasındayken, satır için içerik sekmesini tıklayın . Sütun Yapısını Değiştir'i tıklayın.

İletişim kutusu göründüğünde, eşit sütunların altındaki tek satırı etkinleştirmek için tıklayın. Bu, 3 sütunlu satırı tablet ve mobil cihazlardaki tek bir sütuna değiştirirken, masaüstlerinde 3 sütunlu yapıyı korur.

Değişiklikleri tüm kesme noktalarında önizlediğinizde, Divi'nin küçük ekranlar için düzeni nasıl geçtiğini göreceksiniz.

Yükseklik hizalamasını otomatikleştirerek, tasarımcılar teknik düzeltmelerden ziyade yaratıcılığa odaklanabilir ve bu da profesyonel sitelerin zamanın bir kısmında oluşturulmasını kolaylaştırır. Divi 5'in FlexBox Düzen Sistemi, modül grupları aracılığıyla daha iyi içerik organizasyonunu da destekleyerek özel CSS olmadan hizalama modüllerini her zamankinden daha kolay hale getirir.

Ortak kullanım durumları

Divi 5'in FlexBox sistemi, çeşitli kullanım durumları için çok yönlü ve etkili eşit sütun yükseklikleri oluşturmayı sağlar. Divi 5'in Flexbox sisteminin parladığı bazı yaygın yollar aşağıdadır:

1. Ürün listeleri

E-ticaret düzenlerinde, ürün kartları genellikle başlıklar veya açıklamalar nedeniyle içerik uzunluğuna göre değişir. Divi 5'in FlexBox ile, her sütunun eşit yüksekliği koruduğu ve temiz ve profesyonel bir görünüm sağladığı bir ürün kartı ızgarası oluşturabilirsiniz. Örneğin, kısa bir açıklamaya sahip bir ürün, daha uzun bir açıklama içeren biriyle mükemmel bir şekilde hizalanır. Divi 5'in Flexbox sistemi, garip boşluklardan kaçınmanızı ve kullanıcı güvenini ve etkileşimini teşvik eden uyumlu bir deneyim yaratmanızı sağlar.

2. Öne çıkan bölümler

Servis veya özellik bölümleri Divi'nin Flexbox sistemi için uygundur. Divi 5'teki FlexBox, arka arkadaki tüm modüllerin eşit sütun yüksekliklerine sahip olmasını ve dengeli ve cilalı bir görünüm oluşturmasını sağlar. Takım BIOS, Hizmetler veya Özellik Önemli Noktaları Görüntüleme, Eşitleştirilmiş Sütunlar web sayfalarınızı taramayı kolaylaştırarak kullanıcı deneyimini geliştirir.

3. Portföy ızgaraları

Bir portföy ızgarası, özellikle çalışmalarını gösteren serbest çalışanlar için Flexbox için mükemmel kullanım durumudur. Flexbox, görüntüler gibi galeri öğelerinin farklı en boy oranlarında bile eşit olarak hizalanmasını sağlar. Bir grup modülü kullanabilir, ona bir arka plan görüntüsü atayabilir ve aralığı buna göre ayarlayabilirsiniz. Bu, çalışmanızı tutarlı bir şekilde sergileyen düzenli, profesyonel bir ızgara oluşturur ve potansiyel müşterileri etkilemeyi amaçlayan fotoğrafçılar, tasarımcılar veya ajanslar için idealdir.

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!

Bugün Divi 5'in Flexbox özelliğine aşina olun

Divi 5'in FlexBox Düzen Sistemi, Divi 4'ün sütun yüksekliklerini eşitleme yolundan önemli bir sıçrama işaret ederek Divi kullanıcılarının eşit sütunlar nasıl oluşturduğunu dönüştürür. Divi 4, sıklıkla arıtma için özel CSS gerektiren sert, arka plana bağlı bir yönteme dayandığında, Divi 5, sezgisel kontroller ve kesintisiz yanıt verebilirlik sağlamak için FlexBox'ı kullanır. Sonuç, özel CSS geçici çözümlerine olan ihtiyacı ortadan kaldıran ve Divi kullanıcılarının kolayca cilalı profesyonel düzenler oluşturmasına izin veren daha verimli bir sistemdir.

Divi web sitelerinizi yükseltmeye hazır mısınız? Divi 5'in FlexBox ayarlarına dalın ve kilidini açtıkları yaratıcı olasılıkları deneyin. Yorumlarınızı aşağıda paylaşın veya yeni Flexbox özelliğimiz hakkındaki düşüncelerinizi paylaşmak için sosyal medya kanallarımızda bizimle bağlantı kurun.