বেছে নিন

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

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

Choose ক্ষেত্র কি করে #

• এলিমেন্টরে আপনার উইজেটের প্যানেলে আইকন বোতামের একটি সারি যোগ করে, প্রতি বিকল্পে একটি বোতাম।
• প্রতিটি বিকল্পের শিরোনাম একটি টুলটিপ হিসাবে দেখায় যখন একজন সম্পাদক একটি বোতাম ঘোরান।
• সংরক্ষণ করে চাবি বাছাই করা বিকল্পের মধ্যে, যেমন center, এর শিরোনাম নয়।
• আপনি যেখানেই এর টোকেন রাখবেন সেই কীটি প্রিন্ট করে, যেমন {{ align }}। স্বাভাবিক পদ্ধতি হল এটিকে একটি CSS ক্লাসে পরিণত করা।

নির্মাতার কাছে নতুন? পড়ুন উইজেট নির্মাতা ওভারভিউ প্রথমে, তারপর একটি উইজেট খোলা নিয়ে ফিরে আসুন।

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

• এলিমেন্টর ইনস্টল এবং সক্রিয় সহ ওয়ার্ডপ্রেস।
• এলিমেন্টর ইনস্টল এবং সক্রিয় জন্য মাস্টার অ্যাডঅন। দ্য ইনস্টলেশন গাইড সেটআপ কভার করে।
• উইজেট বিল্ডারে একটি উইজেট খোলা। এই গাইডের উদাহরণ হল একটি “Callout Box” উইজেট যেখানে দুটি ক্ষেত্র বেছে নিন: align (বাম, কেন্দ্র, ডান) এবং icon_position (উপরে বা বামে)।

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

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

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

ব্যাখ্যা করা ক্ষেত্রের বিকল্পগুলি বেছে নিন #

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

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

এলিমেন্টরে প্রদর্শিত আইকনগুলি বেছে নিন #

একটি বিকল্পের আইকনে ক্লিক করলে মাস্টার অ্যাডঅন আইকন পিকার খোলে। খুলুন এলিমেন্টর আইকন ট্যাব এবং অনুসন্ধান, উদাহরণস্বরূপ align, প্রান্তিককরণ এবং অবস্থান আইকন খুঁজে পেতে।

সেই ট্যাবে লেগে থাকুন। পিকারটি সিম্পল লাইন, আইকনিক ফন্ট, লিনিয়ার এবং ম্যাটেরিয়াল আইকনগুলিও তালিকাভুক্ত করে, কিন্তু আমাদের পরীক্ষায় সেই বোতামগুলি এলিমেন্টর প্যানেলে ফাঁকা দেখায়। শুধুমাত্র এলিমেন্টর আইকন প্রদর্শিত হয়।

কী, শিরোনাম এবং আনসেট #

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

আপনার টেমপ্লেটে পছন্দ ব্যবহার করুন #

টোকেন কী প্রিন্ট করে, তাই সবচেয়ে পরিষ্কার সেটআপ হল একটি মডিফায়ার ক্লাস। এটি কলআউট বক্স এইচটিএমএল:

<div class="callout{% if align %} callout--{{ align }}{% endif %}{% if icon_position %} callout--icon-{{ icon_position }}{% endif %}">
  {% if icon_position %}<span class="callout-icon">!</span>{% endif %}
  <div class="callout-body">
    <p class="callout-title">{{ callout_title }}</p>
    <p class="callout-text">{{ callout_text }}</p>
  </div>
</div>

প্রতিটি {% if %} মান খালি হলে ক্লাস এড়িয়ে যায়। আইকন অবস্থানের জন্য, একটি খালি মান আইকনটিকেও লুকিয়ে রাখে, যে কারণে সেই ক্ষেত্রটি আনসেট অন আছে। CSS প্যানেল তারপর প্রতিটি ক্লাস স্টাইল করে:

.callout--left { text-align: left; }
.callout--center { text-align: center; }
.callout--right { text-align: right; }
.callout--icon-top .callout-icon { margin-bottom: 14px; }
.callout--icon-left { display: flex; gap: 18px; align-items: flex-start; }

আপনি সরাসরি মান তুলনা করতে পারেন, উদাহরণস্বরূপ {% if icon_position == 'left' %}. চাবির সাথে তুলনা করুন, শিরোনাম কখনই নয়।

নির্বাচক এবং প্রতিক্রিয়াশীল নিয়ন্ত্রণ বন্ধ রাখুন #

• নির্বাচক: এই ক্ষেত্রের জন্য এটি লেখে color: {{VALUE}};. আমাদের পরীক্ষায়, একজন নির্বাচক .callout-title উত্পাদিত color:center;, যা ব্রাউজার উপেক্ষা করে। কিছু অন্যান্য ক্ষেত্রের বিপরীতে, চয়ন করুন কোন CSS নির্বাচক সারি নেই যেখানে আপনি আপনার নিজস্ব সম্পত্তি লিখতে পারেন। উপরে দেখানো হিসাবে ক্লাস ব্যবহার করুন।
• প্রতিক্রিয়াশীল নিয়ন্ত্রণ: ডিভাইস আইকন যোগ করে যাতে সম্পাদকরা ট্যাবলেট এবং মোবাইলে একটি ভিন্ন বিকল্প বেছে নিতে পারে, কিন্তু টোকেন শুধুমাত্র ডেস্কটপ পছন্দ প্রিন্ট করে। প্রতি-ডিভাইস পিক কখনই আপনার টেমপ্লেটে পৌঁছায় না।

Elementor এ Choose কন্ট্রোল ব্যবহার করুন #

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

এখানে বিভিন্ন পছন্দের সাথে একই কলআউট রয়েছে:

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

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

Choose ফিল্ডের সাথে কাজ করার জন্য টিপস #

• এটিকে চারটি বিকল্প বা তার কম রাখুন। দীর্ঘ তালিকার জন্য, ব্যবহার করুন ক্ষেত্র নির্বাচন করুন.
• সর্বদা একটি খালি মান পরিচালনা করুন। ক্লাস মোড়ানো এবং মার্কআপ ইন {% if %}, এবং বেস ক্লাস সংবেদনশীল ডিফল্ট শৈলী দিন।
• স্পষ্ট শিরোনাম লিখুন। টুলটিপ হল একমাত্র টেক্সট এডিটররা প্রতিটি বোতামের জন্য দেখতে পান।
• শুধুমাত্র এলিমেন্টর আইকন ব্যবহার করুন, তাই প্রতিটি বোতামে একটি দৃশ্যমান আইকন রয়েছে।
• সম্পাদকরা উইজেট ব্যবহার করার আগে কীগুলির বিষয়ে সিদ্ধান্ত নিন। শিরোনাম এবং আইকন পরে পরিবর্তন করতে পারে, কী পারে না।

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

মোড়ানো #

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