Elementor'da ilerleme çubuğu oluşturun ve özelleştirin

İlerleme çubukları, ziyaretçilerine bir proje veya hedefin ilerleyişini etkileyici bir şekilde bilgilendiren web tasarımında etkili bir öğedir. WordPress için en popüler Page Builder eklentilerinden biri olan Elementor, ilerleme çubuklarını web sitenize kolayca entegre etmenizi sağlar. Bu kılavuz, Elementor'da bir ilerleme çubuğu oluşturmanıza ve özelleştirmenize yönlendirir.

Anahtar Bilgiler

• Ilerleme çubukları, ilerleme ve hedefleri görsel olarak temsil eder.
• Başlık, değer ve renkleri özelleştirebilirsiniz.
• İç metni isteğe bağlı olarak görüntülemeye veya gizlemeye devam edebilirsiniz.
• Tasarımınıza uydurmak için farklı stiller ve özelleştirme seçenekleri mevcuttur.

Adım Adım Talimatlar

Adım Adım Talimatlar

Öncelikle WordPress sayfanızı açın ve Elementor Düzenleyici'ye gidin. Burada yeni bir öğe ekleyebilir ve ilerleme çubuğunu seçebilirsiniz.

Şimdi, ilerleme çubuğunuzun başlığını girmeye hazırsınız. "Satış Hedefi" gibi uygun bir başlık seçin. Bu ziyaretçilerinize konunun ne olduğuna dair ilk ipucunu verir.

Sonraki adımda, hedefi veya başarı bildirisini belirlemeniz gerekmektedir. Göstermek istediğiniz şeyi netleştirin ve uygun alana yazın. Bu adım, ilerleme çubuğunuzu kullanıcılar için anlaşılır hale getirir.

Şimdi ilerleme çubuğunun rengini belirleyebilirsiniz. Zorunlu olmasa da, tasarımı özelleştirmek için iyi bir fırsattır. Web sitenizin geri kalanıyla uyumlu bir renk tonu seçebilirsiniz.

Sonra yüzde değerlerine geçin. Burada ilerlemenizi ayarlayabilirsiniz, örneğin %40'a. Maksimum değerin %100 ve minimum değerin %0 olarak ayarlanabileceğini unutmayın. Bu geri bildirim, ziyaretçilerinizin ilerlemeyi hızlıca kavramasına yardımcı olur.

Yüzde değeri görüntülenebilir veya gizlenebilir. Özellikle temiz bir tasarımı tercih ediyorsanız metni gizlemek genellikle daha çekici görünür. Hangi seçeneğin proje için en uygun olduğunu düşünün.

İsterseniz, yüzde değerlerini içeren bir iç metin de ekleyebilirsiniz. Bu özellik, anlık ilerlemeyi göstermek istediğinizde özellikle faydalıdır. İç metni devre dışı bırakmaya karar verirseniz, burada sayıyı da gizleyebilirsiniz.

Şimdi ilerleme çubuğunun stilini belirleyin. Balkın rengini, dolmayan alan için arka plan rengini ve balkın yüksekliğini bireysel olarak ayarlayın. Dolu alan için koyu yeşil tonunu ve net bir görünüm için nötr bir arka plan rengini seçin.

Tasarımınızı daha çekici hale getirmek için ilerleme çubuğunun köşelerini yuvarlayabilirsiniz, böylece balk daha cazip bir şekle sahip olur. Köşelerin ancak ilerleme %100'e ulaşıncaya kadar yuvarlanabileceğini unutmayın.

İç metni özelleştirmek istiyorsanız, burada metin rengi ve tipografi değiştirebilirsiniz. Odaklanmayı ilerlemeye çekmek için yazı tipini devre dışı bırakmaya karar verebilirsiniz.

Son olarak, başlık için metin rengi ve metin stilini özelleştirebileceğiniz gelişmiş ayarlara geçiyorsunuz. Siyah, kalın bir başlık opsiyonel gölge ile dikkat çekici hale getirilir.

Şimdi değişikliklerinizi kaydedin ve sonucu görmek için sayfanıza gidin. Belki yüzdeyi göstermenin mantıklı olacağına karar verirsiniz. Değilse, ilerleme çubuğu yine de etkileyici bir şekilde sunulur.

İlerleme çubuğunuz artık animasyonla sıfırdan yukarı saymaksızın belirlenen değeri gösteriyor. Bunun yerine ilerleme anında görselleştirilir.

Eğer Elementor'un Pro sürümünü kullanıyorsanız, ek dinamik özellikler sunulacaktır. Bu özellik, ilerleme çubuklarını dış verilere veya hatta veritabanı destekli değerlere dayalı olarak özelleştirmek için çok kullanışlıdır.

Özet

Bu kılavuzda, Elementor'da bir ilerleme çubuğu oluşturmayı ve özelleştirmeyi öğrendiniz. Başlık ve ilerlemeyi belirleyebilir, renkler seçebilir ve çeşitli ayarlamalar yaparak çekici ve etkili bir ilerleme çubuğunu entegre edebilirsiniz.