Divi'de Paralelkenarlarla Şık Bir Başlık Tasarımı Nasıl Oluşturulur

Sayfanıza şık ve yeni bir başlık tasarımı eklemek, ziyaretçilerinizi şaşırtmanın etkili bir yoludur. Başlığınız için benzersiz bir arka plan tasarlamak, başlamak için harika bir yerdir. Bu eğitimde, yaratıcı şekillerde gradyan arka planları kullanarak başlık tasarımınıza paralelkenarlar eklemek için Divi'yi nasıl kullanacağınızı göstereceğim. Bu, geleneksel kutu düzeninden ayrılan tasarıma hoş bir dokusal öğe ekler.

Başlayalım.

Gizlice Bakış

İşte inşa edeceğimiz tasarıma bir bakış.

Neye ihtiyacınız olacak

Bu tasarımı oluşturmak için ana şeylere ihtiyacınız olacak:

1. Divi Teması
2. The Interior Design Company Sayfa Düzeni Hakkında (Divi Builder'dan edinilebilir)

Sayfayı Ayarla

Bu eğitim için, İç Tasarım Şirketi Sayfa Düzeni Hakkında'yı yeni bir sayfada kullanacağım. WordPress Kontrol Panelinize gidin ve Sayfalar > Yeni Ekle'ye gidin. Ardından sayfanıza bir başlık verin ve Divi Builder'ı kullanmak için tıklayın. Ardından görsel oluşturucuyu dağıtmak için düğmeye tıklayın. “Hazır Düzen Seçin” seçeneğini seçin. Ardından Interior Design Layout Pack'i bulun ve seçin. Hakkında sayfa düzenini seçin ve son olarak “Bu Düzeni Kullan”a tıklayın.

Sayfa sayfaya yüklendikten sonra düzenlemeye başlamaya hazırsınız.

Bölümün Üst Dolgusunu Çıkarın ve Arka Plan Resmini Değiştirin

Bu kolay bir ilk adımdır. Tek yapmanız gereken, sayfanın üst başlık bölümünün üst kısmının üzerine gelmek. Mevcut üst dolgunun %10 olarak ayarlandığını göreceksiniz. Dolguyu %0'a sürüklemeniz yeterlidir. Veya her zaman sayfa ayarlarına gidebilir ve özel üst dolguyu da %0'a ayarlayabilirsiniz.

Bu noktada arka plan resmini de değiştirebilirsiniz, ancak bu gerekli değildir. Bunu yapmak için, bölüm ayarlarına gidin ve içerik sekmesi altındaki arka plan görüntüsünü değiştirin. Ardından arka plan gradyanını çıkarın. Bu, arka plan resmiyle örtüşen bazı metinler olacağından, metnin (beyaz olacak) mobil cihazlarda daha okunabilir olmasına yardımcı olacaktır.

Satır Boyutunu ve Dolguyu Ayarlayın

Ardından, satır ayarlarına gidin ve Tasarım sekmesi altında aşağıdakileri güncelleyin:

Özel Genişlik Kullan: EVET
Özel Genişlik: %100
Özel Dolgu: 0px Üst, 10vw Alt

Satır ve Sütuna Degrade Arka Planı Ekleme

Bu şık tasarımı oluşturmak için farklı başlangıç ​​ve durma konumlarına sahip üst üste binen degrade arka planlar yapacağız. Önce satıra ve ardından sütuna bir gradyan arka planı eklememiz gerekiyor.

İçerik sekmesi altındaki satır ayarlarına gidin ve aşağıdakileri güncelleyin:

Arka Plan Gradyanı Sol Renk: #1a1a1a
Arka Plan Gradyanı Sağ Renk: rgba(255,255,255,0)
Gradyan Yönü: 45deg
Başlangıç ​​Konumu: %60
Bitiş Konumu: %0

Sütun 1 Arka Plan Gradyanı Sol Renk: rgba(244,88,63,0.83)
Sütun 1 Arka Plan Gradyanı Sağ Renk: rgba(255,255,255,0)
Sütun Gradyan Yönü: 45deg
Sütun Başlangıç ​​Konumu: %66
Sütun Bitiş Konumu: %0

Sütuna eklediğimiz turuncu gradyan, başlık tasarımımızda ilk paralelkenar için kullanılacaktır. Paralelkenarı oluşturmak için, turuncu gradyanı, sağ tarafla eşleşmesi için 45 derece açılı bir sol tarafla kısaltmamız gerekiyor. Bunu, eylem çağrısı modülüne bir degrade ekleyerek yapacağız.

Harekete Geçirici Mesaj Modülünün Metin Boyutunu ve Aralığını Ayarlama

Eylem çağrısı modülüne arka plan gradyanımızı eklemeden önce, önce boşluk ve metin stillerini çevirelim.

Eylem çağrısı modülü ayarlarına gidin ve Tasarım Sekmesi altında aşağıdakileri güncelleyin:

Metin Yönü: Sol
Metin Rengi: Açık
Başlık Metin Boyutu: 4.5vw (masaüstü), 42px (tablet)
Düğme Metin Rengi: #1a1a1a
Düğme Arkaplan rengi: #ffffff
Genişlik: %100
Kenar Boşluklarını Sıfırla
Özel Dolgu (masaüstü): 10vw üst, %5 sol, %45 sağ
Özel Dolgu (tablet): %38 sağ
Özel Dolgu (akıllı telefon): %5 sağ

Artık modülümüze arka plan gradyanımızı ekleyebiliriz. Bu işlemi hızlandırmak için satır ayarlarına gidin ve sağ tıklayın ve satırın arka plan gradyanını kopyalayın.

Ardından, içerik sekmesinin altındaki eylem çağrısı modülü ayarlarına gidin ve arka plan gradyanını sağ tıklayıp modüle yapıştırın. Ardından başlangıç ​​konumunu %47'ye ayarlayın.

Gördüğünüz gibi, bu, benzersiz bir tasarım öğesi için koyu gradyan arka planıyla örtüşen uzun açılı bir dikdörtgenin etkisini yaratır.

Bu, şu anki haliyle harika bir tasarım olurdu, ancak devam edelim ve sıramızın alt kısmıyla örtüşen ek bir paralelkenar ekleyerek daha da yaratıcı olalım.

Boş Metin Modüllerini Kullanarak Ek Paralelkenar Oluşturma

Başlık tasarımının bu son aşamasının konsepti, birleştirildiğinde sağ ve solda eşit açılı kenarları olan tek bir "kutu" gösteren, her biri özel bir gradyan ile yan yana iki metin modülü oluşturmayı içerir. Bunu yapmak için önce metin modüllerimizi tutacak tek sütunlu bir satır oluşturmalıyız. Ardından modüllerimizi yan yana duracak şekilde boyutlandırabilir ve konumlandırabiliriz.

Aynı bölüm içindeki harekete geçirici mesaj modülümüzü içeren bölümün hemen altına tek sütunlu bir satır ekleyin.

Ardından sol sütuna bir metin modülü ekleyin ve metin modülünü aşağıdaki gibi güncelleyin:

İçerik kutusundaki tüm içeriği sil (boş bir metin modülü kullanacağız)
Arka Plan Gradyanı Sol Renk: rgba(255,255,255,0)
Arka Plan Gradyanı Sağ Renk: rgba(58,80,107,0.83)
Gradyan Yönü: 45deg
Başlangıç ​​Konumu: %50
Bitiş Konumu: %0

Şimdi tasarım sekmesine atlayın ve aşağıdakileri güncelleyin:

Metin Satırı Yüksekliği: 0em (bu, istenmeyen boşlukları ortadan kaldırır)
Genişlik: %50
Özel Kenar Boşluğu: -8vw Üst, 0px Alt
Özel Dolgu: 8vw Üst, 8vw Alt

Ayarları kaydet.

Görsel oluşturucudan modülü çoğaltın ve yeni modül için metin modülü ayarlarını aşağıdaki gibi güncelleyin:

Fareyle arka plan degrade önizlemesinin üzerine gelin ve degrade renklerini soldan sağa değiştirmek için "Degrade Değiştir" simgesine tıklayın.

Modül Hizalaması: Sağ
Özel Kenar Boşluğu: -16vw Üst, 0px Alt

Ayarları kaydet.

Artık modüllerimizi hizaladığımıza göre, modüllerimizi konumlandırmak için satır ayarlarını düzenleyebilir ve tasarıma uyacak şekilde yeniden boyutlandırabiliriz. Satır ayarlarını açın ve aşağıdakileri güncelleyin:

Satır Hizalama: Sol
Özel Genişlik Kullan: EVET
Özel Genişlik: %45
Özel Marj: %30 kaldı
Özel Dolgu: 0px Üst, 0px Alt

Bu konuda yapar! Nihai sonuçlara göz atın.

İşte tablet ve akıllı telefonda.

Son düşünceler

Umarım bu tasarım tekniği, bazı şık paralelkenarları kendi başlık tasarımınıza dahil etmek için Divi'nin gradyan arka plan seçeneklerini nasıl kullanabileceğiniz konusunda size biraz ilham verir. Ve elbette, bu tasarım başlıklarla sınırlı değil. Bu tasarımın işinize yarayacağı yeni alanları keşfetmekten çekinmeyin. Daha fazla ilham almak için, yol boyunca size yardımcı olabilecek bazı kırık ızgara tasarım sırlarına göz atın.

Yorumlarda sizden haber bekliyorum.

Şerefe!