দ্য ভিজ্যুয়াল চয়েস ক্ষেত্র আপনার উইজেটের প্যানেলে ইমেজ কার্ডের একটি সেট রেন্ডার করে, প্রতি বিকল্পে একটি, এবং ব্যবহারকারী একটি থাম্বনেইলে ক্লিক করে বাছাই করে। এটি লেআউট-পিকার নিয়ন্ত্রণ। যেখানে একটি নির্বাচন শব্দ অফার করে এবং একটি চয়ন আইকন অফার করে, ভিজ্যুয়াল চয়েস প্রতিটি বৈকল্পিক আসলে কেমন দেখায় তার একটি ছোট ছবি দেখায়। মাস্টার অ্যাডঅন ভিতরে উইজেট নির্মাতা, এটি গ্রিড-বনাম-তালিকা সিদ্ধান্তের জন্য স্বাভাবিক উপযুক্ত করে তোলে এবং একটি স্ক্রিনশট নামের চেয়ে দ্রুত ব্যাখ্যা করে।
ভিজ্যুয়াল চয়েস বিকল্পের মানগুলি সরাসরি প্লাগ ইন করে শর্তাবলী, অন্যান্য নিয়ন্ত্রণ বাছাই করা লেআউট অনুসরণ করতে দেওয়া, এবং মধ্যে টুইগ-সিনট্যাক্স টেমপ্লেট ইঞ্জিনকোথায় {% if style == "grid" %} মার্কআপটি মেলে সুইচ করে। উভয় গাইড বিস্তারিত কভার।
টেমপ্লেট চুক্তি অন্যান্য পছন্দের ক্ষেত্রের সাথে মেলে: মান হল নির্বাচিত বিকল্পের কী। ভিজ্যুয়াল চয়েসকে যা আলাদা করে তা হল একটি দ্বিতীয় ওয়্যারিং স্টাইল, প্রিফিক্স ক্লাস, যা উইজেট র্যাপারে একটি ক্লাস পরিবর্তন করে যাতে আপনার CSS টেমপ্লেটটি কখনও ক্ষেত্রের উল্লেখ না করেই লেআউট পরিবর্তন করতে পারে।
ভিজ্যুয়াল চয়েস ফিল্ড কি করে #
- ক্লিকযোগ্য ইমেজ কার্ড রেন্ডার করে এলিমেন্টর প্যানেলে, প্রতিটি বিকল্প একটি কী, একটি শিরোনাম এবং একটি চিত্র দ্বারা সংজ্ঞায়িত করা হয়।
- একটি চাবি ধরে সংজ্ঞায়িত সেট থেকে, কার্ডটি বর্তমানে নির্বাচিত হয়েছে।
- কলামে কার্ড রাখে, ডিফল্টরূপে প্রতি সারিতে তিনটি, কলাম বিকল্পের মাধ্যমে সামঞ্জস্যযোগ্য।
- ফিড নির্বাচিত কী টেমপ্লেট করে সংশোধক ক্লাসের জন্য এবং
{% if %}ব্লক। - ঐচ্ছিকভাবে একটি মোড়ক ক্লাস সেট করে প্রিফিক্স ক্লাস বিকল্পের মাধ্যমে, তাই CSS একাই লেআউট পরিবর্তন করতে পারে।
আপনি যদি উইজেট তৈরিতে নতুন হন তবে শুরু করুন উইজেট নির্মাতা ওভারভিউ প্রথম।
আপনি শুরু করার আগে #
- ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
- এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। প্লাগইনে নতুন? দেখা ইনস্টলেশন গাইড.
- উইজেট বিল্ডার এডিটরে একটি কাস্টম উইজেট খোলা। আমাদের উদাহরণ হল দুটি লেআউট ভেরিয়েন্ট সহ একটি দলের সদস্যদের উইজেট, একটি 3-কলামের গ্রিড এবং একটি স্ট্যাক করা তালিকা, থাম্বনেইল কার্ডের মাধ্যমে বাছাই করা।
কিভাবে একটি ভিজ্যুয়াল চয়েস ফিল্ড যোগ করবেন #
আবিষ্কার করা ভিজ্যুয়াল চয়েস উইজেট বিল্ডার সম্পাদকের বাম দিকের ফিল্ড প্যানেলে, অন্যান্য পছন্দের ক্ষেত্রগুলির সাথে গোষ্ঠীবদ্ধ।
এর অধীনে একটি বিভাগে এটি টেনে আনুন বিষয়বস্তু বা শৈলী ট্যাব। লেআউট বাছাইকারীরা সাধারণত প্যানেলে প্রথমে বসে থাকে, বিষয়বস্তু ট্যাবের শীর্ষে, তাই সম্পাদকরা বিষয়বস্তু পূরণ করার আগে একটি কাঠামো বেছে নেন। একবার ক্ষেত্রটি অবতরণ করলে, এর বিকল্পগুলি বাম দিকে খোলে।
ভিজ্যুয়াল চয়েস ফিল্ড অপশন ব্যাখ্যা করা হয়েছে #
- লেবেল: এলিমেন্টরে কার্ডের উপরে দেখানো পাঠ্য, উদাহরণস্বরূপ “Out”।
- নাম: ক্ষেত্র, অক্ষর, সংখ্যা এবং আন্ডারস্কোরগুলির জন্য অনন্য শনাক্তকারী, উদাহরণস্বরূপ
team_layout. - বিকল্প: প্রতিটি বিকল্প একটি কী এবং একটি শিরোনাম এবং একটি চিত্র। ছবিটি ক্লিকযোগ্য কার্ডে পরিণত হয়; শিরোনাম এটি লেবেল। কীগুলি ছোট এবং CSS-নিরাপদ থাকে:
grid,list. - কলাম: প্যানেলে প্রতি সারিতে কতগুলি কার্ড বসে, ডিফল্টরূপে 3টি। দুটি বড় কার্ড 2টি কলাম হিসাবে ভাল পড়ে।
- উপসর্গ ক্লাস: একটি ক্লাস স্টেম এলিমেন্টর নির্বাচিত কী যুক্ত করে এবং উইজেটের মোড়কের উপর রাখে। সঙ্গে
team-layout-এবং চাবিgrid, মোড়ক বহন করেteam-layout-grid. - ডিফল্ট: উইজেটটি প্রথম পৃষ্ঠায় ড্রপ করার সময় কীটি নির্বাচিত হয়।
- বর্ণনা, লেবেল দেখান, বিভাজক: স্ট্যান্ডার্ড ডিসপ্লে সেটিংস, প্লাস ফিল্ড দেখানোর শর্ত শুধুমাত্র যখন অন্য নিয়ন্ত্রণের একটি নির্দিষ্ট মান থাকে।
আপনার উইজেটে ভিজ্যুয়াল চয়েস সংযুক্ত করুন #
দুটি তারের শৈলী। প্রতি ক্ষেত্রে একটি চয়ন করুন।
শৈলী A: টেমপ্লেট নিদর্শন। টোকেন নির্বাচিত কী প্রিন্ট করে, তাই থেকে সবকিছু ক্ষেত্র নির্বাচন করুন প্রযোজ্য। একটি সংশোধক শ্রেণী:
<div class="team team--{{ team_layout }}">
...
</div>অথবা একটি কাঠামোগত শাখা যখন বৈকল্পিক বিভিন্ন মার্কআপ প্রয়োজন:
{% if team_layout == 'list' %}
<ul class="team-list"> ... </ul>
{% else %}
<div class="team-grid"> ... </div>
{% endif %}শৈলী বি: উপসর্গ শ্রেণী। উপসর্গ ক্লাস বিকল্পটি পূরণ করুন, বলুন team-layout-, এবং Elementor লিখেছেন team-layout-grid বা team-layout-list ব্যবহারকারী কার্ডে ক্লিক করার সাথে সাথে উইজেটের মোড়কে। আপনার CSS তারপর সম্মিলিত শ্রেণীকে লক্ষ্য করে:
.team-layout-grid .member { /* grid card rules */ }
.team-layout-list .member { /* stacked row rules */ }টেমপ্লেটটি কখনই ক্ষেত্রটিকে উল্লেখ করে না; মোড়ক ক্লাস সুইচিং করে। এটি এইচটিএমএলকে একটি একক মার্কআপ ব্লকে রাখে এবং প্রতিটি ভেরিয়েন্টকে স্টাইলশীটে ঠেলে দেয়। যখন শুধুমাত্র উপস্থাপনা পরিবর্তিত হয়, এটি সাধারণত ক্লিনার কাট হয়।
একটি ক্ষেত্রে দুটি শৈলী মিশ্রিত করার জন্য সতর্ক থাকুন। একটি টেমপ্লেট শর্তাধীন যা অনুমান করে grid যখন উপসর্গ শ্রেণী একই সাথে সেট করে team-layout-list সত্যের দুটি উত্স, এবং তারা প্রবাহিত হবে, সাধারণত কয়েক মাস পরে যখন কেউ এক দিক সম্পাদনা করে এবং অন্যটির অস্তিত্ব ভুলে যায়। এই ক্ষেত্রটি টেমপ্লেটের মাধ্যমে বা র্যাপার ক্লাসের মাধ্যমে কথা বলে কিনা তা নির্ধারণ করুন, তারপরে এটিতে লেগে থাকুন।
এলিমেন্টরে ভিজ্যুয়াল চয়েস কন্ট্রোল ব্যবহার করুন #
এলিমেন্টরের একটি পৃষ্ঠায় আপনার কাস্টম উইজেট যোগ করুন, পৃষ্ঠাটি ইতিমধ্যে খোলা থাকলে সম্পাদকটি পুনরায় লোড করুন। নিয়ন্ত্রণ প্যানেলে আপনার বিকল্প কার্ড দেখায়, নির্বাচিত একটি হাইলাইট করা হয়েছে।
একটি কার্ডে ক্লিক করুন এবং লেআউটটি প্রিভিউতে ফ্লিপ হয়, হয় আপনার মডিফায়ার ক্লাসের মাধ্যমে বা র্যাপারের প্রিফিক্স ক্লাসের মাধ্যমে, আপনি যে ওয়্যারিং বেছে নিন। যেহেতু প্রতিটি কার্ড নিজেই বৈকল্পিক দেখায়, সম্পাদকরা একটি জিনিস না পড়েই সঠিক লেআউট বেছে নেন।
সাধারণ ব্যবহারের ক্ষেত্রে #
- গ্রিড বনাম তালিকা লেআউট দল, পোর্টফোলিও এবং পোস্ট উইজেটের জন্য।
- কার্ড শৈলী বৈকল্পিক যেখানে থাম্বনেইলগুলি প্রকৃত বাক্সযুক্ত, ওভারলে এবং বিভক্ত নকশাগুলি দেখায়৷।
- হেডার ব্যবস্থা যেমন ইমেজ-টপ, ইমেজ-লেফট, এবং টেক্সট-অনলি হিরো ভেরিয়েন্ট।
- স্লাইডার বনাম স্ট্যাটিক উপস্থাপনা একই বিষয়বস্তু সেট।
- একটি উইজেটের ভিতরে টেমপ্লেট প্যাক, তিনটি পূর্ব-পরিকল্পিত দেখায় একটি ক্লায়েন্ট ছবি দ্বারা বাছাই করে।
ভিজ্যুয়াল চয়েস ফিল্ডের সাথে কাজ করার জন্য টিপস #
- বিকল্প ছবি হিসাবে বাস্তব স্ক্রিনশট ব্যবহার করুন। প্রতিটি ভেরিয়েন্টের একটি ক্ষুদ্র রেন্ডার একটি বিমূর্ত আইকনকে বীট করে; কার্ড হল ডকুমেন্টেশন।
- ক্ষেত্র প্রতি একটি তারের শৈলী চয়ন করুন। টেমপ্লেট প্যাটার্ন বা উপসর্গ শ্রেণী, উভয় নয়, বা দুটি শেষ পর্যন্ত একমত হবে না।
- কীগুলি ক্লাসের নামগুলিতে যায়, তাই সেগুলিকে স্লাগ রাখুন৷।
gridএবংlist, "গ্রিড লেআউট" নয়। - একটি বিভাজক দিয়ে উপসর্গ শেষ করুন।
team-layout-প্লাসgridহিসাবে পড়াteam-layout-grid; হাইফেন ছাড়া আপনি পাবেনteam-layoutgrid. - আপনার কার্ড গণনার সাথে কলামগুলি মেলান৷। 3টি কলাম জুড়ে দুটি বিকল্প একটি ফাঁক ছেড়ে দেয়; কলাম 2 এ সেট করুন এবং সারিটি পূরণ হয়।
- চাক্ষুষ পার্থক্য জন্য এটি সংরক্ষণ করুন। যদি বিকল্পগুলি চেহারার চেয়ে আচরণে ভিন্ন হয়, তবে পরিষ্কার লেবেল সহ একটি নির্বাচন সম্পাদকদের আরও ভাল পরিবেশন করে।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #
মাস্টার অ্যাডনস উইজেট বিল্ডারে ভিজ্যুয়াল চয়েস ফিল্ড কী?
ভিজ্যুয়াল চয়েস ফিল্ড একটি কাস্টম এলিমেন্টর উইজেটে একটি ইমেজ-কার্ড পিকার যোগ করে। প্রতিটি বিকল্প একটি শিরোনাম এবং একটি থাম্বনেইল চিত্র সহ একটি কী; ব্যবহারকারী একটি কার্ডে ক্লিক করে এবং আপনার উইজেট প্রতিক্রিয়া দেখায়, হয় টেমপ্লেটের নির্বাচিত কী বা উইজেট র্যাপারে রাখা একটি উপসর্গ শ্রেণীর মাধ্যমে।
উপসর্গ ক্লাস কিভাবে কাজ করে?
আপনি উপসর্গ ক্লাস বিকল্পে একটি ক্লাস স্টেম সেট করুন, উদাহরণস্বরূপ team-layout-। Elementor নির্বাচিত কী যোগ করে এবং ফলাফল রাখে, যেমন team-layout-grid, উইজেটের মোড়ক উপাদানে। আপনার CSS টার্গেট যা লেআউট পরিবর্তন করতে ক্লাসকে একত্রিত করে, এবং টেমপ্লেটের কোনো টোকেনের প্রয়োজন নেই।
আমি কি এখনও একটি টেমপ্লেট টোকেন পেতে পারি?
হ্যাঁ. {{ team_layout }} নির্বাচিত কী প্রিন্ট করে, তাই ক্লাস পরিবর্তন করে এবং {% if team_layout == 'list' %} শর্তাবলী ঠিক যেমন কাজ করে তারা একটি নির্বাচনের সাথে করে। উপসর্গ শ্রেণী একটি বিকল্প, একটি প্রতিস্থাপন নয়।
একটি সারিতে কয়টি কার্ড ফিট?
ডিফল্টরূপে তিনটি। কলাম বিকল্পটি পরিবর্তন করে, তাই দুটি বড় লেআউট থাম্বনেল 2-কলামের জোড়া হিসাবে বসতে পারে এবং ছয়টি ছোট শৈলীর সোয়াচ দুটি সারিতে 3টি কলামে প্যাক করতে পারে।
নির্বাচন বা চয়ন করার পরিবর্তে আমার কখন ভিজ্যুয়াল চয়েস ব্যবহার করা উচিত?
যখন একটি ছবি একটি শব্দ বা একটি আইকনের চেয়ে দ্রুত বিকল্পটি সনাক্ত করে। লেআউট এবং ডিজাইন ভেরিয়েন্ট হল ক্লাসিক কেস। সংক্ষিপ্ত ভিজ্যুয়াল সেটের জন্য যা একটি আইকন কভার করে, প্রান্তিককরণ বা দিকনির্দেশ, ক্ষেত্র নির্বাচন করুন হালকা হয়; শব্দযুক্ত বা দীর্ঘ তালিকার জন্য, একটি নির্বাচন ব্যবহার করুন।
মান কি বিকল্প শিরোনাম বা কী ব্যবহার করে?
কী, প্রতিটি পছন্দের ক্ষেত্রের মতো। প্যানেলের জন্য শিরোনাম এবং ছবি বিদ্যমান; তুলনা, সংশোধক ক্লাস, এবং উপসর্গ শ্রেণী প্রত্যয় সবই আপনার সংজ্ঞায়িত কী ব্যবহার করে।
মোড়ানো #
উইজেট বিল্ডার ভিজ্যুয়াল চয়েস ফিল্ড সম্পাদকদের এটি দেখে একটি লেআউট বাছাই করতে দেয়: প্যানেলে ইমেজ কার্ড, টেমপ্লেটে একটি কী এবং প্রিফিক্স ক্লাস বিকল্প যখন আপনি একা CSS থেকে লেআউট পরিবর্তন করতে চান। এটা স্বাভাবিকভাবেই সঙ্গে জোড়া ক্ষেত্র নির্বাচন করুন। থাম্বনেইলগুলি বড় স্ট্রাকচারাল পিকগুলি পরিচালনা করে, আইকন বোতামগুলি ছোট সমন্বয়গুলি পরিচালনা করে৷ বাকি অন্বেষণ মাস্টার অ্যাডঅন উইজেট এবং এক্সটেনশন, এবং দেখুন মূল্য পৃষ্ঠা প্রতিটি পরিকল্পনা অন্তর্ভুক্ত কি জন্য।
