দ্য ক্ষেত্র নির্বাচন করুন আপনার উইজেটের বিকল্প প্যানেলে একটি নেটিভ ড্রপডাউন রাখে। আপনি পছন্দের একটি নির্দিষ্ট সেট সংজ্ঞায়িত করেন, ব্যবহারকারী একটি বাছাই করে এবং আপনার টেমপ্লেট বাছাইয়ে প্রতিক্রিয়া জানায়: একটি ভিন্ন লেআউট ক্লাস, মার্কআপের একটি ভিন্ন ব্লক, একটি ভিন্ন CSS মান। মাস্টার অ্যাডঅনগুলির ভিতরে উইজেট নির্মাতা, সিলেক্ট হল মুষ্টিমেয় নামযুক্ত বৈকল্পিক সহ যেকোনো কিছুর জন্য ওয়ার্কহরস। লেআউট শৈলী, হোভার প্রভাব, সাজানোর আদেশ, এই ধরনের সিদ্ধান্ত।
বিকল্প মান নির্বাচন করুন জন্য প্রাকৃতিক জ্বালানী হয় শর্তাবলী: অন্যান্য নিয়ন্ত্রণ শুধুমাত্র তখনই প্রদর্শিত হতে পারে যখন একটি নির্দিষ্ট বিকল্প বাছাই করা হয়। একই মান কাজ করে টুইগ-সিনট্যাক্স টেমপ্লেট ইঞ্জিন মত চেক সঙ্গে {% if layout == "card" %}, তাই একটি ড্রপডাউন প্যানেল এবং মার্কআপ উভয়ই স্যুইচ করতে পারে।
একটি বিশদ এই ডক প্রতিটি প্যাটার্ন আকার। আপনার টেমপ্লেট যে মানটি পায় তা হল বিকল্পের কী, একটি ছোট স্লাগ যা আপনি বেছে নেন, ব্যবহারকারী যে মানব-পাঠযোগ্য লেবেলটি দেখেন তা নয়। কী ক্লাসের নাম এবং তুলনাতে যায়; লেবেল প্যানেলে থাকে।
সিলেক্ট ফিল্ড কি করে #
- একটি আদর্শ ড্রপডাউন রেন্ডার করে এলিমেন্টর প্যানেলে, একই নেটিভ সিলেক্ট কন্ট্রোল কোর উইজেট ব্যবহার করে।
- একটি নির্দিষ্ট সেট থেকে একটি মান ধরে রাখে আপনি কী এবং লেবেল জোড়া হিসাবে সংজ্ঞায়িত করুন।
- আপনার টেমপ্লেটকে নির্বাচিত কী ফিড করে, সংশোধক ক্লাসের জন্য প্রস্তুত বা
{% if %}ব্লক। - অন্যান্য নিয়ন্ত্রণে ড্রাইভের শর্ত, তাই "বক্সড" বাছাই করা একটি সীমানা-রঙের ক্ষেত্র প্রকাশ করতে পারে যা "মিনিমাল" লুকিয়ে রাখে।
- একটি প্রতিক্রিয়াশীল পতাকা সমর্থন করে, ব্যবহারকারীকে ডিভাইস প্রতি একটি ভিন্ন বিকল্প বাছাই করতে দেওয়া।
আপনি যদি উইজেট তৈরিতে নতুন হন তবে শুরু করুন উইজেট নির্মাতা ওভারভিউ প্রথম।
আপনি শুরু করার আগে #
- ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
- এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। প্লাগইনে নতুন? দেখা ইনস্টলেশন গাইড.
- উইজেট বিল্ডার এডিটরে একটি কাস্টম উইজেট খোলা। আমাদের উদাহরণ হল একটি মূল্য নির্ধারণের টেবিল উইজেট যার একটি "লেআউট স্টাইল" ড্রপডাউন অফার করে বক্সড, মিনিমাল এবং আউটলাইন ভেরিয়েন্ট।
কিভাবে একটি নির্বাচন ক্ষেত্র যোগ করতে হয় #
উইজেট বিল্ডার এডিটরে আপনার উইজেট খুলুন এবং বাম দিকের ফিল্ড প্যানেলটি দেখুন। নির্বাচন করুন অন্য পছন্দের ক্ষেত্রগুলির সাথে বসে।
এর অধীনে একটি বিভাগে এটি টেনে আনুন বিষয়বস্তু বা শৈলী ট্যাব। আমাদের মত একটি লেআউট সুইচার স্টাইলের অন্তর্গত; একটি বিষয়বস্তু-সম্পর্কিত পছন্দ, যেমন একটি সাজানোর অর্ডার, বিষয়বস্তুর সাথে মানানসই। একবার এটি অবতরণ করলে, ক্ষেত্রের বিকল্পগুলি বাম দিকে খোলে।
ব্যাখ্যা করা ক্ষেত্রের বিকল্পগুলি নির্বাচন করুন #
- লেবেল: এলিমেন্টরে ড্রপডাউনের পাশে দেখানো পাঠ্য, উদাহরণস্বরূপ “Layout Style”।
- নাম: শুধুমাত্র ক্ষেত্র, অক্ষর, সংখ্যা এবং আন্ডারস্কোরগুলির জন্য অনন্য শনাক্তকারী৷ আপনার টেমপ্লেট এই নাম উল্লেখ করে, উদাহরণস্বরূপ
layout_style. - বিকল্প: পছন্দ নিজেদের, প্রতিটি একটি কী এবং একটি লেবেল। কী আপনার টেমপ্লেট গ্রহণ করে; লেবেল ব্যবহারকারী যা পড়ে। কী ছোট রাখুন এবং CSS-নিরাপদ:
boxed,minimal,outlined. - ডিফল্ট: উইজেটটি প্রথম পৃষ্ঠায় ড্রপ করার সময় নির্বাচিত কী। এটিকে আপনার সেরা চেহারার ভেরিয়েন্টে সেট করুন।
- প্রতিক্রিয়াশীল: ডিভাইস আইকন যোগ করে যাতে পিক প্রতি ব্রেকপয়েন্টে ভিন্ন হতে পারে।
- বর্ণনা, লেবেল দেখান, বিভাজক: স্ট্যান্ডার্ড ডিসপ্লে সেটিংস, এবং ফিল্ড দেখানোর জন্য শর্তগুলি আরও নিচে শুধুমাত্র যখন অন্য নিয়ন্ত্রণের একটি নির্দিষ্ট মান থাকে।
আপনার টেমপ্লেটে নির্বাচন সংযোগ করুন #
সিলেক্ট একটি প্লেইন টোকেন দিয়ে তার মান প্রিন্ট করে। যে মান সবসময় হয় চাবি, লেবেল কখনই নয়। দুটি নিদর্শন প্রায় প্রতিটি ব্যবহার কভার।
মডিফায়ার ক্লাস। কীটিকে সরাসরি একটি ক্লাস অ্যাট্রিবিউটে প্রিন্ট করুন এবং আপনার CSS ট্যাবকে বাকিটা করতে দিন:
<div class="pricing layout--{{ layout_style }}">
...
</div>"বক্সড" রেন্ডার করা হচ্ছে layout--boxed, এবং একটি নিয়ম মত .layout--boxed { border: 1px solid #e2e2e2; } দায়িত্ব নেয়। তিনটি রূপ তিনটি ছোট CSS ব্লকে পরিণত হয়। এইচটিএমএল কখনই শাখা হয় না।
শর্তাধীন মার্কআপ। যখন ভেরিয়েন্টের বিভিন্ন HTML প্রয়োজন, শুধুমাত্র বিভিন্ন শৈলী নয়, কী এর সাথে তুলনা করুন:
{% if layout_style == 'boxed' %}
<div class="pricing-frame"> ... </div>
{% elseif layout_style == 'outlined' %}
<div class="pricing-outline"> ... </div>
{% else %}
<div class="pricing-plain"> ... </div>
{% endif %}এখানে একটি জিনিসের জন্য সতর্ক থাকুন: তুলনাটি অবশ্যই কী ব্যবহার করবে। {% if layout_style == 'boxed' %} কাজ, যখন {% if layout_style == 'Boxed Layout' %} নীরবে কখনই মেলে না এবং আপনি এটি সম্পর্কে কোনও সতর্কতা পাবেন না। যদি একটি শর্তসাপেক্ষে ফায়ার করতে অস্বীকার করে, অন্য কিছু সন্দেহ করার আগে মূল বানানটি পরীক্ষা করুন।
Elementor এ সিলেক্ট কন্ট্রোল ব্যবহার করুন #
এলিমেন্টরের একটি পৃষ্ঠায় আপনার কাস্টম উইজেটটি ফেলে দিন। আপনি উইজেট সংরক্ষণ করার আগে পৃষ্ঠাটি ইতিমধ্যেই খোলা থাকলে, প্রথমে সম্পাদকটি পুনরায় লোড করুন, যেহেতু এলিমেন্টর আপনি না করা পর্যন্ত পুরানো নিয়ন্ত্রণ কনফিগারেশন ধরে রাখে। উইজেটটি নির্বাচন করুন এবং ডিফল্ট বিকল্পটি পূর্বনির্বাচিত সহ আপনার সেট করা লেবেলের অধীনে ড্রপডাউনটি তার প্যানেলে প্রদর্শিত হবে।
অবিলম্বে একটি ভিন্ন বিকল্প এবং পূর্বরূপ আপডেট চয়ন করুন। মডিফায়ার ক্লাস পরিবর্তিত হয়, আপনার CSS ভেরিয়েন্ট কিক ইন হয় এবং এই ক্ষেত্রে শর্তযুক্ত যেকোন নিয়ন্ত্রণ দেখা যায় বা মেলে অদৃশ্য হয়ে যায়।
সাধারণ ব্যবহারের ক্ষেত্রে #
- লেআউট বৈকল্পিক যেমন একটি উইজেট থেকে বক্সযুক্ত, ন্যূনতম এবং রূপরেখাযুক্ত কার্ড শৈলী।
- হোভার এবং অ্যানিমেশন প্রিসেট যেখানে প্রতিটি কী তার নিজস্ব রূপান্তর সহ একটি CSS ক্লাসে মানচিত্র করে।
- বাছাই এবং অর্ডার পছন্দ তালিকা-শৈলী উইজেটগুলির জন্য, নতুন প্রথম বা বর্ণানুক্রমিক।
- শিরোনাম ট্যাগ পিকার এটি একটি শর্তসাপেক্ষ ব্লকের মাধ্যমে একটি h3 এর জন্য একটি h2 অদলবদল করে।
- কন্ডিশন ড্রাইভার এটি নির্বাচিত কী-এর উপর ভিত্তি করে অন্যান্য ক্ষেত্রের সম্পূর্ণ গ্রুপ দেখায় বা লুকিয়ে রাখে।
সিলেক্ট ফিল্ডের সাথে কাজ করার জন্য টিপস #
- কীগুলি কোডের জন্য, লেবেলগুলি মানুষের জন্য৷। মত স্লাগ ব্যবহার করুন
boxedকী হিসাবে এবং লেবেলের জন্য বন্ধুত্বপূর্ণ শব্দ সংরক্ষণ করুন। - কী CSS-নিরাপদ রাখুন। ছোট হাতের অক্ষর, অঙ্ক এবং হাইফেন বা আন্ডারস্কোরগুলি ক্লাসের নামগুলিতে পরিষ্কারভাবে মুদ্রণ করে।
- কী এর সাথে তুলনা করুন, লেবেল কখনই নয়। এটি সবচেয়ে সাধারণ কারণ একটি নির্বাচন শর্তসাপেক্ষ কখনই মেলে না।
- শর্তাবলীর চেয়ে সংশোধক ক্লাস পছন্দ করুন যখন শুধুমাত্র স্টাইলিং পরিবর্তন হয়। টেমপ্লেটটি একটি ব্লকে থাকে এবং ভেরিয়েন্টগুলি CSS-এ থাকে।
- ড্রাইভ করার জন্য নির্বাচন করুন শর্তাবলী ব্যবহার করুন। সুইচারের সাথে, এটি অন্যান্য ক্ষেত্রগুলি প্রকাশ বা লুকানোর জন্য স্বাভাবিক নিয়ন্ত্রণ।
- একটি সংবেদনশীল ডিফল্ট সেট করুন তাই উইজেটটি বাদ দেওয়ার মুহুর্তে ইচ্ছাকৃত দেখায়।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #
মাস্টার অ্যাডনস উইজেট বিল্ডারে সিলেক্ট ফিল্ড কী?
নির্বাচন ক্ষেত্রটি একটি কাস্টম এলিমেন্টর উইজেটে একটি নেটিভ ড্রপডাউন যোগ করে। আপনি পছন্দগুলিকে কী এবং লেবেল জোড়া হিসাবে সংজ্ঞায়িত করেন, ব্যবহারকারী প্যানেলে একটি বেছে নেয় এবং আপনার টেমপ্লেট এর মাধ্যমে নির্বাচিত কীটি গ্রহণ করে {{ field_name }} ক্লাসের নাম, শর্তাবলী বা CSS মানগুলিতে ব্যবহারের জন্য।
টেমপ্লেট কি লেবেল বা কী পায়?
চাবি। যদি আপনার বিকল্প হয় boxed তারপর "বক্সড লেআউট" লেবেল দিয়ে {{ layout_style }} প্রিন্ট boxed, এবং তুলনা মত {% if layout_style == 'boxed' %} সেই কী ব্যবহার করতে হবে। লেবেলটি শুধুমাত্র এলিমেন্টর প্যানেলে প্রদর্শিত হয়।
নির্বাচনের উপর ভিত্তি করে আমি কীভাবে উইজেটের চেহারা পরিবর্তন করব?
একটি সংশোধক শ্রেণীতে কী প্রিন্ট করুন, উদাহরণস্বরূপ class="layout--{{ layout_style }}", এবং CSS ট্যাবে প্রতি ভেরিয়েন্টে একটি CSS নিয়ম লিখুন। কাঠামোগত পার্থক্যের জন্য, HTML এর সাথে শাখা করুন {% if %}, {% elseif %}, এবং {% else %} পরিবর্তে ব্লক।
একটি নির্বাচন প্রদর্শন বা অন্যান্য ক্ষেত্র লুকাতে পারেন?
হ্যাঁ। প্রতিটি উইজেট বিল্ডার ক্ষেত্র শর্ত সমর্থন করে, এবং নির্বাচন হল সাধারণ ড্রাইভারগুলির মধ্যে একটি। একটি বর্ডার-কালার ফিল্ড চালু করুন layout_style সমান করা boxed এবং এটি শুধুমাত্র তখনই প্রদর্শিত হয় যখন সেই লেআউটটি সক্রিয় থাকে।
ডিভাইস প্রতি নির্বাচন পরিবর্তন করতে পারেন?
হ্যাঁ। প্রতিক্রিয়াশীল বিকল্পটি সক্ষম করুন এবং নিয়ন্ত্রণ এলিমেন্টরে ডিভাইস আইকন লাভ করে, যাতে মোবাইল ন্যূনতম অবস্থায় ফিরে আসার সময় ডেস্কটপ বক্সযুক্ত লেআউট চালাতে পারে।
সিলেক্ট এবং সিলেক্ট 2 এর মধ্যে পার্থক্য কি?
নির্বাচন হল প্লেইন নেটিভ ড্রপডাউন: একটি সংক্ষিপ্ত তালিকা থেকে একটি বাছাই। নির্বাচন 2 ড্রপডাউনের ভিতরে অনুসন্ধান যোগ করে এবং একটি ঐচ্ছিক একাধিক মোড যা কীগুলির একটি অ্যারে প্রদান করে। দীর্ঘ তালিকা বা মাল্টি-পিকের জন্য, Select2-এ পৌঁছান; তিন থেকে ছয়টি ভেরিয়েন্টের জন্য, প্লেইন সিলেক্ট হালকা।
মোড়ানো #
উইজেট বিল্ডার সিলেক্ট ফিল্ড নামযুক্ত ভেরিয়েন্টগুলিকে এক-ক্লিক পছন্দে পরিণত করে। কী এবং লেবেল সংজ্ঞায়িত করুন, কীটিকে একটি সংশোধক শ্রেণীতে বা একটিতে মুদ্রণ করুন {% if %} ব্লক, এবং প্রতিটি লেআউট সিদ্ধান্ত এলিমেন্টর প্যানেলে চলে যায়। যখন তালিকাটি দীর্ঘ হয় বা একটি বাছাই যথেষ্ট না হয়, তখন ধাপে ধাপে যান Select2 ক্ষেত্র. বাকি অন্বেষণ মাস্টার অ্যাডঅন উইজেট এবং এক্সটেনশন, এবং দেখুন মূল্য পৃষ্ঠা প্রতিটি পরিকল্পনা অন্তর্ভুক্ত কি জন্য।
