Arka plan maskeleri söz konusu olduğunda, kullanıcılar aşağıdakilerden farklı olarak görüntü düzenleme yazılımlarını kullanma eğilimindedir. Divi, ardından resmi şuraya yükleyin: Site Web yarattıkları. özelleştirmek için oldukça kullanışlı bir yol olsa da Site Web, mutlaka tek çözüm değildir. Ayrıca içinde arka plan maskeleri oluşturabilirsiniz. Divi, farklı tasarım öğelerini ve filtre seçeneklerini yaratıcı şekillerde birleştiriyor. Bu yazıda yapmak üzere olduğumuz şey tam olarak bu! Büyük boyutlu karakterleri, her ekran boyutunda harika görünen arka plan maskelerine dönüştürüyoruz. Bu eğitimin, büyük boyutlu karakterleri ve yerleşik seçenekleri kullanarak kendi tasarımlarınızı yaratmanız için size ilham vereceğini umuyoruz. Divi.
Gidelim!
Örnek önizleme
Eğiticiye dalmadan önce, işte bu teknikle elde edebileceğiniz arka plan türleri.
Gebe kalma
Tasarıma, arkaplan görüntüsü olan bir harf ile siyah bir fon oluşturarak başlayacağız.
Yeni bölüm ekle
Arka plan rengi
İlk örnekle başlayalım! Yeni veya varolan bir sayfaya yeni bir normal bölüm ekleyin ve bu bölüme bir arka plan ekleyin:
- Arka plan rengi: #000000
aralık
Ardından aralık ayarlarına gidin ve tüm varsayılan üst ve alt dolguyu kaldırın.
- Üst Dolgu: 0px
- Alt doldurma: 0px
taşma
Gelişmiş sekmesine geçin ve bölüm taşmalarını gizleyin. Bu, bu öğreticide daha sonra, büyük boyutlu karakteri içeren metin modülünü yeniden konumlandırdığımızda önemli hale gelecektir.
- Yatay taşma: gizli
- Dikey taşma: gizli
Satır ekle 1
Sütun yapısı
Aşağıdaki sütun yapısını kullanarak yeni bir satır eklemeye devam edin:
Sütun 1 Arka Plan Rengi
Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve ilk sütuna bir arka plan rengi ekleyin.
- Sütun 1 Arka Plan Rengi: #848484
1 sütun Arkaplan resmi
Ayrıca bir arka plan rengi ekleyin. Arka plan rengini ve görüntüyü birleştirmek için bir karışım modu uygulayacağız.
- Sütun arka plan görüntüsü karışımı: Çarpın
boyutlandırma
Tasarım sekmesine geçin ve aşağıdaki boyutlandırma ayarlarını uygulayarak satırın ekranın tüm genişliğini doldurmasına izin verin:
- Özel bir oluk genişliği kullanın: Evet
- Oluk genişliği: 1
- Genişlik:% 100
- Maksimum genişlik:% 100
aralık
Ayrıca sıradaki tüm özel yukarı ve aşağı dolgulardan kurtuluruz.
- Üst Dolgu: 0px
- Alt doldurma: 0px
Bir sütuna bir metin modülü ekleme
İçerik alanına bir karakter ekleyin
Büyük boyutlu bir karakter içeren metin modülünü eklemenin zamanı geldi. Kutuya “o” harfini ekleyin içindekiler.
Arka plan rengi
Arka plan ayarlarına girerek devam edin ve siyah arka plan rengi ekleyin.
- Arka plan rengi: #000000
Metin ayarları
Tasarım sekmesine gidin ve metin ayarlarını değiştirin. Metin boyutu için nasıl yüksek bir değer kullandığımıza dikkat edin.
- Metin Yazı Tipi: Poppins
- Metin boyutu: 100vw
- Metin Yönü: Merkez
aralık
Ardından aralık ayarlarına gidin ve özel kenar boşluğu ve dolgu değerleri ekleyin.
- Üst kenar boşluğu: -6vw
- En iyi dolgu malzemesi: 15vw
- Alt doldurma: 49vw
filtreler
Büyü yapmanın zamanı geldi! Modülün filtre ayarlarına erişin ve birleştirme modunu uygun şekilde değiştirin:
- Karışım Modu: Çarp
- Parlaklık: Bu değeri istediğiniz gibi değiştirebilirsiniz
2 satırını ekle
Sütun yapısı
Büyük boy karakteriniz tasarıma eklendiğinde, bölüme göstermek istediğiniz kalan modülleri ekleyerek, tercihen yeni bir satır ekleyerek devam edebilirsiniz:
boyutlandırma
Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve ekranın tüm genişliğini kaplamasına izin verin.
- Özel bir oluk genişliği kullanın: Evet
- Oluk genişliği: 1
- Genişlik:% 100
- Maksimum genişlik:% 100
aralık
Ayrıca tüm varsayılan yukarı ve aşağı dolguyu kaldır
- Üst Dolgu: 0px
- Alt doldurma: 0px
Sütuna # 1 metin modülünü ekleyin
H1 içeriği ekle
Bu yeni hatta dilediğiniz modülleri ekleyebilirsiniz. Bu gönderinin önizlemesinde paylaşılan örneği yeniden oluşturmak için, aşağıdakileri içeren bir metin modülü ekleyerek başlayın: içindekiler H1.
H1 Metin Ayarları
Tasarım sekmesine geçin ve H1 metin ayarlarını değiştirin.
- Başlık yazı tipi: Playfair Display
- Yazı tipi ağırlığı: Kalın
- Başlık Metin Hizalama: Merkez
- Başlık metni rengi: #ffffff
- Metin Başlığı Boyutu: 6vw
aralık
Aralık ayarlarına giderek devam edin ve negatif bir üst kenar boşluğu ekleyerek metin modülünün büyük boyutlu karakterle örtüşmesine izin verin. Ayrıca yanıt vermeyi sağlamak için modülün solunda ve sağında yer olduğundan emin oluruz.
- Üst kenar boşluğu: -47vw
- Sol kenar boşluğu: 1vw
- Sağ kenar boşluğu: 1vw
Sütuna bir bölme modülü ekleme
görünürlük
İhtiyacımız olan bir sonraki modül bir bölme modülü. "Ayırıcıyı Göster" seçeneğinin etkinleştirildiğinden emin olun.
- Bölücüyü Göster: Evet
Renk
Sonraki tasarım sekmesine gidin ve bölücünün rengini değiştirin.
- Renk: #ffffff
boyutlandırma
Ayrıca boyutlandırma parametrelerini de değiştirin.
- Bölücü ağırlık: 13px
- Genişlik:% 16
- Modülün hizalanması: orta
aralık
Ayrıca, metin modülü ile bölme modülü arasında boşluk bırakmak için üst kenar boşluğu ekleyin.
- Üst kenar boşluğu: 16vw
Sütuna # 2 metin modülünü ekleyin
İçerik ekle
İhtiyacımız olan bir sonraki modül, bir metin modülüdür. içindekiler paragrafın.
Metin ayarları
Metin ayarlarına erişin ve aşağıdaki değişiklikleri yapın:
- Metin Yazı Tipi: Açık Sans
- Metin rengi: #ffffff
- Metin boyutu: 1vw (masaüstü), 2vw (tablet), 2.5vw (telefon)
- Metin satırının yüksekliği: 1.9em
- Metin Yönü: Merkez
aralık
Ayrıca özel aralık değerleri ekleyin.
- Üst kenar boşluğu: 3vw
- Alt kenar boşluğu: 3vw (masaüstü bilgisayar), 10vw (tablet ve telefon)
- Sol kenar boşluğu: 27vw (masaüstü), 10vw (tablet), 8vw (telefon)
- Sağ kenar boşluğu: 27vw (masaüstü), 10vw (tablet), 8vw (telefon)
Kolona bir düğme modülü ekleyin
Bir kopya ekle
Bir düğme modülü olan bir sonraki ve son modülde. Seçtiğiniz bir kopyasını girin.
hizalanma
Tasarım sekmesindeki düğme hizalamasını değiştirerek devam edin.
- Düğmelerin hizalanması: orta
Düğme ayarları
Düğme ayarlarına geçin ve düğmeyi istediğiniz gibi özelleştirin.
- Düğme için özel stiller kullan: Evet
- Düğme metni boyutu: 1vw (masaüstü), 2.5vw (tablet), 3vw (telefon)
- Düğme metni rengi: #ffffff
- Düğme kenarlığının genişliği: 1px
- Düğmenin kenarlığının yarıçapı: 0px
- Düğme Yazı Tipi: Açık Sans
- Yazı tipi ağırlığı: Ultra Kalın
- Yazı Tipi Stili: büyük harf
aralık
Son olarak, istenen sonucu elde etmek için özel marj ve doldurma değerleri de ekleriz.
- Alt kenar boşluğu: 10vw
- Dolgu: 15px
- Alt doldurma: 15px
- Sol doldurma: 50px
- Döşeme Sağ: 50px
Nihai sonuç
Şimdiye kadar yaptığımız şeye benziyor.
Son düşünceler
Bu makalede, Divi ile harika arka plan maskeleri oluşturmak için büyük boyutlu karakterleri nasıl kullanacağınızı gösterdik. Bu, görüntü düzenleme yazılımı kullanmak zorunda kalmadan özel bir web tasarımı oluşturmanın harika bir yoludur. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorumlar bölümüne yorum bıraktığınızdan emin olun!
