Duyarlı Tasarım Oluşturmak için Divi'nin Yeni Yükseklik ve Genişlik Seçeneklerini Kullanma

Genellikle ziyaretçilerin web siteniz hakkında ilk fark ettikleri şey olmasalar da, genişlik ve yükseklik CSS özellikleri web sitenizi bir arada tutmanıza ve harika görünmesine yardımcı olur. Ve şimdi, Divi'nin yeni sürüklenebilir boyutlandırma seçenekleriyle, oluşturucunun içindeki her öğenin genişliğini, maksimum genişliğini, minimum yüksekliğini, yüksekliğini ve maksimum yüksekliğini tam anlamıyla kontrol edebilirsiniz. Bu size farklı ekran boyutlarında son derece duyarlı web siteleri oluşturma özgürlüğü verir.

Şimdi, tüm bunlar kulağa harika geliyor, ancak pratikte bu nasıl güzel bir web sitesine dönüşüyor? Bu yazıda tam olarak bunun hakkında konuşacağız. Öncelikle Divi ayarlarında bulunan tüm yükseklik ve genişlik özellikleri arasındaki farkı açıklayarak başlayacağız ve ardından bunları farklı senaryolarda kullanarak sayfa tasarımlarımızın tam olarak istediğimiz gibi davranmasını sağlayacağız.

Hadi hadi bakalım!

Youtube Kanalımıza Abone Olun

Özellikler Arasındaki Farkı Anlamak

Günlük tasarım süreçlerimizde genişlik ve maksimum genişlik kullanmadan önce ne yaptıklarını anlamak önemlidir. Teorik açıklaması şudur:

Genişlik – Bir tasarım öğesinin gerçek genişliği. Bu %100 ise, kabın izin verdiği genişliktedir. Genişlik genellikle % kullanılarak ifade edilir. Genişlik yüzdesi ne kadar düşük olursa, tasarım öğesi o kadar dar olur.

Maksimum Genişlik – Maksimum genişliğin genişlik üzerinde gücü vardır. Bir modülün genişliği %100 olarak ayarlanırsa, maksimum genişlik değerinin altında kaldığı sürece bu değere bağlı kalacaktır. Maksimum genişlik değerine ulaşıldığında, onu aşamaz.

Ancak bu, duyarlı tasarıma nasıl dönüşür? Farkı açıklamaya yardımcı olmak için, Visual Builder'ı yepyeni bir sayfada etkinleştirerek görsel bir karşılaştırma oluşturacağız. Tek sütunlu bir satır içeren bir bölüm ekleyeceğiz. Ardından, biraz içeriğe, arka plan rengine ve bazı özel dolgulara sahip bir Metin Modülü ekleyin.

Genişliği Değiştirme

Metin Modülünün genişliğini %80 olarak değiştirdiğinizde, Metin Modülünün boyutunun küçüldüğünü göreceksiniz. Modülü istediğiniz gibi hizalama imkanı da ortaya çıkıyor.

Maksimum Genişliği Değiştirme

Maksimum genişliği değiştirdiğinizde, atanan değer yalnızca gerçek genişliğin maksimum genişlik değerini aştığı andan itibaren uygulanmaya başlar. Bunu gerçekten hızlı bir şekilde gösterelim:

aşılmadı

aşıldı

Genişlik ve maksimum genişliğin yanı sıra, her bir öğenin boyutlandırma ayarlarında minimum yükseklik, yükseklik ve maksimum yüksekliği de bulabileceksiniz. Bu terimlerden teorik olarak şunu anlayabilirsiniz:

Min Yükseklik – Bir öğeye atamak istediğiniz minimum yükseklik. Bu değer yükseklik girişinden büyükse, min yükseklik girişi baskın olacaktır.

Yükseklik – Bu, öğeye atamak istediğiniz gerçek yüksekliği tanımlar.

Maks Yükseklik – Yükseklik , yüksekliğe atanan değeri aştığında bu değer yeni yükseklik olur.

Minimum Yüksekliği Değiştirme

Bir öğenin minimum yüksekliğini değiştirirseniz, bu değer norm haline gelir. Test ederken, Metin Modülünün yüksekliğinin gerçek zamanlı olarak değiştiğini otomatik olarak göreceksiniz.

Yüksekliği Değiştirme

Bir minimum yüksekliği ve bir yüksekliği birleştiriyorsanız, yüksekliğin minimum yükseklikten daha büyük olduğundan emin olmanız gerekir. Aksi takdirde, yükseklik dikkate alınmaz. Aşağıdaki iki GIF'de farkı gerçek zamanlı olarak görebileceksiniz.

aşmıyor

aşıyor

Maksimum Yüksekliği Değiştirme

Maksimum yükseklik, minimum yüksekliği aşarsa ancak yükseklikten küçükse devralır. Örneğin, minimum yüksekliğe maksimum yükseklikten daha yüksek bir değer atarsanız, minimum yükseklik baskın olur.

Satırlar için Maksimum Genişliği Değiştirme

Web tasarımındaki en iyi uygulamalardan biri, tüm web siteniz için belirli bir maksimum genişliğe karar vermektir. Bu, her şeyin farklı ekran boyutlarında duyarlı görünmesini sağlamaya yardımcı olur. Ayrıca tasarımcıların doğru tel çerçeveler oluşturmasına yardımcı olur.

Global Maks Genişliği Değiştirme

Genel Ayarlar'a gidip Düzen Ayarları'na devam ederek Tema Özelleştirici'de içeriğiniz için belirli bir varsayılan maksimum genişlik ayarlayabileceğinizi bilmiyor olabilirsiniz. Maksimum genişliği kalıcı tutmak, yanıt vermeyi güçlendirmeye yardımcı olur.

Özellikle Bir Satır İçin Maksimum Genişliği Değiştirin

Yeni sürüklenebilir boyutlandırma güncellemesiyle, satırlar için ayrı ayrı maksimum genişlik tanımlama fırsatına da sahip olursunuz. Bu, daha yüksek bir maksimum genişlikle gitmenin daha mantıklı olduğu istisnalar için harikadır.

Modüllere Aynı Yüksekliği Vermek

Aklınızda bulundurmanız gereken başka bir teknik, benzer öğelere aynı yükseklikte vermeye odaklanır. Bu estetik açıdan göze hoş geliyor ve ziyaretçilerin içeriği kolayca taramasına yardımcı oluyor. Buna yaklaşmanın iki yaygın yolu vardır:

Sütun Ekolayzerini Kullanma

İlk yöntem Divi ile uzun süredir var olan bir yöntemdir. Satırınızdaki sütunların her biri için aynı yüksekliği oluşturmak istiyorsanız, sütununuzun boyutlandırma ayarlarında Sütun Ekolayzerini etkinleştirebilirsiniz. Sütun arka plan renkleri kullanıyorsanız, farkı hemen fark edeceksiniz.

Her Modüle Yükseklik Atama

Buna yaklaşmanın başka bir yolu, eklediğiniz modüllere önceden tanımlanmış bir yükseklik atamaktır.

Bir Modül İçindeki İçeriği Hizalama

Tüm modüllere bir yükseklik atadıktan sonra, içeriğin hizalanmasıyla da oynayabilirsiniz. Bunu yapmak için, bir modüldeki boşlukları manuel olarak belirlemek için özel dolguyu kullanabilir veya içeriği otomatik olarak hizalamak için birkaç satır CSS kodu kullanabilirsiniz.

display: flex;
flex-wrap: wrap;
align-content: center;

Tasarım Öğesi Yüksekliğini veya Genişliğini Seçme ve Taşmayı Kaydırmaya Dönüştürme

Yeni sürüklenebilir boyutlandırma seçenekleriyle yapabileceğiniz bir başka harika şey de taşmayı kaydırmaya dönüştürmek. Bu, kolayca sayfalarınızda yerden tasarruf etmenize ve ekstra etkileşim eklemenize yardımcı olacaktır. Bunun için iki adım var; öğeniz için bir yükseklik ayarlar ve görünürlük ayarlarında taşmayı değiştirir. Öğenizin yüksekliğini değiştirerek başlayın.

Ardından, öğenizin görünürlük ayarlarına gidin ve dikey taşmayı kaydırma olarak değiştirin.

Tüm Ekran Boyutlarında Tam Ekran Kahraman Bölümü Oluşturma

Bir sonraki ve son ipucuna! Tam ekran bir kahraman bölümü oluşturmak ister misiniz? Sayfanızdaki kahraman bölümünü açın, boyutlandırma ayarlarına gidin ve yüksekliği değiştirin. Her şeyin tüm ekran boyutlarında yanıt vermeye devam etmesini sağlamak için bunun için yükseklik görüntüleme alanı birimini kullanmanız önemlidir.

• Yükseklik: 100vh

İçeriği tam ekran kahraman bölümünüzde merkezi olarak hizalamak mı istiyorsunuz? Aşağıdaki özel CSS kod satırlarını da bölümünüzün ana öğesine ekleyin:

display: flex;
flex-wrap: wrap;
align-content: center;

Son düşünceler

Bu yazıda, Divi'nin sürüklenebilir boyutlandırma güncellemesiyle birlikte gelen yeni genişlik ve yükseklik seçeneklerini gözden geçirdik. Size nasıl çalıştıklarını ve oluşturduğunuz her tür web sitesi için duyarlı sayfa tasarımı oluşturmak için bunları nasıl kullanabileceğinizi gösterdik. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.