ট্যাব

ট্যাব ফিল্ড গ্রুপগুলি এলিমেন্টর প্যানেলে একটি ট্যাব স্ট্রিপে নিয়ন্ত্রণ করে, যেমন এলিমেন্টরের নিজস্ব বোতাম শৈলীতে সাধারণ এবং হোভার ট্যাব। আপনি এটি মাস্টার অ্যাডঅনগুলিতে তৈরি করুন উইজেট নির্মাতা: ট্যাব যোগ করুন, প্রতিটির ভিতরে ক্ষেত্র রাখুন এবং আপনার HTML বা CSS-এর প্রতিটি মান পড়ুন যেমন একটি তিন-অংশের টোকেন সহ {{ button_states.hover.bg }}.

ট্যাব একটি প্রো ক্ষেত্র। বিনামূল্যের প্লাগইনটিতে একটি সীমিত উইজেট বিল্ডার রয়েছে এবং ক্ষেত্রগুলির সম্পূর্ণ সেট সহ আসে৷ মাস্টার অ্যাডনস প্রো.

ট্যাব ক্ষেত্র কি করে #

• এটি আপনার উইজেটের প্যানেলের একটি বিভাগে ক্লিকযোগ্য ট্যাবের একটি সারি যোগ করে। একটি ট্যাবে ক্লিক করলে এর ভিতরের ক্ষেত্রগুলি দেখায়৷।
• প্রতিটি ট্যাবের একটি নাম, একটি লেবেল এবং ক্ষেত্রগুলির নিজস্ব তালিকা রয়েছে৷।
• ট্যাব ক্ষেত্র নিজেই কোন মূল্য সঞ্চয় করে না। মানগুলি ট্যাবের ভিতরের ক্ষেত্রগুলির অন্তর্গত৷।
• টেমপ্লেটগুলি সেই মানগুলি পড়ে {{ tabs_name.tab_name.field_name }}। দুটি ট্যাব একই ক্ষেত্রের নাম ব্যবহার করতে পারে, যা সাধারণ এবং হোভার নিয়মগুলিকে তুলনা করা সহজ রাখে।

আপনি যদি এখনও একটি উইজেট তৈরি না করে থাকেন তবে পড়ুন উইজেট নির্মাতা ওভারভিউ প্রথম।

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

• এলিমেন্টর ইনস্টল এবং সক্রিয় সহ ওয়ার্ডপ্রেস।
• Elementor এবং Master Addons Pro এর জন্য মাস্টার অ্যাডঅন, উভয়ই সক্রিয়। দ্য ইনস্টলেশন গাইড সেটআপ কভার করে।
• উইজেট বিল্ডারে একটি উইজেট খোলা। এই গাইডের উদাহরণ হল একটি “Hover Button” উইজেট: বোতাম লেবেলের জন্য একটি টেক্সট ক্ষেত্র, এছাড়াও একটি ট্যাব ক্ষেত্র নামে button_states একটি সাধারণ এবং একটি হোভার ট্যাব সহ। প্রতিটি ট্যাবে দুটি রঙের ক্ষেত্র রয়েছে, bg এবং text.

কিভাবে একটি ট্যাব ক্ষেত্র যোগ করতে হয় #

1. যাও মাস্টার অ্যাডঅন > উইজেট নির্মাতা এবং আপনার উইজেট খুলুন।
2. ক্লিক করুন শৈলী ট্যাব করুন এবং একটি বিভাগ যোগ করুন, উদাহরণস্বরূপ “Button Style”।
3. টাইপ করা tabs বাম দিকে ফিল্ড সার্চ বক্সে।
4. টেনে আনুন ট্যাব বিভাগে। এর সেটিংস বাম সাইডবারে খোলে এবং বিভাগের পূর্বরূপ ট্যাব স্ট্রিপ দেখায়।

একটি নতুন ট্যাব ক্ষেত্রের নামকরণ করা হয়েছে tabs এবং দুটি খালি ট্যাব নিয়ে আসে, tab_1 এবং tab_2। আপনি কোনো টোকেন লেখার আগে তাদের নাম পরিবর্তন করুন, কারণ নামগুলি প্রতিটি পথের অংশ হয়ে যায়।

ট্যাব ক্ষেত্রের বিকল্প ব্যাখ্যা করা হয়েছে #

• লেবেল নির্মাতার ভিতরে ক্ষেত্রটির নাম দিন। এলিমেন্টরে, সম্পাদকরা বিভাগের শিরোনাম এবং ট্যাব লেবেলগুলি দেখেন, এই লেবেলটি নয়।
• নাম প্রতিটি টোকেনের প্রথম অংশ, তাই button_states দেয় {{ button_states.normal.bg }}. অক্ষর, সংখ্যা এবং আন্ডারস্কোর শুধুমাত্র।
• বর্ণনা নির্মাতার ভিতরে আপনার জন্য একটি নোট।
• ট্যাব ট্যাবের তালিকা। প্রতিটি সারি একটি আছে নাম (টোকেনে ব্যবহৃত, যেমন hover) এবং ক লেবেল (ট্যাবে দেখানো হয়েছে, যেমন হোভার)। ক্লিক করুন ট্যাব যোগ করুন অন্য সারির জন্য, অথবা একটি সরানোর জন্য লাল ক্রস।

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

• নাম টোকেনের শেষ অংশ। আপনি প্রতিটি ট্যাবে একই নাম পুনরায় ব্যবহার করতে পারেন, যেমন bg এবং text এখানে।
• লেবেল এলিমেন্টরে কন্ট্রোলের পাশের টেক্সট।
• টাইপ করা নিয়ন্ত্রণ সেট করে: পাঠ্য, সংখ্যা, পাঠ্যেরিয়া, WYSIWYG, কোড, লুকানো, সুইচার, চয়ন, রঙ, ফন্ট, টাইপোগ্রাফি, তারিখ সময়, URL, মিডিয়া, গ্যালারি, আইকন, স্লাইডার, মাত্রা বা পটভূমি।
• ক্লিক করুন ক্ষেত্র যোগ করুন সেই ট্যাবে একটি সারি যোগ করতে।

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

আপনার টেমপ্লেটে ট্যাব মান পড়ুন #

একটি ট্যাবের ভিতরের প্রতিটি মান বিন্দু দ্বারা যুক্ত তিনটি নাম দিয়ে পড়া হয়: ট্যাব ক্ষেত্র, ট্যাব, তারপর ক্ষেত্র।

{{ tabs_name.tab_name.field_name }}

আপনাকে এগুলো টাইপ করতে হবে না। আপনি সংরক্ষণ করার পরে, HTML সম্পাদকের পাশে ডকুমেন্টেশন প্যানেল ট্যাব ক্ষেত্রের লেবেলের অধীনে প্রতিটি পথ তালিকাভুক্ত করে এবং কপি আইকন একটি কপি করে।

টোকেনগুলি CSS ট্যাবের পাশাপাশি HTML ট্যাবে কাজ করে। উদাহরণ বোতামটি একটি নিয়মে তার বেস লুক রাখে এবং পরবর্তী দুটিতে ট্যাবের রঙগুলি পড়ে:

.ma-btn {
  background: #652dd9;
  color: #ffffff;
}

.ma-btn {
  background: {{ button_states.normal.bg }};
  color: {{ button_states.normal.text }};
}

.ma-btn:hover {
  background: {{ button_states.hover.bg }};
  color: {{ button_states.hover.text }};
}

প্রথম নিয়ম একটি ফলব্যাক। যতক্ষণ না একজন সম্পাদক একটি রঙ বাছাই করেন, একটি টোকেন কিছুই প্রিন্ট করে না এবং লাইনটি হয়ে যায় background: ;। ব্রাউজারগুলি সেই অবৈধ লাইনটি এড়িয়ে যায়, তাই প্রথম নিয়মের রঙগুলি যথাস্থানে থাকে৷।

শুধুমাত্র সম্পূর্ণ পথ কাজ করে। পরীক্ষায়, {{ bg }}, {{ hover.bg }} এবং {{ button_states.hover }} সব কিছুই মুদ্রিত, যখন {{ button_states.hover.bg }} রঙ মুদ্রিত। যদি একটি মান খালি আসে, প্রথমে তিনটি অংশ এবং সঠিক বানান পরীক্ষা করুন।

ক্লিক করুন সেটিংস সংরক্ষণ করুন আপনার কাজ শেষ হলে।

এলিমেন্টরে ট্যাব নিয়ন্ত্রণ ব্যবহার করুন #

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

সাধারণ ট্যাবে রং সেট করুন, তারপর ক্লিক করুন ঘোরাঘুরি করা এবং দ্বিতীয় জোড়া সেট করুন। হোভার রং চেক করতে প্রিভিউতে বোতামের উপর মাউস সরান।

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

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

ট্যাব ক্ষেত্রের সাথে কাজ করার জন্য টিপস #

• প্রথমে ট্যাব ক্ষেত্রের নাম এবং ট্যাবের নাম বেছে নিন। পরে নাম পরিবর্তন করার অর্থ হল প্রতিটি টোকেন আপডেট করা যা তাদের ব্যবহার করে।
• ট্যাব জুড়ে ক্ষেত্রের নাম পুনরায় ব্যবহার করুন। normal.bg এবং hover.bg দুটি সম্পর্কহীন নামের চেয়ে পড়া সহজ।
• উইজেট লাইভ পৃষ্ঠাগুলিতে একবার একটি ক্ষেত্রের লেবেল পরিবর্তন করা এড়িয়ে চলুন৷ এলিমেন্টর সংরক্ষিত মানগুলিকে লেবেল থেকে তৈরি একটি কী-এর অধীনে সংরক্ষণ করে, যাতে একটি নতুন লেবেল সেই পৃষ্ঠাগুলি থেকে বিদ্যমান মানগুলিকে অদৃশ্য করে দিতে পারে৷।
• টোকেন নিয়মের আগে একটি নিয়মে ডিফল্ট শৈলী রাখুন, তাই একটি খালি মান কখনই নকশাটি ভেঙে দেয় না।
• আপনার ক্লাস একটি উপসর্গ দিন (যেমন ma-btn)। উইজেটের CSS ট্যাব থেকে CSS পুরো পৃষ্ঠায় প্রযোজ্য, তাই জেনেরিক নাম পছন্দ করে .button অন্যান্য শৈলী সঙ্গে সংঘর্ষ করতে পারেন।
• ট্যাবের পরিবর্তে সেটিংসের একটি একক চালু/বন্ধ গ্রুপের জন্য, দেখুন পপওভার টগল ফিল্ড। একটি তালিকার জন্য সম্পাদক সারি যোগ করতে পারেন, ব্যবহার করুন রিপিটার ক্ষেত্র.

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

মোড়ানো #

ট্যাব ক্ষেত্র এবং এর ট্যাবগুলির নাম দিন, প্রতিটি ট্যাবে ক্ষেত্র যোগ করুন এবং সেগুলি পড়ুন {{ tabs_name.tab_name.field_name }} আপনার HTML বা CSS-এ। খালি মানগুলির জন্য একটি ফলব্যাক নিয়ম রাখুন এবং উইজেট লাইভ হওয়ার আগে নামগুলিতে স্থির করুন৷ দ্য রঙের ক্ষেত্র ডক এই উদাহরণে ব্যবহৃত রঙ নিয়ন্ত্রণ কভার করে, এবং মূল্য প্রতিটি পরিকল্পনা কি অন্তর্ভুক্ত করে তা দেখায়।