Animasyonlu sayaçlar, görüntülemenin eğlenceli ve etkili bir yoludur. Statistiques senin için ziyaretçi. Animasyon, sayfada gezinmeyi gerçekten ilginç hale getirmek için yavaş yükleme ile tetiklenir. Bu modülün içine istediğiniz kadar sayaç yerleştirebilirsiniz.
Sayfanıza bir bar sayacı modülü nasıl eklenir
Sayfanıza bir bar sayacı modülü ekleyebilmeniz için öncelikle 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 bağlıysanız, web sitenizi ön uçta 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 bar sayacı modülünü bulun ve sayfanıza eklemek için üzerine tıklayın. Modül listesi aranabilir, yani "Bar counter" kelimesini de yazabilir ve ardından otomatik olarak aramak ve bar sayacı modülünü 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
Bar Sayaçları modülünü kullanmanın en iyi yollarından biri, Statistiques vaka çalışmaları için. Kullanıcının projeye hangi hizmetlerin dahil edildiğini bilmesi için her çubuğu belirli bir proje işlevi veya amacı ile etiketlemeniz yeterlidir. Bu örnekte, üç proje hedefini görüntülemek için bar modülünü kullanıyorum.
Gördüğünüz gibi, sayfanın üst kısmında "Çubuk Sayacı" modülünü kullanan projenin üç hedefi ve sayfanın alt kısmında "Sayaç" modülünü kullanan örnek olay incelemesinin sonuçları yer almaktadır. Numara ".
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 bar sayaç modülü ekleyin.
Çubuk sayaçların parametrelerini aşağıdaki şekilde güncelleyin:
İçerik seçenekleri
Kullanım yüzdesi: AÇIK
Arka plan rengi: #dddddd
Çubuk arka plan rengi: # e07a5e
Tasarım seçenekleri
Metin rengi: Koyu
Başlık yazı tipi: varsayılan
Başlık Yazı Tipi Boyutu: 20px
Başlık Metin Rengi: # 405c60
Başlık Satırı Yüksekliği: 2em
Yüzde Yazı Tipi: Varsayılan
Yüzde Yazı Tipi Boyutu: 16px
Yüzde Metin rengi: #ffffff
Yüzde Hat Yüksekliği: 2.5em
Şimdi İçerik sekmesine geri dönün ve + Yeni bir öğe ekle İlk bar sayacını modüle eklemek.
Tek tek modül ayarlarını aşağıdaki gibi güncelleyin:
İçerik sekmesi
Başlık: Başlığım
Yüzde: 80
Ayarları kaydet
Modüle iki ek çubuk sayacı ekleyin ve her birine bir başlık ve yüzde verin.
İşte bu kadar!
Bar sayacı iç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 olacaktır.
Kullanım yüzdeleri
Varsayılan olarak, yüzdeler renk çubuğu sayacında görüntülenir. Bu metin, bu ayar kullanılarak kapatılabilir ve görsel çubuk grafiğin kendi adına konuşmasına izin verilir.
Arka plan rengi
Bu seçenek, her bir çubuk sayacının arka plan rengini ayarlamanıza olanak tanır. Bu ayar, dolu çubuğun renginin arkasındaki negatif boşluğa uygulanır.
Çubuk arka plan rengi
Bu seçenek, dolu çubuğun arka plan rengini ayarlamanıza olanak tanır. Bu arka plan rengi, önceki arka plan rengi ayarıyla örtüşüyor.
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.
Bar 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.
Metin rengi
Burada metninizin açık mı 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. Aşağıdaki ek metin rengi seçeneklerini kullanarak metin renginizi daha da özelleştirebilirsiniz.
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.
Metnin yüzdesi
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.
Yüzde yazı tipi boyutu
Burada metninizin boyutunu yüzde olarak 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.
Yüzde metin rengi
Varsayılan olarak Divi'deki tüm metin renkleri beyaz veya koyu gri görünür. Metninizin rengini yüzde olarak değiştirmek istiyorsanız, bu seçeneği kullanarak renk seçiciden istediğiniz rengi seçin.
Yüzde harf aralığı
Harf aralığı, her harf arasındaki boşluğu etkiler. Metninizin her bir harfi arasındaki boşluğu yüzde olarak 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 istediğiniz aralığın 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.
Yüzde çizgisinin yüksekliği
Satır yüksekliği, metninizin her satırı arasındaki boşluğu yüzde olarak 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.
Sınır yarıçapı
Bir sınır yarıçapı uygulamak, çubuk sayacındaki çubuğun köşelerini yuvarlar. Kenarlığın yarıçapı ne kadar büyükse köşeler o kadar yuvarlatılır.
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. Desteklenen özel ölçü birimleri, yani varsayılan birimi "px" den başka bir şeye, örneğin em, vh, vw vb.
Sınır tarzı
Kenarlıklar, düz, noktalı, noktalı, çift, oluk, sırt, iç metin ve başlangıç dahil olmak üzere sekiz farklı stili destekler. Kenarlığınıza uygulamak için açılır menüden istediğiniz stili seçin.
Çubuk doldurma
Dolgu, modülünüzün içinde, modülün kenarı ile iç öğeleri arasında eklenen alandır. Burada, çubuk modülüne özel üst dolgu ve alt dolgu ekleyebilirsiniz.
Gelişmiş Bar Sayacı 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 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'de kullanılabilir.
Ö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.
