Varsayılan ayarları kullanarak elde edebileceğiniz 5 Yaratıcı Divi başlık modülü stili
Kutunun dışında, Divi başlık modülü sadece birkaç ayarla çarpıcı bir başlık tasarımı yapabilir. Bu, Divi’de web siteniz için başlığı tasarlarken çok popüler bir modül haline getirir. Biraz kullanıma hazır düşünerek, sadece varsayılan ayarları (özel CSS olmadan) kullanarak çok benzersiz tasarımlar yapabilirsiniz. Bu yüzden bazı yeni başlık tasarımlarını keşfetmek isteyenler için size ilham verebilecek 5 Divi başlık modülü stilini göstereceğim. Zevk almak! 5 Divi Başlık Modülü Stil #1’den Sneak Peek: Özet Gradyan
Stil #1 tasarlamaya başlayınStil #2: Üç kez tehdit Tasarım Kuvvetleri #2 Stil #3: Yuvarlak Çerçeve #3 Kuvvet #4: Karışım Sol Kişi Tasarlamaya Başlayın Stil #4 Kuvvet #5: Büyük Ölçeklendirme Türünü tasarlamaya başlayın Stil #5 Tasarlamaya Başlayın Başlamak için neye ihtiyacınız var, bir divi temasına ihtiyacınız var. Önde bir tasarım oluşturmak için Divi Builder’ı kullanacağım. Ayrıca öğreticiyi tamamlamak için bazı resimlere ihtiyacınız olacak. Daha önce yapılan düzen görüntülerini her zaman içe aktarabileceğinizi unutmayın. Aslında, bu öğretici için, Temizlik Şirketi Düzeni Paketi, İş Koçu Düzeni Paketi ve Web Serbest Bakıcı Düzen Paketinden görüntüleri kullanacağım.
Başlayalım! YouTube Kanal Stilimize Abone Ol #1: Özet Gadient Bu ilk Divi başlık modülünün tasarımı, gradyan arka planı yaratıcı bir şekilde kullanan basit ve çok yönlü bir tasarımdır. Başlamak için, tam genişlikli bir başlık modülüne sahip yeni bir tam genişlik parçası ekleyin. Başlık ayar içeriğini yeni başlık ve başlık görüntüsü ile güncelleyin. Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin: Yazı tipi başlık: Lato Metin Boyutu Başlık: 6VW Tek Renkli Arka Plan Düğmesi: #0C71C3 Tek Genişlik Düğmesi Sınırı: 0PX Dolgu Özel: 8VW Top, 8VW Aşağıdaki Arka Plan Parçaları Eklemeden Önce Şeffaf Başlık Yapmalıyız arka plan modülü ve sağ alt köşede daire şeklimizi yapmak için özel gradyanlar sağlar. İçerik sekmesine geri dönün ve arka planı aşağıdaki gibi güncelleyin: Arka plan rengi: RGBA (255,255,255.0) Sol renk gradyan Arka Plan: #0096EB Sağ Renk Arka Plan Gradyan: RGBA (255,255,255.0) Gradyan Türü: Radyal radyal yön: alt sağ başlangıç pozisyonu: 0% nihai pozisyon:% 0
Arka plan tasarımımızı başlık modülümüzün arkasındaki parçaya eklememiz gereken sonraki ayarları kaydedin. Bunu yapmak için, aşağıdaki bölüm ayarlarını açın ve aşağıdakileri güncelleyin: Arka planın sol rengi gradyan: #0096EB Sağ renk gradyan arka plan: #007EA1 Gradyan Türü: Radyal radyal yön: sol üst başlangıç konumu:% 43 Nihai Konum: 0% Tasarım İpucu: Kendi gradyan başlığınızı denemek için bazı renkler arıyorsanız, kullanabileceğiniz başlık görüntüsünde/grafiklerinde kullanılan renkleri çizmenizi öneririm. Soyut arka planımıza başka ince tasarım öğeleri eklemek için üst ve alt böcekleri ekleyebiliriz. Bunu yapmak için tasarım sekmesini açın ve aşağıdaki bölücüyü ekleyin: Üst Bölü Kuvvetleri: Üst bölücünün üst ekran yakalamasına bakın: RGBA (150.210.210,0.2) Üst bölücünün yüksekliği: 8VW Üst bölücünün yatay tekrarlama: 0.7x Üst bölücü: Dikey Kuvvet: Dikey Kuvvet Alt bölücü: Bkz. Alt ekran yakalama: RGBA (150.210.210,0.2) Alt bölücü Yükseklik: 10VW Yatay Tekrar Alt Bölme: 0.5x Arka Alt Bölme: Verticalitu He! Son tasarıma bakın. Stil #2: Üç kez tehdit Bir sonraki Divi başlık modül kuvveti, iki düğme ve kaydırma simgeleri de dahil olmak üzere üç davetiye harekete geçecek. Düğme simgesinin bir kaydırma simgesiyle eşleştirilmesi, tasarımın simetrik yönüne yardımcı olur. Ve bölücü bölümü, kullanıcıyı sayfaya yönlendiren iyi bir soyut üçgen tasarımı yapar. Tam geniş bir başlık ile yeni bir geniş parça yapın. Ardından başlık için metni, #1 düğme bağlantısının metnini ve #2 düğme bağlantısı metnini güncelleyin. Ardından kalan tasarımı aşağıdaki gibi güncelleyin: Arka Plan Rengi: #1A1844 Metin Oryantasyon ve Logo: Orta İkon: Bkz. Boyut Altına Gitme Ikon: 20px Yazı Tipi Başlık: Lato Yazı Tipi Başlık: Ağırlık Metni Başlık Boyutu: 5VW (masaüstü), 40px (40px (40px (40px ( Tablet), 30px (akıllı telefon) Hat yüksekliği Başlık: 1.3EM İki renk düğmesi arka plan: #fe4943 İki düğme sınır genişliği: 0px iki simge düğmesi: sağ ok (ekran görüntüsüne bakın) Bir arka plan renk düğmesi: #fe4943 tek genişlik düğmesi sınırı: 0px Bir simge düğmesi: Sol ok (ekran görüntüsüne bakın) Bir Ikon Yerleştirme Düğmesi: Sol dolgu özel: 10vw üst, 10vw sol Şimdi tek yapmamız gereken üçgen bir arka plan tasarımı yapmak için bir bölücü eklemek. Set ayarlarını açın ve aşağıdaki tasarım ayarlarını güncelleyin: Üst Bölme Stili: Üst Tarama Renk Ekranı Yakalama: RGBA (255,255,255,0.3) Üst Bölücü Yükseklik: 45VW Üst Bölü Kuvvetleri: Bkz. Üst Civic Renk Ekranı Yakalama: RGBA (255,255,255,0.1) Bölüğün Yüksekliği Top: 45VW Şimdi son tasarıma bakalım: Bonus Tasarım İpucu: Özel CSS olmadığını söylediğimi bildiğimi bildiğim düğme için hücresel ayarlama, ancak bu ekstra gereksiz bir gelişme, sanırım bazılarınız bundan zevk alacak. İki düğmeli başlıklar için, ikinci düğmenin akıllı telefondaki tasarımı ortadan kaldıran bir sol kenar boşluğu olduğunu fark edebilirsiniz. Bir akıllı telefonda daha temiz bir tasarım için, aynı genişliğe sahip ve ikinci bir düğme marjı olmadan bir düğme oluşturmak için sayfa ayarlarınıza özel bir CSS parçası ekleyebilirsiniz. Divi Builder’daki sayfa ayarlarını açın ve aşağıdaki CSS @Media’yı (Max-Width: 550px) ekleyin { .et_pb_fullwidth_header .et_pb_fullwidth_header_container .et_pb_button { Ekran bloğu;
Genişlik:%100;
Marj-sol: 0px;
}
}
Şimdi cep telefonundaki tasarıma bakın.
Stil #3: Yuvarlak Çerçeve
Bu yuvarlak Divi başlık modülünün tasarımı, oyunculuk davetinize daha fazla odaklanmak için arka plan görüntülerinizi ve başlık içeriğinizi çerçevelemenin iyi bir yoludur. Gereken tek şey, gölgelik sınırınızın yarıçapında, kutunun gölgesinde ve bazı özel alanlarda birkaç ayardır. Başlamak için, tam geniş bir başlık ile yeni bir geniş parça yapın.
İlk olarak, başlık, metin #1 bağlantısı ve logo görüntüsünü ekleyerek başlığın içerik öğesini güncelleyelim.
Ardından, başlığın yüksekliğini ve genişliğini arttırmak için büyük bir arka plan görüntüsü ekleyin. Bu daha yuvarlak bir başlık olacağından, aynı yükseklik ve genişliğe sahip görüntüleri (1000 piksel 1000 piksel gibi) kullanmayı deneyin. Ardından diğer tasarım ayarlarını aşağıdaki gibi güncelleyin: Ayarları kaydedin. Ardından, arka plan rengini ve alanı aşağıdaki gibi eklemek için parçanın ayarlarını açın: Arka Plan Rengi: #000000 Dolgu Özel: 5VW Top, 5VW daha düşük
Şimdi son tasarımı kontrol edin.Karışım sol kişi Bu başlık tasarımı birkaç benzersiz tasarım özelliğine sahiptir. Başlık modülü aslında boyut olarak değiştirilir ve parçanın arka plan görüntüsünün sağ kısmını ortaya çıkarmak için sol ve sol. Ve başlık modül içeriği, arka plan görüntülerini içerik yoluyla ortaya çıkaran bir karışım efektine sahiptir. Bunu yapmak için, sizin tarafınız için doğru arka plan görüntüsüne ihtiyacınız vardır. Genel olarak, karışım içeriğinin daha görünür olabilmesi için görüntülerin daha koyu öğelere sahip olmasını istersiniz. Başlayalım. İlk olarak, tam genişlikli bir başlık ile yeni bir tam genişlik parçası oluşturun. Başlık stilimizi güncellemeye başlamadan önce, önce bölümü ayarlamak için atlayın ve aşağıdaki arka planı ekleyin: Sağdaki görüntünün odak noktası olan bir arka plan görüntüsü ekleyin. Arka plan gradyanının sol rengi: RGBA (0,0,0,0.54) Sağ renk arka plan gradyanı: RGBA (255,255,255,0) gradyan yönü: 90 derece radyal yön: sağ alt başlangıç pozisyonu:% 50 son konum:% yer. Arka plan görüntüsünün üzerindeki gradyan: Evet, gradyanın amacı görüntünün sol tarafını daha koyu hale getirmektir, böylece başlık modülünün içeriğini birleştirdiğimizde okunması daha kolay olacaktır. Buna ek olarak, varsayılan gölgenin arka plan rengi hala etkin olduğundan, mevcut parçanın arka planını göremezsiniz. Daha sonra değiştireceğiz. Başlık ayarlarını açın ve içeriği başlık, #1 düğme bağlantısının metni ve Dark Logo ile güncelleyin. Şimdi arka plan rengini beyaza değiştirin. Ardından aşağıdakileri güncelleyin: ağır yazı tipi Başlık: Ultra Kalın Renkli Metin Başlık: #000000 Metin Başlığı Boyut: 8VW Yükseklik Çizgisi Başlık: 1.1EM Tek Metin Boyutu Düğmesi: 2.7VW Tek Renkli Metin Düğmesi: #000000 Tek Sınır Genişliği Genişliği Düğmesi: 0.2EM Bir Renk Düğmesi Sınırı: #EDF000 Harfler Ağırlık: Çok Kalın Genişlik:% 50 (Masaüstü, Tablet ve Akıllı Telefon) Karışık Mod: Ekran İşte son tasarım. Stil #5: Büyük ölçeklendirme türü
Bu Divi başlık modülü tasarımı, tasarımı feda etmeden bir tarayıcı penceresiyle gözden düşmüş büyük bir metin yapmak için basit ve etkili bir yol sunar. Tam geniş bir başlık modülü kullandığımız için, içeriğimizin küçük bir alanını genişletmemiz gerekiyor. Sonra metnimizi ölçmek için VW uzunluğu birimini kullanmamız gerekir. Bu tasarım başlık bölümü için iyi olacaktır. Başlamak için, tam geniş bir başlık ile yeni bir geniş parça yapın. Tam genişlik başlık ayarlarında, aşağıdaki güncelleme: Başlık: Danışma Metni Altyazıları: Hizmet #1 Metin Bağlantısı: Bundan sonra içerik kutusundaki varsayılan metni silin. Ardından bir ışık logosu görüntüsü ekleyin. Ardından, başlığınız için daha fazla yatay alan oluşturmak için maksimum genişlikli varsayılan konteyner başlığını artıracağız. Bunu yapmak için devam eden sekmeyi açın ve başlık kabının altına aşağıdaki CSS ekleyin: genişlik:%100; Max-Width:%100; Şimdi diğer tasarım ayarlarını aşağıdaki gibi güncelleyin: Bir arka plan görüntüsü ekleyin. Metin Oryantasyonu ve Logo: Orta Yazı Tipi Başlık: Cuprum Heavy Yazı Tipi Başlık: Kalınlık Yazı Tipi Başlık Stili: TT Başlık Metin Renk: #BFBFBF Metin Başlığı Boyut: 10VW Uzay Uzay Başlığı: Cuprum Lelapan Metin Altyazıları: Sağ (Bu, odaklama yardımcı olur harf alanı ile metin) Altyazı Metin Boyutu: 3VW Alt Başlık Harfinin Spiry: 7.8VW Tek Düğme Genişliği Sınırı: 0PX Bir Yazı Tipi Düğmesi: Bakır Icon One Düğme Icon: Ekran yakalama Yolu, metin için VW uzunluğu birimini kullanmaktır. Ardından, altyazıların alanını mümkün olduğunca en iyi başlığın başlığına paralel olacak şekilde ayarlayın. Yatay mesafeyi en üst düzeye çıkarmak için, başlık içeriğine aşağıdaki gibi özel bir genişlik eklememiz gerekir: içerik genişliği:%80; Bu%100’den az varsayılan olsa da, ayarları değiştirmek varsayılan olarak başlayacak ve daha önce eklediğimiz özel CSS’ye ayarlanacaktır. Son olarak, tasarımı tamamlamak için kutunun gölgesini ekleyin: Gölge Kutusu: Bkz. Ekran Ekranı Güç Gölge Kutusu: 0PX GÖLGE KURULUĞU GÜCÜ KUTU: 60 PX Şimdi Sonuç Sonuç’a bakın. Bunları tam ekran başlığına değiştirin! Yukarıdaki tasarım, düğmeyi tıklayarak kolayca tam ekran yapılabilir. Bu, tam geniş başlık modülünün harika bir özelliğidir. Başlık tasarım ayarlarını açın ve “Tam Ekran Yap” seçeneğini seçin. Buna ek olarak, başlığın tarayıcı penceresine mükemmel bir şekilde uyması için bu tasarım için özel bir yatak vermelisiniz. Bu son zihin, Divi başlık modülü ile mevcut olan sadece birkaç olası başlık tasarımıdır. Ve tüm tasarım ayarlarını denemek çok eğlenceli olabilir. Eğer varsa, umarım bu örnekler bir sonraki projeniz için biraz ilham verecektir. Aşağıdaki yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
