Divi başlığınıza maske ve arka plan deseni nasıl eklenir
Divi’nin yeni arka plan maskesi özellikleri ve arka plan desenleri, sayfadaki parçalar için daha yaygın olarak kullanılır. Ancak, başlığa da ekleyebiliriz! Bu öğreticide, tema üreticisini kullanarak Divi başlık şablonuna nasıl bir maske ve arka plan deseni ekleyeceğinizi göstereceğiz. Bu, web siteniz için gerçekten benzersiz bir başlık tasarımı oluşturmanın iyi bir yoludur. Başlayalım. Aşağıdaki gizlice göz atma, bu öğreticide yapacağımız tasarımın bir bakış.
Bu öğreticiden bir tasarım almak için düzeni ücretsiz indirin, önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmelere erişmek için, aşağıdaki formu kullanarak Divi Daily E -posta listemize abone olmanız gerekir. Yeni bir müşteri olarak, her Pazartesi daha fazla Divi’nin iyi ve ücretsiz Divi düzen paketleri alacaksınız! Zaten listede iseniz, e -posta adresinizi aşağıya girin ve İndir’i tıklayın. “Abone olmayacak” veya ek e -postalar almayacaksınız.Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Birlikte takip edin ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve Düzen Paketine erişmek için İndir’i tıklayın.
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
Başlık şablonunu Divi kütüphanenize aktarmak için aşağıdakileri yapın:
Divi tema üreticisine gidin.
Sayfanın sağ üst kısmındaki içe aktarma düğmesini tıklayın. Taşınabilirlik açılır penceresinde sekme içe aktarma
Bilgisayarınızdan indirme dosyasını seçin (önce dosyayı açtığınızdan emin olun ve json dosyasını kullanın).
Ardından İçe Aktar düğmesini tıklayın.
Bittiğinde, parçanın düzeni Divi Builder’da mevcut olacak. Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacınız var, aşağıdakileri yapmanız gerekiyor:
Divi tema üreticisine gidin.
Varsayılan web sitesi şablonundan Global Başlık Ekle alanını tıklayın (veya Global olmak istemiyorsanız yeni bir şablon kullanın.
Çekme menüsünde, küresel bir başlık oluşturmayı seçin.
Bundan sonra, Divi Builder kullanarak yeni başlıklar tasarlamaya başlayabilirsiniz. Divi üstbilgisine bir maske ve arka plan deseni nasıl eklenir. Başlamak için renk ve arka plan deseninde bir arka plan yapın, mevcut bölüm ayarlarını açın. İçerik sekmesinin altında, arka plan seçeneğini aşağıdaki arka plan ayarlarıyla güncelleyin: Arka plan rengi: Arka plan rengi: #262d3f
Arka Plan Deseni:
Açılış Deseni: PIL
Desen rengi: RGBA (255,255,255,0.1)
Drai Boyutu: Özel Boyut
Desen genişliği: 1px
Tasarım sekmesinin altındaki dolgu bölümü, dolgu bölümünü aşağıdaki gibi güncelleyin: Dolgu: 0px üst, 0px aşağıda
Bu, başlığın dikey boşluğunu biraz azaltacaktır.
2. Bölümün arka planı tamamlandıktan sonra çizginin düzenini ekleyin, başlık içeriği eklemeye hazırız. Bu durumda sağdaki sola ve CTA düğmesine bir menü ekleyeceğiz, böylece çalışacak satırın düzenini eklememiz gerekiyor. Bölüme üç çeyrek (iki sütun) düzeni ekleyin. Yakında satır ayarlarına döneceğiz. Şimdilik yapay içerik ekleyelim. Sahte Başlık İçeriği (Menü ve Düğmeler) Ekleme Artık başlığımıza CTA menüsü ve düğmesini eklemeye hazırız. Bu eğitim başlığın arka plan tasarımına odaklandığından, yapay içerik için tüm tasarım ayarlarını eklemeyeceğiz. Ancak, bu resimde kullanılan ayarlara daha yakından bakmak için lütfen bu öğreticiden ücretsiz bir şablon indirin. Sol satır sütununa yeni bir menü ekleyin.
Degrade Durar 2 Renk: #FF4C00
Gradien Stop 2 pozisyonu:% 75
Gradyan yönü: 90 derece
Model
Açılış Deseni: PIL Desen rengi: RGBA (38,45,63,0.48)
Desen Boyutu: 1 piksel
Dikey ofset deseni: 20px
Not: Desenin dikey ofseti 20px’e ayarlanmıştır, çünkü yukarıdaki satırda 20 piksel bir üst taşıma vardır. Bu, parçanın deseninin sıra paternine paralel olmasını sağlar.
Maske
Maske: Chevrons Maske Rengi: #262D3F
Başlıklar için, simetrik bir tasarıma sahip bir maske kullanırsanız daha iyi olur. Chevrons maskesi iyi bir seçimdir, çünkü sadece havalı görünmekle kalmaz, aynı zamanda kullanıcıyı sağdaki düğmeyi görmeye yönlendirir. Not: Başlıklar için en iyisi, maske tasarımından ödün vermeden yatay alanı kaplayacak şekilde maske boyutunu “doldurmak için germek” için ayarlamaktır. Tasarımı tamamlamak için çizgiye son dokunuş (kelimenin tam anlamıyla), bir sınır yarıçapı ve hatta daha fazla ayar ekleyeceğiz. Tasarım sekmesinin altındaki sınır, sınır ve boşluk yarıçapı, dolguları aşağıdaki gibi güncelleyerek:
Dolgu: 5 piksel üst, 5 piksel aşağıda
Ardından ek tasarım öğeleri için iyi bir yuvarlak köşe satırı verin. Yuvarlak açı: 50 piksel
Sol sınır genişliği: 50 piksel Sol sınır rengi: #262d3f
Sıranın sol tarafına bir sınır vermeliyiz, çünkü açı yuvarlak olmasına rağmen maskenin kare kenarı çizgiyi dolduracaktır.
Dikey tesviye içeriği ve son bir dokunuş için sütun mesafesi, düğmeyi dikey olarak odaklamak için ikinci sütuna birkaç yatak ekleyin.
Dolgu: 13px üst, 13px aşağıda
Nihai sonuç Sonuç’a bakalım. İşte kişisel antrenör düzeni paketimizin sayfalarından birinde kullanılan yeni başlığımız. Gradyan oldukça pürüzsüzdür, bu yüzden bu daha yakın görünür. Ve işte masaüstü ve mobil cihazlarda bir başlık tasarımı.
Başlığın başlık tasarımını deneyen tebrikler sadece buzdağının tepesidir.Divi’de bulunan arka plan seçenekleriyle yapılması gereken birçok keşif var.Örneğin, sadece birkaç tıklama ile, aşağıda gösterilen başlıkları yapmak için diyagonal çizgi desenleri ve diyagonal maske kombo ekleyebiliriz. Son düşünceler umarım bu öğretici, maskenin ve arka plan deseninin divi’nin bir arka plan tasarımı oluşturmak için nasıl çalışabileceğini anlamanıza yardımcı olur. Başlığınız için geri dönün.Kendi web sitesi tasarımınıza veya gelecekteki projelere uyacak şekilde daha fazla arka plan tasarımı kombinasyonunu denemekten çekinmeyin.Daha fazla bilgi için, yeni Divi gradyan üreticisini maskeler ve desenlerle nasıl birleştireceğinize bakın.Yorumlarda sizden haber almayı umuyorum.Kızarmış ekmek!
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
Başlık şablonunu Divi kütüphanenize aktarmak için aşağıdakileri yapın:
Divi tema üreticisine gidin.
Sayfanın sağ üst kısmındaki içe aktarma düğmesini tıklayın. Taşınabilirlik açılır penceresinde sekme içe aktarma
Bilgisayarınızdan indirme dosyasını seçin (önce dosyayı açtığınızdan emin olun ve json dosyasını kullanın).
Ardından İçe Aktar düğmesini tıklayın.
Bittiğinde, parçanın düzeni Divi Builder’da mevcut olacak. Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacınız var, aşağıdakileri yapmanız gerekiyor:
Divi tema üreticisine gidin.
Varsayılan web sitesi şablonundan Global Başlık Ekle alanını tıklayın (veya Global olmak istemiyorsanız yeni bir şablon kullanın.
Çekme menüsünde, küresel bir başlık oluşturmayı seçin.
Bundan sonra, Divi Builder kullanarak yeni başlıklar tasarlamaya başlayabilirsiniz. Divi üstbilgisine bir maske ve arka plan deseni nasıl eklenir. Başlamak için renk ve arka plan deseninde bir arka plan yapın, mevcut bölüm ayarlarını açın. İçerik sekmesinin altında, arka plan seçeneğini aşağıdaki arka plan ayarlarıyla güncelleyin: Arka plan rengi: Arka plan rengi: #262d3f
Arka Plan Deseni:
Açılış Deseni: PIL
Desen rengi: RGBA (255,255,255,0.1)
Drai Boyutu: Özel Boyut
Desen genişliği: 1px
Tasarım sekmesinin altındaki dolgu bölümü, dolgu bölümünü aşağıdaki gibi güncelleyin: Dolgu: 0px üst, 0px aşağıda
Bu, başlığın dikey boşluğunu biraz azaltacaktır.
2. Bölümün arka planı tamamlandıktan sonra çizginin düzenini ekleyin, başlık içeriği eklemeye hazırız. Bu durumda sağdaki sola ve CTA düğmesine bir menü ekleyeceğiz, böylece çalışacak satırın düzenini eklememiz gerekiyor. Bölüme üç çeyrek (iki sütun) düzeni ekleyin. Yakında satır ayarlarına döneceğiz. Şimdilik yapay içerik ekleyelim. Sahte Başlık İçeriği (Menü ve Düğmeler) Ekleme Artık başlığımıza CTA menüsü ve düğmesini eklemeye hazırız. Bu eğitim başlığın arka plan tasarımına odaklandığından, yapay içerik için tüm tasarım ayarlarını eklemeyeceğiz. Ancak, bu resimde kullanılan ayarlara daha yakından bakmak için lütfen bu öğreticiden ücretsiz bir şablon indirin. Sol satır sütununa yeni bir menü ekleyin.
Menüyü seçtiğinizden ve bir logo eklediğinizden emin olun. Ardından menüyü beğeninize göre tasarlamak için tasarım ayarlarını kullanın.
Sağ sütunda düğme modülünü ekleyin ve ayrıca isteklerinize göre ayarlayın.
Degrade Durar 2 Renk: #FF4C00
Gradien Stop 2 pozisyonu:% 75
Gradyan yönü: 90 derece
Model
Açılış Deseni: PIL Desen rengi: RGBA (38,45,63,0.48)
Desen Boyutu: 1 piksel
Dikey ofset deseni: 20px
Not: Desenin dikey ofseti 20px’e ayarlanmıştır, çünkü yukarıdaki satırda 20 piksel bir üst taşıma vardır. Bu, parçanın deseninin sıra paternine paralel olmasını sağlar.
Maske
Maske: Chevrons Maske Rengi: #262D3F
Başlıklar için, simetrik bir tasarıma sahip bir maske kullanırsanız daha iyi olur. Chevrons maskesi iyi bir seçimdir, çünkü sadece havalı görünmekle kalmaz, aynı zamanda kullanıcıyı sağdaki düğmeyi görmeye yönlendirir. Not: Başlıklar için en iyisi, maske tasarımından ödün vermeden yatay alanı kaplayacak şekilde maske boyutunu “doldurmak için germek” için ayarlamaktır. Tasarımı tamamlamak için çizgiye son dokunuş (kelimenin tam anlamıyla), bir sınır yarıçapı ve hatta daha fazla ayar ekleyeceğiz. Tasarım sekmesinin altındaki sınır, sınır ve boşluk yarıçapı, dolguları aşağıdaki gibi güncelleyerek:
Dolgu: 5 piksel üst, 5 piksel aşağıda
Ardından ek tasarım öğeleri için iyi bir yuvarlak köşe satırı verin. Yuvarlak açı: 50 piksel
Sol sınır genişliği: 50 piksel Sol sınır rengi: #262d3f
Sıranın sol tarafına bir sınır vermeliyiz, çünkü açı yuvarlak olmasına rağmen maskenin kare kenarı çizgiyi dolduracaktır.
Dikey tesviye içeriği ve son bir dokunuş için sütun mesafesi, düğmeyi dikey olarak odaklamak için ikinci sütuna birkaç yatak ekleyin.
Dolgu: 13px üst, 13px aşağıda
Nihai sonuç Sonuç’a bakalım. İşte kişisel antrenör düzeni paketimizin sayfalarından birinde kullanılan yeni başlığımız. Gradyan oldukça pürüzsüzdür, bu yüzden bu daha yakın görünür. Ve işte masaüstü ve mobil cihazlarda bir başlık tasarımı.
Başlığın başlık tasarımını deneyen tebrikler sadece buzdağının tepesidir.Divi’de bulunan arka plan seçenekleriyle yapılması gereken birçok keşif var.Örneğin, sadece birkaç tıklama ile, aşağıda gösterilen başlıkları yapmak için diyagonal çizgi desenleri ve diyagonal maske kombo ekleyebiliriz. Son düşünceler umarım bu öğretici, maskenin ve arka plan deseninin divi’nin bir arka plan tasarımı oluşturmak için nasıl çalışabileceğini anlamanıza yardımcı olur. Başlığınız için geri dönün.Kendi web sitesi tasarımınıza veya gelecekteki projelere uyacak şekilde daha fazla arka plan tasarımı kombinasyonunu denemekten çekinmeyin.Daha fazla bilgi için, yeni Divi gradyan üreticisini maskeler ve desenlerle nasıl birleştireceğinize bakın.Yorumlarda sizden haber almayı umuyorum.Kızarmış ekmek!
