উন্নত অ্যাকর্ডিয়ন
পাঠ্যের দীর্ঘ ব্লকগুলি অভিভূত করে, কিন্তু লুকানো উত্তরগুলি হতাশ করে। একটি অ্যাকর্ডিয়ন নিখুঁত ভারসাম্য খুঁজে পায় যখন এটি চিন্তাভাবনা করে ডিজাইন করা হয়। মাস্টার অ্যাডনস অ্যাডভান্সড অ্যাকর্ডিয়ন এলিমেন্ট আপনাকে এই ক্লাসিক ইন্টারেক্টিভ টুলের উপর সম্পূর্ণ নিয়ন্ত্রণ দেয়। পরিষ্কার অ্যাকর্ডিয়ন (এক সময়ে একটি খোলা) বা নমনীয় টগল (একাধিক খোলা) আচরণের মধ্যে চয়ন করুন। পাঠ্য, চিত্র বা এমনকি সম্পূর্ণ সংরক্ষিত টেমপ্লেট দিয়ে আইটেমগুলি পূরণ করুন। তারপর, প্রতিটি একক অবস্থার স্টাইল করুন: সাধারণ শিরোনাম, হোভার, সক্রিয় খোলা আইটেম এবং এমনকি বিষয়বস্তু এলাকা নিজেই। এটা শুধুমাত্র FAQ-এর জন্য নয়; এটি বৈশিষ্ট্য তালিকা, পণ্যের চশমা, পোর্টফোলিও বা যেকোনো বিষয়বস্তুর জন্য যা একটি পরিষ্কার, প্রকাশ-অন-ডিমান্ড উপস্থাপনা থেকে উপকৃত হয়।
দ্বৈত আচরণ মোড এবং গতিশীল বিষয়বস্তু
আপনার অ্যাকর্ডিয়ন কীভাবে আচরণ করে তা নির্ধারণ করে শুরু করুন। অ্যাকর্ডিয়ন টাইপ নির্বাচন করুন: একটি ফোকাসড, এক-আইটেম-ওপেন ফ্লো, বা আরও নমনীয়, চেকলিস্ট-স্টাইলের জন্য টগল করুন যেখানে ব্যবহারকারীরা একাধিক আইটেম খুলতে পারে। তারপর, আপনার আইটেম তৈরি করুন। প্রতিটি ট্যাবের জন্য, একটি শিরোনাম সেট করুন এবং একটি বিষয়বস্তুর ধরন চয়ন করুন। সাধারণ পাঠ্যের বাইরে যান , সমৃদ্ধ পাঠ্য এবং মিডিয়ার জন্য সামগ্রী ব্যবহার করুন, অথবা সামগ্রীর সম্পূর্ণ পূর্ব-পরিকল্পিত ব্লকগুলি সন্নিবেশ করতে সংরক্ষিত বিভাগ, সংরক্ষিত উইজেট বা সংরক্ষিত পৃষ্ঠা টেমপ্লেট থেকে নির্বাচন করুন। এটি এটিকে মডুলার পৃষ্ঠা তৈরি এবং জটিল লেআউটগুলি পুনরায় ব্যবহার করার জন্য একটি শক্তিশালী হাতিয়ার করে তোলে।
- দুটি ইন্টারঅ্যাকশন মডেল: স্টেপড প্রসেসের জন্য অ্যাকর্ডিয়ন (একক খোলা), চেকলিস্ট বা বৈশিষ্ট্যগুলির জন্য টগল (একাধিক খোলা)।
- সমৃদ্ধ বিষয়বস্তুর উত্স: সাধারণ পাঠ্য, চিত্র, বা সম্পূর্ণ সংরক্ষিত এলিমেন্টর বিভাগ এবং টেমপ্লেট সহ অ্যাকর্ডিয়ন আইটেমগুলিকে পপুলেট করুন৷।
- ডিফল্ট সক্রিয় আইটেম: পৃষ্ঠা লোড হলে যেকোনো আইটেমকে ডিফল্ট হিসাবে সক্রিয় হিসাবে সেট করুন।
- সহজ ব্যবস্থাপনা: + আইটেম যোগ করুন বোতাম এবং স্বজ্ঞাত রিপিটার দিয়ে আইটেম যোগ করুন, সরান এবং পুনরায় সাজান।
রাষ্ট্র-ভিত্তিক শিরোনাম স্টাইলিং এবং কাঠামো
শিরোনাম বার হল যা ব্যবহারকারীরা ক্লিক করে 1 প্রতিটি ভিজ্যুয়াল স্টেটকে ইচ্ছাকৃত করে তোলে। শিরোনামটিকে এর সাধারণ, হোভার এবং সক্রিয় (খোলা) অবস্থার জন্য আলাদাভাবে স্টাইল করুন। প্রতিটি রাজ্যের জন্য, একটি অনন্য পটভূমির ধরন (রঙ, গ্রেডিয়েন্ট), পাঠ্যের রঙ এবং টাইপোগ্রাফি সংজ্ঞায়িত করুন। শিরোনাম সারিবদ্ধ, প্যাডিং, বর্ডার, বর্ডার ব্যাসার্ধ নিয়ন্ত্রণ করুন এবং একটি বক্স শ্যাডো যোগ করুন। বিশদ বিবরণের এই স্তরটি আপনাকে একটি পরিষ্কার চাক্ষুষ যাত্রা তৈরি করতে দেয়: একটি নিরপেক্ষ ডিফল্ট, একটি আমন্ত্রণমূলক হোভার এবং একটি স্বতন্ত্র "ওপেন" অবস্থা যা ব্যবহারকারীর ক্রিয়া নিশ্চিত করে৷।
- ট্রিপল-স্টেট ডিজাইন: সাধারণ, হোভার এবং সক্রিয় শিরোনাম বারগুলিতে স্বতন্ত্র শৈলী প্রয়োগ করুন।
- উন্নত পটভূমি: গভীরতা তৈরি করতে বিভিন্ন রাজ্যের জন্য কঠিন রং বা গ্রেডিয়েন্ট ব্যবহার করুন।
- সম্পূর্ণ বক্স নিয়ন্ত্রণ: প্রতিটি শিরোনাম বারকে একটি ডিজাইন করা উপাদান করতে প্যাডিং, বর্ডার এবং বক্স শ্যাডো সামঞ্জস্য করুন।
দ্বৈত রাজ্যের সাথে কাস্টমাইজযোগ্য টগল আইকন
জেনেরিক ত্রিভুজ আইকনের বাইরে যান। প্রসারিত (বন্ধ অবস্থা) এবং সঙ্কুচিত (খোলা অবস্থা) উভয় ক্রিয়াকলাপের জন্য লাইব্রেরি থেকে যেকোনো আইকন চয়ন করতে কাস্টম আইকন সক্ষম করুন৷ আইকনটিকে বাম বা ডানে রাখুন। তারপর, এই আইকনগুলিকে সাধারণ, হোভার এবং সক্রিয় অবস্থার জন্য স্বাধীনভাবে স্টাইল করুন, তাদের রঙ, আকার এবং পটভূমি পরিবর্তন করুন। নিখুঁত প্রান্তিককরণের জন্য আইকনের চারপাশে আইকন ব্যবধান এবং প্যাডিং সামঞ্জস্য করুন। এটি একটি কার্যকরী সূচককে আপনার ডিজাইন ভাষার একটি সমন্বিত অংশে পরিণত করে।
- দ্বৈত আইকন: "plus” (প্রসারিত) এবং “minus” (পতন) অবস্থার জন্য বিভিন্ন আইকন সেট করুন।
- স্টেট-স্পেসিফিক আইকন স্টাইলিং: আইটেমটি হভার বা সক্রিয় থাকলে আইকনের রঙ এবং পটভূমি পরিবর্তন করুন।
- সঠিকভাবে প্রান্তিককরণ: শিরোনাম পাঠ্যের সাথে সম্পর্কিত আইকন প্রান্তিককরণ, অবস্থান এবং ব্যবধান নিয়ন্ত্রণ করুন।
বিষয়বস্তু এলাকা এবং ধারক স্টাইলিং
যে বিষয়বস্তু নিচে স্লাইড করে তার নিজস্ব নকশা বিবেচনার দাবি রাখে। নিজস্ব ব্যাকগ্রাউন্ড কালার, টেক্সট কালার, টাইপোগ্রাফি এবং অভ্যন্তরীণ প্যাডিং সহ কন্টেন্ট এরিয়া স্টাইল করুন। প্রয়োজনে পঠনযোগ্যতার জন্য একটি টেক্সট শ্যাডো যোগ করুন। তারপর, সমস্ত অ্যাকর্ডিয়ন বিভাগ ধারণ করে এমন সামগ্রিক আইটেম কন্টেইনারটি স্টাইল করুন: আইটেমগুলির মধ্যে ব্যবধান সেট করুন, একটি গ্লোবাল বর্ডার, বর্ডার রেডিয়াস এবং বক্স শ্যাডো। এটি নিশ্চিত করে যে পুরো উইজেটটি একটি ইউনিফাইড, পালিশ করা উপাদানের মতো অনুভব করে এবং খোলা বিষয়বস্তুটি পড়া সহজ এবং আনন্দদায়ক।
- বিষয়বস্তু এলাকা ডিজাইন: সর্বোত্তম পঠনযোগ্যতার জন্য ড্রপ-ডাউন সামগ্রীর পটভূমি এবং পাঠ্য স্টাইল করুন।
- কন্টেইনার-লেভেল পোলিশ: পুরো অ্যাকর্ডিয়ন গ্রুপে বর্ডার রেডিয়াস এবং বক্স শ্যাডো প্রয়োগ করুন।
- আইটেম ব্যবধান: একটি পরিষ্কার, পৃথক চেহারার জন্য প্রতিটি অ্যাকর্ডিয়ন আইটেমের মধ্যে ব্যবধান (মার্জিন) নিয়ন্ত্রণ করুন।
উন্নত অ্যাকর্ডিয়নের জন্য প্রায়শই জিজ্ঞাসিত প্রশ্ন
“Accordion” এবং “Toggle” টাইপের মধ্যে ব্যবহারিক পার্থক্য কী?
অ্যাকর্ডিয়ন: একবারে শুধুমাত্র একটি আইটেম খোলা যেতে পারে। একটি নতুন আইটেম খোলা স্বয়ংক্রিয়ভাবে আগেরটি বন্ধ করে দেয়। প্রায়শই জিজ্ঞাসিত প্রশ্ন পৃষ্ঠা বা অনুক্রমিক নির্দেশাবলীর জন্য সেরা যেখানে আপনি স্ক্রোলিং কমাতে চান এবং মনোযোগ কেন্দ্রীভূত করতে চান।
টগল করুন: একাধিক আইটেম একসাথে খোলা যেতে পারে। ব্যবহারকারীরা তথ্য তুলনা বা সংগ্রহ করতে বেশ কয়েকটি আইটেম প্রসারিত করতে পারেন। বৈশিষ্ট্য চেকলিস্ট, পণ্য স্পেসিফিকেশন তালিকা, বা বিষয়বস্তুর জন্য সেরা যেখানে ব্যবহারকারীদের একবারে একাধিক বিভাগ দেখতে হবে।
পৃষ্ঠা লোড হলে আমি কি একটি আইটেম খোলা শুরু করতে পারি?
হ্যাঁ। বিষয়বস্তু ট্যাবে একটি পৃথক আইটেম সম্পাদনা করার সময়, আপনি ডিফল্ট বিকল্প হিসাবে একটি সক্রিয় পাবেন। আপনি যে আইটেমটি আগে থেকে খুলতে চান তার জন্য এটিকে হ্যাঁ সেট করুন। দ্বন্দ্ব এড়াতে শুধুমাত্র একটি আইটেমের একটি অ্যাকর্ডিয়ন প্রকারে এই সেট থাকা উচিত।
বিষয়বস্তুর ধরন হিসাবে "সংরক্ষিত বিভাগ" বা "সংরক্ষিত পৃষ্ঠা টেমপ্লেট" কি?
এগুলি শক্তিশালী এলিমেন্টর প্রো বৈশিষ্ট্য। আপনার এলিমেন্টর লাইব্রেরিতে যদি আপনার একটি বিভাগ (যেমন একটি টিম প্রোফাইল) বা একটি সম্পূর্ণ পৃষ্ঠা টেমপ্লেট (যেমন একটি যোগাযোগ ফর্ম) সংরক্ষিত থাকে, তাহলে আপনি অ্যাকর্ডিয়ন আইটেমের ভিতরে উপস্থিত হওয়ার জন্য এটি নির্বাচন করতে পারেন। এটি আপনাকে আপনার অ্যাকর্ডিয়নের মধ্যে জটিল, পূর্ব-পরিকল্পিত লেআউট এম্বেড করতে দেয়।
কিভাবে হোভার এবং সক্রিয় রাষ্ট্র মোবাইলে কাজ করে?
টাচ ডিভাইসে, প্রথম ট্যাপটি প্রায়শই দ্রুত পর্যায়ক্রমে হোভার এবং অ্যাক্টিভ উভয় অবস্থাকে ট্রিগার করবে (আইটেমটি খোলার সাথে সাথে)। আপনি সক্রিয় অবস্থায় যে স্টাইলিং প্রয়োগ করেন তা মোবাইলের জন্য সবচেয়ে গুরুত্বপূর্ণ, কারণ এটি দেখাবে কোন আইটেমটি বর্তমানে খোলা আছে। হোভার স্টেট একটি পৃথক পদক্ষেপ হিসাবে দেখা নাও হতে পারে।
আমি কি খোলার এবং বন্ধ করার অ্যানিমেশন গতি নিয়ন্ত্রণ করতে পারি?
হ্যাঁ। বিষয়বস্তু ট্যাবে, আপনি টগল স্পিড (ms) পাবেন। মান মিলিসেকেন্ডে (যেমন, 300)। একটি কম সংখ্যা (যেমন 200) এটিকে দ্রুত এবং স্ন্যাপিয়ার করে তোলে; একটি উচ্চ সংখ্যা (যেমন 500) এটিকে ধীর এবং আরও ইচ্ছাকৃত করে তোলে।
অ্যাকর্ডিয়ন কি কীবোর্ড নেভিগেশন এবং স্ক্রিন রিডারের জন্য অ্যাক্সেসযোগ্য?
একটি সঠিকভাবে কোডেড অ্যাকর্ডিয়ন উইজেট অ্যাক্সেসযোগ্য হওয়া উচিত। শব্দার্থিক শিরোনাম HTML ট্যাগের ব্যবহার (যেমন <div>, <h3>) বিষয়বস্তু গঠনে সহায়তা করে। প্রসারিত/ধ্বসিত অবস্থার জন্য ইন্টারেক্টিভ স্টেট এবং ARIA বৈশিষ্ট্যগুলি সাধারণত উইজেট দ্বারা পরিচালিত হয় যাতে স্ক্রীন রিডাররা পরিবর্তনগুলি ঘোষণা করতে পারে।
ট্রেন্ডিং এলিমেন্টর উইজেট এবং এক্সটেনশন
কম সময়ে অত্যাধুনিক ওয়েবসাইট তৈরি করুন।
গ্লাসমরফিজম
ধারক অতিরিক্ত
নিদর্শন
পোস্ট/পেজ ডুপ্লিকেটর
