Ana İçeriğe Geç

Sayfanızı Divi'de tam genişlikte geçiş modülleriyle yapılandırma

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Divi'nin Toggle modülü, ek jQuery koduna ihtiyaç duymadan tıklama başına ek içerik görüntülemenizi sağlar. Akordeon modülüne benzer şekilde, geçiş modülleri genellikle sık sorulan sorular gibi gruplanmış içeriği paylaşmak için kullanılır. Ancak, bunları başka görevler için de kullanabilirsiniz, örneğin sayfanızı yapılandırmak için. Bu eğiticide, tıklandığında davranan basit bir sayfa tasarımı oluşturmak için tam genişlikte çevirme modülleri 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şlama zamanı! Bu satırda ihtiyacımız olan tek modül bir Toggle modülüdür. Bir başlık eklemek ve paylaşmak istediğimiz tüm içeriği gövde içeriği alanına koymak için başlık alanını kullanacağız. İçerik alanına istediğinizi yerleştirmekten çekinmeyin; metinden resimlere ve daha fazlasına.

Etat

Kapalı bir geçiş durumu kullanıyoruz, ancak bunu da açık bırakabilirsiniz.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

  • 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.

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

  • 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.

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

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, Divi'nin Toggle modülüyle nasıl yaratıcı olabileceğinizi gösterdik. Daha kesin; bunları tam genişlikte oluşturduk ve farklı bölümlerdeki içeriği yaratıcı bir şekilde görüntülemek için kullandık. Bu eğitim, çeşitli kapsayıcıları hesaba kattığınızda Divi'nin modüllerini kutunun dışında kolayca kullanabileceğinizi gösterir. Ayrıca eğitici JSON dosyasını ücretsiz olarak indirebildiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorumlar bölümüne yorum yapmaktan çekinmeyin.

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
1 hisseleri
hisse1
cıvıltı
Enregistrer