Divi'nin Fareyle Üzerine Gelme Seçeneklerini Kullanarak Animasyonlu Başlıklar Oluşturma

Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz Divi yerleşim paketleri sunuyoruz. Düzen paketlerinden biri için, web sitenizi bir sonraki düzeye taşımanıza yardımcı olacak bir kullanım örneği de paylaşıyoruz. Bu hafta, devam eden Divi tasarım girişimimizin bir parçası olarak, Divi'nin fareyle üzerine gelme seçeneklerini ve Driving School Layout Pack'i kullanarak nasıl animasyonlu başlıklar oluşturacağınızı göstereceğiz. Bu, kopyanızın farklı bölümlerini ön plana çıkarmak ve eylemi tetiklemek için harika bir yaklaşımdır.

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan önce, sonuca hızlıca bir göz atalım.

Sürücü Okulu Açılış Sayfasını Yükle

Bu öğreticiyi oluşturmak için Driver School Layout Pack'in açılış sayfasını kullanacağız. Öyleyse devam edin ve yeni bir sayfa ekleyin, Visual Builder'ı etkinleştirin ve önceden hazırlanmış mizanpajlarınızdan açılış sayfasını seçin.

Animasyonlu Başlık #1 Oluşturun

Bölüm Gradyan Arka Planını Değiştir

İlk örneği oluşturmaya başlayalım! Bu animasyonlu başlığı sayfamızın kahraman bölümüne ekliyoruz. Ama oraya varmadan önce, kahraman bölümünüzün ayarlarını açın ve degrade arka plan kaplama renklerini değiştirin.

• Renk 1: rgba(0,0,0,0.94)
• Renk 2: rgba(12,12,12,0.63)

Kahraman Bölümündeki Son İki Satırı Kaldır

Bölümdeki son iki satırı kaldırarak devam edin.

Bölücü Hizalamasını Değiştir

Hala orada olan sırayı koruyoruz. Değiştirmemiz gereken tek şey, Bölücü Modülün modül hizalamasıdır.

• Modül Hizalaması: Merkez

Yeni Satır Ekle

Sütun Yapısı

Bir önceki satırın hemen altında devam edin ve aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyin:

aralık

Sonraki satırın varsayılan özel dolgusunu kaldırın.

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

Sütuna Metin Modülü Ekle

İçerik Ekle

İhtiyacımız olan tek modül bir Metin Modülü. İki farklı metin türü kullanıyoruz: başlık ve paragraf bağlantısı. Devam edin ve istediğiniz kopyayı ekleyin ve her cümlenin ortasında shift + enter tuşlarına basarak kopyanın iki satırda göründüğünden emin olun.

Varsayılan Arka Plan Rengi

Ardından, arka plan ayarlarına gidin ve Metin Modülüne varsayılan bir arka plan rengi ekleyin.

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

Vurgulu Arka Plan Rengi

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

• Arka Plan Rengi: #ffa53b

Varsayılan Metin Ayarları

Ardından, genel metin ayarlarında metin yönünü değiştirin.

• Metin Yönü: Merkez

Varsayılan Bağlantı Metni Ayarları

Bağlantı sekmesine geçin ve bağlantı kopyasının görünümünde bazı değişiklikler yapın.

• Bağlantı Yazı Tipi Ağırlığı: Ultra Kalın
• Bağlantı Yazı Tipi Stili: İtalik, Büyük Harf, Altı Çizili
• Bağlantı Alt Çizgi Rengi: rgba(255,255,255,0.3)
• Bağlantı Metni Boyutu: 0px
• Bağlantı Hattı Yüksekliği: 0em

Bağlantı Ayarlarının üzerine gelin

Bir sonraki adımda fareyle üzerine gelindiğinde bazı değişiklikler yapın.

• Bağlantı Metni Boyutu: 40px
• Bağlantı Hattı Yüksekliği: 1.8em

Varsayılan Başlık Metni Ayarları

Başlık metni ayarlarında da bazı değişiklikler yapın.

• Başlık Yazı Tipi Ağırlığı: Ultra Kalın
• Başlık Yazı Tipi Stili: Büyük Harf
• Başlık Metni Rengi: #ffffff
• Başlık Metni Boyutu: 70px (Masaüstü), 40px (Tablet), 30px (Telefon)
• Başlık Çizgisi Yüksekliği: 1.4em

Vurgulu Başlık Metni Ayarları

Fareyle üzerine gelindiğinde bazı küçük ince ayarlarla.

• Başlık Metni Rengi: rgba(255,255,255,0)
• Başlık Metni Boyutu: 0px

Varsayılan Aralık

Aralık ayarlarına giderek ve bazı özel dolgu değerleri ekleyerek devam edin.

• Üst Dolgu: 40px
• Alt Dolgu: 0px
• Sol Dolgu: 20px
• Sağ Dolgu: 20px

Vurgu Aralığı

Özel dolgu değerleri, üzerine gelindiğinde biraz farklılık gösterir.

• Üst Dolgu: 40px
• Alt Dolgu: 40px
• Sol Dolgu: 20px
• Sağ Dolgu: 20px

Sınır

Biz de bir sınır kullanıyoruz.

• Kenar Genişliği: 10px
• Kenar Rengi: #ffa53b

geçişler

Ve gelişmiş sekmesinde geçiş süresini değiştirerek hızlı bir geçiş ekleyin.

• Geçiş Süresi: 0ms

Animasyonlu Başlık #2 Oluştur

Yeni Bölüm Ekle

Arka plan rengi

Bir sonraki örneğe geçelim! Kahraman bölümünün hemen altına yeni bir bölüm ekleyin ve bir arka plan rengi ekleyin.

• Arka Plan Rengi: #efefef

aralık

Ardından, boşluk ayarlarına gidin ve farklı kenar boşluğu ve dolgu değerleriyle oynayın.

• Alt Kenar Boşluğu: 100 piksel
• Sağ Kenar Boşluğu: 200px (Masaüstü), 100px (Tablet), 50px (Telefon)
• Üst Dolgu: 54px
• Alt Dolgu: 54px

Kutu Gölge

Bu bölümü yerleşim paketiyle eşleştirmek için ince bir kutu gölgesi de ekliyoruz.

• Kutu Gölgesi Yatay Konumu: 30px
• Kutu Gölgesi Dikey Konumu: 30px
• Kutu Gölge Yayılma Gücü: -10px
• Gölge Rengi: #ffa53b

Yeni Satır Ekle

Sütun Yapısı

Bu bölüme eklediğimiz satır aşağıdaki sütun yapısına ihtiyaç duyar:

Metin Modülü Ekle

İçerik Ekle

Bir başlık ve paragraf bağlantısı kullanarak istediğiniz içeriği bir kez daha ekleyin. Ayrıca, ziyaretçilerin web sitesinin farklı bölümlerinde kolayca gezinmelerine yardımcı olacak bir listeden de yararlanıyoruz.

Varsayılan Bağlantı Metni Ayarları

Bağlantı metni ayarlarına gidin ve bağlantı kopyasının görünümünde bazı değişiklikler yapın.

• Bağlantı Yazı Tipi Stili: Altı Çizili
• Bağlantı Metni Rengi: #000000
• Bağlantı Metni Boyutu: 0px (Masaüstü), 20px (Tablet), 13px (Telefon)
• Bağlantı Hattı Yüksekliği: 0px (Masaüstü), 1.8em (Tablet ve Telefon)

Bağlantı Metni Ayarlarının Üzerine Gelme

Fareyle üzerine gelindiğinde bazı küçük değişiklikler yapın.

• Bağlantı Metni Boyutu: 30px
• Bağlantı Hattı Yüksekliği: 2.8em

Varsayılan Başlık Metni Ayarları

Seçtiğiniz başlığın da değiştirilmesi gerekiyor.

• Başlık 2 Yazı Ağırlığı: Ultra Kalın
• Başlık 2 Yazı Tipi Stili: Büyük Harf
• Başlık 2 Metin Boyutu: 30px (Masaüstü ve Tablet), 20px (Telefon)
• Başlık 2 Harf Aralığı: 1px

Vurgulu Başlık Metni Ayarları

Fareyle üzerine gelindiğinde metin boyutunu değiştirin.

• Başlık 2 Metin Boyutu: 0px

Varsayılan Aralık

Aralık ayarlarına giderek ve bazı özel kenar boşluğu ve dolgu değerleri ekleyerek devam edin.

• Sol Kenar Boşluğu: 0px (Masaüstü, Tablet ve Telefon)
• Üst Dolgu: 40px
• Sol Dolgu: 50px

Vurgu Aralığı

Fareyle üzerine gelindiğinde sol kenar boşluğunu değiştirin.

• Sol Kenar Boşluğu: 200 piksel

Varsayılan Kenarlık

Ardından, Metin Modülüne bir sol kenarlık ekleyin.

• Sol Kenar Genişliği: 5px
• Sol Kenar Rengi: #ffa53b

fareyle üzerine gelin

Fareyle üzerine gelindiğinde tüm kenarlık genişliğini kaldırın.

• Sol Kenar Genişliği: 0px

geçişler

Son olarak, biraz daha yüksek bir geçiş süresi kullanarak yumuşak bir geçiş oluşturun.

• Geçiş Süresi: 500ms

Ön izleme

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

Son düşünceler

Bu kullanım örneği gönderisinde, yalnızca Divi'nin yerleşik seçeneklerini kullanarak fareyle üzerine gelindiğinde nasıl animasyonlu başlıklar oluşturabileceğinizi gösterdik. Bu, kopyanızın belirli bölümlerini ön plana çıkarmanın ve ziyaretçilerin eylemlerini yaratıcı bir şekilde tetiklemenin harika bir yoludur. Herhangi bir sorunuz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!