Divi ile Hover'da Sütun İçeriği Nasıl Gösterilir (Ücretsiz İndirin!)

En son Divi gönderilerinden birinde, fareyle üzerine gelindiğinde gizli satır içeriğinin nasıl görüneceğini gösterdik. Bugün, bunun yerine sütun içeriğini ortaya çıkarmak için aynı tür yaklaşımı nasıl kullanacağınızı göstereceğiz. Ele alacağımız yaklaşım benzerdir ve masaüstünde güzel bir fareyle üzerine gelme efektine sahip her türlü tasarımı oluşturmanıza olanak tanır, ancak fareyle üzerine gelme seçenekleri olmadan daha küçük ekran boyutları için de iyi çalışır.

Bu öğreticinin, oluşturduğunuz web siteleri için her türlü etkileşimli tasarım oluşturmanız için size ilham vereceğini umuyoruz! Gönderinin sonunda, JSON dosyasını indirebilecek ve ihtiyaçlarınıza göre ayarlayabileceksiniz.

Hadi hadi bakalım!

Ön izleme

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

masaüstü

Aşağıdaki GIF'de fark edebileceğiniz gibi, fareyle üzerine gelindiğinde sütun içeriğini ortaya çıkaran yumuşak bir fareyle üzerine gelme geçişimiz var.

Mobil

Daha küçük ekran boyutlarında ise, sütun içeriği gezinmeye gerek kalmadan zaten gösterilecektir.

Yeniden Yaratmaya Başlayalım!

Youtube Kanalımıza Abone Olun

Yeni Normal Bölüm Ekle

aralık

Yeni veya mevcut bir sayfa açın ve ona normal bir bölüm ekleyin. Bölüm ayarlarını açın ve boşluk ayarlarına biraz üst ve alt özel dolgu ekleyin.

• Üst Dolgu: 10vw
• Alt Dolgu: 15vw

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:

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 ayarlar, satırın ekranın tüm genişliğini kaplamasına izin verecek ve ayrıca sütunlar arasındaki tüm boşluğun kaldırılmasına yardımcı olacaktır.

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

aralık

Sonraki satırın boşluk ayarlarına gidin. Burada, önceki adımda kaldırdığımız alanı özel dolgu değerleri ekleyerek değiştireceğiz.

• Sol Dolgu: 8vw
• Sağ Dolgu: 8vw
• Sütun 1 Sağ Dolgu: 2vw
• Sütun 2 Sol Dolgu: 1vw
• Sütun 2 Sağ Dolgu: 1vw
• Sütun 3 Sol Dolgu: 2vw

Metin Modülü #1'i Sütun 1'e ekleyin

İçerik Ekle

Modül eklemeye başlama zamanı! Sütun 1'de bir Metin Modülü ile başlayın. Seçtiğiniz bazı H3 içeriğini ekleyin.

H3 Metin Ayarları

Ardından, başlık metni ayarlarına gidin ve H3 içeriğinin görünümünde bazı değişiklikler yapın.

• Başlık 3 Yazı Tipi: Didakt Gotik
• Başlık 3 Yazı Tipi Ağırlığı: Kalın
• Başlık 3 Metin Hizalama: Merkez
• Başlık 3 Metin Rengi: #3567ff
• Başlık 3 Metin Boyutu: 1.2vw (Masaüstü), 20px (Tablet ve Telefon)

aralık

Sonraki Metin Modülüne bazı özel boşluk değerleri ekleyin.

• Alt Marj: 4vw
• Üst Dolgu: 4vw
• Alt Dolgu: 4vw

Kutu Gölge

Ve modüle ince bir kutu gölgesi verin.

• Kutu Gölge Dikey Konumu: 36px
• Kutu Gölge Bulanıklığı Gücü: 60px
• Gölge Rengi: rgba(0,0,0,0.06)

Metin Modülü #2'yi Sütun 1'e ekleyin

İçerik Ekle

Bir öncekinin hemen altına başka bir Metin Modülü ekleyerek devam edin. Seçtiğiniz bazı paragraf içeriği ekleyin.

Metin Ayarları

Ardından tasarım sekmesine gidin ve metin ayarlarında bazı değişiklikler yapın.

• Metin Yazı Tipi: Sans'ı Aç
• Metin Boyutu: 0.8vw (Masaüstü), 14px (Tablet ve Telefon)
• Metin Harf Aralığı: -0.05vw
• Metin Satırı Yüksekliği: 2.2em
• Metin Yönü: Yaslanmış
• Metin Rengi: Koyu

aralık

Boşluk ayarlarında da özel kenar boşluğu ve dolgu değerleri ile oynayın.

• Alt Marj: 3vw
• Üst Dolgu: 2vw
• Alt Dolgu: 2vw
• Sol Dolgu: 4vw
• Sağ Dolgu: 4vw

Sınır

Ve aşağıdaki ayarları kullanarak modüle bir sol ve sağ kenarlık ekleyin:

• Sağ Kenar Genişliği: 1px
• Sağ Kenar Rengi: #e5e5e5

Sütun 1'e Düğme Modülü Ekle

Kopya Ekle

İlk sütunda ihtiyacımız olan sonraki modül bir Düğme Modülüdür. Seçtiğiniz bir kopyayı ekleyin.

hizalama

Ardından, tasarım sekmesine gidin ve düğme hizalamasını orta olarak değiştirin.

• Düğme Hizalama: Merkez

Düğme Ayarları

Düğme ayarlarını açarak devam edin ve elde etmeyi hedeflediğimiz genel tasarımla eşleşmesi için düğmenin görünümünü değiştirin.

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 1vw (Masaüstü), 15px (Tablet ve Telefon)
• Düğme Metin Rengi: #000000
• Düğme Kenar Genişliği: 1px
• Düğme Kenar Rengi: #dddddd
• Düğme Sınır Yarıçapı: 0px
• Düğme Harf Aralığı: -0.05vw
• Yazı Ağırlığı: Kalın
• Yazı Tipi Stili: Büyük Harf

aralık

Düğme Modülünün boşluk değerleriyle de oynayın.

• Alt Kenar Boşluğu: 100 piksel (Tablet ve Telefon)
• Üst Dolgu: 0.8vw (Masaüstü), 10px (Tablet ve Telefon)
• Alt Dolgu: 0.8vw (Masaüstü), 10px (Tablet ve Telefon)
• Sol Dolgu: 3.5vw (Masaüstü), 50px (Tablet ve Telefon)
• Sağ Doldurma: 3.5vw (Masaüstü), 50px (Tablet ve Telefon)

Modülleri Sütun 1'de İki Kez Klonla ve Kopyaları Kalan Sütunlara Yerleştir

Sütun 1'e üç farklı modülü eklemeyi tamamladığınızda, devam edip modüllerin her birini iki kez klonlayabilirsiniz. Sütunların her birinde aynı tasarımı elde etmek için kopyaları kalan iki sütuna yerleştirin.

Sütun 2'deki Metin Modülü #1 Metin Rengini Değiştirin

Sütun 2'deki ilk Metin Modülünü açın ve metin rengini değiştirin.

• Başlık 3 Metin Rengi: #6d28c1

Sütun 3'teki Metin Modülü #1 Metin Rengini Değiştirin

Üçüncü sütundaki ilk Metin Modülü için de aynı şeyi yapın.

• Başlık 3 Metin Rengi: #15668e

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

İçerik Ekle

Artık ihtiyacımız olan tüm sütun içeriğine sahip olduğumuza göre, üzerine gelmeden önce içeriği gizleyecek örtüşen öğeyi ekleyebiliriz. Bunu başarmak için başka bir Metin Modülü kullanacağız. Devam edin ve ilk sütuna bir tane daha ekleyin. Bunun sütundaki son modül olduğundan emin olun. Seçtiğiniz bazı içeriği ekleyin.

Degrade Arka Plan

Modüle bir gradyan arka planı ekleyerek devam edin.

• Renk 1: #6a30ff
• Renk 2: #3567ff
• Gradyan Yönü: 124deg

Metin Ayarları

Sonraki metin ayarlarını değiştirin.

• Metin Yazı Tipi: Didact Gothic
• Metin Rengi: #ffffff
• Metin Boyutu: 2vw
• Metin Yönü: Merkez

aralık

Ve bazı özel dolgu değerleri ekleyerek modülden bir şekil oluşturun. Ayrıca, bu modül ile sütun içeriği arasında örtüşme oluşturmak için bir miktar negatif üst kenar boşluğu ekliyoruz. Metin Modülünün arkasına gizlediğiniz içerik tıklanabilir olmayacaktır. Bu nedenle, örneğimizdeki düğme gibi harekete geçirici mesajın üzerine gelmeden görünür durumda tutulması önemlidir.

• Üst Marj: -38vw
• Üst Dolgu: 15vw
• Alt Dolgu: 15vw

Sınır

Sonraki Metin Modülüne bazı yuvarlak köşeler ekleyin.

Kutu Gölge

İnce bir kutu gölgesi ile birlikte.

• Kutu Gölge Bulanıklığı Gücü: 40px
• Gölge Rengi: rgba(0,0,0,0.16)

Varsayılan Filtreler

Ardından filtre ayarlarına gidin ve opaklığın varsayılan olarak '%100' olduğundan emin olun.

• Opaklık: %100

Hover Filtreleri

Fareyle üzerine gelindiğinde opaklığı '%' olarak değiştirin. Bu, modülü ortadan kaldıracak ve bunun yerine tüm sütun içeriğinin görünmesine izin verecektir.

• Opaklık: %0

Özel CSS

Metin Modülünün tüm sütun içeriğinin üstünde kaldığından emin olmak için Metin Modülünün gelişmiş sekmesine iki satır CSS kodu ekleyin.

z-index: 99;
position: relative

görünürlük

Ve tüm modülü tablet ve telefonda gizleyin. Bu gönderinin başında belirtildiği gibi, ziyaretçilerin sahip olduğu kullanıcı deneyiminin iyi olduğundan emin olmak için tüm sütun içeriğini daha küçük ekran boyutlarında gösteriyoruz.

Metin Modülünü İki Kez Klonla ve Kopyaları Kalan Sütunlara Yerleştir

Bindirme Metin Modülünü değiştirmeyi bitirdikten sonra devam edin ve iki kez klonlayın. Kopyaların her birini kalan iki sütuna yerleştirin.

Sütun 2'deki Bindirme Metin Modülünün Gradyan Arka Planını Değiştirme

İlk kopyanın degrade arka plan rengini değiştirin.

• Renk 1: #d530ff
• Renk 2: #6d28c1

Sütun 3'teki Bindirme Metin Modülünün Degrade Arka Planını Değiştirme

Ve aynısını ikinci kopya için de yapın.

• Renk 1: #41ff30
• Renk 2: #15668e

Bölümü ÜCRETSİZ İndirin

Kolon ifşa bölümüne el koymak için öncelikle aşağıdaki buton ile indirmeniz gerekmektedir. İ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

masaüstü

Mobil

Son düşünceler

Bu gönderide, fareyle üzerine gelindiğinde sütun içeriğini nasıl ortaya çıkaracağınızı gösterdik. Bu yaklaşımı, fazladan bir etkileşim düzeyi eklemek için oluşturduğunuz her tür web sitesi için kullanabilirsiniz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!