একটি FAQ বিভাগ তার অ্যাকর্ডিয়ন দ্বারা বেঁচে থাকে বা মারা যায়: প্রশ্নগুলি কমপ্যাক্ট থাকে, উত্তরগুলি ক্লিকে প্রদর্শিত হয় এবং পৃষ্ঠাটি কখনই দীর্ঘ মনে হয় না। বিনামূল্যে উন্নত অ্যাকর্ডিয়ন উইজেট মধ্যে এলিমেন্টরের জন্য মাস্টার অ্যাডঅন সেই প্যাটার্ন তৈরি করে। প্রতিটি আইটেম একটি টাইপ করা উত্তর ধারণ করে, এবং মাস্টার অ্যাডনস প্রো এর সাথে একটি আইটেম পরিবর্তে একটি সংরক্ষিত এলিমেন্টর টেমপ্লেট লোড করতে পারে, তাই একটি উত্তর একটি যোগাযোগ ফর্ম, একটি মূল্য সারণী বা এমনকি অন্য অ্যাকর্ডিয়ন হতে পারে।
এই নির্দেশিকাটি আইটেম তালিকা থেকে লাইভ পৃষ্ঠায় স্টাইল করা অ্যাকর্ডিয়ন পর্যন্ত একটি বাস্তব FAQ বিভাগে উইজেটের মধ্য দিয়ে চলে।
উইজেটটি কীভাবে কনফিগার করবেন তার চেয়ে কী করে তা খুঁজছেন? দ্য Elementor Accordion উইজেট ওভারভিউ এক পৃষ্ঠায় বৈশিষ্ট্য, স্টাইলিং বিকল্প এবং মূল্য কভার করে।
অ্যাডভান্সড অ্যাকর্ডিয়ন উইজেট যা করে #
উইজেটটি সংকোচনযোগ্য আইটেমগুলির একটি স্ট্যাক রেন্ডার করে। প্রতিটি সারিতে একটি শিরোনাম, একটি বিষয়বস্তু এলাকা এবং একটি টগল আইকন রয়েছে যা প্রসারিত এবং পতনের অবস্থার মধ্যে উল্টে যায়। দ্য অ্যাকর্ডিয়ন টাইপ ড্রপডাউন আচরণ বেছে নেয়: অ্যাকর্ডিয়ন একবারে একটি আইটেম খোলা রাখে, একটি নতুন খোলার সময় শেষটি বন্ধ করে; টগল দর্শকদের একসাথে বেশ কয়েকটি আইটেম খোলা রাখা যাক।
আপনি শুরু করার আগে #
- ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
- এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। প্লাগইনে নতুন? দেখা ইনস্টলেশন গাইড.
- বেসিক উইজেটের অধীনে মাস্টার অ্যাডঅন বিকল্প প্যানেলে অ্যাডভান্সড অ্যাকর্ডিয়ন উইজেট সক্ষম করা হয়েছে।
- ঐচ্ছিক: মাস্টার অ্যাডনস প্রো এবং একটি সংরক্ষিত এলিমেন্টর টেমপ্লেট যদি আপনি একটি অ্যাকর্ডিয়ন আইটেমের ভিতরে একটি লোড করতে চান।
অ্যাকর্ডিয়ন আইটেম যোগ করুন এবং পরিচালনা করুন #
মধ্যে বিষয়বস্তু ট্যাব, আইটেম তালিকা প্রতি প্রশ্নে একটি এন্ট্রি ধারণ করে। একটি আইটেমের সেটিংস প্রসারিত করতে ক্লিক করুন, প্রতিটির পাশে আইকন সহ সারিগুলি নকল করুন বা মুছুন এবং টিপুন৷ আইটেম যোগ করুন তালিকা প্রসারিত করতে। ডেমো একটি পাঁচ-প্রশ্নের প্লাম্বিং FAQ চালায়।
তালিকার নীচে ভাগ করা নিয়ন্ত্রণগুলি বসুন:
- সক্রিয়/নিষ্ক্রিয় আইকন দেখান?: প্রতিটি শিরোনামের ডানদিকে প্রসারিত এবং সঙ্কুচিত আইকনগুলিকে টগল করে৷।
- আইকন প্রসারিত করুন এবং আইকনটি ভেঙে দিন: দুটি ট্যাব, প্রতিটি আইকন পিকার। নীচে এই আরো।
- টগল স্পিড (এমএস): কত দ্রুত আইটেম খোলা এবং বন্ধ, ডিফল্টরূপে 300 মিলিসেকেন্ড। যে ডিফল্ট snappy মনে হয়; 600 পেরিয়ে অ্যাকর্ডিয়নটি স্থবির হয়ে পড়েছে বলে মনে হতে শুরু করে।
- শিরোনাম HTML ট্যাগ: প্রতিটি প্রশ্নের চারপাশে মার্কআপ, ডিফল্টরূপে ডিভ। H3 বাছাই করুন যদি প্রশ্নগুলি পৃষ্ঠার শিরোনাম কাঠামোকে ফিড করে।
একটি আইটেমের ভিতরে পাঠ্য বা একটি সম্পূর্ণ টেমপ্লেট রাখুন #
একটি একক আইটেম খুলুন এবং প্রতি-আইটেম নিয়ন্ত্রণগুলি উপস্থিত হবে: ডিফল্ট হিসাবে সক্রিয় যে আইটেম খোলা দিয়ে পৃষ্ঠা শুরু হয়, কাস্টম আইকন সক্ষম করুন এটিকে তার নিজস্ব টগল আইকন দেয় এবং পটভূমির রঙ সক্ষম করুন (প্রো) শুধু যে সারি tints।
মনে রাখার মতো একজন বিষয়বস্তুর প্রকার। একটি সাধারণ টাইপ করা উত্তরের জন্য এটি সামগ্রীতে রাখুন। মাস্টার অ্যাডঅন প্রো দিয়ে আপনি এটি সেট করতে পারেন সংরক্ষিত বিভাগ, সংরক্ষিত উইজেট বা সংরক্ষিত পৃষ্ঠা টেমপ্লেট এবং আপনার এলিমেন্টর লাইব্রেরি থেকে একটি টেমপ্লেট চয়ন করুন। ডেমো প্রথম অ্যাকর্ডিয়ন আইটেমের ভিতরে একটি পরিচিতি বিভাগ লোড করে, একটি কার্যকরী ফর্ম সহ সম্পূর্ণ:
প্রো-তে নেস্টেড অ্যাকর্ডিয়নগুলি কীভাবে কাজ করে: একটি অ্যাকর্ডিয়নকে একটি টেমপ্লেট হিসাবে সংরক্ষণ করুন, তারপরে এটি অন্য অ্যাকর্ডিয়নের একটি আইটেমের ভিতরে লোড করুন। উপ-প্রশ্ন সহ বিভাগ, পাঠ সহ কোর্স মডিউল, এই ধরনের কাঠামো। দুটি স্তর ব্যবহারিক সীমা; এর চেয়ে গভীর এবং দর্শকরা কোথায় আছে তার ট্র্যাক হারিয়ে ফেলে।
প্রসারিত এবং পতন আইকন সেট করুন #
দ্য আইকন প্রসারিত করুন এবং আইকন সঙ্কুচিত করুন ট্যাব প্রতিটি এলিমেন্টর আইকন লাইব্রেরি খোলে। প্রসারিত আইকনটি বন্ধ আইটেমগুলিতে দেখায়, খোলার উপর পতন আইকনটি দেখায়।
ম্যাচিং জোড়া সবচেয়ে ভালো পড়ে: ক্যারেট আপের সাথে ক্যারেট ডাউন, প্লাস মাইনাস সহ, শেভরনের সাথে শেভরন। ডেমো ক্যারেটগুলিতে স্থির হয়।
শিরোনাম শৈলী #
দ্য শৈলী ট্যাব ভেঙ্গে যায় আইটেম, শিরোনাম, বিষয়বস্তু, এবং আইকন টগল করুন. শিরোনাম বিভাগ বহন করে স্বাভাবিক, ঘোরাঘুরি করা, এবং সক্রিয় রাজ্য, তাই খোলা প্রশ্ন বাকি থেকে ভিন্ন দেখতে পারেন।
- পটভূমির ধরন এবং রঙ: রাজ্য প্রতি শিরোনাম বার পূরণ।
- পাঠ্যের রঙ এবং টাইপোগ্রাফি: প্রশ্ন টেক্সট।
- শিরোনাম সারিবদ্ধ: বাম, কেন্দ্র বা ডান।
- বর্ডার টাইপ, বর্ডার রেডিয়াস, বক্স শ্যাডো, প্যাডিং: ডেমোটি নরম, প্রশস্ত বারগুলির জন্য একটি 8 পিক্সেল ব্যাসার্ধ এবং 20 বাই 16 প্যাডিং ব্যবহার করে।
ডেমো শিরোনামগুলিকে একটি হালকা ধূসর পটভূমি এবং নীল পাঠ্য দেয় এবং রঙ বাছাইকারী খোলা থাকা অবস্থায় ক্যানভাস আপডেটগুলি লাইভ হয়:
বিষয়বস্তু এলাকা শৈলী #
দ্য বিষয়বস্তু বিভাগ উত্তর প্যানেল শৈলী: পটভূমির রঙ, টেক্সট কালার, টাইপোগ্রাফি, প্যাডিং, এবং টেক্সট শ্যাডো। উত্তরের পটভূমিকে শিরোনাম বারের চেয়ে হালকা রাখুন যাতে খোলা আইটেমগুলি সংযুক্ত কিন্তু স্বতন্ত্র হিসাবে পড়া হয়।
টগল আইকন স্টাইল #
দ্য আইকন টগল করুন বিভাগ সারি শেষ হয়।
- আইকন অবস্থান: শিরোনামের বাম, এটির ডান, বা কিছুই নয়।
- আইকনের আকার, ব্যবধান, প্যাডিং: ডেমোটি 18 পিক্সেল আইকন চালায়।
- আইকন রং: সাধারণ, হোভার এবং সক্রিয় অবস্থা, প্রতিটি ব্যাকগ্রাউন্ড এবং আইকন রঙ সহ।
পৃষ্ঠায় ফলাফল #
লাইভ পৃষ্ঠায় অ্যাকর্ডিয়ন ঠিক কনফিগার করা মতো আচরণ করে: একবারে একটি প্রশ্ন খোলা, আইটেম টগল করার সাথে সাথে কেয়ারটগুলি উল্টে যায় এবং স্টাইল করা শিরোনাম বারগুলি বিভাগটিকে স্ক্যানযোগ্য রাখে।
সাধারণ ব্যবহারের ক্ষেত্রে #
- FAQ বিভাগ ল্যান্ডিং পৃষ্ঠা, মূল্য পৃষ্ঠা এবং পণ্য পৃষ্ঠাগুলিতে।
- একটি উত্তরের ভিতরে যোগাযোগ বা উদ্ধৃতি ফর্ম, ডেমোর মতো প্রো সংরক্ষিত বিভাগের সামগ্রীর ধরন ব্যবহার করে।
- নেস্টেড অ্যাকর্ডিয়ন (প্রো) বিভাগ এবং উপ-শ্রেণীর প্রশ্ন সেটের জন্য।
- কোর্স বা ডকুমেন্টেশন রূপরেখা যেখানে প্রতিটি মডিউল তার পাঠে প্রসারিত হয়।
- কাজের তালিকা প্যানেলে শিরোনাম এবং বিবরণ হিসাবে ভূমিকা সহ।
একটি ভাল accordion জন্য টিপস #
- প্রায়শই জিজ্ঞাসিত প্রশ্নগুলির জন্য অ্যাকর্ডিয়ন প্রকার চয়ন করুন৷। একটি খোলা উত্তর দর্শকদের ফোকাস রাখে; স্যুট রেফারেন্স বিষয়বস্তু টগল করুন মানুষ পাশাপাশি তুলনা।
- ডিফল্টরূপে সর্বাধিক জিজ্ঞাসিত প্রশ্ন খুলুন। আপনার সেরা প্রশ্নে সক্রিয়কে ডিফল্ট হিসাবে সেট করুন যাতে বিভাগটি কখনই পুরোপুরি বন্ধ না হয়।
- FAQ পৃষ্ঠাগুলিতে শিরোনাম HTML ট্যাগ হিসাবে H3 ব্যবহার করুন। সার্চ ইঞ্জিন সঠিক শিরোনাম হিসাবে প্রশ্ন পড়ে।
- আইকন জোড়া সামঞ্জস্যপূর্ণ রাখুন। একটি ক্যারেট যা দিক উল্টে যায় তা অবিলম্বে রাষ্ট্রের সাথে যোগাযোগ করে; অমিল আইকন দর্শকদের চিন্তা করে।
- সংরক্ষিত বিভাগে মাইন্ড টেমপ্লেট ওজন। একটি আইটেম ভিতরে একটি ফর্ম বা টেবিল মহান; ভারী ছবি সহ একটি পূর্ণ-প্রস্থ বিভাগ ধসে পড়ার সময়ও লোড হবে।
ভিডিও টিউটোরিয়াল #
আপনি যদি অ্যাডভান্সড অ্যাকর্ডিয়নকে অ্যাকশনে দেখতে চান, তাহলে এই ভিডিওটি যে কেউ কত সহজে একটি তৈরি করতে পারে, শেষ করতে শুরু করুন:
এবং এটি দেখায় কিভাবে একটি নেস্টেড অ্যাকর্ডিয়ন যোগ করতে হয়, একটি অ্যাকর্ডিয়ন অন্যটির ভিতরে সংরক্ষিত বিভাগের বিষয়বস্তুর প্রকারের সাথে লোড করে:
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #
মাস্টার অ্যাডঅনগুলিতে অ্যাডভান্সড অ্যাকর্ডিয়ন উইজেট কী?
এটি সংকোচনযোগ্য বিষয়বস্তু বিভাগের জন্য একটি এলিমেন্টর উইজেট। আপনি শিরোনাম এবং উত্তর সহ আইটেম যোগ করুন, অ্যাকর্ডিয়ন বা টগল আচরণ চয়ন করুন, আইকনগুলি প্রসারিত এবং ভেঙে দিন এবং প্রতি রাজ্যে শিরোনাম, বিষয়বস্তু এবং আইকনগুলিকে স্টাইল করুন৷ আইটেম টেক্সট ধারণ করে, অথবা Master Addons Pro সহ একটি সম্পূর্ণ সংরক্ষিত টেমপ্লেট।
Accordion এবং Toggle টাইপের মধ্যে পার্থক্য কি?
অ্যাকর্ডিয়ন একবারে একটি আইটেম খোলা রাখে, একটি নতুন খোলা হলে আগের আইটেমটি বন্ধ করে দেয়। টগল দর্শকদের একসাথে বেশ কয়েকটি আইটেম খুলতে দেয় এবং প্রতিটি স্বাধীনভাবে বন্ধ করতে দেয়। উভয়ই বিষয়বস্তু ট্যাবে অ্যাকর্ডিয়ন টাইপ ড্রপডাউন থেকে সেট করা হয়েছে।
আমি কি অ্যাকর্ডিয়ন আইটেমের ভিতরে একটি ফর্ম বা টেমপ্লেট রাখতে পারি?
হ্যাঁ, মাস্টার অ্যাডনস প্রো সহ। সংরক্ষিত বিভাগে আইটেমের বিষয়বস্তুর ধরন সেট করুন এবং আপনার এলিমেন্টর লাইব্রেরি থেকে যেকোনো টেমপ্লেট বেছে নিন। ডেমো একটি অ্যাকর্ডিয়ন আইটেমের ভিতরে একটি কার্যকরী ফর্ম সহ একটি সম্পূর্ণ যোগাযোগ বিভাগ লোড করে এবং অন্য কোনো সংরক্ষিত টেমপ্লেট একইভাবে কাজ করে।
আমি কিভাবে এলিমেন্টরে একটি নেস্টেড অ্যাকর্ডিয়ন তৈরি করব?
এর জন্য মাস্টার অ্যাডনস প্রো প্রয়োজন। প্রথমে একটি এলিমেন্টর টেমপ্লেট হিসাবে একটি অ্যাকর্ডিয়ন সংরক্ষণ করুন। তারপর, প্যারেন্ট অ্যাকর্ডিয়নে, সংরক্ষিত বিভাগে একটি আইটেমের বিষয়বস্তুর ধরন সেট করুন এবং সেই টেমপ্লেটটি বেছে নিন। অভ্যন্তরীণ অ্যাকর্ডিয়নটি বাইরের আইটেমের ভিতরে লোড হয়, যা আপনাকে দুটি স্তরের সংকোচনযোগ্য সামগ্রী দেয়।
একটি আইটেম ডিফল্টরূপে খোলা থাকতে পারে?
হ্যাঁ। বিষয়বস্তু ট্যাবে আইটেমটি প্রসারিত করুন এবং ডিফল্ট হিসাবে সক্রিয় চালু করুন। পৃষ্ঠাটি লোড হলে সেই আইটেমটি খোলা শুরু হয়, যা দর্শকরা সবচেয়ে বেশি জিজ্ঞাসা করা প্রশ্নের জন্য ভাল কাজ করে।
মোড়ানো #
অ্যাডভান্সড অ্যাকর্ডিয়ন উইজেট স্ট্যান্ডার্ড FAQ প্যাটার্ন পরিচালনা করে এবং তারপরে আরও এগিয়ে যায়: প্রতি-আইটেম আইকন এবং ব্যাকগ্রাউন্ড, থ্রি-স্টেট স্টাইলিং, এবং প্রো সহ, একটি সংরক্ষিত বিভাগের বিষয়বস্তুর ধরন যা ফর্ম, টেবিল বা পুরো নেস্টেড অ্যাকর্ডিয়নগুলিকে যেকোনো আইটেমের ভিতরে রাখে। এর সম্পূর্ণ সেট ব্রাউজ করুন মাস্টার অ্যাডঅন উইজেট এবং এক্সটেনশন প্লাগইন দিয়ে আর কি জাহাজ দেখতে, এবং দেখুন উন্নত অ্যাকর্ডিয়ন উইজেট পৃষ্ঠা ডেমো এবং Elementor এর নিজস্ব Accordion এর সাথে তুলনার জন্য। মনে রাখবেন যে এই উইজেট FAQ স্কিমা আউটপুট করে না।
