Sayfanıza bir Toggle modülü ekleyebilmeniz için önce Divi Builder'a atlamanız gerekir. Bir kere Divi teması senin üzerine kurulu Site Web, bir düğme göreceksiniz Divi Builder'ı Kullan yeni bir sayfa oluşturduğunuzda yayın düzenleyicisinin üzerinde. Divi Builder'ı etkinleştirmek ve tüm Divi Builder modüllerine erişmek için bu düğmeye tıklayın. Ardından düğmeye tıklayın Visual Builder'ı kullan Jeneratörü görsel modda başlatmak için. Düğmeye de tıklayabilirsiniz Görsel Oluşturucu'yu etkinleştir göz attığınızda Site Web WordPress kontrol panelinize giriş yaptıysanız ön planda.

görsel oluşturucuya erişim

Görsel Oluşturucu'ya girdikten sonra, sayfanıza yeni bir modül eklemek için gri artı düğmesini tıklayabilirsiniz. Yeni modüller yalnızca satırların içine eklenebilir. Yeni bir sayfaya başlıyorsanız, önce sayfanıza bir satır eklemeyi unutmayın.

flip flop divi modülü.png

Modül listesinde geçiş modülünü bulun ve sayfanıza eklemek için üzerine tıklayın. Modül listesi aranabilir, yani "geçiş" yazıp ardından geçiş modülünü bulmak ve otomatik olarak eklemek için enter tuşuna da basabilirsiniz! Modül eklendiğinde, modül seçenekleri listesi tarafından karşılanacaksınız. Bu seçenekler üç ana gruba ayrılmıştır: içindekiler , Gebe kalma et gelişmiş .

Örnek kullanım örneği: SSS sayfası

Bir SSS sayfası, Toggle modülünü kullanarak bilgileri birleştirmek için en iyi yerlerden biridir. Kullanıcının tonlarca metni okumak zorunda kalmadan aradığı soruyu hızlı bir şekilde tanımlamasına olanak tanır. Bu örnek için, birkaç dakika içinde SSS sayfanız için modern bir SSS bölümü tasarlamak için Toggle modülünü nasıl kullanabileceğinizi göstereceğim.
örnek sayfa SSS.jpg

Visual Builder'ı kullanarak, tam genişlikte bir satır (1 sütun) içeren yeni bir bölüm ekleyin. Ardından satıra bir Divider modülü ekleyin. Bölücü modül ayarlarının İçerik sekmesi altında, "Bölücüyü Göster" seçeneğini seçin.

bir flip-flop düğmesinin divi.png örneği

Tasarım sekmesinde aşağıdaki seçenekleri girin:

Renk: # 000000 (siyah)
Bölücü Stili: Katı
Ayırıcı Konumu:
Dikey olarak ortalanmış bölücü Ağırlık: 4px
Yükseklik: 1

yapılandırma seçenekleri divi.png'yi değiştir

Ardından, aynı satırda yeni oluşturduğum bölücünün altına bir geçiş modülü ekleyin. Toggle modülü ayarlarında aşağıdakileri güncelleyin:

İçerik sekmesi

Başlık: [unvanınızı girin]
İçerik: [içeriğinizi girin]
Durum: Kapat
Açık Arka Plan rengi: #ffffff
Kapalı Arka plan rengini değiştir: #ffffff
Arka plan rengi: #ffffff

Tasarım sekmesi

Simge Rengi: # 000000
Aç / Kapat Metin Rengi: # 000000
Kapalı Geçiş Metin Rengi: # 000000
Başlık Font: Açık Sans, Kalın
Yazı tipi boyutu: 24px
Başlık Metin Rengi: # 000000
Gövde Yazı tipi: Açık Sans
Gövde Yazı tipi Boyutu: 18px
Gövde Metni Rengi: # 666666
Gövde çizgisinin yüksekliği: 1.6em
Sınırı kullan: EVET
Kenarlığın genişliği: 0px
Özel dolgu: En iyi 2px, Alt 2px

divi.png rocker ile yeni içerik

Geçiş modülü için ayarınızı kaydettikten sonra, oluşturduğunuz bölücü modülü çoğaltın ve geçiş modülünün altına yerleştirin. Bu, tahterevalliyi bir üst ve alt bölme çizgisiyle çerçeveleyecektir. Bundan sonra geçiş modülünüzü çoğaltın ve alt ayırma çizgisinin arkasına yerleştirin. Bu, yinelenen bir Toggle modülü olduğundan, tüm tasarım parametreleri yeni Toggle modülüne aktarılmıştır ve yapmanız gereken tek şey yeni Toggle modülünün içeriğini güncellemektir. Ardından Bölme ve Ölçek Modülleri modüllerini çoğaltma işlemine devam edin ve tüm SSS bölümünü tamamlayana kadar ölçeklerinizin içeriğini güncelleyin.

Bu kadar. Artık sorularınızı ve yanıtlarınızı birleştirmek için Geçiş modülünü kullanan modern bir SSS bölümünüz var.

modül geçişi divi.gif

Geçiş modülünü çalışırken gördüğünüze göre, aşağıdaki bölümlerde TÜM ayarlarına dalın. Modül ayarlarının her sekmesinde ne bulacağınıza ve her birinin ne yaptığına dair ayrıntılı bir açıklama sağladık.

Toggle modülünün içerik parametreleri

flip-flops parametreleri divi.png

Geçiş modülü içerik sekmesi aşağıdaki parametre gruplarında düzenlenmiştir (bunlar da alternatiftir!).

Metinleri

Burası başlığı ekleyebileceğiniz ve içeriği değiştirebileceğiniz yerdir.

Etat

Bu ayar ile düğmenizin varsayılan olarak açık veya kapalı görünmesini isteyip istemediğinizi seçebilirsiniz.

bağlam

Burada geçiş açıkken arka plan rengini ve kapatıldığında arka plan rengini değiştirebilirsiniz. Arka plan rengi seçeneğini ayarlayarak da kolayca aynı hale getirebilirsiniz. Bir arka plan resmi ayarlama veya yükleme seçeneği de vardır.

Yönetici Etiketi

Varsayılan olarak, geçiş modülünüz, oluşturucuda "Değiştir" yazan bir etiketle görünecektir. Yönetici etiketi, kolay tanımlama için bu etiketi değiştirmenize olanak tanır.

Rocker modülünün tasarım parametreleri

seçenek tasarımı toggle wordpress.png

Geçiş modülü için tasarım ayarları, Tasarım sekmesi altındaki aşağıdaki açılır geçişlerde gruplandırılmıştır.

ikon

Geçiş simgesinin rengini değiştirebileceğiniz yer burasıdır.

Metinleri

Burada açık ve kapalı geçiş metninin rengini ayarlayabilirsiniz.

Başlık metni

Burada başlık metni yazı tipini, ağırlığını, boyutunu, rengini, aralığını, satır yüksekliğini ve daha fazlasını ayarlayabilirsiniz.

Gövde metni

Burada yazı tipini, ağırlığını, boyutunu, rengini, aralığını, satır yüksekliğini ve daha fazlasını ayarlayabilirsiniz.

sınırlar

Burada bir sınır kullanmayı seçebilirsiniz. Ve bir kenarlık kullanmayı seçerseniz, rengini seçebilir, genişliğini değiştirebilir ve stilini de seçebilirsiniz.

aralık

Aralık alanında, geçişin üstüne, sağına, altına veya soluna özel dolgu ekleyebilirsiniz. Bu değerleri masaüstü bilgisayarlar, tabletler veya mobil cihazlar için de değiştirebilirsiniz.

Modül geçişinin gelişmiş ayarları

flip-flop parametresi divi.png

Geçiş modülünüzün Gelişmiş sekmesinde, benzersiz bir kimlik ve css sınıfı ekleyebilirsiniz. Ayrıca, özel css açılır video kaydırıcı modülünde önceden tanımlanmış (ve önceden seçilmiş) çeşitli css seçicilere özel css ekleyebilirsiniz. Son olarak, görünürlük açılır listesinde, modülünüzün telefonlarda, tabletlerde ve masaüstlerinde görünürlüğünü ayarlayabilirsiniz.

Hepsi bu eğitim için, umarım Divi Toggle modülünü daha iyi kullanmanıza izin verir.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”genişletilmiş” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DIVI TEMASINI İNDİRİN [/vcex_button][/vc_column][vc_column width=” 1 /2"][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”genişletilmiş” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]YÜKLE ŞABLONLARI DIVI[/vcex_button][/vc_column][/vc_row]

Diğer Divi öğreticiler