Divi ile Satır Kenarlıklarını Yatay Olarak Örtüşme

Etkileşimli sayfa tasarımları oluşturmak her zaman kolay bir iş değildir. Kullanıcı deneyimine, tasarım ilkelerine ve tasarım trendlerine odaklanmanın yanı sıra, şirket markanıza uygun ve ziyaretçilerinizi ilk bakışta büyüleyen bir şey yaratmanız gerekiyor.

Blogumuzda arama yaparsanız, Divi ve Divi'nin çok yönlü yerleşik seçeneklerini kullanarak web tasarımınıza yaklaşmanın birçok yaratıcı yolunu bulacaksınız. Bugün, bu listeye başka bir yaratıcı yaklaşım ekliyoruz. Çarpıcı bir tasarım oluşturmak için sıra kenarlıklarını yaratıcı bir şekilde nasıl üst üste getireceğinizi göstereceğiz. Tüm ekran boyutlarında aynı tip tasarıma sahip olduğumuzdan emin oluyoruz.

Hadi hadi bakalım!

Youtube Kanalımıza Abone Olun

Ön izleme

Sıfırdan bir örnek oluşturacağız ancak konuya girmeden önce farklı ekran boyutlarında sonuca bir göz atalım.

Ücretsiz Mightype Yazı Tipi İndirin

Yapmanız gereken ilk şey, AF stüdyosunun ücretsiz Mightype elle yazılmış yazı tipini indirmek. Aşağıdaki bağlantıya gidin ve e-posta yoluyla ücretsiz indirmeyi etkinleştirin.

Yeni Bölüm Ekle

aralık

Önceki adımda bahsedilen ücretsiz yazı tipini indirdikten sonra devam edip yeni bir sayfa oluşturabilirsiniz. Bunu yaptıktan sonra Görsel Oluşturucu'yu etkinleştirin, yeni sayfanızın ilk bölümünü açın ve bazı özel dolgular ekleyin:

• Üst Dolgu: 250 piksel
• Alt Dolgu: 250px

Yeni Satır Ekle

Sütun Yapısı

Toplamda iki satıra ihtiyacımız olacak. İlki ile başlayacağız ve bittikten sonra onu 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ı

Henüz herhangi bir modül eklemeden, satır ayarlarınızı açın ve aşağıdaki sütun 1 gradyan arka planını ekleyin:

• Renk 1: #ffffff
• Renk 2: rgba(0,255,233.0,25)
• Sütun Gradyan Türü: Radyal
• Sütun Radyal Yönü: Sol
• Sütun Başlangıç ​​Konumu: %59
• Sütun Bitiş Konumu: %59
• Arka Plan Resminin Üstündeki Sütun Yer Gradyanı: Evet

Sütun 1 Arka Plan Deseni

Aşağıdaki kalıbı bilgisayarınıza kaydederek ve sütun 1 arka plan resminiz olarak yükleyerek devam edin:

Kalıbı yükledikten sonra aşağıdaki arka plan görüntüsü ayarlarından yararlanın:

• Sütun Arka Plan Resmi Boyutu: Gerçek Boyut
• Sütun Arka Plan Resmi Tekrarı: Boşluk

Satır Hizalama

Sağ Satır Hizalamasını da etkinleştirin.

boyutlandırma

Ayrıca bu satır için bazı özel Boyutlandırma ayarları kullanıyoruz:

• Özel Genişlik Kullan: Evet
• Özel Genişlik: 950 piksel

aralık

Daha sonra eklemeniz gereken Aralık değerleri şunlardır:

• Alt Kenar Boşluğu: 100 piksel
• Sağ Kenar Boşluğu: -30px (Tablet ve Telefon)
• Üst Dolgu: 0px
• Alt Dolgu: 0px

Sınır

Son olarak, sıranızın üstüne, soluna ve altına bir kenarlık ekleyin:

• Kenar Genişliği: 14px
• Kenar Rengi: #000000
• Sol Kenarlık Stili: Çift

Başlık Metin Modülü Ekle

H2 Kopyası Ekle

Artık modüllerimizi eklemeye başlayabiliriz! Bir başlık Metin Modülü ekleyin ve kopyanızın H2 olduğundan emin olun.

Arka plan rengi

Metin Modülüne beyaz bir arka plan rengi ekleyerek satırımızın sol kenarlığını keseceğiz.

Mightype Yazı Tipi Yükle

Bilgisayarınızda Mightype yazı tipini bulun ve yazı tipi listenizdeki yükle düğmesine tıklayarak yazı tipi kitaplığınıza yükleyin.

Mightype yazı tipi dosyasını seçin, yazı tipinize bir isim verin ve yazı tipi kitaplığınıza yükleyin.

H2 Metin Ayarları

Yeni yazı tipini 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 Metni Rengi: #000000
• Başlık 2 Metin Boyutu: 150px (Masaüstü), 100px (Tablet), 60px (Telefon)

aralık

Satır sınırlarıyla örtüşmesini istediğiniz modüllerin her biri için negatif kenar boşluğu eklemeniz gerekir. Bu negatif kenar boşluğu, yerleştirildiği satırı değil, yalnızca söz konusu modülü etkiler. Eklemeniz gereken olumsuz kenar boşluğu, kopyanızda kullanılan karakter sayısına bağlıdır.

• Üst Kenar Boşluğu: 200 piksel
• Alt Kenar Boşluğu: 100 piksel
• Sol Kenar Boşluğu: -%35
• Üst Dolgu: 50px
• Alt Dolgu: 50px

Karışım Modu

Ve Metin Modülü arka plan renginin sütun 1 arka planını değil, yalnızca satırın kenarlığını etkilediğinden emin olmak için, Filtreler ayarlarında 'Çarpma' Karışım Modunu etkinleştirin.

Açıklama Metni Modülü Ekle

Arka plan rengi

Metin Modülü başlığının hemen altına, beyaz arka plan rengiyle bir açıklama Metin Modülü ekleyin.

Metin Ayarları

Metin ayarlarına gidin ve bazı değişiklikler yapın:

• Metin Boyutu: 22px (Masaüstü), 18px (Tablet), 15px (Telefon)
• Metin Satır Yüksekliği: 1.8em
• Metin Yönü: Merkez

boyutlandırma

Bu Metin Modülünün Boyutlandırmasını daha sonra '%96'ya düşürün.

aralık

Biraz boşluk da ekleyin:

• Alt Kenar Boşluğu: 200 piksel
• Sol Kenar Boşluğu: -50%
• Üst Dolgu: 20px
• Alt Dolgu: 20px

Karışım Modu

Ve burada da 'Çarpma' Karışım Modunu kullanın.

Klon Satırı

İlk satırı değiştirmeyi bitirdik! Aynı sonucu oluşturalım ama sayfanın diğer tarafında. Kendimize biraz zaman kazandırmak için, zaten sahip olduğumuz satırı klonlayacağız ve yol boyunca bazı değişiklikler yapacağız.

Satır Ayarlarını Değiştir

Sütun 1 Gradyan Arka Planı

Değiştirmeniz gereken ilk şey, sütun 1 degrade arka planıdır:

• Renk 2: rgba(255.187,0.0.33)
• Sütun Radyal Yönü: Sağ

Satır Hizalama

Satırın diğer tarafta görünmesini istiyoruz, bu yüzden sol Satır Hizalama'yı seçeceğiz.

aralık

Aralık ayarlarını da düzenliyoruz:

• Sol Kenar Boşluğu: -%25 (Tablet ve Telefon)

Sınır

Satırınıza uygulanan sol kenarlığı kaldırın ve bunun yerine sağ tarafa uygulayın:

• Sağ Kenar Genişliği: 14px
• Sağ Kenar Rengi: #000000
• Sağ Kenar Stili: Çift

Başlık Metin Modülü Ayarlarını Değiştir

aralık

Daha sonra başlık Metin Modülünüzün Aralık ayarlarını değiştirin:

• Sol Kenar Boşluğu: %52 (Masaüstü ve Tablet), %58 (Telefon)
• Sağ Kenar Boşluğu: -%52 (Masaüstü ve Tablet), %58 (Telefon)

Açıklama Metni Ayarlarını Değiştir

aralık

Son olarak, Metin Modülü açıklamasının diğer bazı Aralık değerlerine de ihtiyacı vardır:

• Sol Kenar Boşluğu: %50
• Sağ Kenar Boşluğu: -50%

Ön izleme

Artık tüm farklı adımlardan geçtiğimize göre, farklı ekran boyutlarında nihai sonuca son bir göz atalım.

Son düşünceler

Divi'nin yerleşik seçeneklerini kullanarak üst üste binen satır sınırları, web sitenize aradığınız özelleştirme ve kişiselleştirmeyi getirebilir. Bu yazıda, size bunu tam olarak nasıl yapacağınızı gösterdik. Sıfırdan güzel bir örnek oluşturduk. Bu örnek tüm ekran boyutlarında harika görünüyor ve biz sadece Divi'nin yerleşik seçeneklerini kullandık! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!