Divi'de Benzersiz Geçişlerle Tam Bölünmüş Ekran Düzeni Nasıl Oluşturulur

Bölünmüş Ekran düzenleri, Divi web sitenize güzel bir şekilde dengelenmiş ve alışılmadık bir tasarım eklemenin harika bir yoludur. Divi'nin yeni konum seçenekleriyle, bitişik iki Divi bölümünü kullanarak bölünmüş ekran düzeni tasarımı oluşturabiliriz. Bu, Divi Builder'ı kullanarak daha da benzersiz bölünmüş ekran düzenleri oluşturmanın kapısını açar. Bu eğitimde, Divi'de benzersiz geçişlerle tam bir bölünmüş ekran düzeni oluştururken birkaç benzersiz tasarım özelliğini keşfedeceğiz.

Başlayalım.

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.

Aç/Kapat

Kapatılır

Mobil

Düzeni ÜCRETSİZ İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Düzeni sayfanıza aktarmak için zip dosyasını çıkarmanız ve JSON dosyasını Divi Builder'a sürüklemeniz yeterlidir.

Hadi öğreticiye geçelim, olur mu?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. “Sıfırdan Oluştur” seçeneğini seçin.

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Bölüm 1: İki Bölümlü Bölünmüş Ekran Düzeni Oluşturma

Bu tasarım için, bölünmüş ekran tasarımı oluşturmak için iki Divi bölümünü birbirine bitişik konumlandıran yeni bir teknik tanıtacağız. Başlamak için, varsayılan bölüme tek sütunlu bir satır ekleyin. Bu, ilk bölümümüzün tasarımını başlatacak.

Bölüm 1 Ayarlar

Bu iki bölümden ilki için, aşağıdaki tasarım ayarlarını ekleyerek başlayalım:

Arka plan

• Arka Plan Resmi Ekle
• Degrade Arka Plan Sol Renk: #ffffff
• Gradyan Arka Planı Sol Renk: rgba(255,255,255,0.45)

Boyut ve Aralık

Ardından, bölümün tarayıcı genişliğinin %50'sini ve tarayıcı yüksekliğinin %100'ünü kaplaması için boyutu ve aralığı güncelleyin.

• Genişlik: %50 (masaüstü), %100 (tablet ve telefon)
• Min Yükseklik: 900px (masaüstü), yok (tablet ve telefon)
• Yükseklik: 100vh (masaüstü), otomatik (tablet ve telefon)
• Dolgu: 0 piksel üst, 0 piksel alt

Üst Bölücü

• Üst Bölücü Stili: ekran görüntüsüne bakın
• Üst Bölücü Rengi: #333333
• Üst Bölücü Yüksekliği: 50vh (masaüstü), 10vh (tablet ve telefon)
• Üst Bölücü Yatay Tekrar: 0,5x (masaüstü), 1x (tablet ve telefon)
• Üst Bölücü Düzenlemesi: Bölüm İçeriğinin Altında

Alt Bölücü

• Alt Bölücü Stili: ekran görüntüsüne bakın
• Alt Bölücü Rengi: #02c39a
• Alt Bölücü Yüksekliği: 50vh (masaüstü), 30vh (tablet ve telefon)
• Alt Bölücü Yatay Tekrar: 0,5x (masaüstü), 1x (tablet ve telefon)
• Alt Bölücü Düzenlemesi: Bölüm İçeriğinin Altında

Bölüm 2

Bölüm 1'i Çoğalt

Bölünmüş ekran düzeninin sağ tarafını kaplayacak bitişik bölümü oluşturmak için bölüm 1'i çoğaltın.

Ardından ayarları aşağıdaki gibi güncelleyin:

Konum

• Konum: Mutlak (masaüstü), akraba (tablet ve telefon)
• Konum: Sağ Üst
• Z İndeksi: 10

Arka plan

• Arka Plan Rengi: yok/beyaz

En İyi Bölücü Güncellemeleri

• Üst Bölücü Stili: ekran görüntüsüne bakın
• Üst Bölücü Rengi: #02c39a
• Üst Bölücü Yatay Tekrar: 1x
• Üst Bölücü Çevirme: Dikey

Ayırıcı, bölüm 1'deki bitişik üst başlıkla mükemmel şekilde hizalanmalıdır.

Alt Bölücü

• Alt Bölücü Stili: ekran görüntüsüne bakın
• Alt Bölücü Rengi: #f0f3bd
• Alt Bölücü Yatay Tekrar: 1x
• Alt Bölücü Çevirme: Dikey

Bölüm 2: Bölüm 1 Başlık ve Menü

Artık iki bölümlü düzenler hazır olduğuna göre, bölümlerin her birine içerik eklemeye başlayabiliriz.

Başlık Oluşturma

Başlamak için sol bölümde büyük bir başlık oluşturacağız.

Satır Ayarları

Bir metin modülü eklemeden önce bölüm 1'deki satır için satır ayarlarını aşağıdaki gibi güncellememiz gerekiyor:

• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100
• Dolgu: 0 piksel üst, 0 piksel alt, %10 sağ
• Konum: Mutlak (masaüstü), akraba (tablet ve telefon)
• Konum: Orta Sol

Metin Modülü

Satır ayarları yapıldıktan sonra, satır bölüm içinde dikey olarak hizalanmalıdır. Ardından, satıra yeni bir metin modülü ekleyin.

Metin içeriği

Metin modülünün ayarlarını açın ve aşağıdaki içeriği güncelleyin:

<h1>Divi <br />Web <br />Design</h1>

Metin Tasarımı

Ardından metin tasarımı ayarlarını aşağıdaki gibi güncelleyin:

• Başlık Yazı Tipi: Poppins
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Metni Hizalama: Sağ
• Başlık Metni Boyutu: 10vw
• Yön Çizgisi Yüksekliği: 1.2em
• Dolgu: %5 Sol

Menü Oluşturma

Bu düzen için iki bitişik bölümümüz olduğundan, bölümlerden birine veya her ikisine 6 sütun düzeni ekleme imkanımız var. Bu, bölümün altında güzel bir simge menüsü oluşturmak için harikadır.

İşte bunu nasıl yapacağınız…

Yeni Satır Ekle

Alt menüyü oluşturmak için bölüm 1'deki satırın altına yeni bir tek sütunlu satır ekleyin. İlk olarak tek sütunlu bir düzen ekliyoruz çünkü daha sonra altı sütunun tamamını oluşturmak için sütunu çoğaltacağız.

Satır Ayarları

Ardından aşağıdaki satır ayarlarını güncelleyin:

• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100
• Dolgu: 0px Üst, 0px Alt
• Konum: Mutlak (masaüstü), Göreceli (tablet ve telefon)
• Konum: Sol Alt
• Z İndeksi: 3

Bulanıklık Modülü

Ardından, yeni satıra bir tanıtıcı modül ekleyin.

Bulanık İçerik

Ardından, tanıtıcı içeriği aşağıdaki gibi güncelleyin:

• Başlık: İş
• Simge: Binalar

Bulanık Şekillendirme

Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin:

• Simge Rengi: #333333
• Simge Yazı Tipi Boyutu: 40px
• Metin Hizalama: Merkez
• Başlık Metin Boyutu: 12px

Ardından, Blurb Image'a aşağıdaki özel CSS'yi ekleyin

margin-bottom: 10px;

Yinelenen Sütun

Artık birinci sütundaki simgemizi tasarladığımıza göre, tüm sütunu 5 kez çoğaltarak diğer 5 simgenin oluşturulmasını ve tasarımını hızlandırabiliriz.

Bulanıklıklar İçin İçeriği Güncelle

6 sütunun/simgenin tümü oluşturulduktan sonra geri dönün ve her bir tanıtım yazısı için başlığı, simgeyi ve URL'yi güncelleyin.

Bölüm 3 Bölüm 2 Geçişler

Artık bölüm 1 tamamlandığında, bölünmüş ekran düzenimizin sağ bölümüne geçişleri eklemeye başlayabiliriz. Soldaki her başlıkta büyük kelimelere karşılık gelen toplam üç geçiş olacaktır. Geçişlerin her birine, masaüstünde onları yerinde tutacak özel bir mutlak konum verilecektir.

Satır Ayarları

Geçiş modüllerini eklemeye başlamadan önce, satırın boyutunu ve aralığını optimize etmemiz gerekiyor. Sağ bölümdeki satır için satır ayarlarını açın ve aşağıdakileri güncelleyin:

• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100 (Masaüstü), yok (tablet ve telefon)
• Yükseklik: %100

Sütun Yüksekliği

Şimdi satır, bölüm yüksekliğine eşit bir yüksekliğe sahip olduğuna göre, sütun için de aynısını yapmamız gerekiyor. Bunu yapmak için, sütunun ana öğesine aşağıdaki özel CSS'yi ekleyin:

height: 100%;

Üst Geçiş Modülü

Sütun yüksekliği yerindeyken, ilk geçiş modülünü satıra ekleyelim.

İçeriği Aç/Kapat

Ardından, geçiş içeriğini “Divi” başlığıyla güncelleyin ve aşağıdaki gövde içeriğini yapıştırın:

Your content goes here. Edit or remove this text inline or in the module Content settings. Your content goes here.

<a href="#">| Learn More ></a>

Tasarımı Değiştir

Geçiş tasarımını aşağıdaki gibi güncelleyin:

• Simge Rengi: #333333
• Simge Yazı Tipi Boyutu: 40px
• Arka Plan Rengini Aç/Kapat: şeffaf
• Arka Plan Rengini Kapalı Değiştir: şeffaf
• Başlık Metni Rengini Açın: #333333
• Başlık Metin Rengi: #333333
• Başlık Yazı Tipi: Poppins
• Başlık Yazı Tipi Ağırlığı: Ultra Hafif
• Başlık Metin Boyutu: 40px
• Gövde Metni Rengi: #333333
• Bağlantı Yazı Tipi Ağırlığı: #333333
• Bağlantı Yazı Tipi Ağırlığı: Kalın
• Bağlantı Yazı Tipi Stili: TT
• Bağlantı Metni Rengi: #333333
• Bağlantı Harfi Aralığı: 3px (masaüstü), 5px (fareyle üzerine gelin)

Boyutu ve Konumu Aç/Kapat

• Genişlik: %50 (masaüstü), %80 (tablet ve telefon)
• Maksimum Genişlik: 400 piksel
• Kenar Genişliği: 0px
• Simge Özel CSS'yi Aç/Kapat:

  left:-60px;

• Konum: Mutlak (masaüstü), Göreceli (tablet ve telefon)
• Dikey Ofset: %22
• Yatay Ofset: %50
• Z İndeksi: 2

Geçiş modülüne eklenen özel CSS, geçiş simgesini geçişin sol boyutuna yerleştirir. Ve konum ayarları, tarayıcı genişliği ile ölçeklenecek olan yüzde uzunluk birimini kullanarak geçişi mutlak bir konuma yerleştirir.

Alt Geçiş Modülü

Yinelenen Üst Geçiş

Alt geçişi oluşturmak için, az önce oluşturulan geçişi çoğaltın.

Pozisyonu Güncelle

Ardından, katmanlar kutusunu kullanarak yinelenen geçiş ayarlarını açın ve konum ofsetini aşağıdaki gibi güncelleyin:

• dikey ofset: %70

Orta Geçiş Modülü

Alt Geçişi Çoğalt

Orta geçişi oluşturmak için alt geçişi çoğaltın.

Pozisyonu Güncelle

Ardından aşağıdakileri güncelleyin:

• Konum: Sol Merkez
• Yatay Ofset: 19 piksel

Boyutu Güncelle

• Genişlik: %95
• Maksimum Genişlik: 500 piksel

Özel CSS

İsteğe bağlı bir tasarım özelliği için, başlığın sağındaki metni hizalamak için ana öğeye özel bir CSS parçacığı ekleyebiliriz.

Bunu yapmak için aşağıdaki CSS'yi Ana Öğeye yapıştırın:

display:flex;
align-items:center;

Bölücü Çizgiler

Artık geçişlerimiz yerinde olduğuna göre, üst ve alt geçişleri sol bölümdeki karşılık gelen kelimeyle birleştirmek için birkaç ayırıcı çizgi ekleyebiliriz.

Üst Bölücü Modülü

Üst ayırıcı çizgiyi oluşturmak için üst düğmenin altına yeni bir ayırıcı modül ekleyin.

Bölücü Tasarımı

Ardından, ayırıcı tasarım ayarlarını aşağıdaki gibi güncelleyin:

• Çizgi Rengi: #333333
• Çizgi Konumu: Dikey Ortalanmış
• Bölücü Ağırlığı: 2px
• Genişlik: %50
• Y Eksenini Dönüştür: 29 piksel
• Dönüştürme X Eksenini Çevir: -12 piksel
• Animasyon Stili: Slayt
• Animasyon Yönü: Sağ
• Animasyon Süresi: 2000ms
• Animasyon Yoğunluğu: %10
• Animasyon Opaklığı Başlatma: %100

Bölücü Görünürlüğü ve Konumu

Şimdi tek yapmamız gereken, bölücüyü mobil cihazda gizlemek ve üstteki açma/kapama düğmesiyle aynı hizaya gelecek şekilde konumlandırmak.

• Devre dışı bırak: Telefon ve Masaüstü
• Pozisyon: Mutlak
• Dikey Ofset: %22
• Z İndeksi: 1

Alt Bölücü Modülü

Yinelenen Üst Bölücü Modülü

Alt bölücüyü oluşturmak için üst bölücü modülünü çoğaltın.

Pozisyonu Güncelle

Ardından, alt toggle ile hizalanacak şekilde konum ofsetini güncelleyin:

• Dikey Ofset: %70

Son sonuç

Tamamlandığında, canlı sayfadaki nihai sonucu kontrol edin.

Aç/Kapat

Kapatılır

Mobil

Son düşünceler

Bu tam bölünmüş ekran düzeni, ileriye dönük birçok tasarım için kullanışlı olacak birkaç benzersiz tasarım tekniğine sahiptir. İkili bölümler, sayısız kolon kombinasyonu ve bölüm bölücü tasarımları sunar. Ve geçişleri yerleştirme yeteneği, önemli bilgilerin kesin olarak yerleştirilmesi için kesinlikle kullanışlı olacaktır. Umut ediyorum bu yardım eder!

Yorumlarda sizden haber bekliyorum.

Şerefe!