Satırlardan fareyle üzerine gelme efektli sekmeler oluşturmak ister misiniz? Divi ?
Sekmeler, önemli bilgileri kısa ve öz bir alanda kullanıma sunmak için kesinlikle yararlıdır. Site Web. Bu, kullanıcının sayfalar arasında gezinme ihtiyacını azaltır. içindekiler uzun bir sayfadan. Sekme modülü Divi kullanımı kolaydır ve bir siteye göz atmak için idealdir içindekiler tek tıklamayla basit.
Ancak bu derste size satırları nasıl dönüştüreceğinizi göstereceğiz Divi sekmeli ve fareyle üzerine gelindiğinde görünür.
Ayrıca yatay ve dikey sekmelerin nasıl oluşturulacağını da göstereceğiz. Bu, Divi'nin her alan için birden fazla modülle eksiksiz düzenler oluşturma gücünün kilidini açacaktır. içindekiler sekmesi.
Eklentiye gerek yok!
Başlayalım.
anket
İşte bu eğitimde birlikte oluşturacağımız sekmelere genel bir bakış.
DIVI'yı Şimdi İndirin !!!
Divi Builder ile yeni bir sayfa oluşturun
WordPress kontrol panelinden şuraya gidin: Sayfalar> Yeni Ekle yeni bir sayfa oluşturmak için.
Size mantıklı gelen bir başlık verin ve tıklayın Divi Builder'ı kullanın
Ardından İnşaata Başla (Sıfırdan Oluşturun)
Bundan sonra, Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.
"Bölünmüş Satırları" Kullanarak Yatay Vurgulu Sekmeler Oluşturma
Mevcut varsayılan bölümde, iki sütunlu bir satır ekleyin.
Satır arka planı, kutu dolgusu ve gölge
Modüllerimizi eklemeden önce satır ayarlarını biraz özelleştirelim. Hat Ayarları'nı açın ve aşağıdakileri güncelleyin:
- Sol Degrade Rengi: #284f91
- Sağ Degrade Rengi: #4646c4
- Dolgu: 50px (Üst ve Alt), 50px (Sol ve Sağ)
- Kutu Gölgesi: ekran görüntüsüne bakın
- Kutu Gölge Rengi: rgba(70,70,196,0.66)
Satıra içerik ekle
Şimdi satırımıza yer tutucu içerik ekleyeceğiz. 1. sütunda, bir Görüntü modülüyle istediğiniz bir görüntüyü ekleyin. Burada yerleşim paketinden bir resim kullandık « Tasarım Konferans Düzen Paketi« .
Sağ sütunda bir modül ekleyin Eylem Çağrısı ve aşağıdakileri güncelleyin:
- Düğme Bağlantı URL'si: # (şimdilik düğmeyi görüntülemek için)
- Arka Plan Rengini Kullan: HAYIR
- Metin Hizalama: sol
- Başlık Yazı Tipi : Lato
- Başlık Metin Boyutu: 60px (masaüstü), 50px (telefon)
Sekmenin oluşturulması
Kullanıcıların o satırın içeriğini ortaya çıkarmak için üzerine gelecekleri asıl sekmeyi oluşturmak için, bir Metin modülü oluşturmamız ve bazı özel CSS ile sağ üstte konumlandırmamız gerekiyor.
Devam edin ve 1. sütundaki görüntünün altına yeni bir metin modülü ekleyin ve aşağıdakileri güncelleyin:
- Gövde: "Sekme 1"
- Arka plan: #284f91 (bu, çizginin sol gradyan rengiyle eşleşmelidir)
- Metin Hizalama: ortalanmış
- Metin Rengi: #ffffff
- Genişlik: 100 piksel
- Yükseklik: 50 piksel
- Kenar Boşluğu: -100 piksel (Üst), -50 piksel (Sol)
- Dolgu: 14 piksel (Üst)
Son olarak, satırın en üstünde mutlak bir konum vermek için ana öğeye aşağıdaki özel css'yi ekleyin.
position: absolute !important;
top: 0;
Bölüm yüksekliği ve aralığı
Şimdilik bölüm ayarlarını açın ve aşağıdakileri güncelleyin:
- Min Yükseklik: 500px (Masaüstü), 900px (Tablet), 750px (Telefon)
- Marj: 100px (Üst ve Alt)
- Dolgu: 0px (Üst ve Alt)
İkinci satırın oluşturulması
İkinci satırı oluşturmak için daha önce oluşturduğunuz satırı çoğaltın. Metin modülünü 1. sütuna ve resmi 2. sütuna taşıyın. Ardından resmi yenisiyle güncelleyin. Bu, her sekmede farklı içeriğin nasıl göründüğü hakkında bir fikir edinmenize yardımcı olacaktır.
Ardından, 1. sütunda sekmeyi oluşturmak için kullanılan metin modül ayarlarını açın ve sekmeyi sağa taşıyın, böylece bu satırın yukarıdaki satırla çakıştığı yerde sekmeyi doğrudan ilk satırın sekmesinin sağında görebilirsiniz.
- Kenar Boşluğu: 50 piksel (Sol)
Fareyle üzerine gelme efekti eklendi
Satır ayarlarını açın ve aşağıdaki filtreyi ekleyin:
- Opaklık: %70 (varsayılan), %100 (fareyle üzerine gelindiğinde)
Ardından, opaklık filtresi vurgulu efekti için bir geçiş süresi ve bir hız eğrisi ekleyin.
- Geçiş süresi: 500 ms
- Geçiş Hızı Eğrisi: Doğrusal
Üçüncü sekmenin oluşturulması
Artık son sekmemizi ekleyebiliriz. Bunu yapmak için, az önce oluşturduğunuz ikinci satırı çoğaltın. Ardından metin modülünü 1. sütuna ve görüntüyü 2. sütuna taşıyın ve görüntü modülünü yeni bir görüntü ile güncelleyin.
Çizgi ayarlarını yeni bir arka plan gradyanı ile güncelleyin.
- Sol arka plan degrade rengi: #333333
- Sağ arka plan degrade rengi: #4646c4
Ardından, 1. sütunda sekmeyi oluşturmak için kullanılan Metin modülü ayarını açın ve rengi ve kenar boşluğunu güncelleyin.
- Arka plan: #333333
- Kenar Boşluğu: 150 piksel (Sol)
Çizgilerimizi örtüşecek şekilde konumlandırmadan önce sayfanızın nasıl görünmesi gerektiği aşağıda açıklanmıştır.
Mutlak konumlandırma ile örtüşen çizgiler
Çizgilerimizi örtüşmek için mutlak konumlandırma kullanmamız gerekiyor. İlk olarak, üç satırın tümünün yüksekliğini %100 olarak güncelleyin.
- Yükseklik: %100
Ardından, üç satırın tümünün ana öğesine aşağıdaki özel CSS'yi ekleyin:
position: absolute !important;
left: 0;
right: 0;
margin: auto;
Şu anda sekmelerimiz böyle görünüyor.
Z indeksi ile üzerine gelindiğinde satır sırasını değiştirme
Şu anda üçüncü satırın/sekmenin ön planda olduğunu fark etmiş olabilirsiniz. Bu nedenle, siz başka bir sekmenin üzerine gelene kadar ilk sekme ilk önce görüntülenecek şekilde Z Dizini kullanarak satırları yeniden düzenlememiz gerekiyor.
Ayrıca Oku: Divi'de Özel Görüntü Bindirmeleri Nasıl Oluşturulur
Bunu yapmak için ilk satır ayarlarını açın ve z-endeksini aşağıdaki gibi güncelleyin:
Z-endeksi: 10
Ardından, diğer iki satırın Z indeksini fareyle üzerine getirin.
Z-endeksi: 11 (Vurgulu)
Tamamdır ! Son sonucu görelim.
Nihai sonuç
DIVI'yı Şimdi İndirin !!!
Dikey sekmeler oluşturma
Satırlara dikey sekmeler eklemek istiyorsanız, yapmanız gerekenler burada.
Devam edin ve üzerinde çalışmak için yeni bir tasarımınız olması için az önce oluşturduğumuz vurgulu sekmeleri içeren bölümü çoğaltın.
Ardından bölüm ayarlarını açın ve aşağıdakileri güncelleyin:
- Dolgu: %10 (Sol ve Sağ)
Yinelenen bölümün üç satırı için aşağıdaki ayarları aşağıdakilerle güncelleyin:
- Genişlik: %70 (Masaüstü), %70 (Tablet), %80 (Telefon)
- Maksimum Genişlik: 980 piksel
Ardından, üç çizginin tümü için degrade yönünü 90 dereceye güncelleyin.
- Gradyan Yönü: 90 derece
Şimdi, istenen dikey sekmeleri elde etmek için Metin modülü sekmelerimizi satırlarımızın soluna yerleştirme zamanı.
Ayrıca bakınız: Divi'de Hover'da Çıkrık Menüsü Nasıl Oluşturulur
İlk satırdaki metin modülü sekme ayarını açın ve aşağıdakileri güncelleyin:
- Kenar Boşluğu (Masaüstü): -50 piksel (Üst), -150 piksel (Sol)
Ardından, Bölüm 2. Satır Metni modülü sekmesi ayarlarını açın ve aşağıdakileri güncelleyin:
- Kenar Boşluğu (Masaüstü): 0px (Üst), -150px (Sol)
Üçüncü satırdaki son sekme için aşağıdakileri güncelleyin:
- Kenar boşluğu (masaüstü): 50 piksel üst, -150 piksel sol
Nihai sonuç
Şimdi son sonucu görelim.
DIVI'yı Şimdi İndirin !!!
Sonuç
Biraz yaratıcılık ve Divi'nin gücü ile Divi çizgilerini kullanarak oldukça havalı özel sekmeler oluşturabilirsiniz. Gösterebileceklerinizle ilgili bazı sınırlamalar vardır.
Örneğin, bu konfigürasyonda tüm satırlar bölümle aynı yüksekliğe sahip olmalıdır. Ancak, bir eklenti kullanmanıza gerek kalmaması için bu harika bir çözüm.
Bu eğitimin bir sonraki Divi projeleriniz için size ilham vereceğini umuyoruz. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.
Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...
