Divi ile Resimlerinize Uygulayabileceğiniz 3 Kusursuz Dönüşüm Hover Efekti

Bir sonraki Divi web sitenizde görselleri sergilemek için harika bir yol mu arıyorsunuz? Okumaya devam edin, çünkü bu yazıda, sayfanızın genel görünümünü ve hissini yükseltmeye yardımcı olacak 3 görüntü dönüştürme vurgulu efektini ele alacağız. Üç farklı örneğin A'dan Z'ye rekreasyon sürecini takip edebilecek ve hatta anında kullanmak üzere indirebileceksiniz. Bu öğreticinin temel amacı, güzel web tasarımı oluşturmak için Divi'nin yeni dönüştürme seçeneklerini mevcut seçeneklerle birleştirmeniz için size ilham vermektir.

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan önce, farklı ekran boyutlarındaki üç örneğin sonuçlarına hızlıca bir göz atalım.

masaüstü

Örnek 1

Örnek #2

Örnek 3

Mobil

Örnek 1

Örnek #2

Örnek 3

Görüntü Dönüşümü Vurgulu Efektleri ÜCRETSİZ İndirin

Youtube Kanalımıza Abone Olun

Ellerinizi ücretsiz görüntü dönüştürme vurgulu efektlerine koymak için, önce aşağıdaki düğmeyi kullanarak bunları 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.

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

Örneklerin her birini ayrı ayrı yeniden oluşturmadan önce bazı genel adımlardan geçeceğiz. Aşağıdaki kenar boşluğu ve dolgu değerlerini kullanarak sayfanıza yeni bir normal bölüm ekleyin:

• Üst Kenar Boşluğu: 200 piksel
• Alt Kenar Boşluğu: 200 piksel
• Ü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:

Sütun 2 Arka Plan Rengi

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve ikinci sütuna bir arka plan rengi ekleyin.

• 2. Sütun Arka Plan Rengi: #efefef

boyutlandırma

Sonraki boyutlandırma ayarlarına gidin 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
• Sütun Yüksekliklerini Eşitle: Evet
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Ardından aşağıdaki özel dolgu değerlerini ekleyin:

• Üst Dolgu: 0px
• Alt Dolgu: 0px
• Sütun 2 Üst Dolgu: 10vw
• Sütun 2 Alt Dolgu: 10vw
• Sütun 2 Sol Dolgu: 5vw
• Sütun 2 Sağ Dolgu: 5vw

Metin Modülü #1'i Sütun 2'ye ekleyin

H2 İçeriği Ekle

Bir Metin Modülü ile başlayarak çeşitli modülleri sütun 2'ye eklemeye başlama zamanı. Seçtiğiniz bazı H2 içeriğini girin.

H2 Metin Ayarları

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

• Başlık 2 Yazı Tipi: Times New Roman
• Başlık 2 Yazı Tipi Ağırlığı: Kalın
• Başlık 2 Metin Rengi: #0f47ff
• Başlık 2 Metin Boyutu: 3.5vw

Sütun 2'ye Bölücü Modülü Ekle

görünürlük

İkinci sütunda ihtiyacı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: #ff961e

boyutlandırma

Boyutlandırma değerlerini de değiştirin.

• Bölücü Ağırlığı: 1px
• Genişlik: 20%
• Modül Hizalama: Sol
• Yükseklik: 0 piksel

aralık

Ve aşağıdaki üst ve alt kenar boşluğu değerlerini kullanarak modül için biraz boşluk yaratın:

• Üst Marj: 1vw
• Alt Marj: 1vw

Metin Modülü #2'yi Sütun 2'ye ekleyin

İçerik Ekle

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

Metin Ayarları

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

• Metin Yazı Tipi: Sans'ı Aç
• Metin Boyutu: 0.7vw (Masaüstü), 1.7vw (Tablet), 2.5vw (Telefon)
• Metin Satırı Yüksekliği: 1.5vw (Masaüstü), 2.5vw (Tablet), 3.5vw (Telefon)
• Metin Yönü: Yasla

boyutlandırma

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

• Genişlik: %61 (Masaüstü), %80 (Tablet ve Telefon)

aralık

Ve bazı özel üst ve alt kenar boşlukları ekleyin.

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

Sütun 3'e Metin Modülü #3'ü ekleyin

İçerik Ekle

İkinci sütunda ihtiyacımız olan bir sonraki ve son modüle, başka bir Metin Modülüne geçiyoruz. Bu modülü, bazı paragraf içeriği ekleyerek bir düğme olarak kullanacağız.

Link ekle

CTA'ya bir bağlantı ekleyerek devam edin.

Metin Ayarları

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

• Metin Yazı Tipi: Times New Roman
• Metin Rengi: #ff961e
• Metin Boyutu: 1.5vw (Masaüstü), 2.5vw (Tablet), 3.5vw (Telefon)

boyutlandırma

Boyutlandırma ayarlarında modülün genişliğini de değiştirin.

• Genişlik: %48

aralık

Ardından, boşluk ayarlarına gidin ve bazı özel dolgular ekleyin.

• Üst Dolgu: 1vw
• Alt Dolgu: 1vw

Sınır

Aşağıdaki ayarlarla bir alt kenarlık ekleyerek Metin Modülünü tamamlayın:

• Alt Kenar Genişliği: 1px
• Alt Kenar Rengi: #0f47ff

Bölümü İki Kez Klonla

Bölümü ve içindeki tüm öğeleri özelleştirmeyi tamamladığınızda, devam edip iki kez klonlayabilirsiniz. Bu gönderinin başında paylaşılan üç örneği yeniden oluşturmak için sayfamızdaki bölümlerin her birini kullanacağız.

Örnek 1'i Yeniden Oluştur

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

Görüntü Kutusunu Boş Bırak

İlk örnekle başlayalım! İlk sütuna yeni bir Görüntü Modülü ekleyin ve görüntü kutusunu boş bıraktığınızdan emin olun.

Varsayılan Arka Plan Rengi

Görüntü Modülünün arka plan rengini değiştirin:

• Arka Plan Rengi: #0f47ff

Vurgulu Arka Plan Rengi

Fareyle üzerine gelindiğinde arka plan rengini değiştirin.

• Arka Plan Rengi: rgba(255,150,30,0.65)

Arka plan görüntüsü

Bir resim yüklemek yerine, aşağıdaki ayarlarla birlikte arka plana bir resim ekleyeceğiz:

• Arka Plan Resmi Boyutu: Kapak
• Arka Plan Resmi Konumu: Merkez
• Arka Plan Resmi Tekrarı: Tekrar Yok
• Arka Plan Resmi Karışımı: Yumuşak Işık

aralık

Modülün boşluk ayarlarına geçin ve bazı özel dolgu değerleri ekleyin:

• Resmin Altındaki Boşluğu Göster: Hayır
• Üst Dolgu: 22vw
• Alt Dolgu: 22vw

Varsayılan Çevir Döndür

Ayrıca fareyle üzerine gelindiğinde görüntüyü döndüreceğiz. Doğru seçeneğe '0deg' ekleyerek görüntünün üzerine gelmeden önce orijinal durumunda göründüğünden emin olun.

• Sağ: 0 derece

Fareyle Çevir Döndür

Fareyle üzerine gelindiğinde bu değeri değiştirin:

• Sağ: 180 derece

geçişler

Anında bir etki yaratmak için geçiş süresini kaldıracağız:

• Geçiş Süresi: 0ms

Örnek 2'yi Yeniden Oluştur

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

Görüntü Kutusunu Boş Bırak

İkinci örneğe geçelim! Yine, görüntü kutusunu boş bıraktığınızdan emin olun.

Varsayılan Arka Plan Rengi

Arka plan ayarlarına gidin ve aşağıdaki (tamamen şeffaf) arka plan rengini ekleyin:

• Arka Plan Rengi: rgba(255,255,255,0)

Vurgulu Arka Plan Rengi

Fareyle üzerine gelindiğinde bu rengi değiştirin:

• Arka Plan Rengi: rgba(0,0,0,0.65)

Arka plan görüntüsü

Yine, modülün kendisine bir tane yüklemek yerine bir arka plan resmi kullanıyoruz. Arka plan resmini aşağıdaki ayarlarla birleştirin:

• Arka Plan Resmi Boyutu: Kapak
• Arka Plan Resmi Konumu: Merkez
• Arka Plan Resmi Tekrarı: Tekrar Yok
• Arka Plan Resmi Karışımı: Yumuşak Işık

aralık

Ardından, boşluk ayarlarına gidin ve üst ve alt dolguyu değiştirin:

• Resmin Altındaki Boşluğu Göster: Hayır
• Üst Dolgu: 22vw
• Alt Dolgu: 22vw

Varsayılan Dönüştürme Ölçeği

Varsayılan dönüştürme ölçeği değerlerinin '%100' kaldığından emin olun.

• Sağ: %100
• Alt: %100

Hover Dönüşüm Ölçeği

Ve bir ölçekleme efekti oluşturmak için üzerine gelindiğinde bu değerleri değiştirin.

• Sağ: %120
• Alt: %120

Varsayılan Dönüştür Çevirisi

Varsayılan olarak, dönüştürme çevirme ayarlarında alt seçenek için '0px' tutuyoruz.

• Alt: 0 piksel

Fareyle Dönüştürme Çevirisi

Öğeyi yeniden konumlandırmak için üzerine gelindiğinde bu değeri değiştirin.

• Alt: 9vw

geçişler

Ayrıca, gelişmiş sekmesinde geçiş süresini değiştirerek biraz daha hızlı bir geçiş oluşturuyoruz:

• Geçiş Süresi: 200ms

Örnek 3'ü Yeniden Oluştur

Sütun Yapısını Değiştir

Bir sonraki ve son örneğe geçelim! Satırın sütun yapısını değiştirerek başlayın.

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

1:1 Resim Yükle

Ardından, ilk sütuna bir Görüntü Modülü ekleyin. İlk iki örneğin aksine, 1:1 oranında (aynı genişlik ve yükseklikte) bir resim yükleyeceğiz.

boyutlandırma

Tasarım sekmesine gidin ve boyutlandırma ayarlarında resmi tam genişlikte olmaya zorlayın.

• Tam Genişliği Zorla: Evet

aralık

Sonraki boşluk ayarlarında görüntünün altındaki boşluğu kaldırın.

• Resmin Altındaki Boşluğu Göster: Hayır

Varsayılan Kenarlık

Ardından kenarlık ayarlarına gidin ve köşelerin her birine '500vw' ekleyin. Bu değerin tüm ekran boyutlarını kapsayacak kadar yüksek olduğundan emin oluyoruz.

fareyle üzerine gelin

Fareyle üzerine gelindiğinde eklediğiniz yuvarlak köşeleri kaldırın.

Varsayılan Filtreler

Ardından filtre ayarlarına gidin ve şu varsayılan değerlerin eklendiğinden emin olun:

• Doygunluk: %100
• Parlaklık: %46
• Opaklık: %3

Hover Filtreleri

Değiştirilen ayarların her birinde fareyle üzerine gelme seçeneğini etkinleştirin ve aşağıdaki değerleri kullanın:

• Doygunluk: %300
• Parlaklık: %46
• Opaklık: %100

Varsayılan Dönüştürme Ölçeği

Ardından dönüştürme seçeneklerine gidin ve varsayılan dönüştürme ölçeği seçeneklerini değiştirin:

• Sağ: %68
• Alt: %68

Hover Dönüşüm Ölçeği

Fareyle üzerine gelindiğinde bu değerleri değiştirin.

• Sağ: %130
• Alt: %130

Varsayılan Dönüştür Çevirisi

Dönüştürme çeviri değerlerine geçin ve varsayılan dönüştürme çeviri değerlerinin aynı kaldığından emin olun:

• Sağ: 0 piksel
• Alt: 0 piksel

Fareyle Dönüştürme Çevirisi

Üzerine gelindiğinde değerleri değiştirin.

• Sağ: 1vw
• Alt: 8vw

geçişler

Son olarak, sorunsuz bir geçiş oluşturmak için gelişmiş sekmesinde geçiş süresini artırın ve işiniz bitti!

• Geçiş Süresi: 600ms

Ön izleme

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

masaüstü

Örnek 1

Örnek #2

Örnek 3

Mobil

Örnek 1

Örnek #2

Örnek 3

Son düşünceler

Bu gönderide, Görüntü Modülü ve Divi'nin üzerine gelme ve dönüştürme seçenekleriyle nasıl yaratıcı olunacağını gösterdik. Yeniden yarattığımız efektler, oradaki birçok güzel olasılıktan sadece birkaçı. 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.