Divi ile Büyük Boy Karakterleri Arka Plan Maskelerine Dönüştürme (Ücretsiz İndirin!)

Arka plan maskeleri söz konusu olduğunda, insanlar Divi dışındaki görüntü düzenleme yazılımlarını kullanma ve ardından görüntüyü oluşturdukları web sitesine yükleme eğilimindedir. Bu, web sitenizi kişiselleştirmenin ve kişiselleştirmenin sağlam bir yolu olsa da, mutlaka gidilecek tek yol bu değildir. Farklı tasarım öğelerini ve filtre seçeneklerini yaratıcı bir şekilde birleştirerek Divi'nin içinde arka plan maskeleri de oluşturabilirsiniz. Bu yazıda yapmak üzere olduğumuz şey tam olarak bu! Büyük boyutlu karakterleri, farklı ekran boyutlarında harika görünen arka plan maskelerine dönüştüreceğiz. Bu öğreticinin, büyük boyutlu karakterleri ve Divi'nin yerleşik seçeneklerini kullanarak kendi tasarımlarınızı yaratmanız için size ilham vermesini umuyoruz.

Hadi hadi bakalım!

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

Örnek 1

Örnek #2

Kahraman Bölümlerini ÜCRETSİZ İndirin

Ellerinizi ücretsiz kahraman bölümlerine koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Örnek 1'i Yeniden Oluştur

Youtube Kanalımıza Abone Olun

Yeni Bölüm Ekle

Arka plan rengi

İlk örnekle başlayalım! Yeni veya mevcut 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, boşluk ayarlarına gidin ve tüm varsayılan üst ve alt dolguyu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

taşma

Gelişmiş sekmesine geçin ve bölümün taşmalarını gizleyin. Bu, büyük boyutlu karakteri içeren Metin Modülünü yeniden konumlandırdığımızda, bu öğreticide daha sonra önemli hale gelecektir.

• Yatay Taşma: Gizli
• Dikey Taşma: Gizli

1. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek 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

Sütun 1 Arka Plan Resmi

Bir arka plan rengi de ekleyin. Arka plan rengini ve görüntüsünü birleştirmek için bir karışım modu uygulayacağız.

• Sütun Arka Plan Resmi Karışımı: Çarpma

boyutlandırma

Tasarım sekmesine gidin ve aşağıdaki boyutlandırma ayarlarını uygulayarak satırın ekranın tüm genişliğini kaplamasına izin verin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Ayrıca sıranın tüm özel üst ve alt dolgularından da kurtuluyoruz.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Sütuna Metin Modülü Ekle

İçerik Kutusuna Karakter Ekle

Büyük boyutlu bir karakter içeren Metin Modülünü ekleme zamanı. İçerik kutusuna 'o' harfini ekleyin.

Arka plan rengi

Arka plan ayarlarına giderek devam edin ve siyah bir 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, boşluk ayarlarına gidin ve bazı özel kenar boşluğu ve dolgu değerleri ekleyin.

• Üst Marj: -6vw
• Üst Dolgu: 15vw
• Alt Dolgu: 49vw

Filtreler

Sihri gerçekleştirme zamanı! Modülün filtre ayarlarına gidin ve karışım modunu buna göre değiştirin:

• Karışım Modu: Çarpma

2. Satır Ekle

Sütun Yapısı

Büyük boyutlu karakteriniz tasarıma eklendikten sonra, tercihen yeni bir satır ekleyerek, bölümde görünmesini istediğiniz kalan modülleri ekleyerek devam edebilirsiniz:

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve satırın ekranın tüm genişliğini kaplamasına izin verin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Tüm varsayılan üst ve alt dolguyu da kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Sütuna Metin Modülü #1 Ekle

H1 İçeriği Ekle

Bu yeni satıra istediğiniz modülleri ekleyebilirsiniz. Bu gönderinin önizlemesinde paylaşılan örneği tam olarak yeniden oluşturmak için, H1 içeriğine sahip bir Metin Modülü ekleyerek başlayın.

H1 Metin Ayarları

Tasarım sekmesine gidin ve H1 metin ayarlarını değiştirin.

• Başlık Yazı Tipi: Playfair Ekranı
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Metni Hizalama: Orta
• Başlık Metni Rengi: #ffffff
• Başlık Metni Boyutu: 6vw

aralık

Aralık ayarlarına giderek devam edin ve bir miktar negatif ü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 sol ve sağ tarafında biraz boşluk olduğundan emin oluyoruz.

• Üst Marj: -47vw
• Sol Kenar Boşluğu: 1vw
• Sağ Marj: 1vw

Sütuna Ayırıcı Modül Ekle

görünürlük

İhtiyacımız olan bir sonraki modül bir Bölücü Modül. 'Bölü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 ayırıcı rengini değiştirin.

• Renk: #ffffff

boyutlandırma

Boyutlandırma ayarlarını da değiştirin.

• Bölücü Ağırlığı: 13px
• Genişlik: %16
• Modül Hizalaması: Merkez

aralık

Ve Metin Modülü ile Bölücü Modül arasında boşluk oluşturmak için bir miktar üst kenar boşluğu ekleyin.

• Üst Marj: 16vw

Sütuna Metin Modülü #2 Ekle

İçerik Ekle

İhtiyacımız olan bir sonraki modül, bazı paragraf içeriğine sahip bir Metin Modülü.

Metin Ayarları

Metin ayarlarına gidin ve aşağıdaki değişiklikleri yapın:

• Metin Yazı Tipi: Sans'ı Aç
• Metin Rengi: #ffffff
• Metin Boyutu: 1vw (Masaüstü), 2vw (Tablet), 2.5vw (Telefon)
• Metin Satır Yüksekliği: 1.9em
• Metin Yönü: Merkez

aralık

Bazı özel boşluk değerleri de ekleyin.

• Üst Marj: 3vw
• Alt Kenar Boşluğu: 3vw (Masaüstü), 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)

Sütuna Düğme Modülü Ekle

Kopya Ekle

Bir Düğme Modülü olan bir sonraki ve son modüle geçin. Seçtiğiniz bir kopyayı girin.

hizalama

Tasarım sekmesindeki düğme hizalamasını değiştirerek devam edin.

• Düğme Hizalama: Merkez

Düğme Ayarları

Düğme ayarlarına gidin ve düğmeyi istediğiniz gibi şekillendirin.

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 1vw (Masaüstü), 2.5vw (Tablet), 3vw (Telefon)
• Düğme Metin Rengi: #ffffff
• Düğme Kenar Genişliği: 1px
• Düğme Sınır Yarıçapı: 0px
• Düğme Yazı Tipi: Sans'ı Aç
• Yazı Tipi Ağırlığı: Ultra Kalın
• Yazı Tipi Stili: Büyük Harf

aralık

Son olarak, istenen sonucu elde etmek için bazı özel kenar boşlukları ve dolgu değerleri de ekliyoruz.

• Alt Marj: 10vw
• Üst Dolgu: 15px
• Alt Dolgu: 15px
• Sol Dolgu: 50px
• Sağ Dolgu: 50px

Örnek 2'yi Yeniden Oluştur

Yeni Bölüm Ekle

İkinci örneğe geçelim! Üzerinde çalıştığınız sayfaya yeni bir normal bölüm ekleyin.

taşma

Gelişmiş sekmesinde bölümün taşmasını gizleyin.

• Yatay Taşma: Gizli
• Dikey Taşma: Gizli

1. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek 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: #dddddd

Sütun 1 Arka Plan Resmi

Bir arka plan görüntüsü de ekleyin ve bir karışım modu kullanarak arka plan rengini görüntüyle birleştirin.

• Sütun Arka Plan Resmi Karışımı: Ekran

boyutlandırma

Ardından, satırın boyutlandırma ayarlarına gidin ve ekranın tüm genişliğini kaplamasına izin verin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Sonraki üst ve alt dolguyu çıkarın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Sütuna Metin Modülü Ekle

İçerik Kutusuna Karakter Ekle

Büyük boyutlu karakterleri içeren Metin Modülünü ekleme zamanı! Şu karakterleri kopyalayın: '◊◊◊' ve bunları içerik kutusuna ekleyin. Bilgisayarınızdaki Karakter Haritasına (Windows) veya Karakter Paletine (Mac) giderek istediğiniz herhangi bir karakteri kullanabilirsiniz.

Arka plan rengi

Bu modülün arka plan rengini beyaz olarak değiştirin.

• Arka Plan Rengi: #ffffff

Metin Ayarları

Ardından tasarım sekmesine gidin ve metin ayarlarını değiştirin.

• Metin Yazı Tipi: Poppins
• Metin Rengi: #0c0c0c
• Metin Boyutu: 80vw
• Metin Yönü: Merkez

aralık

Üst ve alt dolgu değerlerini de değiştirin.

• Üst Dolgu: 27.8vw
• Alt Dolgu: 27.8vw

Filtreler

Modüle özel bir karışım modülü ekleyerek arka plan maskesi efektini oluşturun.

• Karışım Modu: Ekran

2. Satır Ekle

Sütun Yapısı

Büyük boyutlu karakteriniz yerine oturduğunda, kalan modüllerle yeni bir satır ekleyebilirsiniz.

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve satırın ekranın tüm genişliğini kaplamasına izin verin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Daha sonra bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 1vw
• Alt Dolgu: 1vw
• Sol Dolgu: 3vw
• Sağ Dolgu: 3vw

Sütuna Metin Modülü #1 Ekle

H1 İçeriği Ekle

Kalan modülleri ekleme zamanı. Bu gönderinin önizlemesinde gördüğünüz tasarımın aynısını yeniden oluşturmak istiyorsanız, H1 içeriğine sahip bir Metin Modülü ekleyerek başlayın.

H1 Metin Ayarları

Tasarım sekmesine gidin ve H1 metin ayarlarını değiştirin.

• Başlık Yazı Tipi: Poppins
• Başlık Yazı Tipi Ağırlığı: Yarı Kalın
• Başlık Metni Hizalama: Orta
• Başlık Metni Rengi: #000000
• Başlık Metni Boyutu: 5vw

aralık

Negatif üst kenar boşluğu ekleyerek bu modül ile büyük boyutlu karakterleri içeren Metin Modülü arasında bir örtüşme oluşturun.

• Üst Marj: -38vw

Sütuna Ayırıcı Modül Ekle

görünürlük

İhtiyacımız olan bir sonraki modül bir Bölücü Modül. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

• Bölücüyü Göster: Evet

Renk

Ardından tasarım sekmesine gidin ve ayırıcı rengini değiştirin.

• Renk: #000000

boyutlandırma

Boyutlandırma ayarlarını da değiştirin.

• Bölücü Ağırlığı: 13px
• Genişlik: 16 piksel
• Modül Hizalaması: Merkez

aralık

Aralık ayarlarındaki dolgu değerleriyle birlikte.

• Üst Marj: 2vw
• Alt Marj: 2vw

Sütuna Metin Modülü #2 Ekle

İçerik Ekle

İhtiyacımız olan bir sonraki modül başka bir Metin Modülü. Seçtiğiniz bazı paragraf içeriğini girin.

Metin Ayarları

Ardından, metin ayarlarına gidin ve bazı değişiklikler yapın.

• Metin Yazı Tipi: Sans'ı Aç
• Metin Rengi: #000000
• Metin Boyutu: 1vw (Masaüstü), 2vw (Tablet), 2.5vw (Telefon)
• Metin Satır Yüksekliği: 1.9em
• Metin Yönü: Merkez

aralık

Bazı özel kenar boşluğu değerleri de ekleyin.

• Üst Marj: 3vw
• Alt Kenar Boşluğu: 3vw (Masaüstü), 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)

Sütuna Düğme Modülü Ekle

Kopya Ekle

İhtiyacımız olan sonraki ve son modül bir Düğme Modülü. Seçtiğiniz bir kopyayı girin.

hizalama

Ardından tasarım sekmesine gidin ve düğme hizalamasını değiştirin.

• Düğme Hizalama: Merkez

Düğme Ayarları

Tam olarak istediğiniz gibi görünmesi için düğmeyi şekillendirin.

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 1vw (Masaüstü), 2.5vw (Tablet), 3vw (Telefon)
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #000000
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 50px
• Düğme Yazı Tipi: Sans'ı Aç
• Yazı Tipi Ağırlığı: Ultra Kalın
• Yazı Tipi Stili: Büyük Harf

aralık

Düğmeye bazı özel kenar boşlukları ve dolgu değerleri ekleyerek tasarımı tamamlayın.

• Alt Marj: 10vw
• Üst Dolgu: 15px
• Alt Dolgu: 15px
• Sol Dolgu: 50px
• Sağ Dolgu: 50px

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

Örnek 1

Örnek #2

Son düşünceler

Bu yazıda, Divi ile güzel arka plan maskeleri oluşturmak için büyük boyutlu karakterleri nasıl kullanacağınızı gösterdik. Bu, herhangi bir görüntü düzenleme yazılımı kullanmak zorunda kalmadan özelleştirilmiş ve kişiselleştirilmiş web tasarımı oluşturmanın harika bir yoludur. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.