ভিজ্যুয়াল চয়েস

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

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

ভিজ্যুয়াল চয়েস ফিল্ড কি করে #

• এটি এলিমেন্টর প্যানেলে ইমেজ কার্ড হিসাবে আপনার বিকল্পগুলি দেখায়। নির্বাচিত কার্ড একটি হাইলাইট পায়।
• প্রতিটি বিকল্পে একটি কী, একটি শিরোনাম এবং একটি চিত্র রয়েছে। শিরোনামটি কার্ডের টুলটিপ এবং alt পাঠ্য হিসাবে ব্যবহৃত হয়।
• আপনার টেমপ্লেট নির্বাচিত কী পায়, যেমন grid বা list, যা আপনি একটি ক্লাসের নাম বা একটিতে ব্যবহার করতে পারেন {% if %} চেক করুন।
• কলাম সেটিং প্যানেলের এক সারিতে কতগুলি কার্ড বসে তা নিয়ন্ত্রণ করে।

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

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

• এলিমেন্টর ইনস্টল এবং সক্রিয় সহ ওয়ার্ডপ্রেস।
• Elementor এবং Master Addons Pro এর জন্য মাস্টার অ্যাডঅন, উভয়ই সক্রিয়। দ্য ইনস্টলেশন গাইড সেটআপ কভার করে।
• প্রতিটি বিকল্পের জন্য একটি ছোট ছবি। প্রায় 240 বাই 160 পিক্সেলের সাধারণ লাইন অঙ্কন, একটি স্বচ্ছ ব্যাকগ্রাউন্ড সহ PNG হিসাবে সংরক্ষিত, এলিমেন্টরের অন্ধকার প্যানেলে পরিষ্কার দেখায়।
• উইজেট বিল্ডারে একটি উইজেট খোলা। এই গাইডের উদাহরণ হল তিনটি লেআউট সহ একটি "টিম শোকেস" উইজেট: গ্রিড, তালিকা এবং স্পটলাইট।

কিভাবে একটি ভিজ্যুয়াল চয়েস ফিল্ড যোগ করবেন #

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

ভিজ্যুয়াল চয়েস ফিল্ড অপশন ব্যাখ্যা করা হয়েছে #

• লেবেল এলিমেন্টরে কার্ডের উপরের লেখাটি, উদাহরণস্বরূপ “Out”।
• নাম ক্ষেত্রের অনন্য আইডি এবং এর টেমপ্লেট টোকেন, তাই team_layout হয়ে যায় {{team_layout}}. অক্ষর, সংখ্যা এবং আন্ডারস্কোর শুধুমাত্র।
• বর্ণনা এলিমেন্টরে কার্ডের নিচে প্রদর্শিত হয়।
• অপশন কার্ড প্রতি এক সারি ধরে। চাবি আপনার টেমপ্লেটটি যে মানটি পায় তা কি (এটি ছোট এবং ছোট হাতের অক্ষরে রাখুন, যেমন grid). শিরোনাম কার্ডের নাম। ক্লিক করুন ছবি ছবি নির্বাচন উইন্ডো খুলতে বক্স, একটি ফাইল আপলোড করুন বা মিডিয়া লাইব্রেরি থেকে একটি বাছাই করুন, তারপর ক্লিক করুন এই ছবিটি ব্যবহার করুন। প্লাস আইকন একটি সারি যোগ করে এবং লাল ক্রস একটি সরিয়ে দেয়।
• কলাম 1 থেকে 6 পর্যন্ত একটি সারিতে কতগুলি কার্ড ফিট করে তা সেট করে। বাক্সটি ইতিমধ্যে 2 দেখালেও নম্বরটি টাইপ করুন। আপনি এটি পরিবর্তন না করা পর্যন্ত দেখানো নম্বরটি সংরক্ষণ করা হয় না এবং একটি সংরক্ষিত মান ছাড়াই Elementor প্রতিটি সারিতে একটি কার্ড রাখে।
• টগল প্যানেলে তালিকাভুক্ত করা হয়েছে, কিন্তু আমাদের পরীক্ষায় এটি কোন পার্থক্য করেনি। সম্পাদকরা সর্বদা নির্বাচিত কার্ডটি পরিষ্কার করতে আবার ক্লিক করতে পারে।

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

ক্লিক করুন সেটিংস সংরক্ষণ করুন আপনি বিকল্প যোগ করার পরে।

আপনার টেমপ্লেটে নির্বাচিত কী ব্যবহার করুন #

{{team_layout}} নির্বাচিত কার্ডের কী প্রিন্ট করে। এটি ব্যবহার করার সবচেয়ে সহজ উপায় হল একটি সংশোধক শ্রেণী:

<div class="ts-team ts-team--{{team_layout}}">
  ...
</div>

গ্রিড নির্বাচিত হলে, এটি রেন্ডার করে ts-team--grid। যখন একটি লেআউটের বিভিন্ন মার্কআপের প্রয়োজন হয়, তখন কীটি দিয়ে চেক করুন৷ {% if %}। উদাহরণটি শুধুমাত্র তালিকা বিন্যাসে একটি সংক্ষিপ্ত বায়ো দেখায়:

{% if team_layout == 'list' %}
  <p class="ts-bio">Leads brand and product design across every client project.</p>
{% endif %}

তারপর প্রতি কী সিএসএস নিয়মের একটি সেট লিখুন:

.ts-team--grid { grid-template-columns: repeat(3, 1fr); }
.ts-team--list { grid-template-columns: 1fr; }
.ts-team--spotlight { grid-template-columns: 1.4fr 1fr; }

যতক্ষণ না একজন সম্পাদক একটি কার্ডে ক্লিক করেন, টোকেন কিছুই প্রিন্ট করে না এবং উপরের ক্লাসটি হয়ে যায় ts-team--. ভিত্তি দিন .ts-team একটি লেআউটকে ক্লাস করুন যা নিজে থেকে সূক্ষ্ম দেখায়, তাই একটি পছন্দ করার আগে উইজেটটি কখনই ভাঙা দেখায় না।

এলিমেন্টরে ভিজ্যুয়াল চয়েস কন্ট্রোল ব্যবহার করুন #

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

ক্লিক তালিকা দলটিকে সারিতে পরিবর্তন করে, এবং {% if %} ব্লক বায়োস যোগ করে:

স্পটলাইট প্রথম সদস্যকে বড় করে তোলে:

পছন্দটি সাফ করতে আবার নির্বাচিত কার্ডে ক্লিক করুন। টেমপ্লেট তারপর একটি খালি কী পায়, যেমন উপরে বর্ণিত হয়েছে।

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

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

ভিজ্যুয়াল চয়েস ফিল্ডের সাথে কাজ করার জন্য টিপস #

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

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

মোড়ানো #

প্রতিটি বিকল্পকে একটি কী, একটি শিরোনাম এবং একটি চিত্র দিন, একটি কলামের মান টাইপ করুন এবং ব্যবহার করুন৷ {{field_name}} একটি ক্লাসের নামে বা একটি {% if %} চেক করুন। খালি অবস্থার জন্য পরিকল্পনা করুন, যেহেতু একজন সম্পাদক একটি কার্ডে ক্লিক না করা পর্যন্ত কিছুই নির্বাচন করা হয় না। পরিবর্তে একটি পাঠ্য তালিকা থেকে বাছাই করার জন্য, দেখুন Select2 ক্ষেত্র, এবং চেক মূল্য প্রতিটি পরিকল্পনা অন্তর্ভুক্ত কি জন্য।