Dairesel sayaç, tek bir istatistiği estetik açıdan hoş bir şekilde görüntülemenizi sağlar. Siz aşağı kaydırdıkça, sayı geri sayar ve pasta grafik, yüzde değerine uyacak şekilde kademeli olarak dolar. Birden fazla daire sayacı modülünü bir sayfada birleştirmeyi deneyin. ziyaretçi işiniz veya kişisel becerileriniz hakkında bilgi edinmenin eğlenceli bir yolu.

circulerire counter örnek divi.png

Sayfanıza dairesel bir sayaç modülü nasıl eklenir

Sayfanıza daire sayacı modülü ekleyebilmeniz için önce Divi Builder'a erişmeniz gerekir. Bir kere Divi teması web sitenize yüklediğinizde bir düğme göreceksiniz Divi Builder'ı Kullan Her yeni sayfa oluşturduğunuzda yayıncının üstünde.

Bu düğmeye tıklayarak, tüm Divi Builder modüllerine erişmenizi sağlayacak Divi Builder'ı etkinleştirebileceksiniz. Ardından düğmeye tıklayın Visual Builder'ı kullan Jeneratörü görsel modda başlatmak için.

Düğmesine de tıklayabilirsiniz Visual Builder'ı kullan WordPress panonuza giriş yaptıysanız, web sitenizi gezerken.

divi oluşturucu kullanın

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.

sayaç çemberi divi.png

Modül listesinde dairesel ölçüm modülünü bulun ve sayfanıza eklemek için üzerine tıklayın. Modül listesi aranabilir, yani "daire sayacı" kelimesini de yazabilir ve ardından daire sayacı modülünü otomatik olarak aramak ve eklemek için enter'a tıklayabilirsiniz!

Modül eklendiğinde, modül seçeneklerinin listesi ile karşılaşacaksınız. Bu seçenekler üç ana gruba ayrılmıştır: içindekiler , Gebe kalma et gelişmiş .

Bir vaka çalışmasında proje hedeflerini görüntülemek için örnek kullanın

Daire sayaçları modülünü kullanmanın en iyi yollarından biri, Statistiques vaka çalışmaları veya portföy öğeleri için.

Her bir dairesel sayacı belirli bir proje işlevi veya hedefi ile tanımlayın, böylece kullanıcı projeye hangi hizmetlerin dahil olduğunu bilir. Bu örnekte, üç proje hedefini görüntülemek için "daire sayacı" modülünü kullanacağım.

Aşağıdaki resimde de görebileceğiniz gibi, sayfanın üst kısmında Çubuk Sayacı modülünü kullanan projenin üç amacı, sayfanın alt kısmında ise Sayaç Numarası modülünün kullanıldığı vaka çalışmasının sonuçları yer almaktadır. .

örnek modül dairesi divi animation.gif

Başlayalım.

Tam genişlikli (1 sütun) düzene sahip standart bir bölüm eklemek için görsel oluşturucuyu kullanın. Ardından satıra bir daire sayacı modülü ekleyin.

sayaç daire yapılandırması divi.png

Daire sayacı ayarlarını aşağıdaki gibi güncelleyin:

İçerik seçenekleri

Başlık: Animasyon
No: 80
% İşareti: Evet
Bar Arkaplan Rengi: #e07a5e

Tasarım seçenekleri

Dairenin rengi: #e07a5e
Metin rengi: Koyu
Başlık yazı tipi: Varsayılan
Başlık Yazı Tipi Boyutu: 26px
Başlık Metin Rengi: #405c60
Yazı Tipi Numarası: Varsayılan
Boyut yazı tipi boyutu: 46px
Sayı Metin Rengi: #405c60

Animasyon divi grafikli bir daire olan divi.png oluşturulması

Ayarları kaydet

Şimdi, daire sayıcı modülünü iki kez kopyalayın ve her kopyayı satırınızın ikinci ve üçüncü sütunlarına sürükleyin.

dairesel bir sayaç modülü divi.png

Tasarım elemanlarınız yinelenen modüllere aktarıldığından, yalnızca dairesel sayacın başlığını ve numarasını güncellemeniz gerekir.

İşte bu kadar!

Sayfayı ziyaret et.

tasarım sayacı divi builder.png

Dairesel Sayaç İçerik 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 olacaktır.

daire modülü içeriği

Başlık

Daire sayacı için bir başlık girin. Bu genellikle görüntülemekte olduğunuz istatistiği temsil eden bir kelimedir. Pasta grafiğindeki sayının altında görüntülenecektir.

isim

Dairesel sayaç için bir sayı ayarlayın. 100'den küçük bir sayı seçerseniz, daire grafiği girdiğiniz sayıya eşit bir yüzde doldurur. Örneğin, 20 sayısını girmek, daireyi% 20 oranında vurgu renginizle doldurur.

Yüzde işareti

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

Çubuk arka plan rengi

Bu, çubuğun dolgu rengini değiştirecektir. Dolgu rengi miktarı, yukarıda seçilen "sayı" ile kontrol edilir. 50 sayısını ve mavi bir rengi seçerseniz, daireniz% 50 mavi renkle dolacaktır.

Yönetim etiketi

Bu, kolay tanımlama için jeneratördeki modül etiketini değiştirecektir. WireFrame görünümünü Visual Builder'da kullanırken, bu etiketler Divi Builder arayüzünün modül bloğunda görünecektir.

Dairesel Sayaç Tasarım Seçenekleri

Tasarım sekmesinde yazı tipleri, renkler, boyut ve boşluk gibi tüm modül stil seçeneklerini bulacaksınız. Bu sekme, modülünüzün görünümünü değiştirmenize olanak tanır. Her Divi modülünde, hemen hemen her şeyi değiştirmek için kullanabileceğiniz uzun bir tasarım ayarları listesi vardır.

dairesel sayaç seçeneği divi.png

Çemberin rengi

Bu, dairenin doldurulmamış kısmı için kullanılacak renktir (İçerik sekmesinde tanımlanan çubuğun arka plan rengiyle doldurulmayan negatif boşluk).

Dairenin renginin opaklığı

Bu ayarı kullanarak dairenin doldurulmuş kısmının opaklığını azaltabilirsiniz.

Metin rengi

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

Başlık yazı tipi

Açılır menüden istediğiniz yazı tipini seçerek metninizin yazı tipini değiştirebilirsiniz. Divi, Google Fonts 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. Ayrıca kalın, italik, büyük ve altı çizili seçenekleri kullanarak metninizin stilini özelleştirebilirsiniz.

Başlık yazı tipi boyutu

Burada başlık metninizin boyutunu ayarlayabilirsiniz. Metninizin boyutunu büyütmek veya küçültmek için aralık kaydırıcısını sürükleyebilir veya kaydırıcının sağındaki giriş alanına doğrudan istenen metin boyutu değerini girebilirsiniz. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyutunuza 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 görünür. Başlığınızın metin rengini değiştirmek istiyorsanız, bu seçeneği kullanarak renk seçiciden tercih ettiğiniz rengi seçin.

Başlık harflerinin aralığı

Harf aralığı, her harf arasındaki boşluğu etkiler. Başlık metninizin her bir harfi arasındaki boşluğu artırmak istiyorsanız, aralığı ayarlamak için aralık kaydırıcısını kullanın veya kaydırıcının sağındaki giriş alanına istenen boşluk boyutunu girin. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyutunuza 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 metninin her satırı arasındaki boşluğu etkiler. Her satır arasındaki boşluğu artırmak istiyorsanız, aralığı ayarlamak için aralık kaydırıcısını kullanın veya kaydırıcının sağındaki giriş alanına istenen boşluk boyutunu girin. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyutunuza bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Polis numarası

Açılır menüden istediğiniz yazı tipini seçerek metninizin yazı tipini değiştirebilirsiniz. Divi, Google Fonts 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. Ayrıca kalın, italik, büyük ve altı çizili seçenekleri kullanarak metninizin stilini özelleştirebilirsiniz.

sayı metni divi oluşturucu dairesel counter.png

Sayı yazı tipi boyutu

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

Sayı metninin rengi

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

Numaralı harflerin aralığı

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

metin ölçer boşluk harfleri divi.png

Sayı çizgisinin yüksekliği

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

Gelişmiş Dairesel Sayaç Seçenekleri

Gelişmiş sekmesinde, özel CSS ve HTML öznitelikleri 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.

gelişmiş sayaç divi.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 kullanılacak 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 sizin için kullanılabilir. Divi teması Divi Tema Seçenekleri veya Divi Builder Sayfa Ayarları'nı kullanarak sayfanıza veya web sitenize eklediğiniz alt veya özel CSS'de.

Özel CSS

Özel CSS, modüle ve modülün herhangi bir dahili öğesine de uygulanabilir. Özel CSS bölümünde, her bir öğeye doğrudan CSS ekleyebileceğiniz bir metin alanı bulacaksınız. Bu ayarlardaki CSS girişleri zaten stil etiketleriyle gömülüdür. Yani CSS kurallarını noktalı virgülle ayırarak girmeniz yeterlidir.

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ı modüller kullanmak istiyorsanız veya sayfadan belirli öğeleri kaldırarak mobil tasarımı basitleştirmek istiyorsanız kullanışlıdır.

Bu eğitim için bu kadar.