Divi’de paralelkenarlarla şık bir başlık tasarımı nasıl yapılır
Sayfanıza yeni bir başlık tasarımı eklemek, ziyaretçilerinizi etkilemenin etkili bir yoludur. Ve gölgeniz için benzersiz bir arka plan tasarlamak başlamak için iyi bir yerdir. Bu öğreticide, yaratıcı bir şekilde gradyan bir arka plan kullanarak başlık tasarımınıza paralelkenar eklemek için divi’yi nasıl kullanacağınızı göstereceğim. Bu, tasarıma geleneksel kutunun düzeninden ayrılan iyi bir doku öğesi ekler. Başlayalım. Aşağıdaki gizlice göz atacağımız tasarım ekranı.
Bu tasarımı yapmak için neye ihtiyacınız var, ana şeylere ihtiyacınız var:Divi teması
Sayfa Düzeni Hakkında İç Tasarım Şirketi (Divi Builder’ın içinden edinilebilir)
Bu öğretici için bir sayfa hazırlayın, yeni bir sayfada sayfa düzeni hakkında bir iç tasarım şirketi kullanacağım. WordPress kontrol panelinizi açın ve sayfa> Yeni Ekle’ye gidin. Ardından sayfanızın başlığını verin ve Divi Builder’ı kullanmak için tıklayın. Ardından görsel üreticiyi uygulamak için düğmeyi tıklayın. “Önceden Yapılmış Düzen Seç” seçeneğini seçin. Ardından iç tasarım düzen paketini arayın ve seçin. Hakkında sayfa düzenini seçin ve son olarak “Bu düzeni kullan” ı tıklayın. Sayfa sayfaya yüklendikten sonra, düzenlemeye başlamaya hazırsınız. Üst dolguyu çıkarın ve bu arka plan görüntüsünü değiştirin kolay bir ilk adımdır. Tek yapmanız gereken imleci sayfanın başlığının üstüne yönlendirmektir. Üst yatağın şu anda%10’a kadar düzenlendiğini göreceksiniz. %0’a kadar bir sürükleme dolgusu. Veya her zaman sayfa ayarlarını girebilir ve özel dolguyu da% 0 olarak ayarlayabilirsiniz. Arka plan görüntüsünü şu anda değiştirebilirsiniz, ancak bu gerekli değildir. Bunu yapmak için ayar ayarlarını açın ve içerik sekmesinin altındaki arka plan görüntüsünü değiştirin. Ardından arka plan gradyanını çıkarın. Bu, metnin (beyaz olacak) mobil cihazda okunması daha kolaydır, çünkü arka plan görüntülerine sahip bazı örtüşen metinler olacaktır. Bir sonraki satırın ve dolgunun boyutunu ayarlayın, satır ayarlarını açın ve tasarım sekmesinin altında, Aşağıdakileri güncelleyin: Özel genişliği kullanın: Evet Özel Genişlik:% 100 Özel Dolgu: Top 0px, 10vw’nin altında Bu ince tasarımı yapmak için gradyanın arka planını satır ve sütuna ekleyin, farklı bir başlangıç ve bitiş konumuyla örtüşen gradyanın bir arka planını yapacağız. Önce gradyanın arka planını satıra ve sonra sütuna eklememiz gerekir. İçerik sekmesinin altındaki satır ayarlarını açın ve arka planın sol rengi: #1A1A1A Sağ Renk Arka Plan Yasası: RGBA (255,255,255,0) Gradyan Yönü: 45deg Başlangıç Pozisyonu:% 60 Son Pozisyon: 0% Sütun 1 Arka Plan Sol Renk Gradyan: RGBA (244,88,63,0.83) Sütun 1 Arka Plan Gradyan Sağ Renk: RGBA (255,255,255.0) Gradyan Yön Sütunu: 45deg Başlangıç Konum Sütunu:% 66% Nihai Konum Sütunu: 0% Sütuna eklediğimiz turuncu gradyan, başlık tasarımımızdaki ilk paralelkenar için kullanılacaktır. Paralelkenar yapmak için turuncu gradyanını sağ tarafa uyacak şekilde 45 dereceye yatırılan sol tarafla kısaltmamız gerekiyor. Bunu harekete geçirmek için davet modülüne degradeler ekleyerek yapacağız. Metnin Boyutunu ve Davet Modülünün Alanını Ayarlama Arama Gradyanımızı Eylem Çağrısı Modülüne eklemeden önce, önce boşluk ve metin gücünü ayarlayalım. Tasarım Sekmesi: Metin Oryantasyonu: Sol Renk Metin: Işık Başlık Metin Boyutu: 4.5VW (Masaüstü), 42px (Tablet) Metin Renk Düğmesi: #1A1A1A Arka Plan Renk Düğmesi: #FFFFF genişliği:% 100 Yeniden Set -Set -set özel dolgu kenar boşluğu (Masaüstü): 10VW yukarı,% 5 sol,% 45 sağ özel dolgu (tablet):% 38 gerçek özel dolgu (akıllı telefon):% 5 doğru Şimdi modülümüze bir arka plan gradyanı ekleyebiliriz. Bu işlemi hızlandırmak için satır ayarlarını açın ve arka plan gradyanını sağlayın ve kopyalayın.
Ardından İçerik sekmesi altında hareket etme daveti için modül ayarlarını açın ve arka plan gradyanını modüle doğru tıklayın ve yapıştırın. Ardından başlangıç konumunu%47 olarak ayarlayın.
Gördüğünüz gibi, bu, benzersiz tasarım öğeleri için koyu gradyanların arka planına sahip örtüşen dikdörtgen bir etki yaratır.
Bu, mevcut olan gibi iyi bir tasarım olacak, ancak çizgimizin altında örtüşen ek paralelkenarlar ekleyerek devam edelim ve daha yaratıcı olalım. Başlık tasarımının son aşaması için boş metin modülü konseptini kullanarak ek bir paralelkenar yapmak, birleştirildiğinde, sağ tarafta bir “kutu” gösteren özel bir gradyanla iki metin modülü yan yana yapmayı içerir. ve sol. Bunu yapmak için, önce metin modülümüzü karşılamak için bir sütunun bir satırını yapmalıyız. Ardından modülümüzü yan yana durdurabilir ve konumlandırabiliriz. Doğrudan bir sütunun bir satırını doğrudan davet modülünü içeren parçanın altına aynı bölümde ekleyin. Ardından metin modülünü sol sütuna ekleyin ve metin modülünü aşağıdaki gibi güncelleyin: İçerik kutusundaki tüm içeriği silin (boş metin modülünü kullanacağız) Sol gradyan renk arka planı: RGBA (255,255,255.0) Sağ renk arka plan gradyanı: RGBA (RGBA (RGBA (RGBA (RGBA (RGBA ( 58, 80,107.0.83) Gradyan Yönü: 45DEG Başlangıç Pozisyonu:% 50 Son Pozisyon:% 0 Şimdi aşağıdaki tasarım sekmelerini ve güncellemeleri atlayın: Metin Satırı Yüksekliği: 0EM (bu istenmeyen boşlukları ortadan kaldıracaktır) Genişlik:% 50 Özel Kenar: -8VW üst, 0px Altında Özel Dolgu: Üst 8VW, 8VW’nin altında Ayarları kaydedin. Görsel yapımcıdan, modülü çoğaltın ve yeni modül için metin modülü ayarlarını şu şekilde güncelleyin: İmleci arka plan gradyan önizlemesine işaret edin ve gradyan rengini soldan sağa değiştirmek için “DEĞERLENME” simgesini tıklayın.Modül hizalaması: Doğru Özel Kenar: -16VW üst, 0px aşağıda Ayarları kaydedin. Artık modülümüz hizalandığına göre, modülümüzü konumlandırmak için çizgilerin düzenlemesini ayarlayabilir ve boyutlarını tasarıma uyacak şekilde değiştirebiliriz. Aşağıdaki satır ve güncelleme ayarlarını açın: Satır hizalaması: Sol Kullanın Özel Genişliği Kullan: Evet Özel Genişlik:% 45 Özel PARÇI:% 30 Kalan dolgu özel: 0px üst, 0 piksel aşağıda! Sonuç’a bakın. Burada tabletler ve akıllı telefonlarda. Son zihin Umarım bu tasarım tekniği, birkaç yalın paralelkenarını kendi başlık tasarımınıza birleştirmek için Divi gradyan arka plan seçeneğini nasıl kullanabileceğiniz konusunda biraz ilham verir. Ve elbette, bu tasarım başlık ile sınırlı değil. Bu tasarımın sizin için çalışacağı yeni bir alanı keşfetmekten çekinmeyin. Daha fazla ilham için, yol boyunca size yardımcı olabilecek hasarlı kafes tasarımının bazı sırlarına bakın. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
