Yalnızca Divi'nin Yerleşik Seçeneklerini Kullanarak Kopyanıza Degrade Metin Rengi Nasıl Uygulanır

Ne tür bir web sitesi oluşturuyor olursanız olun, kopya ve içeriği vurgulamak en önemli önceliklerden biri olmaya devam ediyor. Divi'nin yerleşik seçenekleriyle oraya ulaşmanın bir sürü yolu var. Sahip olduğunuz olanaklardan biri, kopyanıza bir degrade metin rengi uygulamaktır. Bu, özellikle web sitenizin geri kalanını temiz ve minimalist tutuyorsanız, web sitenize renk katmak için harika bir yaklaşımdır. Boşlukları dengelemeye yardımcı olur ve web sitenize temiz bir nefes verir.

Bu öğreticide, yalnızca Divi'nin yerleşik seçeneklerini kullanarak metninize nasıl degrade bir renk vereceğinizi göstereceğiz.

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan önce, farklı ekran boyutlarındaki sonuca bir göz atalım. Hem açık hem de koyu renk paleti kullanarak bu işi nasıl yapacağınızı göstereceğiz. Yaklaşımı öğrendikten sonra, degrade metinle her türlü tasarımı oluşturabilirsiniz.

Yaklaşmak

1. Divi Karışım Modlarını Anlama

Karışım modları, tam olarak görüntü düzenleme yazılımında alıştığınız şekilde çalışır. Katman yapılarına dayanırlar. Somut olarak, bu, Divi'deki bir karışım modunun belirli bir hiyerarşiyi izleyeceği anlamına gelir:

• Bir modüle uygulanan bir karışım modu, altındaki modül + sütunu karıştırır
• Bir sütuna uygulanan karışım modu, altındaki sütun + satırı karıştırır
• Bir satıra uygulanan karışım modu, altındaki satır + bölümü karıştırır

Bu öğretici için, bir modüle uygulanan karışım modunun altındaki sütunla karışacağını anlamak gerekir. Sütuna bir degrade arka planı ve söz konusu modüle bir karışım modu vererek, degrade renkli metin elde etmeyi başarabiliriz.

2. Tamamen Koyu veya Açık Renk Paleti Arasında Seçim Yapma

Bunu yapmak için ya tamamen koyu ya da açık renk paleti kullanmanız gerekecek. Kullandığımız, açıklaştır ve koyulaştır olan karışım modları, yalnızca tamamen siyah veya beyaz bir renk kullandığınızda istenen sonucu verecektir. Diğer renkleri kullanırken uyguladığımız efekt bir nevi kendini gösterecektir.

3. Sütunlar ve Modüller Arasındaki Tüm Oluk Genişliğini Kaldırma

Yaklaşımın ilk bölümünde belirtildiği gibi, sütun gradyan arka planlarını kullanacağız. Bu gradyan arka planının istemediğimiz hiçbir yerde görünmemesini sağlamak için tüm oluk genişliğini kaldıracağız. Bunu yaparak, modüller arasında uygulanan varsayılan özel kenar boşluğu olmadığından emin olacağız. Kaybettiğimiz alanı telafi etmek için bunun yerine manuel olarak özel dolgu ekleyeceğiz.

4. Bir Elemanın Genişliğini Değiştirmek Yerine Dolgu Kullanmak

Ve bir tasarım öğesinin genişliğini ayarlamak için özel sol ve sağ dolgu kullanacağız. Boyutlandırma ayarlarındaki genişliği değiştirmek, tüm modülün genişliğini değiştirir ve sütun gradyan arka planının sol ve sağ tarafta görünmesini sağlar, bu da istemediğimiz bir şeydir.

Hadi Yaratmaya Başlayalım!

Youtube Kanalımıza Abone Olun

Yeni Bölüm Ekle

Arka plan rengi

Başlayalım! Yeni veya mevcut bir sayfaya normal bir bölüm ekleyin ve ona doğru arka plan rengini verin (açık veya koyu düzeni yeniden oluşturmak isteyip istemediğinize bağlı olarak).

• Arka Plan Rengi: #ffffff (Açık Düzen), #000000 (Koyu Düzen)

aralık

Bölüme bazı özel dolgular ekleyerek devam edin.

• Üst Dolgu: 215px
• Alt Dolgu: 215px

1. Satır Ekle

Sütun Yapısı

Ardından, aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyin:

Sütun 2 Gradyan Arka Planı

Satırın ikinci sütununa bir degrade arka planı ekleyin. Burası, eğitimin sonraki bölümünde Metin Modülü başlığını yerleştireceğimiz yerdir.

• Renk 1: #c700ff
• Renk 2: #32f1ff
• Sütun 2 Gradyan Yönü: 150deg
• 2. Sütun Başlangıç ​​Konumu: %20
• Sütun 2 Bitiş Konumu: %60

boyutlandırma

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

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

aralık

Ve boşluk ayarlarını değiştirin.

• Üst Kenar Boşluğu: 50px
• Alt Kenar Boşluğu: 50px
• Sol Dolgu: 50px
• Sağ Dolgu: 50px

Sütun 2'ye Metin Modülü Ekle

İçerik Ekle

Şimdi devam edin ve eklediğiniz satırın ikinci sütununa bir Metin Modülü ekleyin.

Arka plan rengi

Yeniden oluşturmak istediğiniz düzenin türüne bağlı olarak modülünüze doğru arka planı verin.

• Arka Plan Rengi: #ffffff (Açık Düzen), #000000 (Koyu Düzen)

Başlık Metni Ayarları

Sonraki başlık metni ayarlarını değiştirin.

• Başlık 2 Metin Hizalama: Orta
• Başlık 2 Metin Rengi: #000000 (Açık Düzen), #ffffff (Koyu Düzen)
• Başlık 2 Metin Boyutu: 67px (Masaüstü), 50px (Tablet), 40px (Telefon)
• Başlık 2 Harf Aralığı: -2px

aralık

Ve biraz alt dolgu ekleyin. Sütun gradyan arka planının görünmediğinden emin olmak için kenar boşluğu yerine alt dolgu kullandığımızı unutmayın.

• Alt Dolgu: 50px

Karışım Modu

Sütunun gradyan arka planının eklediğiniz modüle uygulanmasını sağlamak için filtre ayarlarında bir karışım modu uygulayın.

• Karışım Modu: Açıklaştır (Açık Düzen), Koyulaştır (Koyu Düzen)

Satıra Bölücü Modülü Ekle

görünürlük

Bu satırda ihtiyacımız olan ikinci ve son modül bir Bölücü Modül.

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

Arka plan rengi

Arka plan rengini, yeniden oluşturduğunuz düzenin türüne göre değiştirin.

• Arka Plan Rengi: #ffffff (Açık Düzen), #000000 (Koyu Düzen)

aralık

Ayırıcının genişliğini azaltmak için sol ve sağ tarafa bazı özel dolgular ekleyeceğiz.

• Sol Dolgu: 250 piksel
• Sağ Dolgu: 250 piksel

Karışım Modu

Yine, sütun gradyan arka planının gösterilmesini sağlamak için bir karışım modu ekleyin.

• Karışım Modu: Açıklaştır (Açık Düzen), Koyulaştır (Koyu Düzen)

2. Satır Ekle

Sütun Yapısı

Bir sonraki sıraya! Aşağıdaki sütun yapısını kullanın:

Sütun 1 Gradyan Arka Planı

İlk sütuna bir degrade arka planı ekleyerek devam edin.

• Renk 1: #c700ff
• Renk 2: #32f1ff
• Sütun 1 Gradyan Türü: Doğrusal
• Sütun 1 Gradyan Yönü: 105deg
• Sütun 1 Başlangıç ​​Konumu: %20
• Sütun 1 Bitiş Konumu: %50

Sütun 2 Gradyan Arka Planı

İkinci sütun için de bir gradyan arka planı kullanıyoruz.

• Renk 1: #32f1ff
• Renk 2: #c700ff
• Sütun 2 Gradyan Türü: Doğrusal
• Sütun 2 Gradyan Yönü: 90deg
• Sütun 2 Başlangıç ​​Konumu: %40
• Sütun 2 Bitiş Konumu: %60

Sütun 3 Gradyan Arka Planı

Aynı şey üçüncü sütun için de geçerli.

• Renk 1: #c700ff
• Renk 2: #32f1ff
• Sütun 3 Gradyan Türü: Doğrusal
• Sütun 3 Gradyan Yönü: 85deg
• Sütun 3 Başlangıç ​​Konumu: %20
• Sütun 3 Bitiş Konumu: %50

boyutlandırma

Sonraki boyutlandırma ayarlarını değiştirin.

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

aralık

Ve bazı özel sol ve sağ dolgu ekleyin.

• Sol Dolgu: 100 piksel (Masaüstü ve Tablet), 50 piksel (Telefon)
• Sağ Doldurma: 100px (Masaüstü ve Tablet), 50px (Telefon)

Sütun 1'e Blurb Modülü Ekle

İçerik Ekle

Modül eklemeye başlama zamanı! Seçtiğiniz bir başlık ile sütun 1'e bir Bulanıklık Modülü ekleyin. Gönderinin ilerleyen bölümlerinde, gövde içeriğini eklemek için ayrı bir modül kullanacağız.

Simge Seç

Tercih ettiğiniz bir simgeyi seçin.

Arka plan rengi

Ve Blurb Module'ün arka plan rengini değiştirin.

• Arka Plan Rengi: #ffffff (Açık Düzen), #000000 (Koyu Düzen)

Simge Ayarları

Simge ayarlarına gidip orada bazı değişiklikler yaparak devam edin.

• Simge Rengi: #000000 (Açık Düzen), #ffffff (Koyu Düzen)
• Resim/Simge Yerleşimi: Üst
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 51px

Başlık Metni Ayarları

Başlık metni ayarlarını da değiştirin.

• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Metni Hizalama: Orta
• Başlık Metin Rengi: #000000 (Açık Düzen), #ffffff (Koyu Düzen)
• Başlık Harf Aralığı: -1px
• Başlık Satırı Yüksekliği: 1.2em

aralık

Ardından, boşluk ayarlarına gidin ve bazı özel kenar boşluğu ve dolgu değerleri ekleyin.

• Alt Kenar Boşluğu: 5px
• Üst Dolgu: 50px
• Alt Dolgu: 50px
• Sol Dolgu: 50px
• Sağ Dolgu: 50px

Karışım Modu

Son olarak, doğru karışım modunu uygulayın.

• Karışım Modu: Açıklaştır (Açık Düzen), Koyulaştır (Koyu Düzen)

Sütun 1'e Metin Modülü Ekle

İçerik Ekle

Karışım modunun yalnızca simgeye ve başlığa uygulanmasını sağlamak için Blurb Modülünün başlığını ve gövdesini iki modüle ayırıyoruz. Devam edin ve gövde içeriğini içeren Blurb Modülünün hemen altına bir Metin Modülü ekleyin.

Arka plan rengi

Ardından, bir arka plan rengi ekleyin.

• Arka Plan Rengi: #ffffff (Açık Düzen), #0c0c0c (Koyu Düzen)

Metin Ayarları

Ve metin ayarlarını değiştirin.

• Metin Harf Aralığı: 0,5 piksel
• Metin Satırı Yüksekliği: 2.3em
• Metin Yönü: Yasla
• Metin Rengi: Koyu (Açık Düzen), Açık (Koyu Düzen)

aralık

Modüle nefes alması için biraz boşluk bırakmak için, boşluk ayarlarına bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 100 piksel
• Alt Dolgu: 100px
• Sol Dolgu: 70px
• Sağ Dolgu: 70px

Kutu Gölge

Üstüne üstlük, ince bir kutu gölgesi de ekleyin.

• Kutu Gölge Bulanıklığı Gücü: 56px
• Kutu Gölge Yayılma Gücü: -12px
• Gölge Rengi: rgba(0,0,0,0.3)

Blurb Modülünü ve Metin Modülünü İki Kez Klonla + Kalan Sütunlara Yerleştirin

Son olarak, 1. sütunda bulabileceğiniz her iki modülü de kopyalayın ve kopyaları kalan iki sütuna yerleştirin. İçeriği de buna göre değiştirin.

Ön izleme

Tüm adımların üzerinden geçtik, şimdi sonuca son bir göz atalım.

Son düşünceler

Bu gönderide, yalnızca Divi'nin yerleşik seçeneklerini kullanarak web sitenizde nasıl gradyan metni oluşturacağınızı gösterdik. Bu öğreticinin çalışması ve yaklaşımı diğer tasarımlarda da uygulayabilmek için, bu yazının yaklaşım bölümünü gözden geçirmeniz ve tasarımı yeniden oluştururken anlamanız gerekir. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!