10 বিষয়বস্তু টগল এলিমেন্টরের উদাহরণ (ডেমো সহ)

স্ট্যাক করা কার্ড হিসাবে দেখানো তিনটি বিষয়বস্তু টগল ডিজাইন

কী টেকঅ্যাওয়ে

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

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

সব দশটি দিয়ে নির্মিত হয়েছিল কন্টেন্ট টগল করুন, মাস্টার অ্যাডনস প্রোতে কন্টেন্ট টগল উইজেট। নিজে স্যুইচ করার চেষ্টা করতে যেকোনো ডেমো লিঙ্কে ক্লিক করুন।

কি একটি ভাল বিষয়বস্তু টগল করে তোলে

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

প্যাটার্নবাম বিকল্পসঠিক বিকল্পনিচের উদাহরণ
বিলিং সময়কালমাসিকবার্ষিক1, 2
ইউনিটমেট্রিকইম্পেরিয়াল4
ডেটা সুযোগনিজস্ব অপারেশনসাপ্লাই চেইন5
শ্রোতাদল হিসেবেআপনার নিজের উপর7
সময়কালQ3Q46
প্রক্রিয়াঅর্ডার করাস্টক8
শ্রেণীআবাসিকনাগরিক9
দিনের সময়মধ্যাহ্নভোজডিনার10
পরিকল্পনার সুযোগএককসীমাহীন3

মূল্য টগল উদাহরণ

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

1। বিলিং সুইচ প্রাইসিং কার্ড

বিলিং সুইচ প্রাইসিং কার্ডের বিষয়বস্তু তিনটি ডার্ক প্ল্যান কার্ডের উপরে একটি মাসিক এবং বার্ষিক সুইচ সহ উদাহরণ টগল করুন
তিনটি প্ল্যান কার্ডে মাসিক এবং বার্ষিক মূল্য।

একটি মাসিক এবং বার্ষিক সুইচ স্টার্টার, টিম এবং স্কেল কার্ডের উপরে বসে। বার্ষিক, প্রতিটি কার্ড কম মাসিক হার এবং বার্ষিক মোট এবং সঞ্চয় সহ একটি লাইন দেখায়। মধ্যম পরিকল্পনা উভয় দিকে একটি সর্বাধিক নির্বাচিত লেবেল বহন করে।

এর জন্য এটি ব্যবহার করুন: SaaS এবং সাবস্ক্রিপশন মূল্য। বিলিং সুইচ ডেমো খুলুন.

2। মূল্য সহ সামগ্রী টগল করুন৷

ব্যক্তিগত এবং স্টার্টআপ প্ল্যানের উপরে একটি বিল করা মাসিক এবং বিল করা বার্ষিক সুইচ সহ মূল্যের উদাহরণ সহ সামগ্রী টগল করুন
সংরক্ষিত টেমপ্লেট থেকে লোড করা মাসিক এবং বিল করা বার্ষিক পরিকল্পনা।

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

এর জন্য এটি ব্যবহার করুন: মূল্য পৃষ্ঠা থেকে নির্মিত মূল্য সারণী উইজেট. মূল্যের ডেমো খুলুন.

3। বৃত্তাকার বিষয়বস্তু টগল করুন

একটি একক পরিকল্পনা এবং একটি আনলিমিটেড প্ল্যানের মধ্যে একটি বৃত্তাকার সুইচ সহ সামগ্রী বৃত্তাকার উদাহরণ টগল করুন৷
একক এবং আনলিমিটেডের মধ্যে একটি বৃত্তাকার সুইচ।

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

এর জন্য এটি ব্যবহার করুন: একক এবং সীমাহীনের মতো সুযোগের ভিত্তিতে ভিন্ন পরিকল্পনা। রাউন্ডেড ডেমো খুলুন.

টেবিল এবং ডেটা টগল উদাহরণ

টেবিল দ্বিতীয় প্রাকৃতিক ফিট। সারি এবং কলাম রাখা থাকে এবং সংখ্যা পরিবর্তিত হয়, তাই দর্শকরা যখন সুইচটি ফ্লিপ করে তখন তাদের জায়গা রাখে।

4। ইউনিট সুইচ স্পেক টেবিল

ইউনিট সুইচ স্পেক টেবিল বিষয়বস্তু টগল উদাহরণ মেট্রিক এবং ইম্পেরিয়াল মধ্যে একটি বাইক জ্যামিতি টেবিল স্যুইচিং
মেট্রিক এবং ইম্পেরিয়াল ইউনিটে একটি বিশেষ টেবিল।

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

এর জন্য এটি ব্যবহার করুন: পণ্যের চশমা, আকারের চার্ট এবং রেসিপি। ইউনিট সুইচ ডেমো খুলুন.

5। ডেটা সুইচ বেঞ্চমার্ক টেবিল

ডেটা সুইচ বেঞ্চমার্ক টেবিলের উদাহরণ নিজস্ব ক্রিয়াকলাপ এবং সরবরাহ চেইনের মধ্যে একটি নির্গমন টেবিল পরিবর্তন করা
একই টেবিলে দুটি ডেটা সেট।

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

এর জন্য এটি ব্যবহার করুন: রিপোর্ট, বেঞ্চমার্ক এবং পরিসংখ্যানের আগে এবং পরে। ডেটা সুইচ ডেমো খুলুন। যদি একটি ক্লিকের মাধ্যমে ডেটা কখনই পরিবর্তিত না হয়, একটি প্লেইন৷ টেবিল উইজেট সহজ।

6। কোয়ার্টার সুইচ মেট্রিক্স বেন্টো

কোয়ার্টার সুইচ মেট্রিক্স বেন্টো উদাহরণ Q3 এবং Q4 এর মধ্যে ফলাফলের একটি গ্রিড স্যুইচ করা
ত্রৈমাসিক ফলাফল একটি বেন্টো গ্রিডে।

ফলাফলের একটি বেন্টো গ্রিড Q3 এবং Q4 এর মধ্যে স্যুইচ করে। রাজস্ব, বৃদ্ধি এবং প্রতিটি চিত্রের অধীনে নোট সব একসাথে পরিবর্তিত হয়। এটি একটি ড্যাশবোর্ডের মতো পড়ে এবং একটির স্থান নেয়।

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

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

শ্রোতা এবং বিভাগ টগল উদাহরণ

শেষ গ্রুপ বার্তা সুইচ। প্রতিটি দিক একটি ভিন্ন পাঠকের জন্য লেখা হয় বা একটি ভিন্ন বিভাগ কভার করে।

7। অডিয়েন্স সুইচ ফিচার প্যানেল

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

একটি কোর্স পৃষ্ঠা একটি দল হিসাবে এবং আপনার নিজের মধ্যে সুইচ। প্রতিটি পক্ষের নিজস্ব শিরোনাম, প্রমাণ পয়েন্ট এবং বৈশিষ্ট্য তালিকা আছে। দর্শকরা তাদের বর্ণনা করে এমন সংস্করণ বেছে নেয় এবং বাকিটা এড়িয়ে যায়।

এর জন্য এটি ব্যবহার করুন: কোম্পানি এবং ব্যক্তি উভয় বিক্রি পণ্য। অডিয়েন্স সুইচ ডেমো খুলুন.

8। রুট স্টেপ টাইমলাইন অর্ডার করুন

অর্ডার রুট স্টেপ টাইমলাইন উদাহরণ মেড টু অর্ডার এবং ইন স্টকের মধ্যে অর্ডার স্টেপ স্যুইচ করা
দুটি অর্ডার রুট, এক ধাপ তালিকা।

একটি সংখ্যাযুক্ত ধাপ তালিকা মেড টু অর্ডার এবং ইন স্টকের মধ্যে স্যুইচ করে। প্রতিটি রুটে ধাপ এবং অপেক্ষা আলাদা, এবং লেআউট একই থাকে। এটি উত্তর দেয় "আমি অর্ডার করার পরে কি হবে?" উভয় ধরণের ক্রেতার জন্য।

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

9। প্রজেক্ট সুইচ ওভারলে কার্ড

প্রজেক্ট সুইচ ওভারলে কার্ডের উদাহরণ আবাসিক এবং নাগরিক প্রকল্পগুলির মধ্যে একটি পোর্টফোলিও কার্ড পরিবর্তন করা
এক সুইচের পিছনে আবাসিক এবং নাগরিক প্রকল্প।

একটি আর্কিটেকচার স্টুডিও আবাসিক এবং সিভিকের মধ্যে একটি বড় প্রকল্প কার্ড পরিবর্তন করে। প্রতিটি পাশের নিজস্ব ছবি, অবস্থান, বছর এবং সংক্ষিপ্ত বিবরণ রয়েছে। দুটি কেস স্টাডি ফিট যেখানে একজন সাধারণত যেতে পারে।

এর জন্য এটি ব্যবহার করুন: কাজের দুই লাইন সহ পোর্টফোলিও। প্রজেক্ট সুইচ ডেমো খুলুন.

10। পরিষেবা সুইচ মেনু তালিকা

পরিষেবা স্যুইচ মেনু তালিকার উদাহরণ লাঞ্চ এবং ডিনারের মধ্যে একটি রেস্তোরাঁর মেনু পরিবর্তন করা
লাঞ্চ এবং ডিনার মেনু।

একটি রেস্তোরাঁর মেনু লাঞ্চ এবং ডিনারের মধ্যে পরিবর্তন করে। পরিবেশন করার সময় সুইচের নীচে বসে, এবং এর সাথে খাবার এবং দাম পরিবর্তিত হয়। অতিথিরা তাদের পরিকল্পনা করা খাবারের মেনু দেখতে পান।

এর জন্য এটি ব্যবহার করুন: রেস্তোরাঁ, সেলুন এবং দুটি পরিষেবা তালিকা সহ যেকোনো ব্যবসা। সার্ভিস সুইচ ডেমো খুলুন.

কিভাবে এই উদাহরণগুলির একটি তৈরি করবেন

প্রতিটি উদাহরণ হল দুটি আইটেম সহ একটি টগল কন্টেন্ট উইজেট। আপনার বিভাগের প্রথম সংস্করণ তৈরি করুন, এটি অনুলিপি করুন, বিশদ পরিবর্তন করুন এবং প্রতিটি আইটেমে একটি সংস্করণ রাখুন।

  1. টেনে আনুন কন্টেন্ট টগল করুন পৃষ্ঠায় এবং দুটি আইটেমের নাম দিন উপাদান তালিকা।
  2. সংক্ষিপ্ত বিষয়বস্তুর জন্য, ছেড়ে দিন টাইপ করা বিষয়বস্তুর উপর এবং সম্পাদকে লিখুন।
  3. একটি সম্পূর্ণ বিন্যাস জন্য, সেট টাইপ করা টেমপ্লেট এবং প্রতিটি আইটেমের জন্য একটি সংরক্ষিত টেমপ্লেট চয়ন করুন।
  4. সেট সক্রিয় সূচক টগল সেটিংসে প্রথমে দেখানো বিকল্পটি বেছে নিতে।
  5. স্টাইল ট্যাবের টগলার, ইন্ডিকেটর এবং লেবেল বিভাগে সুইচটি স্টাইল করুন।

মূল্য সংস্করণে কয়েকটি অতিরিক্ত পদক্ষেপ রয়েছে, যা আমরা কভার করি কিভাবে Elementor এ একটি মাসিক এবং বার্ষিক মূল্য টগল যোগ করবেন। সেটিংসের সম্পূর্ণ তালিকা রয়েছে বিষয়বস্তু ডকুমেন্টেশন টগল করুন.

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

Elementor এ একটি বিষয়বস্তু টগল কি?

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

আমি একটি বিষয়বস্তু টগল ভিতরে কি রাখতে পারি?

টগল কন্টেন্টে, প্রতিটি বিকল্প বিল্ট-ইন এডিটর বা একটি সংরক্ষিত এলিমেন্টর টেমপ্লেট থেকে পাঠ্য ধারণ করে। যেহেতু একটি টেমপ্লেটে যেকোনো উইজেট থাকতে পারে, বিকল্পটি একটি মূল্য সারণী, একটি ডেটা টেবিল, একটি ফর্ম, একটি চিত্র গ্যালারি বা একটি সম্পূর্ণ বিভাগ হতে পারে।

একটি বিষয়বস্তু টগল তিনটি বিকল্প থাকতে পারে?

হ্যাঁ। তৃতীয় বা চতুর্থ বিকল্প যোগ করতে উপাদান তালিকায় আইটেম যোগ করুন ক্লিক করুন। একটি সুইচ দুই বা তিনটি লেবেল সহ সবচেয়ে ভাল পড়ে। এর চেয়ে বেশি, ট্যাবগুলি সাধারণত দর্শকদের স্ক্যান করা সহজ।

এই বিষয়বস্তু টগল ডেমো টেমপ্লেট হিসাবে উপলব্ধ?

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

চূড়ান্ত চিন্তা

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

তাদের উপর চেষ্টা করুন কন্টেন্ট উইজেট পৃষ্ঠা টগল করুন, তারপর আপনার ইতিমধ্যে থাকা একটি বিভাগের দুটি সংস্করণ দিয়ে আপনার নিজের তৈরি করুন।

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

একটি উত্তর দিন

আপনার ইমেল ঠিকানা প্রকাশ করা হবে না। প্রয়োজনীয় ক্ষেত্র চিহ্নিত করা হয় *