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.
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.
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.
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. .
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.
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
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.
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.
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.
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.
Ç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ı 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.
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.
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.