Sıra sınırının divi ile yatay olarak nasıl örtüşmesi
Etkileşime giren bir sayfa tasarımı yapmak her zaman kolay bir iş değildir. Kullanıcı deneyimi, tasarım ilkeleri ve tasarım eğilimlerine odaklanmanın yanı sıra, şirketinizin markasına uygun ve ilk bakışta ziyaretçilerinizi çeken bir şey yapmanız gerekir. Blogumuza göz atarsanız, çok yönlü bir Divi ve Divi varsayılan seçeneklerini kullanarak web tasarımınıza yaklaşmanın birçok yaratıcı yolunu bulacaksınız. Bugün, listeye başka bir yaratıcı yaklaşım ekledik. İnanılmaz tasarımlar oluşturmak için sıra sınırlarını yaratıcı bir şekilde nasıl üst üste getireceğinizi göstereceğiz. Tüm ekran boyutlarında aynı tür tasarıma sahip olduğumuzdan emin oluruz.
Haydi Yapalım şunu! YouTube kanal önizlememize abone olun Başından beri bir örnek vereceğiz, ancak dalış yapmadan önce farklı ekran boyutlarında sonucuna bakalım.
Üst dolgu: 250 piksel
Dolgu Alt: 250 piksel Sütun yapımızın yeni bir satırı ekleyin, toplam iki sıra gerektirecektir. İlkiyle başlayacağız ve bitirdikten sonra klonlayacağız. Aşağıdaki sütun yapısını kullanarak bölümünüze yeni bir satır ekleyin: Sütun 1 Gradyan Arka Plan herhangi bir modül eklemeden, satır ayarlarınızı açın ve sütun 1 degradının aşağıdaki arka planını ekleyin: Renk 1: #ffffff
Renk 2: RGBA (0.255,233.0.25)
Sütun gradyan tipi: radyal
Radyal sütun yönü: sol
İlk Konum Sütunu:% 59
Sütun Final Konumu:% 59
Sütun Gradyanı arka planın üzerine yerleştirin.
Arka Plan Deseni Sütun 1 Aşağıdaki deseni bilgisayarınıza saklayarak ve sütun 1’inizin arka plan görüntüsü olarak yükleyerek devam edin: Deseni yükledikten sonra, aşağıdaki arka plan görüntü ayarlarından yararlanın: Sütun Arka Plan Görüntü Boyutu: Gerçek Boyut
Arka Plan Görüntü Sütunu Tekrar: Alan
Satır hizalaması da sağ sıra hizalaması etkinleştirilir. Yapıştırıcımız ayrıca bu çizgi için bazı özel boyut ayarları kullanır: Özel genişlik kullanın: evet
Özel genişlik: 950px
Bu mesafe, bir sonraki eklemeniz gereken alan değeridir: Alt kenar boşluğu: 100 piksel
Sağ kenar boşluğu: -30px (tablet ve cep telefonu)
Üst dolgu: 0px
Aşağıda dolgu: 0px
Son fakat en az değil, sınırları satırınızın üst, sol ve altına ekleyin: Sınır Genişliği: 14 piksel
Sınır rengi: #000000
Sol sınır kuvveti: çift
Metin Modülü Başlık Ekle H2’nin bir kopyasını ekleyin Şimdi modülümüzü eklemeye başlayabiliriz! Metin modülünün başlığını ekleyin ve kopyanızın H2 olduğundan emin olun. Arka plan rengimiz, metin modülüne beyaz bir arka plan rengi ekleyerek sol çizgimizi kesintiye uğratacaktır. Mightype Yazı Tipi Yükle Bir sonraki bilgisayarınızda Mightype yazı tipini bulun ve yazı tipi listenizdeki Yükle düğmesini tıklayarak yazı tipi kitaplığınıza yükleyin. Mightype yazı tipi dosyasını seçin, yazı tipinizi adlandırın ve yazı tipi kitaplığınıza yükleyin. H2 Metin Ayarları Yeni bir yazı tipi ekledikten sonra, devam edin ve H2 metin ayarlarında başka değişiklikler yapın: Başlık 2 Yazı Tipi: Mightype Başlık Metin Rengi: #000000
Başlık 2 Metin Boyutu: 150 piksel (masaüstü), 100 piksel (tablet), 60px (telefon)
Çizgi limiti ile örtüşmek istediğiniz her modül için mesafe, negatif bir marj eklemeniz gerekir. Bu negatif marj, modülün yerleştirildiği sırayı değil, yalnızca ilgili modülü etkileyecektir. Eklemeniz gereken negatif marj, kopyanızda kullanılan karakter sayısına bağlıdır.
Üst kenar boşluğu: 200px
Sol kenar boşluğu:% -35
Üst dolgu: 50 piksel
Dolgu Alt: 50 piksel
Karışık mod ve metin modülünün arka plan renginin yalnızca Sütun 1’in arka planını değil, yalnızca satır sınırını etkilediğinden emin olmak için filtre ayarlarındaki ‘çarpma’ karışım modunu etkinleştirin.
Arka Plan Rengi Açıklama Metin Modülünü Metin Modülünün başlığının hemen altına ekleyin, devam edin ve beyaz arka plan rengine sahip metin modülünün bir açıklamasını ekleyin. Metin Ayarları Metin ayarlarını açın ve bazı değişiklikler yapın: Metin boyutu: 22px (masaüstü), 18px (tablet), 15px (telefon) Yüksek çizgi metin: 1.8em
Metin Oryantasyonu: Orta
Yapıştırıcı, bu metin modülünün boyutunu daha sonra ‘%96’ya düşürür.
Mesafe de bazı boşluklar ekleyin: Alt kenar boşluğu: 200px Sol kenar boşluğu: -50
Üst dolgu: 20px
Dolgu Alt: 20 piksel
Karışık mod ve burada da ‘çarpma’ karışım modunu kullanın.
Klon çizgimiz ilk satırı değiştirmeyi bitirdi! Aynı sonuçları yapalım ama diğer taraftan sayfa. Zamandan tasarruf etmek için, zaten sahip olduğumuz çizgileri klonlayacağız ve yol boyunca bazı değişiklikler yapacağız. Sütun Satırı Ayarlarını Değiştir 1 Arka Plan Gradyanı Değiştirmeniz gereken ilk şey sütun gradyasının arka planıdır 1: Renk 2: RGBA (255,187,0,0.33) Radyal sütun yönü: doğru Öte yandan sıraya girmek istiyoruz, bu yüzden sol sıra hizalamasını seçeceğiz.
Mesafemiz de boşluk ayarlarını ayarlar:
Sol kenar boşluğu:% -25 (tablet ve cep telefonu) Sınır Satırınıza uygulanan sol sınırı silin ve bunun yerine sağ tarafa uygulanır: Sağ sınır genişliği: 14px
Sağ kenar renk: #000000 Sağ Sınır Kuvvetleri: Çift
Ayarları Değiştir Metin Modülü Başlık Mesafe Bir sonraki başlık metin modülünüzden Alan Ayarlarını Değiştir:
Sol kenar boşluğu:% 52 (masaüstü ve tablet),% 58 (telefon)
Sağ kenar boşluğu:% -52 (masaüstü ve tablet),% 58 (telefon) Metin Ayarlarını Değiştirin Açıklama Son fakat en az değil Mesafe Açıklama, metin modülünün açıklaması da diğer birkaç boşluk değeri gerektirir:
Sol kenar boşluğu:% 50
Doğru marj: -50% Önizleme Şimdi tüm farklı adımlardan geçtikten sonra, farklı ekran boyutlarındaki nihai sonuçlara bakalım.
Varsayılan Divi seçeneğini kullanarak üst üste binen satır satırının sonu, web sitenizin aradığınız özelleştirme ve kişiselleştirmesini yapabilir. Bu yazıda size nasıl yapılacağını gösterdik. Başından beri güzel bir örnek aldık. Bu örnek tüm ekran boyutlarında iyi görünüyor ve yalnızca varsayılan Divi seçeneğini kullanıyoruz! Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
