Geçiş modülü Divi görüntülemenizi sağlar içindekiler Ek jQuery koduna gerek kalmadan tıklama başına ek. Akordeon modülüne benzer şekilde, geçiş modülleri genellikle bir dosyayı paylaşmak için kullanılır. içindekiler sık sorulan sorular gibi gruplandırılmıştır. Ancak bunları, örneğin sayfanızı yapılandırmak gibi başka görevler için de kullanabilirsiniz. Bu eğitimde, tıklandığında davranan basit bir sayfa tasarımı oluşturmak için tam genişlikte geçiş modüllerini kullanacağız. Ele aldığımız tasarım stili cesur ve temiz. Ayrıca JSON dosyasını ücretsiz olarak indirebileceksiniz!
Gidelim.
Eğiticiye girmeden önce, farklı ekran boyutlarına nasıl baktığımıza hızlıca göz atalım.
Rekreasyona başlayalım
Yeni bölüm ekle
aralık
Yeni bir sayfa oluşturarak (veya mevcut olanı açarak) ve ona normal bir bölüm ekleyerek başlayın. Bölüm ayarlarında yapılacak tek şey, boşluk ayarlarından tüm varsayılan üst ve alt dolguyu kaldırmaktır.
- Üst Dolgu: 0px
- Alt doldurma: 0px
Yeni bir satır ekle
Sütun yapısı
Aşağıdaki sütun yapısını kullanarak yeni bir satır eklemeye devam edin:
boyutlandırma
Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve boyutlandırma ayarlarını değiştirerek çizginin bölüm kabının sol ve sağ taraflarına dokunduğundan emin olun. Bu, bu öğreticide önemli bir adımdır. bu, bu öğreticide daha sonra ekleyeceğimiz Toggle modülünün tam genişlikte olmasını sağlar.
- Özel bir oluk genişliği kullanın: Evet
- Oluk genişliği: 1
- Genişlik:% 100
- Maksimum genişlik:% 100
aralık
Ayrıca varsayılan üst ve alt dolguyu satırdan kaldırıyoruz. Bu, geçiş modülü ile yerleştirildiği satır / sütun kabı arasındaki tüm boşluğu kaldıracaktır.
- Üst Dolgu: 0px
- Alt doldurma: 0px
Rock'çı modülü ekle
Başlık ve içerik ekle
Modül eklemeye başlamanın zamanı geldi! Bu hatta ihtiyacımız olan tek modül Toggle modülüdür. Başlık eklemek ve her şeyi yerleştirmek için başlık alanını kullanacağız içindekiler gövde içeriği alanında paylaşmak istediğimiz İçerik alanına dilediğinizi yerleştirmekten çekinmeyin; metinden görsellere ve daha fazlasına.
Etat
Kapalı bir geçiş durumu kullanıyoruz, ancak bunu da açık bırakabilirsiniz.
- Devlet: yakın
Varsayılan simge ayarları
Tasarım sekmesine geçin ve modül simgesi ayarlarını buna göre değiştirin:
- Simge Rengi: # 570fff
- Özel simge boyutunu kullan: EVET
- Simge Yazı Tipi Boyutu: 6vw
Fareyle üzerine gelindiğinde simge ayarları
Fareyle üzerine gelme simgesinin rengini değiştirin.
- Simge Rengi: # f2f2f2
Varsayılan yerine çalışma ayarları
Ardından, kapalı geçişin arka plan rengini değiştirin.
- Arka plan rengini değiştir: #ffffff
Ayarların üzerine gelin
Ve vurgulu rengi de değiştir.
- Arka plan rengini değiştir: # 000000
Başlık metni ayarları
Başlığın metin ayarlarını aşağıdaki şekilde değiştirerek devam edin:
- Renk metni: # 000000
- Başlık Başlık Seviyesi: H2
- Başlık Polisi: Montserrat
- Metin Başlığı: Sol Hizalama
- Metin Başlığı Boyutu: 8vw (masaüstü), 10vw (tablet ve telefon)
- Başlık harfi aralığı: -1vw (masaüstü), -0.5vw (tablet ve telefon)
- Başlık satırının yüksekliği: 0.7em
Varsayılan kapalı başlık metni ayarları
Ardından, kapalı başlığın metin parametrelerine erişin ve bunları uygun şekilde değiştirin:
- Kapalı Başlık Yazı Tipi: Montserrat
- Başlık kapalı Metin boyutu: 18vw (masaüstü), 16vw (tablet ve telefon)
- Kapalı başlık yüksekliği: 0.8em
Başlığın metin ayarlarının üzerine gelin
Kapalı başlık metninin rengini vurgulu olarak değiştirin.
- Başlık kapalı Metin rengi: # f4f4f4
Gövde metni ayarları
Gövde metni ayarlarına gidin ve aynı zamanda bazı değişiklikler yapın.
- Gövde Yazı Tipi: Fira Sans
- Yazı tipinin ağırlığı: Işık
- Gövde metninin hizalanması: Yasla
- Gövde metin boyutu: 1.2vw (masaüstü), 2vw (tablet), 3vw (telefon)
- Gövde yüksekliği: 2.1em
aralık
Ayrıca, modülün üstünde, altında ve solunda özel dolgu ekleyin.
- Üst Dolgu: 10vw
- Alt doldurma: 10vw
- Sol Dolgu: 6vw
Sınır
Kenarlık ayarlarında modülün varsayılan kenarlığını kaldırarak devam edin.
- Kenarlığın genişliği: 0px
CSS içeriğini değiştir
Aşağıdaki CSS kod satırlarını masaüstüne ekleyerek Toggle modül parametrelerini tanımlayın:
genişlik: 60vw; kenarlık-sol: 0.2vw solidblack; dolgu: 5vw 5vw 5vw 5vw;
Tablet ve telefondaki CSS kod satırının genişliğini değiştirin:
genişlik: 85vw;
Tüm bölümü istediğiniz kadar klonlayın
İlk bölümü, satırı ve Toggle modülünü tamamladığınızda, bölümün tamamını istediğiniz kadar klonlayabilirsiniz. Sayfanızda görüntülemek istediğiniz içeriğin miktarına bağlı olarak.
İçeriği değiştir
Her flip-flop modülündeki flip-flop içeriğinin tamamını değiştirdiğinizden emin olun.
Simgelerin renklerini değiştirme
Ardından her Toggle modülünü ayrı ayrı açın ve simge rengini değiştirin. Bu eğitim için kullandıklarımız aşağıda belirtilmiştir:
- Simge rengi 1: # ff9000
- Simge rengi 2: # 00ffd4
anket
Artık tüm adımlar atıldığına göre, farklı ekran boyutlarında neler olduğuna son bir göz atalım.
Son düşünceler
Bu yazıda, Toggle modülü ile nasıl yaratıcı olunacağını gösterdik. Divi. Daha kesin; bunları tam genişlikte yaptık ve farklı bölümlerdeki içeriği yaratıcı şekillerde görüntülemek için kullandık. Bu eğitim, modülleri kolayca kullanabileceğinizi gösterir. Divi Çeşitli kapları dikkate aldığınızda kutunun dışında. Ayrıca öğretici JSON dosyasını ücretsiz olarak indirebildiniz! Herhangi bir sorunuz veya öneriniz varsa, lütfen aşağıdaki yorumlar bölümüne yorum bırakmaktan çekinmeyin.
