Ana İçeriğe Geç

Divi öğreticisi: Sayı sayacı modülü nasıl kullanılır?

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]

WordPress Divi temasındaki sayı sayacı modülü, sayıları eğlenceli ve ilgi çekici bir şekilde göstermenin harika bir yoludur. Bu modül genellikle sizinle veya işletmenizle ilgili istatistikleri görüntülemek için kullanılır. Örneğin, Facebook'ta müşteri sayınızı veya takipçilerinizi göstermek, sosyal kanıt sunmanın harika bir yoludur.

ekran numarası divi wordpress.png

Modül nasıl eklenir Divi sayaç sayısı

Sayfanıza bir sayaç modülü eklemeden önce Divi Builder'a atlamalısınız. Divi teması web sitenize yüklendikten sonra 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 Visual Builder'ı kullan WordPress panonuza bağlıysanız, web sitenizi ön planda tuttuğunuzda.

divi oluşturucu

Visual Builder'a 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.

divi.png sayı sayacı

Modül listesinden sayı sayacı modülünü bulun ve sayfanıza eklemek için üzerine tıklayın. Modüllerin listesi aranabilir, yani "sayı sayacı" kelimesini yazıp ardından sayı sayacı modülünü otomatik olarak bulmak ve eklemek için "Giriş"e tıklayabilirsiniz! Modül eklendiğinde, modül seçenekleri listesi ile karşılaşacaksınız. Bu seçenekler üç ana gruba ayrılır: içindekiler , Gebe kalma et gelişmiş .

Örnek kullanım durumu: Bir projenin sonuçlarını görüntülemek için dijital sayaç modülünü kullanma

Sayı sayacı modülünü kullanmanın harika bir yolu, örnek olay incelemeleri için istatistikleri göstermektir. Kullanıcı projenin başarısını kolayca görebilmesi için her sayacı bir sayı ile etiketlemeniz yeterlidir. Bu örnekte, dijital sayaç modülünü dört proje sonucunu görüntülemek için kullanıyorum.

Gördüğünüz gibi, sayfanın üst kısmı “modülü kullanarak projenin üç amacını içeriyor.Bar sayacı”Ve sayfanın alt kısmında dijital sayaç modüllerini kullanan vaka çalışmasının sonuçları yer alıyor.

örnek compteur.gif

Dijital modülleri kullanan vaka çalışmasının sonuçlarını gösteren sayfanın bölümü, özel bir bölümün kullanılmasını gerektirir. Visual Builder'ı kullanarak sayfaya özel bir bölüm ekleyin ve aşağıdaki düzeni seçin:

özel bölüm divi.png

Bölümün sağ tarafı için 1 sütunlu bir düzen seçin ve vaka çalışması sonuçları için gereken başlığı ve metni girin.

ekleme aralığı divi.png

2 sütun düzenini doğrudan bölümün sağ tarafındaki 1 sütun düzeninin altına ekleyin.

divi.png sütunu ayrılmış

Şimdi ilk sayı sayacı modülünüzü soldaki sütuna ekleyin.

bölüm numarası eklemek divi.png

Sayı sayaçlarının parametrelerini aşağıdaki gibi güncelleyin:

İçerik seçenekleri

Başlık: Yeni Ziyaretçiler
Sayı: 54210
Işaret yüzdesi: kapalı

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]

Tasarım seçenekleri

Metin rengi: Koyu
Başlığın yazı tipi: varsayılan
Başlık Yazı Tipi Boyutu: 20px
Başlık Metin Rengi: # 405c60
Başlık satırının yüksekliği: 1em
Karakter sayısı: Varsayılan, Kalın
Karakter sayısı: 60px
Numara Metin rengi: # e07a5e
Numara Satırı Yüksekliği: 72px

içerik bölüm numarası divi.png

Ayarları kaydet

Sayı Sayaçları modülünü çoğaltın ve bitişik sağ sütuna sürükleyin ve Başlık ve Sayı seçeneklerini güncelleyin.

karşı numara örneği construction.png

İki sayı sayacı modülünü içeren satırı çoğaltın, böylece iki sayı sayacı aşağıda gösterilecektir.

dijital sayaç çoğaltma divi.png

Ardından bunlar için Başlık ve Numara seçeneklerini güncelleyin. Şimdi dört tam sayı sayacına sahipsiniz.

Özel bölümün sol sütununa / yanına 667 x 320 resmi eklemeyi unutmayın.

Bitti ! Bu örnek olay sayfasındaki sayı sayaçları ve çubuk sayaçlarının kombinasyonu, içeriği gerçekten ilgi çekici hale getirir.

Son gerçekleşme modülü compteur.png

Dijital Sayaç İçeriği Seçenekleri

İçerik sekmesinde, modülün metin, resimler ve simgeler gibi tüm içerik öğelerini bulacaksınız. Tüm kontroller ce qui modülünüzde beliren her zaman bu sekmede bulunur.

seçilen alan içeriği wordpress divi.png

Başlık

Sayaç için bir başlık girin. Bu, numaranın altında daha küçük metin olarak görüntülenecektir.

isim

Bu, sayacın sayacağı sayıdır. Sayfayı aşağı kaydırıp sayaca ulaştığınızda, sayı burada belirlediğiniz sayıya ulaşana kadar hızla 0'dan sayar. Buraya yalnızca sayısal değerler yerleştirilebilir.

Yüzde işareti

Burada, yüzde işaretinin yukarıda tanımlanmış olan numaradan sonra eklenip eklenmeyeceğini seçebilirsiniz.

Arka plan rengi

Modülünüz için özel bir arka plan rengi tanımlayın veya varsayılan rengi kullanmak için boş bırakın.

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]

Arka plan resmi

Ayarlanırsa, bu görüntü bu modül için arka plan olarak kullanılacaktır. Bir arka plan resmini kaldırmak için, URL'yi ayarlar alanından kaldırmanız yeterlidir. Arka plan resimleri, arka plan renklerinin üstünde görünecektir; bu, bir arka plan görüntüsü uygulandığında arka plan renginin görünmeyeceği anlamına gelir.

Yönetici Etiketi

Bu, kolay tanımlama için yapıcıdaki modül etiketini değiştirecektir. WireFrame görünümünü Visual Builder'da kullandığınızda, bu etiketler Divi Builder arayüzünün modül bloğunda görünür.

Dijital metrenin tasarım seçenekleri (Stil)

Tasarım sekmesinde yazı tipleri, renkler, boyutlandırma ve aralık gibi tüm modül stil seçeneklerini bulacaksınız. Bu, modülünüzün görünümünü değiştirmek için kullanacağınız sekmedir. Her Divi modülünde, herhangi bir şeyi değiştirmek için kullanabileceğiniz uzun bir tasarım ayarları listesi vardır.

bölge tasarım sayacı divi.png

Metin rengi

Burada başlık metninizin açık mı koyu mu olacağını seçebilirsiniz. Koyu bir arka plan üzerinde çalışıyorsanız, metniniz açık olmalıdır. Arka planınız açıksa, metniniz koyu olmalıdır.

Başlık Yazı Tipi

Açılır menüden istediğiniz yazı tipini seçerek başlık metninizin yazı tipini değiştirebilirsiniz. Divi, Google Yazı Tipleri tarafından desteklenen düzinelerce harika yazı tipiyle birlikte gelir. Varsayılan olarak Divi, sayfanızdaki tüm metinler için Open Sans yazı tipini kullanır. Kalın, italik, büyük harf ve altı çizili seçenekleri kullanarak metninizin stilini de özelleştirebilirsiniz.

Başlık yazı tipi boyutu

Burada başlık metninizin boyutunu ayarlayabilirsiniz. Metninizin boyutunu artırmak veya azaltmak için aralık kaydırıcısını sürükleyebilir veya kaydırıcının sağındaki giriş alanına istediğiniz metin boyutu değerini doğrudan girebilirsiniz. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyut değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Başlık metni rengi

Varsayılan olarak, Divi'deki tüm metin renkleri beyaz veya koyu gri olarak görünür. Başlığınızın metin rengini değiştirmek istiyorsanız, bu seçeneği kullanarak renk seçiciden istediğiniz rengi seçin.

Başlık harflerinin aralığı

Harf aralığı, her harf arasındaki boşluğu etkiler. Başlık metninizdeki her harf arasındaki boşluğu artırmak istiyorsanız, boşluğu ayarlamak için aralık kaydırıcısını kullanın veya kaydırıcının sağındaki giriş alanına istediğiniz boşluk boyutunu girin. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyut değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Başlık satırının yüksekliği

Satır yüksekliği, başlık metninizin her satırı arasındaki boşluğu etkiler. Her satır arasındaki boşluğu artırmak istiyorsanız, boşluğu ayarlamak için aralık kaydırıcısını kullanın veya imlecin sağındaki giriş alanına istediğiniz boşluk boyutunu girin. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyut değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Sayının yazı tipleri

Açılır menüden istediğiniz yazı tipini seçerek metninizin yazı tipini değiştirebilirsiniz. Divi, Google Yazı Tipleri tarafından desteklenen düzinelerce harika yazı tipiyle birlikte gelir. Varsayılan olarak Divi, sayfanızdaki tüm metinler için Open Sans yazı tipini kullanır. Kalın, italik, büyük harf ve altı çizili seçenekleri kullanarak metninizin stilini de özelleştirebilirsiniz.

Sayının yazı tipi boyutu

Burada dijital metninizin boyutunu ayarlayabilirsiniz. Metninizin boyutunu artırmak veya azaltmak için aralık kaydırıcısını sürükleyebilir veya kaydırıcının sağındaki giriş alanına istediğiniz metin boyutu değerini doğrudan girebilirsiniz. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyut değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Dijital metnin rengi

Varsayılan olarak, Divi'deki tüm metin renkleri beyaz veya koyu gri olarak görünür. Dijital metninizin rengini değiştirmek istiyorsanız, bu seçeneği kullanarak renk seçiciden istediğiniz rengi seçin.

Dijital harflerin aralığı

Harf aralığı, her harf arasındaki boşluğu etkiler. Sayısal metninizdeki her harf arasındaki boşluğu artırmak istiyorsanız, boşluğu ayarlamak için aralık kaydırıcısını kullanın veya kaydırıcının sağındaki giriş alanına istediğiniz boşluk boyutunu girin. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyut değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Sayının çizgi yüksekliği

Satır yüksekliği, sayısal metninizin her satırı arasındaki boşluğu etkiler Her satır arasındaki boşluğu artırmak istiyorsanız, boşluğu ayarlamak için aralık kaydırıcısını kullanın veya imlecin sağındaki giriş alanına istediğiniz boşluk boyutunu girin. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyut değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Sınırı kullan

Bu seçeneğin etkinleştirilmesi, modülünüzün etrafına bir sınır koyacaktır. Bu sınır, aşağıdaki koşullu parametreler kullanılarak özelleştirilebilir.

Sınırın rengi

Bu seçenek, kenarlığınızın rengini etkiler. Kenarlığınıza uygulamak için renk seçiciden özel bir renk seçin.

Sınırın genişliği

Varsayılan olarak kenarlıklar 1 piksel genişliğindedir. Aralık kaydırıcısını sürükleyerek veya kaydırıcının sağındaki giriş alanına özel bir değer girerek bu değeri artırabilirsiniz. Özel ölçü birimleri desteklenir; bu, varsayılan birimi "px" yerine em, vh, vw vb. gibi başka bir şeye değiştirebileceğiniz anlamına gelir.

Sınır tarzı

Kenarlıklar sekiz farklı stili destekler: düz, noktalı, noktalı, çift, oluk, sırt, kaplama ve başlangıç. Kenarlığınıza uygulamak için açılır menüden istediğiniz stili seçin.

Ç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]

Özel dolgu

Dolgu, modülünüzün içine, modülün kenarı ile iç öğeleri arasına eklenen boşluktur. Modülün dört kenarından herhangi birine özel dolgu değerleri ekleyebilirsiniz. Özel marjı kaldırmak için, giriş alanından katma değeri kaldırın. Varsayılan olarak, bu değerler piksel cinsinden ölçülür, ancak giriş alanlarına özel ölçü birimleri girebilirsiniz.

Gelişmiş numara sayacı seçenekleri

Gelişmiş sekmesinde, özel CSS ve HTML özellikleri gibi daha deneyimli web tasarımcılarının yararlı bulabileceği seçenekler bulacaksınız. Burada, modülün birçok öğesinden herhangi birine özel CSS uygulayabilirsiniz. Ayrıca, alt temanızın style.css dosyasında modülü özelleştirmek için kullanılabilen modüle özel CSS sınıfları ve kimlikleri de uygulayabilirsiniz.

dijital sayaç bölümü design.png

CSS Kimliği

Bu modül için kullanmak üzere isteğe bağlı bir CSS Kimliği girin. Kimlik, özel bir CSS stili oluşturmak veya sayfanızın belirli bölümlerine bağlanmak için kullanılabilir.

CSS sınıfı

Bu modül için kullanmak üzere isteğe bağlı CSS sınıflarını girin. Özel CSS stili oluşturmak için bir CSS sınıfı kullanılabilir. Bir boşlukla ayırarak birden çok sınıf ekleyebilirsiniz. Bu sınıflar, Divi alt temanızda veya Divi tema seçeneklerini veya Divi Builder sayfa ayarlarını kullanarak sayfanıza veya web sitenize eklediğiniz özel CSS stil sayfasında kullanılabilir.

Özel CSS

Özel CSS, modüle ve modülün herhangi bir dahili bileşenine de uygulanabilir. Özel CSS bölümünde, her öğeye doğrudan özel CSS stil sayfaları ekleyebileceğiniz bir metin alanı bulacaksınız. Bu ayarlardaki CSS girişleri zaten stil etiketlerine sarılmıştır. Bu yüzden CSS kurallarını noktalı virgülle ayırarak girin.

görünürlük

Bu seçenek, modülünüzün göründüğü cihazları kontrol etmenizi sağlar. Modülünüzü tabletlerde, akıllı telefonlarda veya masaüstlerinde ayrı ayrı devre dışı bırakmayı seçebilirsiniz. Bu, farklı cihazlarda farklı modlar kullanmak istiyorsanız veya sayfadan belirli öğeleri kaldırarak mobil tasarımı basitleştirmek istiyorsanız kullanışlıdır.

Diğer Divi öğreticiler

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üş
11 hisseleri
hisse4
cıvıltı1
Enregistrer6