Kahraman bölümünüz için maskeleri ve desenleri kullanmak ister misiniz? Divi ?
Divi'nin yeni maskeleri ve arka plan desenleri şimdiye kadarki en havalı yeni tasarım özelliklerimizden biridir. Maskelerin ve desenlerin her biri, yalnızca birkaç tıklamayla sayısız benzersiz kombinasyon için diğer arka plan öğeleriyle (renkler, resimler ve degradeler gibi) birleştirilebilir.
Bugün size nasıl kullanılacağını göstereceğiz Divi ve bir kahraman bölümü tasarlamak için yeni maskeleri ve arka plan desenleri.
Bu eğitimde, maskeler ve arka plan desenleri oluşturmak için gereken önemli adımları ele alacağız.
Arka plan görüntülerinin bir maske tasarımına nasıl uyacak şekilde konumlandırılacağını bile göstereceğiz. Bu size vermeli araçları dakikalar içinde siteniz için mükemmel Kahraman bölümünü oluşturmanız gerekir.
anket
İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.
Ayrıca Oku: Divi: Bağlantılar ve fareyle üzerine gelme efektleriyle duyarlı bir görüntü ızgarası nasıl oluşturulur
Beyaz maskeli ve desenli Kahramanın örnek bölümü.
İşte aynı Kahraman bölümünün siyah maskeli ve desenli karanlık bir versiyonu.
Bu tasarım yerindeyken, sadece birkaç tıklamayla maskeleri ve maske konumlarını kolayca değiştirebilirsiniz!
Divi Builder ile yeni bir sayfa oluşturun
WordPress kontrol panelinden şuraya gidin: Sayfalar> Yeni Ekle yeni bir sayfa oluşturmak için.
Size mantıklı gelen bir başlık verin ve tıklayın kullanım Divi inşaatçı
Ardından İnşaata Başla (Sıfırdan Oluşturun)
Bundan sonra tasarlamaya başlamak için boş bir tuvaliniz olacak. Divi.
Kahraman Bölümünüzde Divi'nin Maskelerini ve Arka Plan Desenlerini Nasıl Kullanırsınız
1. Düzen yapısını oluşturun
Bu kahraman bölümü için, solda başlık ve harekete geçirici mesaj ve sağda bir resim (veya görsel tasarım) bulunan klasik bir düzen yapısıyla gidiyoruz.
Bu örnek için Divi'nin arka plan seçenekleri kullanılarak görsel tasarımımız oluşturulacaktır. Ancak asıl konuya gelmeden önce, sayfanın sağ tarafında yer kazanmak için bölüm arka plan maskelerimizi ve desen tasarımımızı sergilemek için iki sütunlu bir satır oluşturmamız gerekiyor.
2. Başlığı ve harekete geçirici mesajı ekleyin
Sol sütuna (sütun 1), ana başlığınız için bir Metin modülü, altyazı metniniz için bir Metin modülü ve düğmeniz için bir Düğme modülü ekleyin.
3. Bölüme dikey boşluk ekleyin
Arka plan tasarımımızın uzun ve güzel görünmesi için bölüme dikey yükseklik eklememiz gerekiyor. Bunu yapmanın basit bir yolu, bölümün üstüne ve altına dolgu eklemektir. Sütunlar dikey olarak istiflendiğinde arka plan tasarımımıza yer açmak için tablet ve telefon ekranındaki dolguyu ayarlamamız gerektiğini unutmayın.
Bölüm ayarlarını açın. Tasarım sekmesi altında, dolguyu aşağıdaki gibi güncelleyin:
- Dolgu malzemesi:
- Masaüstü: Üst 20vw, Alt 20vw
- Tablet: Üst 8vw, Alt 48vw
- Telefon: Üst 8vw, Alt 70vw
4. Arka plan resmi ve degrade ekleyin
Ardından, bölüme bir arka plan görüntüsü ve gradyan ekleyebiliriz. Arka plan görüntüsünün ana odak noktasının bölümün sağ tarafında görüneceğini unutmayın, bu nedenle sağ tarafta görmek istediğiniz şeye sahip bir görüntü kullanın.
Bu örnek için, şehir silüeti olan bir resim kullanıyoruz. Resmin sağ tarafında daha yakın ve daha iyi görünen binalar var, bu yüzden gerçekten iyi çalışıyor.
Sekmenin altında Arka plan görüntüsü, resmi bölüm arka planına yükleyin.
Divi'de arka plan görüntüsüne kolayca bir renk gradyanı ekleyebilirsiniz. sekmenin altında Arka Plan Gradyanı, bölümün arka planına aşağıdaki degradeyi ekleyin:
- Gradyan Durakları:
- %0: #3e22ff
- %100: temiz
- Arka Plan Resminin Üzerinde Kare Gradyan: EVET
5. Bölüm için bir arka plan deseni oluşturun
Artık arka plan resmimiz ve degrademiz hazır olduğuna göre, tasarımı tamamlamak için bir arka plan deseni ekleyebiliriz.
Bu örnekte, daha benzersiz bir görünüm vermek için biraz doku ekleyen ince bir desen kullanacağız.
Sekmenin altında Arka Plan Desenleri, aşağıdakileri güncelleyin:
- Arka Plan Deseni: Tepeli
HİLE : Arka plan desenleriyle, genellikle ince tutmak en iyisidir. Daha küçük tasarımlar için özel boyutlar kullanmayı deneyin, ardından renk opaklığını azaltın.
6. Bölüm için bir arka plan maskesi oluşturun
Arka plan desenimizi yerleştirdikten sonra, sonunda tasarımımız için yepyeni bir arka plan maskesini test etmeye hazırız. Aralarından seçim yapabileceğiniz bir sürü seçenek ve varyasyon var. Bu örnek için petek maskesini kullanacağız.
Sekmenin altında Arka Plan Maskesi, aşağıdakileri güncelleyin:
- Maske: Petek
- Maske Rengi: #ffffff
- Boyut: Kapak
7. Arka plan görüntüsü konumunu ayarlayın
Arka plan maskesi kullandığımız için arka plan resmimizin bir kısmı maskelenir (veya "maskelenir").
Bu örnekte, görüntünün sağ alt kısmının en görünür olduğundan emin olacağız ve daha fazla bina göstermek için onu biraz sağa taşıyacağız.
Görüntü sekmesi altında aşağıdakileri güncelleyin:
- Arka Plan Resmi Konumu: Sağ Alt
- Arka Plan Resmi Yatay Ofset: -4vw
8. Bir karıştırma modu kullanın
Tüm bu arka plan öğeleriyle yaratıcı olmanın bir yolu, bir karıştırma modu eklemektir. Karıştırma modları, arka plan seçeneklerinden herhangi birine eklenebilir ve birden çok arka plan katmanını (resim, degrade, maske vb.) yaratıcı şekillerde karıştırmak için kullanılabilir.
Bu örnekte, arka plan görüntüsünü degrade rengiyle karıştıracağız. Bunu yapmak için sekmeye tıklayın Arka plan görüntüsü ve degrade rengi arka plan görüntüsüyle aşağıdaki gibi karıştırmak için bir karıştırma modu ekleyin:
- Arka Plan Resmi Karışımı: Çarpma
9. Mobil cihazlar için arka plan maskesini ayarlayın
Arka plan maskesi tasarımının mobil cihazlarda da harika görünmesini sağlamak önemlidir. Neyse ki, yerleşik seçenekler bu işlemi kolaylaştırır.
Arka plan tasarımımıza yer açmak için tablete ve telefona ekstra dolgu eklediğimizi unutmayın.
Şimdi tek yapmamız gereken, maskeyi mobil cihazlar için ayarlamak için arka plan dönüştürme ve en boy oranı seçeneklerini kullanmak.
Sekmenin altında Arka Plan Maskesi, duyarlı seçenekleri etkinleştirin ve aşağıdakileri güncelleyin:
tablet versiyonu
- Maske Dönüşümü: Dikey Çevir, Yatay Çevir, Döndür
- Maske En Boy Oranı: kare
Telefon versiyonu
- Maske Dönüşümü: Dikey Çevir, Yatay Çevir, Döndür
- Maske En Boy Oranı: Portre
Sonuç
Şimdiye kadar oluşturduğumuz tasarıma göz atın.
Masaüstü bilgisayar
tablet versiyonu
Telefon versiyonu
10. Karanlık bir sürüm oluşturun
Bu tasarımın koyu bir versiyonunu istiyorsanız, arka plan maskesi rengini koyu bir renge (siyah gibi) değiştirmeniz yeterlidir.
Ardından desenin rengini siyah olarak değiştirin.
Ardından başlığı ve altyazı metnini beyaz olarak değiştirin. Ayrıca düğme rengini de güncellemek isteyebilirsiniz.
Karanlık sürüm böyle görünüyor.
Nihai sonuçlar
Ayrıca bakınız: Divi: Bir Blogun "Devamını Oku" bağlantısı nasıl özelleştirilir
İşte nihai sonuçlarımıza başka bir bakış.
DIVI'yı Şimdi İndirin !!!
Sonuç
Sizin için bir Kahraman bölümü tasarlayın Site Web ile çok eğlenceli maskeler ve arka plan desenleri Divi'den. Mükemmel tasarımı elde etmek için arka plan seçeneklerini değiştirmek kolaydır. Ve daha da benzersiz arka planlar oluşturmak için kullanabileceğiniz birçok başka seçenek (karıştırma modları gibi) vardır.
Ek olarak, yalnızca bölümlere değil, herhangi bir Divi öğesine maskeler ve desenler ekleyebilirsiniz. Deneyerek eğlenin!
Bu eğitimin bir sonraki Divi projeleriniz için size ilham vereceğini umuyoruz. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.
Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...
