Bir akordeon kaydırıcı oluşturmak ister misiniz? Divi duyarlı?
Akordeon kaydırıcısı, görüntülemenin eğlenceli ve çekici bir yoludur içindekiler küçük bir alanda.
Akordeon sürgüleri genellikle perdenin kıvrımları gibi yatay olarak istiflenmiş birkaç elemandan (veya panelden) oluşur. Panellerden birinin üzerine geldiğinizde genişleyerek içindekiler diğer akordeon panelleri daralırken. Genişleme ve daralmanın akordeon tipi etkisini burada elde ederiz.
Bu eğitimde, size nasıl duyarlı bir akordeon kaydırıcısı oluşturacağınızı göstereceğiz. Divi yalnızca CSS kullanarak. Bunu yapmak için birkaç modül kullanacağız Divi akordeon panelleri görevi görecek.
anket
İşte bu eğitimde ne elde edeceğimize dair hızlı bir genel bakış.
DIVI'yı Şimdi İndirin !!!
Divi Builder ile yeni bir sayfa oluşturma
Başlamak için aşağıdakileri yapmanız gerekir:
- 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.
Divi'de duyarlı akordeon kaydırıcısının oluşturulması
Hattın oluşturulması
Başlamak için normal bölüme tek sütunlu bir satır ekleyin.
Ardından hat ayarlarını açın ve aşağıdakileri güncelleyin:
- Özel Oluk Genişliğini Kullan: EVET
- Oluk Genişliği: 1
- Genişlik: %100
- Maksimum Genişlik: 800 piksel
- Yükseklik: 400 piksel (Masaüstü); 700px (Tablet ve Telefon)
Genişlik ve maksimum genişlik değerleri ihtiyaçlarınıza göre değiştirilebilir. Akordeon, herhangi bir çizgi genişliğine sığacak ve çalışacaktır.
Sütun parametreleri
Artık satır için tanımlanmış bir yüksekliğimiz olduğuna göre, sütun ayarlarını açın ve ana öğeye aşağıdaki CSS'yi ekleyin:
Masaüstü
display:flex;
flex-direction: row;
align-items:center;
height: 100%;
tablet
display:flex;
flex-direction: column;
align-items:center;
height: 100%;
Blurb Modülleri ile Akordeon Paneli Oluşturma
Akordeon kaydırıcı, herhangi bir tür modül(ler) kullanılarak oluşturulabilir. İstersek, akordeon paneli olarak işlev görmek için farklı modüllerin bir kombinasyonunu kullanabiliriz. Ancak bu tasarım için Blurb modüllerini kullanacağız.
Satıra bir Blurb modülü ekleyerek başlayın.
Blurb Mod Tasarımı
Sunum modülü ayarlarını açın ve aşağıdakileri güncelleyin:
Kurgusal başlığı koruyun ve içindekiler vücuttan. Bunu daha sonra her zaman değiştirebiliriz.
Ardından, sunum simgesini aşağıdaki gibi güncelleyin:
- Simge (Masaüstü): yatay ok çizgisi simgesi (ekran görüntüsüne bakın)
- Simge (Vurgulu): (ekran görüntüsüne bakın)
- Simge (Tablet ve Telefon): (ekran görüntüsüne bakın)
Arka fon
Ardından, tanıtım yazısına aşağıdaki gibi bir arka plan görüntüsü ve üzerine gelindiğinde bir degrade kaplaması verin:
- En az 1000 piksel genişliğinde bir arka plan resmi ekleyin
- Arka Plan Resmi Konumu: Orta Sol
Sonra bir degrade arka plan kaplaması ekleyin.
Duraksamak
- Sol Arka Plan Gradyanı (Vurgulu): #3e215b
- Sağ (vurgulu) arka plan gradyanı: rgba(0,0,0,0)
- Gradyan Yönü: 90 derece
- Arka Plan Resminin Üzerinde Kare Gradyan: EVET
ikon
- Simge Rengi: #ffffff
- Resim/Simge Yerleşimi: Sağ
Ardından, Tasarım sekmesine geçin ve aşağıdakileri güncelleyin:
Metnin başlığı ve gövdesi
- Başlık Yazı Tipi: Poppins
- Yazı Ağırlığı: yarı kalın
- Başlık Metin Rengi: şeffaf (Masaüstü), #ffffff (Vurgulu)
- Başlık Metin Boyutu: 22px
- Gövde Metni Rengi: şeffaf (Masaüstü), #ffffff (Vurgulu)
Kutu yüksekliği ve gölge
Metin özelleştirildikten sonra, modüle aşağıdaki gibi %100 bir yükseklik ve bir kutu gölgesi verin:
- Yükseklik: %100
- Kutu Gölgesi: Ekran görüntüsüne bakın
- Yatay konum: -12 piksel
- Dikey Konum: 0px
Özel CSS
Akordeon panellerimizin (veya Blurb modülünün) diğer modüllerle büyümesi ve daralması için, modülün boyutunu flex-grow ile değiştirmek için özel CSS eklememiz gerekiyor.
Akordiyonu oluşturan toplam 5 modülümüz olacağından, varsayılan durum için "flex:1" ekliyoruz ve ardından vurgulu durumda "flex:5" olarak değiştiriyoruz.
Gelişmiş sekmesi altında, ana Blurb öğesine aşağıdaki özel CSS'yi ekleyin:
ofis
flex:1;
position: relative !important;
transition: flex 800ms !important;
Üzerinde gezinme
flex:5;
position: relative !important;
transition: flex 800ms !important;
Ardından, Blurb içerik CSS'sine aşağıdaki özel CSS'yi ekleyin:
ofis
position: absolute !important;
width: 280px;
padding: 20px;
transition: color 400ms;
tablet
position: relative !important;
width: 100%;
height: 100%;
padding: 20px;
transition: color 400ms;
Taşma ve geçiş
- Yatay Taşma: Gizli
- Dikey Taşma: Gizli
- Geçiş Süresi: 400ms
- Geçiş Hızı Eğrisi: Doğrusal
Çok iyi! Bir Blurb modülünün ciddi bir şekilde özelleştirilmesiydi. Ama iyi haber şu ki, kalan akordeon panellerini oluşturmak için tek yapmamız gereken onları çoğaltmak.
Daha fazla akordeon paneli için yinelenen düzenler
Toplam beş akordeon paneli (veya modülü) oluşturmak için sunum modülünün üzerine gelin ve çift simgeye dört kez tıklayın.
Ardından, çoğalttığınız yeni tanıtım yazılarının her biri için arka plan resimlerini güncelleyin.
Nihai sonuç
Tüm aşamaları tamamladığımıza göre şimdi sonuca bakalım.
DIVI'yı Şimdi İndirin !!!
Sonuç
Bu duyarlı akordeon kaydırıcı gerçekten kullanmayı eğlenceli kılan bazı benzersiz öğelere sahiptir. Akordeon paneller, fareyle üzerine gelindiğinde herhangi bir beklenmedik hata olmadan sorunsuz bir şekilde genişler ve daralır.
Ve UX'i artırmak için sunum simgeleri fareyle üzerine gelindiğinde ve mobilde değişir. 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ş.
...
