Divi ile Hover'da Gizli Satır İçeriği Nasıl Görünür (Ücretsiz İndirin!)

Web sitenize ince etkileşimler eklemek, ziyaretçilerin sahip olduğu genel kullanıcı deneyimini gerçekten artırabilir. Web sitenizin daha gösterişli görünmesini sağlayacak şeylerden biri, kullanıcı dostu olmaya devam ederken, satır içeriğinin fareyle üzerine gelindiğinde görünmesini sağlamaktır. Bu, hizmetleri, ürünleri, özellikleri ve daha fazlasını sergilemek için harika bir yaklaşımdır.

Bu eğitimde, size A'dan Z'ye belirli bir tasarımın nasıl oluşturulacağını göstereceğiz, ancak bir kez bu yaklaşımı edindikten sonra, üzerinde çalıştığınız her tür web sitesi için çalışmasını sağlayabilirsiniz. ÜCRETSİZ olarak indirebileceğiniz ve herhangi bir kısıtlama olmadan kullanabileceğiniz bu tasarımın JSON dosyasını da bu blog yazımızın sonunda paylaşacağız.

Hadi hadi bakalım!

Ön izleme

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

masaüstü

Mobil

Hadi Yaratmaya Başlayalım!

Yeni Bölüm Ekle

Varsayılan Arka Plan Rengi

Yeni veya mevcut bir sayfaya yeni bir bölüm ekleyerek başlayın ve bölümün arka plan rengini değiştirin.

• Arka Plan Rengi: #e0e0e0

Vurgulu Arka Plan Rengi

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

• Arka Plan Rengi: #000000

aralık

Tasarım sekmesine gidin ve bazı özel boşluk değerleri ekleyin. Bu öğreticinin çalışması için yalnızca görünüm alanı birimlerini kullanacağız. Bu, ekran boyutu ne olursa olsun her şeyin yerinde kalmasını sağlamaya yardımcı olacaktır.

• Üst Marj: 5vw
• Alt Marj: 5vw
• Sol Kenar Boşluğu: 3vw
• Sağ Kenar Boşluğu: 3vw
• Üst Dolgu: 0px
• Alt Dolgu: 0px

1. Satır Ekle

Sütun Yapısı

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

Degrade Arka Plan

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve bir degrade arka planı ekleyin.

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

boyutlandırma

Satırın boyutlandırma ayarlarında da bazı değişiklikler yapın.

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

aralık

Ve boşluk ayarlarına bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 9vw
• Alt Dolgu: 9vw
• Sütun 1 Sol Dolgu: 5vw
• Sütun 1 Sağ Dolgu: 5vw
• Sütun 2 Sol Dolgu: 5vw
• Sütun 2 Sağ Dolgu: 5vw

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

İçerik Ekle

Modülleri eklemeye başlama zamanı! İhtiyacımız olan ilk modül, 1. sütundaki bir Metin Modülüdür. H3 içeriği ve bir bağlantı ekleyin.

Bağlantı Metni Ayarları

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

• Bağlantı Yazı Tipi: Didact Gothic
• Bağlantı Yazı Tipi Stili: Altı Çizili
• Bağlantı Altı Çizili Stili: Katı
• Bağlantı Metni Rengi: #ffffff
• Bağlantı Metni Boyutu: 20px

Başlık Metni Ayarları

H3 metin ayarlarını da değiştirin.

• Başlık 3 Yazı Tipi: Didakt Gotik
• Başlık 3 Metin Rengi: #ffffff
• Başlık 3 Metin Boyutu: 50px

görünürlük

Son fakat en az değil, modülü masaüstünde devre dışı bırakın. Bu modüle yalnızca daha küçük ekran boyutlarında görünmek için ihtiyacımız var.

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

görünürlük

Sütun 1'de ihtiyaç duyulan ikinci ve son modül bir Bölücü Modüldür. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

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

Renk

Ardından, ayırıcı rengini değiştirin.

• Renk: #ffffff

aralık

Bölücü Modüle de bazı özel kenar boşlukları değerleri ekleyin.

• Üst Kenar Boşluğu: 11vw (Masaüstü), 80px (Tablet),
• Alt Kenar Boşluğu: 50px (Tablet ve Telefon)

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

İçerik Ekle

İkinci sütuna geç! Tercih ettiğiniz bazı H4 içeriğine sahip bir Metin Modülü ekleyin.

Başlık Metni Ayarları

Ardından H4 metin ayarlarına gidin ve bazı değişiklikler yapın.

• Başlık 4 Yazı Tipi: Didakt Gotik
• Başlık 4 Yazı Ağırlığı: Kalın
• Başlık 4 Metin Rengi: #ffffff
• Başlık 4 Metin Boyutu: 2vw (Masaüstü), 40px (Tablet), 30px (Telefon)

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

İçerik Ekle

Önceki Metin Modülünün hemen altında, devam edin ve seçtiğiniz bazı paragraf içeriğine sahip bir tane daha ekleyin.

Metin Ayarları

Sonraki metin ayarlarına gidin ve bazı değişiklikler yapın.

• Metin Yazı Tipi: Didact Gothic
• Metin Rengi: #ffffff
• Metin Boyutu: 0.9vw (Masaüstü), 18px (Tablet ve Telefon)
• Metin Satır Yüksekliği: 2em

aralık

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

• Üst Marj: 2vw
• Sağ Marj: 15vw

2. Satır Ekle

Sütun Yapısı

İlk satırı ve tüm modüllerini değiştirmeyi bitirdikten sonra, aşağıdaki sütun yapısını kullanarak devam edebilir ve yeni bir satır ekleyebilirsiniz:

boyutlandırma

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve Boyutlandırma ayarlarında bazı değişiklikler yapın.

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

aralık

Satır aralığı ayarlarındaki tüm varsayılan dolguyu da kaldırın.

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

görünürlük

Son olarak, bu satırı tablet ve telefonda gizleyin.

Sütuna Metin Modülü Ekle

İçerik Ekle

Bu satırda ihtiyacımız olan tek modül bir Metin Modülüdür. Biraz H3 içeriği ve bir bağlantı ekleyin.

Varsayılan Arka Plan Rengi

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

• Arka Plan Rengi: #e0e0e0

Vurgulu Arka Plan Rengi

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

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

Varsayılan Metin Ayarları

Ardından, metin ayarlarına gidin ve bazı değişiklikler yapın.

• Bağlantı Yazı Tipi: Didact Gothic
• Bağlantı Yazı Tipi Stili: Altı Çizili
• Bağlantı Altı Çizili Stili: Katı
• Bağlantı Metni Rengi: #ffffff
• Bağlantı Metni Boyutu: 0px
• Bağlantı Harfi Aralığı: -1px

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

Fareyle üzerine gelindiğinde bağlantı metni boyutunu da değiştirin.

• Bağlantı Metni Boyutu: 1.7vw

Varsayılan Başlık Metni Ayarları

H3 metin ayarlarında bazı değişiklikler yaparak devam edin.

• Başlık 3 Yazı Tipi: Didakt Gotik
• Başlık 3 Yazı Tipi Ağırlığı: Kalın
• Başlık 3 Metin Rengi: #000000
• Başlık 3 Metin Boyutu: 12vw
• Başlık 3 Harf Aralığı: -0.8vw

Vurgulu Başlık Metni Ayarları

Fareyle üzerine gelindiğinde H3 metin ayarlarından bazılarını değiştirin.

• Başlık 3 Metin Rengi: #ffffff
• Başlık 3 Metin Boyutu: 4vw
• Başlık 3 Harf Aralığı: -0.2vw

aralık

Ardından, boşluk ayarlarına gidin ve bazı özel kenar boşluğu ve dolgu değerleri ekleyin.

• Üst Marj: -34.3vw
• Alt Marj: -5vw
• Üst Dolgu: 10vw
• Alt Dolgu: 10vw
• Sol Dolgu: 26.5vw

Vurgu Aralığı

Fareyle üzerine gelindiğinde boşluk değerlerini değiştirin.

• Üst Marj: -34.1vw
• Alt Marj: -5vw
• Üst Dolgu: 12vw
• Alt Dolgu: 12vw
• Sol Dolgu: 11.5vw

geçişler

Metin Modülünün geçiş süresini de artırın.

• Geçiş Süresi: 400ms

Klon Bölümü

İlk bölümünüz tamamlandığında, devam edin ve tüm bölümü istediğiniz kadar klonlayın. Eğitimin sonraki bölümünde, her bir kopyada yapmanız gereken değişiklikleri göstereceğiz.

Bölüm Vurgulu Arka Plan Rengini Değiştir

Değiştirmeniz gereken ilk şey, bölüm vurgulu arka plan rengidir.

• Arka Plan Rengi: #ff5b79

1. Satır Degrade Arka Planını Değiştir

Satır #1 degrade arka planını da değiştirin.

• Renk 1: #000000

Metin Rengini Değiştir ve Kopyala

Metin rengi ve tüm kopya ile birlikte.

• Başlık 3 Metin Rengi: #ff5b79

Metin Modülü Aralığını Değiştir

Son olarak, 2. satırdaki Metin Modülünün sol dolgusunu değiştirin. Kullanmanız gereken sol dolgu miktarı, kullandığınız içeriğin uzunluğuna bağlıdır.

• Sol Dolgu: 21vw

Düzeni ÜCRETSİZ İndirin

Ellerinizi düzene 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.

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!

Ön izleme

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

masaüstü

Mobil

Son düşünceler

Bu gönderide, fareyle üzerine gelindiğinde gizli satır içeriğini nasıl ortaya çıkaracağınızı gösterdik. Yarattığımız sonuç, yalnızca Divi'nin yerleşik seçenekleri kullanılarak yapılmıştır. Ayrıca, kendi alternatif tasarımlarınızı oluşturmanıza yardımcı olacağını umduğumuz JSON dosyasını da öğreticinin sonunda paylaştık. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!