Divi'nin Yeni Görüntü Değiştirme Vurgulu Seçenekleriyle Yaratıcı Olmak

Divi'nin yeni görüntü değiştirme vurgulu seçenekleri, projelerinize yepyeni bir yaratıcılık düzeyi kazandırır. Bu gönderide, fareyle üzerine gelindiğinde değişen resimlerle güzel bir bölümün nasıl oluşturulacağını göstereceğiz. Bu tasarımın, Divi'nin görüntü değiştirme vurgulu seçenekleriyle kendi yaratıcı bölümlerinizi oluşturmanız için size ilham vermesini umuyoruz. JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

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

masaüstü

Mobil

ÜCRETSİZ Görüntü Değiştirme Düzenini İndirin

Ücretsiz görüntü değiştirme düzenine el 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.

Youtube Kanalımıza Abone Olun

Yeniden Oluşturmaya Başlayalım

Yeni Bölüm Ekle

aralık

Yeni bir sayfa oluşturarak veya mevcut bir sayfaya yeni bir bölüm ekleyerek başlayın. Bir satır eklemeden önce bölümün boşluk ayarlarını yapın.

• Üst ve Alt Marj: 2vw
• Sol ve Sağ Kenar Boşluğu: 2vw

Sınır

Ardından, biraz sınır yarıçapı ekleyin.

• Yuvarlatılmış Köşeler: 10px

Yeni 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:

Arka plan

Herhangi bir modül eklemeden önce soluk somon gradyan arka planı ekleyin.

• Arka plan: Gradyan
• Gradyan Rengi 1: Soluk Somon #f4e9de
• Gradyan Rengi 2: Hatta Soluk Somon #fff0e8

boyutlandırma

Satırın genişliğini ayarlayarak devam edin.

• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Son olarak, aralığı ayarlayın.

• Üst Dolgu:
  • Masaüstü + Tablet: 5vw
• Sol Dolgu:
  • Tablet + Telefon: 5vw
• Sağ Dolgu:
  • Masaüstü: 7vw
  • Tablet + Telefon: 5vw

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

H2 İçeriği Ekle

Modül eklemeye başlama zamanı! Sütun 1'e bir metin modülü ekleyin ve seçtiğiniz bazı H2 içeriğini ekleyin.

Başlık Metni

Tasarım sekmesine geçin ve H2 metin ayarlarını buna göre biçimlendirin:

• Başlık Metni Düzeyi: H2
• H2 Yazı Tipi: Annie Teleskopunuzu Kullanın
• H2 Yazı Ağırlığı: Kalın
• H2 Metin Hizalama: Merkez
• H2 Metin Rengi: Kahverengi #793715
• H2 Metin Rengi:
  • Masaüstü: 7.2vw
  • Tablet: 12vw
  • Telefon: 11vw

boyutlandırma

Daha sonra masaüstündeki genişliği değiştirin.

• Genişlik:
  • Masaüstü: 45vw
  • Tablet +Telefon: %100

dönüştürmek

Son olarak, metni döndürün ve dönüştürme ayarlarını kullanarak konumunu değiştirin.

• Dönüştür Döndür:
  • Masaüstü: 270 derece
• Dönüştür Çevirisi:
  • x ekseni: -10vw
  • y ekseni: 19vw

1. Sütun 1'e 1. Görüntü Modülü Ekle

Şeffaf bir illüstrasyon ekleyin

Metin modülünün hemen altına yeni bir resim modülü ekleyin ve seçtiğiniz bir çizimi yükleyin. Bu eğitimde kullandığımız görselleri bu yazının başındaki sıkıştırılmış klasörü indirerek bulabilirsiniz.

boyutlandırma

Şimdi, görüntü boyutunu tam genişliğe zorlayın.

• Tam genişlik: Evet

aralık

Ardından, boşluk ayarlarını yapın.

• Üst boşluk:
  • Masaüstü + Tablet: -11vw
• Sol Kenar Boşluğu:
  • Masaüstü: -2vw
  • Tablet+ Telefon: -36vw
• Sol ve Sağ Dolgu:
  • Masaüstü: 10vw
  • Tablet + Telefon: 34vw

Sütun 1'e 2. Görüntü Modülü Ekle

Şeffaf bir illüstrasyon ekleyin

İlk görüntü modülünün hemen altına bir tane daha ekleyin. Seçtiğiniz bir çizimi ekleyin.

boyutlandırma

Modülü tam genişliğe zorlayın.

• Tam genişlik: Evet

aralık

Ardından, boşluk ayarlarını yapın.

• Üst boşluk:
  • Masaüstü: -2vw
  • Tablet+ Telefon: -10vw
• Sol Kenar Boşluğu:
  • Masaüstü + Tablet: -14vw
• Sol ve Sağ Dolgu:
  • Masaüstü: 7vw
  • Tablet + Telefon: 35vw

Sütun 1'e 3. Görüntü Modülü Ekle

Resim ekle

Sütuna başka bir görüntü modülü ekleyin ve bir çizim ekleyin.

boyutlandırma

Ardından modülü tam genişliğe zorlayın.

• Tam genişlik: Evet

aralık

Son olarak, aralığı ayarlayın.

• Üst boşluk:
  • Tablet+ Telefon: -18vw
• Sol Kenar Boşluğu:
  • Masaüstü: -13vw
  • Tablet + Telefon: 10vw
• Sol ve Sağ Dolgu:
  • Masaüstü: 7vw
  • Tablet + Telefon: 35vw

4. Görüntü Modülünü Sütun 1'e Ekleyin

Resim ekle

Sütun 1'deki son modül, başka bir görüntü modülüdür. Bir illüstrasyon ekleyin.

boyutlandırma

Modülü tam genişliğe zorlayın.

• Tam genişlik: Evet

aralık

Ardından, aralığı ayarlayın.

• Üst boşluk:
  • Masaüstü: 3vw
  • Tablet+ Telefon: -15vw
• Sol Kenar Boşluğu:
  • Masaüstü: -3vw
  • Tablet + Telefon: 30vw
• Sol ve Sağ Dolgu:
  • Masaüstü: 10vw
  • Tablet + Telefon: 35vw

dönüştürmek

Son olarak, resmi döndürün.

• Dönüştür Döndür: 84deg

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

İçerik Ekle

Bir sonraki sütuna! Seçtiğiniz bazı H3 içeriğine sahip bir metin modülü ekleyin.

Link ekle

Ardından, modüle bir bağlantı ekleyin.

Arka plan

Arka plan ayarlarına gidin ve ardından bir arka plan rengi ekleyin.

• Arka plan rengi
• Arka Plan Rengi: Kahverengi #793715

Başlık Metni

Ardından, tasarım sekmesinde H3 metnine stil verin.

• Başlık Metni Düzeyi: H3
• H3 Yazı Tipi: Annie Teleskopunuzu Kullanın
• H3 Renk: Beyaz #ffffff
• H3 Yazı Tipi Boyutu:
  • Masaüstü: 2vw
  • tablet: 5vw
  • Telefon: 6vw

boyutlandırma

Şimdi, boyutlandırma ayarlarını yapın.

• Genişlik: %33
• Modül Hizalaması: Merkez

aralık

Ardından, farklı ekran boyutlarına bazı boşluk değerleri ekleyin.

• Alt Marj: 1vw
• Üst Dolgu:
  • Masaüstü: 0.5vw
  • Tablet + Telefon: 2.3vw
• Alt Dolgu:
  • Masaüstü + Tablet: 1.1vw

Sınır

Sınır yarıçapı ekleyerek devam edin.

• Yuvarlatılmış Köşeler: 1vw tüm köşeler

Kutu Gölge

Son olarak, bir kutu gölgesi ekleyin.

• Kutu Gölgesi: İlk Seçenek
• Yatay Konum: 7px
• Bulanıklık Gücü: 25 piksel

Sütun 2'ye 1. Görüntü Modülü Ekle

Resim eklemek

2. sütunda ihtiyacımız olan bir sonraki modül bir görüntü modülüdür. İki farklı resim yükleyin: biri statik durum için, diğeri fareyle üzerine gelindiğinde.

• Statik: İlk Resim
• Fareyle üzerine gelin: İkinci Resim

boyutlandırma

Resmi tam genişliğe zorlayın.

• Tam genişlik: Evet

aralık

Ardından, boşluk değerlerini ayarlayın.

• Üst boşluk:
  • Masaüstü: -2vw
  • Tablet + Telefon: 20vw
• Alt Kenar Boşluğu:
  • Masaüstü + Tablet: 4vw
• Sol Kenar Boşluğu:
  • Masaüstü: -5vw

Sınır

Ardından yuvarlak köşeler ekleyin.

• Yuvarlatılmış Köşeler: 10 piksel tüm köşeler

Kutu Gölge

Görüntüye ince bir kutu gölgesi de verin.

• Kutu Gölgesi: İkinci Seçenek
• Dikey Konum: 20px
• Bulanıklık Gücü: 80 piksel

dönüştürmek

Son olarak, üzerine gelindiğinde dönüştürme ölçeği değerlerini ayarlayın.

• Hover'da Dönüştürme Ölçeği: %110

Sütun 2'de Yinelenen Metin ve Görüntü Modülleri

Her iki modülü de klonlayın ve kopyaları doğru sırada yerleştirin.

2. Sütundaki 2. Metin Modülünü Ayarlayın

İçeriği ve Bağlantıyı Değiştir

Yinelenen metin modülündeki içeriği değiştirin.

2. Sütundaki 2. Görüntü Modülünü Ayarlayın

Resimleri Değiştir

Görüntüleri hem statik hem de fareyle üzerine gelme ayarlarında değiştirin.

2. sütunu klonla

3. sütunu sil ve 2. sütunu çoğalt

Satır ayarlarına geri dönün ve 3. sütunu silin. Ardından, 2. sütunu çoğaltın.

Sütun 3'teki 1. Metin Modülünü Ayarlayın

İçeriği ve Bağlantıyı Değiştir

2. sütunu çoğalttıktan sonra, 3. sütunun 1. metin modülündeki metni ve bağlantıyı ayarlayın.

Sütun 3'teki 1. Görüntü Modülünü Ayarlayın

Resimleri Değiştir

Görüntü modülündeki görüntüleri de değiştirin.

aralık

Ardından, aralığı ayarlayın.

• Üst boşluk:
  • Masaüstü: -2vw
  • Tablet + Telefon: 11vw
• Alt Kenar Boşluğu
  • Masaüstü + Tablet: 5vw

Sütun 3'teki 2. Metin Modülünü Ayarlayın

İçeriği ve Bağlantıyı Değiştir

3. sütundaki son metin modülünün metnini ve bağlantısını değiştirin.

Sütun 3'teki 2. Görüntü Modülünü Ayarlayın

Resimleri Değiştir

Son görüntü modülünün statik ve vurgulu görüntülerini de değiştirin.

aralık

Son olarak, görüntü modülünün aralığını ayarlayın ve işiniz bitti!

• Üst boşluk:
  • Masaüstü: -3vw
  • Tablet + Telefon: 7vw

Ön izleme

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

masaüstü

Mobil

Çözüm

Bu yazıda, Divi'nin yeni görüntü değiştirme vurgulu seçenekleriyle nasıl tasarım oluşturacağınızı gösterdik. Bu işlevsellik birçok yaratıcı olasılığa yol açabilir. Bunları kendi projelerinizde kullanacağınızı umuyoruz. Hem statik hem de vurgulu görüntüler için aynı görüntü boyutlarını kullanmayı unutmayın. Herhangi bir sorunuz veya öneriniz varsa, bunları aşağıdaki yorum bölümünde bırakmaktan çekinmeyin!