Divi Kullanarak Kalın Tam Genişlikli Geçiş Modülleriyle Sayfanızı Yapılandırma

Divi'nin Geçiş Modülü, ek jQuery koduna gerek kalmadan tıklamayla ek içerik göstermenize olanak tanır. Akordeon Modülüne benzer şekilde, Geçiş Modülleri genellikle sık sorulan sorular gibi gruplandırılmış içerikleri paylaşmak için kullanılır. Ancak bunları başka şeyler için de kullanabilirsiniz, örneğin sayfanızı yapılandırmak için. Bu öğreticide, tıklamayla çalışan 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. JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

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

masaüstü

Mobil

Kalın Tam Genişlik Geçiş Düzenini ÜCRETSİZ İndirin

Ellerinizi ücretsiz, kalın tam genişlikte geçiş düzenine koymak için, önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İ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.

Youtube Kanalımıza Abone Olun

Yeniden Oluşturmaya Başlayalım

Yeni Bölüm Ekle

aralık

Yeni bir sayfa oluşturarak (veya mevcut bir sayfayı açarak) ve buna normal bir bölüm ekleyerek başlayın. Bölüm ayarlarında yapmanız gereken tek şey, boşluk ayarlarında varsayılan tüm üst ve alt dolguları kaldırmaktır.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak 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ını değiştirerek satırın bölüm kabının sol ve sağ tarafına değdiğinden emin olun. Bu, bu öğreticide önemli bir adımdır; bu eğitimde daha sonra ekleyeceğimiz Geçiş Modülünün tam genişlikte olmasını sağlar.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Satırın varsayılan üst ve alt dolgusunu da 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 Dolgu: 0px

Sütuna Geçiş Modülü Ekle

Başlık ve İçerik Ekle

Modül eklemeye başlama zamanı! Bu satırda ihtiyacımız olan tek modül bir Geçiş Modülüdür. Bir başlık eklemek ve paylaşmak istediğimiz tüm içeriği gövde içerik kutusuna yerleştirmek için başlık kutusunu kullanacağız. İçerik kutusuna istediğinizi yerleştirmekten çekinmeyin; metinden görüntülere ve daha fazlasına.

Durum

Kapalı bir geçiş durumu kullanıyoruz, ancak onu açık bırakmaktan da çekinmeyin.

• Devlet: Kapat

Varsayılan Simge Ayarları

Tasarım sekmesine gidin ve modülün simge ayarlarını buna göre değiştirin:

• Simge Rengi: #570fff
• Özel Simge Boyutunu Kullan: EVET
• Simge Yazı Tipi Boyutu: 6vw

Fareyle Üzerine Gelme Simgesi Ayarları

Fareyle üzerine gelindiğinde simge rengini değiştirin.

• Simge Rengi: #f2f2f2

Varsayılan Geçiş Ayarları

Sonraki kapalı geçiş arka plan rengini değiştirin.

• Kapalı Geçiş Arka Plan Rengi: #ffffff

Hover Geçiş Ayarları

Ve vurgulu rengi de değiştirin.

• Kapalı Geçiş Arka Plan Rengi: #000000

Başlık Metni Ayarları

Başlık metni ayarlarını aşağıdaki gibi değiştirerek devam edin:

• Başlık Metin Rengi: #000000
• Başlık Başlık Düzeyi: H2
• Başlık Yazı Tipi: Montserrat
• Başlık Metni Hizalama: Sol
• Başlık Metin Boyutu: 8vw (Masaüstü), 10vw (Tablet ve Telefon)
• Başlık Harf Aralığı: -1vw (Masaüstü), -0.5vw (Tablet ve Telefon)
• Başlık Satırı Yüksekliği: 0.7em

Varsayılan Kapalı Başlık Metni Ayarları

Ardından, kapalı başlık metni ayarlarına gidin ve ayarları buna göre değiştirin:

• Kapalı Başlık Yazı Tipi: Montserrat
• Kapalı Başlık Metin Boyutu: 18vw (Masaüstü), 16vw (Tablet & Telefon)
• Kapalı Başlık Satırı Yüksekliği: 0.8em

Kapalı Başlık Metni Ayarlarının Üzerine Gelin

Fareyle üzerine gelindiğinde kapalı başlık metni rengini değiştirin.

• Kapalı Başlık Metin Rengi: #f4f4f4

Gövde Metni Ayarları

Gövde metni ayarlarına gidin ve orada da bazı değişiklikler yapın.

• Gövde Yazı Tipi: Fira Sans
• Gövde Yazı Tipi Ağırlığı: Hafif
• Gövde Metni Hizalama: Yasla
• Gövde Metni Boyutu: 1.2vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Gövde Çizgisi Yüksekliği: 2.1em

aralık

Modüle bazı özel üst, alt ve sol dolgular da ekleyin.

• Üst Dolgu: 10vw
• Alt Dolgu: 10vw
• Sol Dolgu: 6vw

Sınır

Sınır ayarlarında modülün varsayılan kenarlığını kaldırarak devam edin.

• Kenar Genişliği: 0px

İçerik CSS'sini Aç/Kapat

Aşağıdaki CSS kod satırlarını masaüstüne ekleyerek Geçiş Modülünün ayarlarını tamamlayın:

width: 60vw;
border-left: 0.2vw solid black;
padding: 5vw 5vw 5vw 5vw;

Tablet ve telefonda genişlik CSS kod satırını değiştirin:

width: 85vw;

Tüm Bölümü İstediğiniz Kadar Kez Klonlayın

İlk bölümü, satırı ve Geçiş Modülünü tamamladıktan sonra, tüm bölümü istediğiniz kadar klonlayabilirsiniz; sayfanızda ne kadar içerik göstermek istediğinize bağlı olarak.

İçeriği Değiştir

Her yinelenen Geçiş Modülündeki tüm geçiş içeriğini değiştirdiğinizden emin olun.

Simge Renklerini Değiştir

Ardından, her Geçiş 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

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Mobil

Son düşünceler

Bu gönderide, Divi's Toggle Module ile nasıl yaratıcı olunacağını gösterdik. Daha spesifik olarak; onları tam genişlikte yaptık ve farklı bölüm içeriğini yaratıcı bir şekilde göstermek için kullandık. Bu eğitim, çeşitli kapları göz önünde bulundurduğunuzda Divi'nin modüllerini kutunun dışında kolayca kullanabileceğinizi gösterecek. Öğreticinin JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.