কাউন্টার আপ

সংখ্যাগুলি বাক্যের চেয়ে দ্রুত বিশ্বাস করে: 5.5K বিজ্ঞপ্তি বিতরণ করা হয়েছে, 120M ভিডিও দেখা হয়েছে৷ দ্য কাউন্টার আপ উইজেট ইন এলিমেন্টরের জন্য মাস্টার অ্যাডঅন সেই পরিসংখ্যানগুলিকে কার্ডের একটি সারিতে রাখে যেগুলি শূন্য থেকে গণনা করা হয় যখন দর্শকরা তাদের কাছে স্ক্রোল করে, প্রতিটিতে একটি আইকন, K+ বা M+ এর মতো একটি প্রত্যয় এবং নিজস্ব স্টাইলিং সহ।

এই নির্দেশিকাটি স্ক্র্যাচ থেকে একটি চার-স্ট্যাট বিভাগ তৈরি করে: আইটেম, সংখ্যা, আইকন, লেআউট এবং কার্ড স্টাইলিং, লাইভ পৃষ্ঠায় সমাপ্ত কাউন্টারগুলির সাথে শেষ হয়।

কাউন্টার আপ উইজেট কি করে #

একটি উইজেট কাউন্টার আইটেমগুলির একটি সেট ধারণ করে। প্রতিটি আইটেম একটি স্ট্যাট: একটি সংখ্যা যা শূন্য থেকে অ্যানিমেট হয় যখন এটি দৃশ্যে স্ক্রোল করে, এটির চারপাশে একটি উপসর্গ বা প্রত্যয়, এটির নীচে একটি শিরোনাম এবং উপরে একটি ঐচ্ছিক আইকন বা চিত্র। উইজেট আইটেমগুলিকে কলামে সাজায় এবং সেগুলিকে একটি গোষ্ঠী হিসাবে স্টাইল করে, তাই একটি পরিসংখ্যান ব্যান্ড প্রতি-কার্ড ফিডলিং ছাড়াই সামঞ্জস্যপূর্ণ থাকে।

আপনি শুরু করার আগে #

• ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
• এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। প্লাগইনে নতুন? দেখা ইনস্টলেশন গাইড.
• বেসিক উইজেটের অধীনে মাস্টার অ্যাডঅন বিকল্প প্যানেলে কাউন্টার আপ উইজেট সক্রিয় করা হয়েছে।
• আপনার আসল সংখ্যা। উদ্ভাবিত পরিসংখ্যান সহ একটি পরিসংখ্যান বিভাগ কোনও পরিসংখ্যানের চেয়ে বেশি ক্ষতি করে।

কিভাবে কাউন্টার আপ উইজেট যোগ করবেন #

Elementor সম্পাদকে, অনুসন্ধান করুন উপাদান জন্য প্যানেল কাউন্টার আপ এবং পৃষ্ঠায় এটি টেনে আনুন। এটি ইতিমধ্যেই ক্যানভাসে গণনা করা নমুনা আইটেমগুলির সাথে লোড হয়, তাই অ্যানিমেশনটি প্রথম সেকেন্ড থেকে দৃশ্যমান হয়৷।

প্রতিটি কাউন্টার আইটেম সেট আপ করুন #

খোলা কাউন্টার আপ বিষয়বস্তু এবং তালিকার একটি আইটেম ক্লিক করুন। প্রতিটি প্রতি-স্ট্যাট নিয়ন্ত্রণের সম্পূর্ণ সেট বহন করে:

• প্রকার: স্ট্যাটাসের উপরে কোনটি, আইকন বা ছবি নেই। আইকন এলিমেন্টর লাইব্রেরি খোলে; ছবি মিডিয়া লাইব্রেরি খোলে।
• শিরোনাম: নম্বরের নিচের লেবেল, যেমন "বিজ্ঞপ্তি বিতরণ করা হয়েছে"৷।
• সংখ্যা উপসর্গ এবং প্রত্যয়: সংখ্যার চারপাশে পাঠ্য। একটি “$” উপসর্গ বা একটি “K+” প্রত্যয় 5.5 কে $5.5 বা 5.5K+ এ পরিণত করে।
• সংখ্যা: কাউন্টারটি যে মানটিতে উঠে যায়। দশমিক কাজ করে, তাই K+ প্রত্যয় সহ 5.5 5.5K+ পড়ে।
• পটভূমি: একটি প্রতি আইটেম কার্ডের রঙ, যখন একটি স্ট্যাট আলাদা হওয়া উচিত।

প্রত্যয় কৌশলটি বড় সংখ্যাগুলিকে ছোট রাখে: 120,000,000 এ অ্যানিমেট করার পরিবর্তে, একটি M+ প্রত্যয় সহ ডেমো গণনা 120 হয়। দ্রুত অ্যানিমেশন, ক্লিনার কার্ড, এবং কেউ চেক করার জন্য শূন্য গণনা করে না।

আইটেম প্রতি পটভূমি শুধু সেই কার্ডের রং। একটি শিরোনাম স্ট্যাট হাইলাইট করার জন্য দরকারী, অথবা এটি এড়িয়ে যান এবং ভাগ করা বক্স শৈলী চারটি পরিচালনা করতে দিন:

কলাম এবং বিষয়বস্তুর অবস্থান চয়ন করুন #

আইটেম তালিকার নীচে, কলাম প্রতি ডিভাইসে একটি প্রতিক্রিয়াশীল টগল সহ কতগুলি কাউন্টার একটি সারি ভাগ করে তা সেট করে৷। বিষয়বস্তুর অবস্থান সংখ্যার সাপেক্ষে শিরোনাম রাখে: উপরে, বাম, ডান বা নীচে। ডেমো পাশাপাশি নম্বর এবং শিরোনাম সহ 2টি কলাম চেষ্টা করে, তারপর স্ট্যাক করা 4টি কলামে ফিরে আসে।

আইকন টিউন করুন #

দ্য আইকন সেটিংস বিভাগ প্রতিটি কার্ডে আইকন ব্লক নিয়ন্ত্রণ করে: আইকন/ইমেজ পজিশন (স্ট্যাটের বাম, উপরে বা ডান), আইকনের আকার, এবং আইকন সার্কেল বা ছবির আকার গ্লিফের পিছনে রঙিন ডিস্কের জন্য। ডেমোটি 86 পিক্সেল সার্কেলে 30 পিক্সেল আইকন চালায়।

কার্ড স্টাইল #

মধ্যে শৈলী ট্যাব, কাউন্টার আপ বক্স শৈলী শেয়ার্ড কার্ড লুক কভার করে: পটভূমির রঙ, প্যাডিং, মার্জিন, বর্ডার টাইপ, সীমানা ব্যাসার্ধ, এবং বক্স ছায়া। ডেমোটি 20 পিক্সেল প্যাডিং এবং মার্জিন সহ নরম গোলাপী কার্ডে অবতরণ করে, যা শক্ত সীমানা ছাড়াই চারটি পরিসংখ্যানকে আলাদা করে।

সংখ্যা, শিরোনাম এবং আইকন স্টাইল করুন #

দ্য বিষয়বস্তু শৈলী বিভাগটি চারটি গ্রুপে বিভক্ত, কার্ডের প্রতি উপাদান একটি:

• আইকন শৈলী: গ্লিফ রঙ এবং এর পিছনে বৃত্তের রঙ। ডেমো সাদা আইকন সহ বৃত্তগুলিকে গভীর বেগুনি করে তোলে।
• সংখ্যা শৈলী: স্ট্যাট নিজেই রঙ এবং টাইপোগ্রাফি, কার্ডের সবচেয়ে বড় পাঠ্য।
• সংখ্যা উপসর্গ: এর নিজস্ব রঙ, টাইপোগ্রাফি, আকার এবং মার্জিন, তাই একটি মুদ্রা প্রতীক সংখ্যার চেয়ে ছোট বসতে পারে।
• শিরোনাম শৈলী: লেবেলের জন্য রঙ, টাইপোগ্রাফি এবং মার্জিন।

পৃষ্ঠায় ফলাফল #

লাইভ পৃষ্ঠায় সংখ্যাগুলি শূন্য থেকে স্পিন আপ হয় যখন বিভাগটি দৃশ্যে স্ক্রোল করে, তারপর চূড়ান্ত মানগুলিতে স্থির হয়। এখানে সমাপ্ত ব্যান্ড:

সাধারণ ব্যবহারের ক্ষেত্রে #

• কোম্পানি পরিসংখ্যান ব্যান্ড: গ্রাহকদের পরিবেশন করা হয়েছে, প্রকল্প বিতরণ করা হয়েছে, ব্যবসায় বছর।
• SaaS প্রমাণ বিভাগ: ব্যবহারকারী, আপটাইম, ইন্টিগ্রেশন।
• পোর্টফোলিও নম্বর: প্রচারাভিযান চালানো, আয় উৎপন্ন, সম্পাদনার ঘন্টা।
• অলাভজনক প্রভাব: খাবার বিতরণ, স্বেচ্ছাসেবক, তহবিল সংগ্রহ করা হয়েছে।
• কোর্স এবং কমিউনিটি পেজ: ছাত্র, পাঠ, পর্যালোচনা।

ভাল কাউন্টার জন্য টিপস #

• বড় সংখ্যার জন্য প্রত্যয় ব্যবহার করুন। একটি M+ প্রত্যয় সহ 120-এ গণনা করা দ্রুত অ্যানিমেট হয় এবং নয়টি সংখ্যায় গণনা করার চেয়ে পরিষ্কার হয়।
• সেটটি তিন বা চারটি পরিসংখ্যানে রাখুন। ছয়টি কাউন্টার প্রতিযোগিতা করে; চারটি পড়া হয়।
• সবচেয়ে শক্তিশালী সংখ্যা সঙ্গে নেতৃত্ব। দর্শকরা বাম থেকে ডানে পড়ে এবং সারিটি শেষ নাও করতে পারে।
• আপনার প্যালেটে আইকন চেনাশোনাগুলি মেলান৷। বৃত্তের রঙ কার্ডে সবচেয়ে দৃশ্যমান শৈলী পছন্দ; ডেমোর বেগুনি-অন-গোলাপী কাজ করে কারণ উভয়ই একটি প্যালেট থেকে আসে।
• মোবাইল কলাম গণনা পরীক্ষা করুন। একটি ফোনের চারটি কলাম নম্বরগুলিকে চেপে ধরে; প্রতিক্রিয়াশীল কলাম নিয়ন্ত্রণ এক ক্লিকে এটি ঠিক করে।

ভিডিও টিউটোরিয়াল #

আপনি যদি কাউন্টার আপ উইজেটটি কার্যকর দেখতে চান, তাহলে এই ভিডিওটি সম্পূর্ণ সেটআপের মধ্য দিয়ে চলে, প্রথম আইটেম থেকে লাইভ পৃষ্ঠায় অ্যানিমেটেড পরিসংখ্যান ব্যান্ড পর্যন্ত:

প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #

মোড়ানো #

কাউন্টার আপ উইজেট প্লেইন নম্বরগুলিকে একটি পরিসংখ্যান ব্যান্ডে পরিণত করে যা চলে: প্রতি-আইটেম আইকন, উপসর্গ এবং প্রত্যয়, ভাগ করা কলাম এবং কার্ড স্টাইলিং এবং একটি কাউন্ট-আপ অ্যানিমেশন যা ঠিক একবার চোখ টানে। এর সম্পূর্ণ সেট ব্রাউজ করুন মাস্টার অ্যাডঅন উইজেট এবং এক্সটেনশন প্লাগইন দিয়ে আর কি পাঠানো হয় তা দেখতে এবং চেক করুন মূল্য পৃষ্ঠা নিদর্শন মত প্রো অতিরিক্ত জন্য।