Ana İçeriğe Geç

Divi'de hareketli çubuk 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]

Animasyonlu sayaçlar, ziyaretçilerinize istatistikleri göstermenin eğlenceli ve etkili bir yoludur. Animasyon, sayfadaki gezinmeyi gerçekten ilginç kılmak için tembel yükleme tarafından tetiklenir. Bu modülün içine istediğiniz kadar sayaç yerleştirebilirsiniz.

metre modülü divi.png

Sayfanıza bir bar sayacı modülü nasıl eklenir

Sayfanıza bar sayacı modülü eklemeden önce Divi Builder'a erişmeniz gerekir. Divi teması web sitenize yüklendikten sonra 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.

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

bar counter Instagram Hesabındaki Resim ve Videoları divi.png

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

Çubuk Sayaçlar modülünü kullanmanın en iyi yollarından biri, vaka çalışmaları için istatistikleri göstermektir. Her çubuğu belirli bir işlev veya proje hedefi ile tanımlamanız yeterlidir, böylece kullanıcı projeye hangi hizmetlerin dahil olduğunu bilir. Bu örnekte, üç proje hedefini görüntülemek için çubuk modülünü kullanıyorum.

3 projesi hedeflerini göster.

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

count divi.png sayacı ekle

Şimdi İçerik sekmesine geri dönün ve + Yeni bir öğe ekle İlk bar sayacını modüle eklemek.

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]

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

özelleştirme çubuğu numarası divi.png

Modüle iki ek çubuk sayacı ekleyin ve her birine bir başlık ve yüzde verin.

bars.png bar sayacı divi listesi

İşte bu kadar!

son sonuç divi modülü barre.png

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.

seçenek içerik modülü çubuğu divi.png

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.

seçenek tasarım modülü sayacı barre.png

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]

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.

metin divi modülü yüzdesi barre.png

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.

border option divi builder.png

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.

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

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.

counter bar options advanced.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'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.

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
hisse6
cıvıltı
Enregistrer5