এলিমেন্টর: কীভাবে একটি উল্লম্ব অগ্রগতি ট্র্যাকার তৈরি করবেন

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

তবে মূল থিমটি মোকাবেলা করার আগে, প্রথমে একটি প্রগতি ট্র্যাকার কী তা স্মরণ করা যাক।

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

• le রৈখিক অগ্রগতি ট্র্যাকার
• le বৃত্তাকার অগ্রগতি ট্র্যাকার

এছাড়াও আপনি পড়তে পারেন: এলিমেন্টর: কিভাবে একটি পোর্টফোলিও থেকে একটি প্রভাব কার্ড তৈরি করতে হয়

এই টিউটোরিয়ালে, আমরা আপনাকে দেখাব কিভাবে পোস্ট আর্কাইভস সম্বলিত একটি বিভাগে ধাপে ধাপে একটি উল্লম্ব অগ্রগতি নির্দেশক সন্নিবেশ করাতে হয়।

একটি অগ্রগতি ট্র্যাকার তৈরি করুন

ট্যাবে উপাদান এলিমেন্টরের টুল প্যানেল থেকে, সার্চ বারে টাইপ করুন অগ্রগতি ট্র্যাকার. তারপর উইজেটটিকে একটি বিভাগে টেনে আনুন।

একটি অগ্রগতি সূচক তারপর প্রদর্শিত হবে. ডিফল্টরূপে, এটি অনুভূমিকভাবে ভিত্তিক। কিন্তু চিন্তা করবেন না, আপনি পরে দেখতে পাবেন কিভাবে এটি উল্লম্বভাবে সাজানো যায়।

অগ্রগতি সূচক তৈরি করা হচ্ছে, আসুন পছন্দসই ফলাফল পেতে প্রয়োজনীয় পরিবর্তন করি।

আরও দেখুন: এলিমেন্টর: কিভাবে একটি পোর্টফোলিও থেকে একটি প্রভাব কার্ড তৈরি করতে হয়

অগ্রগতি ট্র্যাকার সামগ্রী সম্পাদনা করুন

এখানে আপনি ট্র্যাকারের ধরন এবং এটি কী সম্পর্কিত তা চয়ন করবেন।

প্রধান সেটিংস হল:

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

আসুন প্রকাশনা সংরক্ষণাগারটি নির্বাচন করি কারণ এটি সেই উপাদান যার সাথে আমাদের ট্র্যাকার সংযুক্ত।

এর সেটিংস প্যানেলে, উন্নত ট্যাবে যান, তারপর ক্ষেত্রে একটি মান পূরণ করুন CSS আইডি.

তারপর, ট্র্যাকার প্যানেলে ফিরে যান এবং বিষয়বস্তু মেনুতে নির্বাচক ক্ষেত্রটি সম্পূর্ণ করুন।

অবশেষে, ডানদিকে অগ্রগতি সূচকের অভিযোজন সেট করুন।

অগ্রগতি ট্র্যাকারের স্টাইল পরিবর্তন করুন

এই ধাপে, আমরা অগ্রগতি নির্দেশকের পরামিতি এবং পরবর্তীটির পটভূমি কনফিগার করব।

অগ্রগতি সূচক সেট করে শুরু করুন।

আরও পড়ুন: এলিমেন্টর: কিভাবে একটি ইমেজ গ্যালারি তৈরি করবেন

• সামঞ্জস্য অগ্রগতির রঙ আপনাকে একটি ক্লাসিক অগ্রগতি এবং একটি গ্রেডিয়েন্ট অগ্রগতির মধ্যে বেছে নিতে দেয়। আমাদের উদাহরণে, প্রথম বিকল্পটি চয়ন করুন। যাইহোক পছন্দ যাই হোক না কেন, এটি সেটিং প্রদর্শিত হবে রঙ.

• স্থির কররঙ আছে গ্লোবাল কালার প্যালেট বা কালার পিকার ব্যবহার করে।

• সীমান্তের ধরন: আপনার এখানে ছয়টি প্রস্তাব রয়েছে (কোনটি, পূর্ণ, দ্বিগুণ, বিন্দুযুক্ত, বিন্দুযুক্ত, খাঁজ) একটি পূর্ণ সীমানা জন্য নির্বাচন করুন.
• প্রস্থ: এটি আপনার অগ্রগতি সূচকের সীমানাকে পুরুত্ব দিতে হয়।
• সীমানা ব্যাসার্ধ: ডিফল্টরূপে, অগ্রগতি সূচকটি একটি আয়তক্ষেত্রের মতো দেখায়। এর ব্যাসার্ধ পরিবর্তন করে, এর প্রান্তগুলি গোলাকার হয়ে যায়।

অবশেষে, সেট করুন piste ব্যাকগ্রাউন্ড সেটিংস। আপনি লক্ষ্য করেছেন যে এটি প্রায় একই সেটিংস যা ফিরে আসে। আগে উল্লেখ করা আপনার তাই সীমাবদ্ধ.

অগ্রগতি ট্র্যাকার উন্নত বিকল্প পরিবর্তন করুন

আমাদের কাজ সম্পূর্ণ করতে, আমরা নিম্নলিখিত ট্যাব সেট করব: মোশন ইফেক্ট, ট্রান্সফর্ম এবং কাস্টম সিএসএস.

প্রথমে ট্যাব দিয়ে শুরু করা যাক কাস্টম সিএসএস. এটি নির্বাচন করুন, তারপর উপযুক্ত ক্ষেত্রে নিম্নলিখিত কোড সন্নিবেশ করান। এটি আপনাকে ট্র্যাকারের প্রস্থ নির্ধারণ করতে দেয়। সুতরাং এটি প্রস্থকে উইন্ডোর উচ্চতার 50% এর সমান নির্ধারণ করে।

এর পরে, ট্র্যাকারটিকে উল্লম্ব দিকে ঘোরান। এটি করতে, সাবমেনু নির্বাচন করুন ট্রান্সফরমার, ঘূর্ণন সক্ষম করুন, তারপর ফাঁকা ক্ষেত্রে 90 টাইপ করুন। এটি আমাদের উইজেটকে 90 ডিগ্রি ঘুরিয়ে আপনাকে পছন্দসই উল্লম্ব অবস্থান দেবে।

আমাদের উইজেটটি প্রথম পোস্টগুলির মতো একই স্তরে সারিবদ্ধ করতে, 145 এর অফসেট প্রয়োগ করুন৷

এই স্তরে, যদি আমরা আমাদের পৃষ্ঠাটি স্ক্রোল করি, আপনি দেখতে পাবেন যে আমরা আমাদের সামগ্রী স্ক্রোল করার সময় আমাদের অগ্রগতি নির্দেশক অদৃশ্য হয়ে যায়।

এই সমস্যাটি কাটিয়ে উঠতে, আপনি ট্যাবটি খুলবেন গতি প্রভাব, তারপর কমান্ড ড্রপ ডাউন পিন এবং নির্বাচন করুন নিচে.

এইবার, নীচে স্ক্রোল করে, আমরা দেখতে পাচ্ছি আমাদের অগ্রগতি ট্র্যাকার ধীরে ধীরে জনবহুল হচ্ছে যখন আমরা আমাদের পোস্টের সংরক্ষণাগারের মধ্য দিয়ে যাচ্ছি।

এলিমেন্টর প্রো এখনই পান!

উপসংহার

তাই! এটি এই নিবন্ধটির জন্য যা আপনাকে দেখায় কিভাবে একটি উল্লম্ব অগ্রগতি ট্র্যাকার তৈরি করতে হয়.

আপনার ওয়েবসাইট তৈরি করার সময় উল্লম্ব অগ্রগতি নির্দেশকের মতো ইন্টারেক্টিভ উপাদান যুক্ত করলে এটি আরও স্বজ্ঞাত হয়ে পরবর্তী স্তরে নিয়ে যেতে পারে। এছাড়াও, এটি একটি সম্পূর্ণ পৃষ্ঠা বা পোস্টের সামগ্রীর সাথে, এমনকি একটি পৃষ্ঠার অন্য কোনও নির্দিষ্ট উপাদানের সাথেও লিঙ্ক করা যেতে পারে। এটি কীভাবে ব্যবহার করবেন তা জানা একটি অতিরিক্ত সুবিধা হবে।

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

কিন্তু ইতিমধ্যে, আপনার বিভিন্ন সামাজিক নেটওয়ার্কে এই নিবন্ধটি ভাগ করুন.

...