Divi ile Güzel Gradyan Arka Plan Hover Geçişleri Nasıl Oluşturulur

Son zamanlarda, Divi'ye, tek bir kod satırına dokunmak zorunda kalmadan daha da harika efektler oluşturmanıza olanak tanıyan bazı ek fareyle üzerine gelme seçenekleri eklendi. Örneğin, artık harika degrade arka plan vurgulu geçişleri oluşturabilirsiniz. Sütun, satır ve kesit gradyanlarını birleştirerek benzersiz tasarımlar elde edebilirsiniz. Bu eğitimde, size bunu tam olarak nasıl yapacağınızı göstereceğiz. Bazı genel adımlardan geçerek başlayacağız. Bu yapıldıktan sonra, ayrı ayrı üç tasarım örneğine odaklanacağız. Ayrıca JSON dosyasını ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

Öğreticiye dalmadan önce, bu eğitim boyunca yeniden oluşturacağımız üç farklı örneğe hızlıca bir göz atalım.

Örnek 1

Örnek #2

Örnek 3

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

Youtube Kanalımıza Abone Olun

Bu ücretsiz kahraman bölümlerine el koymak için önce aşağıdaki düğmeyi kullanarak bunları indirmeniz gerekecek. İ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.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Genel Adımlar

Yeni Bölüm Ekle

aralık

Bazı genel adımlardan geçerek başlayalım. Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyin ve tüm varsayılan dolguyu kaldırın. Tüm üst ve alt dolguyu kaldırmak, daha sonra sütun, satır ve bölüm gradyan arka planlarını birleştirmemize yardımcı olacaktır.

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

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

boyutlandırma

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

• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Aralık ayarlarına geçin ve tüm varsayılan üst ve alt dolguyu kaldırın.

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

Sütuna Metin Modülü #1 Ekle

H1 İçeriği Ekle

Modülleri eklemeye başlayalım! İhtiyacımız olan ilk şey, bazı H1 içeriğine sahip bir Metin Modülü.

H1 Metin Ayarları

Tasarım sekmesine gidin ve H1 metin ayarlarını buna göre değiştirin:

• Başlık Yazı Tipi: Montserrat
• Başlık Metni Hizalama: Orta
• Başlık Metni Rengi: #000000
• Başlık Metni Boyutu: 3vw (Masaüstü), 6vw (Tablet ve Telefon)
• Başlık Harf Aralığı: 0.7vw

boyutlandırma

Daha sonra boyutlandırma ayarlarını açın ve modül hizalaması ile birlikte genişliği değiştirin.

• Genişlik: %48 (Masaüstü), %60 (Tablet ve Telefon)
• Modül Hizalaması: Merkez

aralık

Bir miktar üst kenar boşluğu ekleyerek modülün tasarımını tamamlayın.

• Üst Marj: 10vw

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

görünürlük

Bir sonraki modüle! Bir Bölücü Modül ekleyin ve 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

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

Hat

Sonraki çizgi rengini değiştirin.

• Çizgi Rengi: #000000

boyutlandırma

Boyutlandırma ayarlarına geçin ve aşağıdaki ayarları uygulayın:

• Bölücü Ağırlığı: 0.1vw
• Genişlik: %10 (Masaüstü), %16 (Tablet), %25 (Telefon)
• Modül Hizalaması: Merkez

aralık

Farklı ekran boyutlarına da bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 2vw (Masaüstü), 4vw (Tablet), 6vw (Telefon)
• Alt Dolgu: 2vw (Masaüstü), 4vw (Tablet), 6vw (Telefon)

Sütuna Metin Modülü #2 Ekle

İçerik Ekle

Başka bir Metin Modülü olan bir sonraki modüle geçin. Seçtiğiniz bazı paragraf içeriği ekleyin.

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Sans'ı Aç
• Metin Hizalama: Yasla
• Metin Satırı Yüksekliği: 2.3em

boyutlandırma

Sonraki boyutlandırma ayarlarında genişlik ve modül hizalamasını değiştirin:

• Genişlik: %30 (Masaüstü), %54 (Tablet), %70 (Telefon)
• Modül Hizalaması: Merkez

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

Kopya Ekle

Sütunda ihtiyacımız olan sonraki ve son modül bir Düğme Modülüdür. Seçtiğiniz bir kopyayı ekleyin.

hizalama

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

• Düğme Hizalama: Merkez

Düğme Ayarları

Düğme ayarlarını da değiştirin.

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 0.8vw (Masaüstü), 2vw (Tablet), 2.8vw (Telefon)
• Düğme Metin Rengi: #000000
• Düğme Kenar Genişliği: 1px
• Düğme Sınır Yarıçapı: 1 piksel
• Düğme Yazı Tipi: Montserrat

aralık

Ve farklı ekran boyutlarına bazı özel boşluk değerleri ekleyin.

• Üst Marj: 2vw (Masaüstü), 8vw (Tablet ve Telefon)
• Alt Marj: 10vw
• Üst Dolgu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Alt Dolgu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Sol Dolgu: 3vw (Masaüstü), 6vw (Tablet), 8vw (Telefon)
• Sağ Doldurma: 3vw (Masaüstü), 6vw (Tablet), 8vw (Telefon)

Bölümü İki Kez Klonla

Bölümü tamamladığınızda, iki kez klonlayabilirsiniz; her örnek için bir tane.

Degrade Arka Plan Vurgulu Geçişini Yeniden Oluşturun #1

Bölüm

Varsayılan Degrade Arka Planı

İlk vurgulu geçişi oluşturmaya başlayalım! Bölüm ayarlarını açın ve aşağıdaki varsayılan degrade arka planını ekleyin:

• Renk 1: #d1d1ff
• Renk 2: #f7f7f7
• Gradyan Yönü: 90deg
• Başlangıç ​​Konumu: %50
• Bitiş Konumu: %50

Hover Gradyan Arka Planı

Fareyle üzerine gelindiğinde degrade arka planını değiştirin.

• Renk 1: #f7f7f7
• Renk 2: #ffc1c7
• Gradyan Yönü: 90deg
• Başlangıç ​​Konumu: %50
• Bitiş Konumu: %50

Sıra

Varsayılan Degrade Arka Planı

Sonraki satır ayarlarını açın ve aşağıdaki varsayılan degrade arka plan ayarlarını uygulayın:

• Renk 1: #7032ff
• Renk 2: rgba(255,255,255,0)
• Gradyan Yönü: 90deg
• Başlangıç ​​Konumu: %10
• Bitiş Konumu: %10

Hover Gradyan Arka Planı

Fareyle üzerine gelindiğinde degrade arka planını değiştirin.

• Renk 1: rgba(255,255,255,0)
• Renk 2: #ff324a
• Gradyan Yönü: 90deg
• Başlangıç ​​Konumu: %90
• Bitiş Konumu: %90

Degrade Arka Plan Vurgulu Geçiş #2'yi Yeniden Oluştur

Bölüm

Varsayılan Degrade Arka Planı

İkinci örneğe geçelim! Bölüm ayarlarını açın ve aşağıdaki gradyan arka planını ekleyin:

• Renk 1: #f7f7f7
• Renk 2: #eceaff
• Gradyan Yönü: 156deg
• Başlangıç ​​Konumu: %50
• Bitiş Konumu: %50

Hover Gradyan Arka Planı

Fareyle üzerine gelindiğinde farklı bir degrade arka planı ekleyin:

• Renk 1: #ffeaec
• Renk 2: #f7f7f7
• Gradyan Yönü: 204deg
• Başlangıç ​​Konumu: %50
• Bitiş Konumu: %50

Sıra

Varsayılan Degrade Arka Planı

Sonraki satır ayarlarını açın ve aşağıdaki degrade arka plan ayarlarını uygulayın:

• Renk 1: #a932ff
• Renk 2: rgba(255,255,255,0)
• Gradyan Türü: Radyal
• Radyal Yön: Sol Alt
• Başlangıç ​​Konumu: %14
• Bitiş Konumu: %14

Hover Gradyan Arka Planı

Fareyle üzerine gelindiğinde satır gradyan arka planını uygun şekilde değiştirin:

• Renk 1: #ff324a
• Renk 2: rgba(255,255,255,0)
• Gradyan Türü: Radyal
• Radyal Yön: Sol Üst
• Başlangıç ​​Konumu: %14
• Bitiş Konumu: %14

Kolon

Varsayılan Degrade Arka Planı

Sütun ayarlarına geçin ve aşağıdaki gradyan arka planını ekleyin:

• Renk 1: #a932ff
• Renk 2: rgba(255,255,255,0)
• Gradyan Türü: Radyal
• Radyal Yön: Sağ Üst
• Başlangıç ​​Konumu: %14
• Bitiş Konumu: %14

Hover Gradyan Arka Planı

Fareyle üzerine gelindiğinde sütun gradyan arka planını değiştirin:

• Renk 1: #ff324a
• Renk 2: rgba(255,255,255,0)
• Gradyan Türü: Radyal
• Radyal Yön: Sağ Alt
• Başlangıç ​​Konumu: %14
• Bitiş Konumu: %14

Degrade Arka Plan Vurgulu Geçişi Yeniden Oluştur #3

Bölüm

Varsayılan Degrade Arka Planı

Bir sonraki ve son örneğe geçelim! Bölüm ayarlarını açın ve aşağıdaki gradyan arka planını uygulayın:

• Renk 1: #ffc1c7
• Renk 2: #ffffff
• Gradyan Türü: Radyal
• Radyal Yön: Üst
• Başlangıç ​​Konumu: %45
• Bitiş Konumu: %45

Hover Gradyan Arka Planı

Fareyle üzerine gelindiğinde bölüm gradyan arka planını değiştirin.

• Renk 1: #ffc1c7
• Renk 2: #ffffff
• Gradyan Türü: Radyal
• Radyal Yön: Sol
• Başlangıç ​​Konumu: %20
• Bitiş Konumu: %20

Sıra

Varsayılan Degrade Arka Planı

Sonraki satır ayarlarını açın ve aşağıdaki gradyan arka planını ekleyin:

• Renk 1: #d3dfff
• Renk 2: rgba(255,255,255,0)
• Gradyan Türü: Radyal
• Radyal Yön: Alt
• Başlangıç ​​Konumu: %45
• Bitiş Konumu: %45

Hover Gradyan Arka Planı

Gradyan arka planını buna göre değiştirin:

• Renk 1: #d3dfff
• Renk 2: rgba(255,255,255,0)
• Gradyan Türü: Radyal
• Radyal Yön: Sağ
• Başlangıç ​​Konumu: %20
• Bitiş Konumu: %20

Kolon

Varsayılan Degrade Arka Planı

Son olarak, bir sütun gradyan arka planı ekleyin ve işiniz bitti!

• Renk 1: #f7f7f7
• Renk 2: rgba(255,255,255,0)
• Gradyan Türü: Radyal
• Radyal Yön: Merkez
• Başlangıç ​​Konumu: %41
• Bitiş Konumu: %41

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi bu eğitim boyunca yeniden oluşturduğumuz üç örneğin sonuçlarına son bir göz atalım!

Örnek 1

Örnek #2

Örnek 3

Son düşünceler

Bu gönderide, yalnızca Divi'nin yerleşik seçenekleriyle güzel vurgulu geçişler oluşturmak için Divi'nin ek degrade arka plan vurgulu seçeneklerini nasıl yaratıcı bir şekilde kullanacağınızı gösterdik. Bazı genel adımlarla başladık ve üç örneğin her birini yeniden oluşturarak devam ettik. 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.