Sayfanızı Divi ile Hover Üzerinde Dönüşen Şekillerle Süsleyin

Etkileşimli tasarım oluşturmak, herhangi bir web sitesinin görünümünü ve verdiği hissi hemen yükseltmeye yardımcı olan bir şeydir. Divi'nin yerleşik seçenekleriyle, birçok dönüş yapabilir ve web sitenize gerçekten benzersiz efektler oluşturabilirsiniz.

Bu gönderide, fareyle üzerine gelindiğinde şekil değiştiren şekillerle sayfanızı nasıl süsleyeceğinizi göstereceğiz. Elde edeceğimiz sonuç, masaüstü deneyimine odaklanır, ancak daha küçük ekran boyutlarında da temiz ve kullanıcı dostu bir tasarım tutar.

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan önce, sıfırdan yeniden oluşturacağımız iki örneğe hızlıca bir göz atalım.

Örnek 1

Örnek #2

Şekilli Görüntü Bindirmelerini İndirin

Bu eğitim boyunca kullanılan şekilli görüntü bindirmeleri üzerine ellerinizi koymak için, aşağıdaki düğmeyi kullanarak bunları indirmeniz gerekecektir. İ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!

Hadi Yaratmaya Başlayalım!

Yeni Bölüm Ekle

Arka plan rengi

Yeni bir sayfa oluşturarak veya mevcut bir sayfayı açarak Stary. Buna normal bir bölüm ekleyin, bölüm ayarlarını açın ve tamamen siyah bir arka plan rengi ekleyin.

• Arka Plan Rengi: #000000

taşma

Bu öğreticide daha sonra şekillendirilmiş görüntü bindirmesini kesmek için, bölümün ana öğesine tek bir CSS kodu satırı ekleyerek hiçbir şeyin bölüm kapsayıcısını aşmadığından emin olacağız.

overflow: hidden;

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 ekranın tüm genişliğini kaplamasına izin verin.

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

Satıra Görüntü Modülü Ekle

Şekilli Görüntü Bindirme Yükle

Modül eklemeye başlama zamanı! İhtiyacımız olan ilk modül bir Görüntü Modülü. İndirdiğiniz klasörde bulabileceğiniz ilk şekilli görüntü bindirmesini yükleyin. Bu gönderiye giderek, dosyaları indirerek, Illustrator dosyasını açarak ve bunları ihtiyaçlarınıza göre özelleştirerek daha fazla şekilli görüntü bindirmeleri bulabilirsiniz. Ancak, bu gönderinin önizlemesinde paylaşılan örnekleri yeniden oluşturmak isterseniz, bu gönderinin başında indirdiğiniz klasör işinizi görecektir.

Varsayılan Arka Plan Rengi

Görüntü Modülünün arka plan ayarlarına gidin ve aşağıdaki varsayılan arka plan rengini ekleyin:

• Arka Plan Rengi: #6a00ff

Vurgulu Arka Plan Rengi

Aşağıdaki renk kodunu kullanarak fareyle üzerine gelindiğinde arka plan rengini değiştirin:

• Arka Plan Rengi: #ffa216

Degrade Arka Plan

Görüntü Modülüne de degrade bir arka plan ekleyerek devam edin.

• Renk 1: #ff2841
• Renk 2: rgba(255,255,255,0)
• Gradyan Yönü: 168deg
• Bitiş Konumu: %68

boyutlandırma

Tasarım sekmesine gidin ve 'Tam Genişliğe Zorla' seçeneğini etkinleştirin.

• Tam Genişliği Zorla: Evet

aralık

Ayrıca, boşluk ayarlarına bir miktar negatif üst kenar boşluğu ekleyerek, şekilli görüntü bindirmesinin bir kısmını da gizliyoruz. Eğitimin başında bölüme eklediğimiz tek satırlık CSS kodu sayesinde modülün bölüm kapsayıcısını geçmeyeceğini fark edeceksiniz.

• Üst Kenar Boşluğu: -22vw (Masaüstü ve Tablet), 0vw (Telefon)

Varsayılan Dönüştür Döndür

Artık modülü dönüştürmeye başlayabiliriz! Görüntü Modülüne aşağıdaki varsayılan dönüştürme döndürme ayarlarını ekleyin:

• Merkez: 359deg

Hover Dönüştür Döndür

Ve dönüşen bir şekil oluşturmak için üzerine gelindiğinde bu değerleri değiştirin.

• Sol: 250deg
• Merkez: 320 derece

CSS kimliği

Görüntü Modülü üzerine gelindiğinde, şekillendirilmiş görüntü bindirmesi, üstündeki diğer tüm modüllerle örtüşecektir. Bunu önlemek için, daha sonra gönderide fareyle üzerine gelindiğinde modülün z-endeksini değiştirmemiz gerekecek. Bunu başarmak için Görüntü Modülüne özel bir CSS sınıfı eklemeniz gerekir.

geçişler

Son olarak, gelişmiş sekmesinde geçiş süresini artırarak yumuşak bir geçiş oluşturuyoruz.

• Geçiş Süresi: 950ms

Satıra Metin Modülü #1 Ekle

H2 İçeriği Ekle

İhtiyacımız olan bir sonraki modül bir Metin Modülü. Seçtiğiniz bazı H2 içeriğini ekleyin.

H2 Metin Ayarları

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

• Başlık 2 Yazı Tipi: Didact Gothic
• Başlık 2 Yazı Tipi Ağırlığı: Kalın
• Başlık 2 Metin Hizalama: Orta
• Başlık 2 Metin Rengi: #ffffff
• Başlık 2 Metin Boyutu: 7vw
• Başlık 2 Çizgi Yüksekliği: 0.9em

aralık

Bazı özel kenar boşluğu değerlerini kullanarak bu modül ile Görüntü Modülü arasında bir örtüşme oluşturun.

• Üst Marj: -68vw
• Alt Marj: 8vw
• Sol Kenar Boşluğu: 29vw
• Sağ Kenar Boşluğu: 29vw

Satıra Metin Modülü #2 Ekle

İçerik Ekle

Bir öncekinin hemen altına başka bir Metin Modülü ekleyin ve seçtiğiniz bazı paragraf içeriğini girin.

Metin Ayarları

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

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

aralık

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

• Alt Kenar Boşluğu: 2vw (Masaüstü), 4vw (Tablet), 6vw (Telefon)
• Sol Kenar Boşluğu: 30vw (Masaüstü), 10vw (Tablet ve Telefon)
• Sağ Kenar Boşluğu: 30vw (Masaüstü), 10vw (Tablet ve Telefon)

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

görünürlük

İhtiyacımız olan sonraki ve son 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ının rengini değiştirin.

• Renk: #ffffff

boyutlandırma

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

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

aralık

Ve bazı özel alt dolgu ekleyin.

• Alt Marj: 5vw

Tüm Bölümü Klonla

İkinci örneğe geçelim! Yeni tamamladığınız bölümü klonlayın.

Görüntü Modülünü Değiştir

Yeni Şekilli Görüntü Bindirme Yükle

Şekilli görüntü bindirmesinden başlayarak yapmamız gereken birkaç değişiklik var. Devam edin ve bu yazının başında indirdiğiniz klasörde bulabileceğiniz ikinci şekilli görüntü bindirmesini yükleyin.

Varsayılan Arka Plan Rengini Değiştir

Ardından, Görüntü Modülünün arka plan ayarlarına gidin ve varsayılan arka plan rengini değiştirin.

• Arka Plan Rengi: #2d007c

Vurgulu Arka Plan Rengini Değiştir

Vurgulu arka plan rengini de değiştirin.

• Arka Plan Rengi: #008089

Degrade Arka Planını Değiştir

Gradyan arka planı ile birlikte.

• Renk 1: #0c0c0c
• Renk 2: rgba(255,255,255,0)
• Gradyan Yönü: 168deg
• Bitiş Konumu: %68

Varsayılan Dönüştür Döndür Ayarlarını Değiştir

Ayrıca dönüştürme etkisini de değiştiriyoruz. Dönüştürme ayarlarına gidin ve varsayılan dönüştürme döndürme değerlerini değiştirin.

• Sol: 270 derece
• Merkez: 359deg

Vurgulu Dönüştür Döndürme Ayarlarını Değiştir

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

• Sol: 192 derece
• Merkez: 280deg
• Sağ: 15 derece

Sayfaya Özel Kod Ekle

Sayfa Ayarlarını Aç

Şimdi, bu gönderinin son kısmı, üzerine gelindiğinde dönüşen şeklin diğer tüm modüllerin altında kalmasını sağlıyor. Sayfa ayarlarını açın.

CSS Kodu Ekle

Ardından gelişmiş sekmeye gidin ve aşağıdaki CSS kodunu ekleyin.

.hover-state:hover {
z-index: -99; }

Eğitim boyunca bölümlere atadığımız CSS Sınıfını kullanıyoruz.

Ön izleme

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

Örnek 1

Örnek #2

Son düşünceler

Bu yazıda, Divi'nin dönüştürme seçenekleriyle nasıl yaratıcı olabileceğinizi gösterdik. Daha spesifik olarak, dönüşen bir arka plan şekli oluşturmak için şekilli görüntü bindirmeleri ile Görüntü Modüllerini kullandık. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!