Akordeon kaydırıcısı, görüntülemenin eğlenceli ve çekici bir yoludur içindekiler kısıtlı 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 etkisinin elde edildiği yer burasıdır.
Bu eğitimde, size nasıl duyarlı bir akordeon kaydırıcısı oluşturacağınızı göstereceğim. Divi sadece CSS kullanarak. Bunu yapmak için birkaç modül kullanacağız. Divi akordeon paneller olarak hizmet etmek. Herhangi bir modül kullanılabilir, ancak bu örnekte hem masaüstünde hem de mobilde harika görünen (ve çalışan) güzel bir akordeon kaydırıcısı oluşturmak için tanıtım yazısı modüllerini çok yaratıcı bir şekilde kullanacağız.
Şuna bak!
anket
İşte bu derste neler yapacağımıza genel bir bakış.
Öğreticiye başlayalım
Başlamak için neye ihtiyacınız var?
Başlamak için aşağıdakileri yapmanız gerekir:
- Henüz yapmadıysanız, kurun ve etkinleştirin. Divi teması yüklü (veya eklenti Divi Oluşturucu kullanmıyorsanız Divi teması).
- WordPress'te yeni bir sayfa oluşturun ve ön uçtaki sayfayı (görsel kurucu) düzenlemek için Divi Builder'ı kullanın.
- Eğitim için gerekli arka plan resimleri olarak kullanmak üzere kütüphanedeki 5 farklı resimleri indirin.
Bundan sonra, Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.
Divi'de duyarlı bir akordeon içeren bir kaydırıcı oluşturun
Hattın oluşturulması
Başlamak için normal bölüme bir sütun satırı ekleyin.
Ardından hat ayarlarını açın ve aşağıdakileri güncelleyin:
- Oluk genişliği: 1
- Genişlik:% 100
- Maksimum genişlik: 800px
- 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 ölçeklenecek ve her satır genişliğinde çalışacaktır. Ayrıca, tasarımın çalışması için sabit bir yükseklik ayarlamak çok önemlidir. Alt öğeler (sütun ve modüller)% 100 yüksekliğe sahip olacaktır. Bu nedenle, satırın sabit yüksekliğini ayarlamazsanız, alt öğelerin yüksekliği olmayacaktır.
Sütun parametreleri
Artık satır yüksekliği ayarlandığına göre, sütun ayarlarını açın ve aşağıdaki CSS kodunu ana öğeye ekleyin:
ofis
display:flex;flex-direction: row;align-items:center;height: 100%;
tablet
flex-direction: column;
Flex özelliği, akordeon panelleri masaüstünde yatay olarak ve tablet ve telefonda dikey olarak hizalar. % 100 yükseklik, ekleyeceğimiz modüllerin de% 100 yükseklik değerini kullanmasına izin verecektir.
Akordeon panelinin modüller ile oluşturulması Özet
Akordeon kaydırıcı, herhangi bir modül türü kullanılarak oluşturulabilir. İstersek, akordeon paneli olarak hizmet vermek için farklı modüllerin bir kombinasyonunu kullanabilirdik. Ancak bu tasarım için Blurb Modlarını kullanacağız.
Satıra bir sunum modülü ekleyerek başlayın.
Soyut modül tasarımı
Özet modül ayarlarını açın ve aşağıdakileri güncelleyin:
Başlığı hayali tutun ve içindekiler vücuttan. Bunu daha sonra her zaman değiştirebiliriz.
Ardından sunum simgesini şu şekilde güncelleyin:
- Simge (masaüstü): yatay bir ok çizgisini temsil eden simge (ekran görüntüsüne bakın)
- Simge (vurgulu): onay simgesi (ekran görüntüsüne bakın)
- Simge (tablet ve telefon): Dikey ok çizgisini temsil eden simge (ekran görüntüsüne bakın)
bağlam
Ardından, bulanıklığa bir arka plan görüntüsü ve aşağıdaki gibi bir gradyan kaplaması verin:
- En az 1000 piksel genişliğinde bir arka plan resmi ekleyin
- Arka plan resminin konumu: orta sol
Sonra bir degrade arka plan kaplaması ekleyin.
şamandıra
- Sol degrade arka plan (vurgulu): # 3e215b
- Sağ arka plan degrade Rengi (vurgulu): rgba (0,0,0,0)
- Gradyan Yönü: 90deg
- Gradyanı arka plan resminin üzerine yerleştirin: EVET
ikon
- Simge Rengi: #ffffff
- Simgelerin resmi / konumu: sol
Ardından Tasarım sekmesine gidin ve aşağıdakileri güncelleyin:
Metnin başlığı ve gövdesi
- Başlık Yazı Tipi: Poppins
- Yazı Tipi Başlığı: Yarı Kalın
- Metin Başlığı Rengi: saydam (masaüstü), #ffffff (hover)
- Metin Başlığı Boyutu: 23px
- Gövde metni rengi: saydam (masaüstü), #ffffff (hover)
Yükseklik ve Kutu Gölgesi
Metin şık hale geldiğinde, modüle% 100% yüksekliğinde ve bir gölge kutusu atayın:
- Yükseklik:% 100
- Kutu Gölgesi: Ekran görüntüsüne bakın
- Kutunun gölgesi Yatay konum: -12px
- Kutunun gölgesi Dikey pozisyon: 0px
Özel CSS'yi Blurb
Akordeon panellerimizin (veya sunum modülümüzün) modüllerin geri kalanıyla genişlemesi ve daralması için, esnek büyüme ile modülün boyutunu değiştirmek için özel CSS eklememiz gerekir. Akordiyonu oluşturan toplam 5 modüle sahip olacağımız için, varsayılan durum için "flex: 1" ekliyoruz, ardından hover durumunda "flex: 5" olarak değiştiriyoruz.
Gelişmiş sekmesinin altında, ana Blurb öğesi olan aşağıdaki özel CSS'yi ekleyin:
ofis
flex:1;position: relative !important;transition: flex 800ms !important;
tablet
flex:5;
Sonra aşağıdaki özel css'i CSS Blurb İçeriğine ekleyin:
ofis
position: absolute !important;width: 280px;padding: 20px;transition: color 400ms;
tablet
width: 100%;height: 100%;position: relative !important;
Taşma ve geçiş
- Yatay taşma: gizli
- Dikey taşma: gizli
- Geçişin Süresi: 400ms
- Geçiş hızı eğrisi: doğrusal
İyi! Bir sunum modülünün ciddi bir özelleştirmesiydi. Ancak iyi haber şu ki, tek yapmamız gereken kalan akordeon panelleri oluşturmak için onları çoğaltmak.
Daha fazla akordeon paneli için Bulanıklıkları çoğaltın
Toplam beş akordeon panel (veya modül) oluşturmak için sunum modülünün üzerine gelin ve kopyala simgesine dört kez tıklayın.
Ardından, çoğalttığınız yeni bulanıklıkların her biri için arka plan resimlerini güncelleyin.
Nihai sonuç
Son düşünceler
Bu duyarlı akordeon kaydırıcı, kullanımını eğlenceli hale getiren bazı benzersiz unsurlara sahiptir. Akordeon paneller, beklenmedik sorunlar olmadan gezinirken genişler ve daralır. UX'i artırmak için fareyle üzerine gelindiğinde ve mobil cihazda sunum simgeleri değişir. Bu tasarımın bir sonraki projeniz için faydalı olacağını umuyoruz.
