বেছে নিন

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

Choose control এর অপশন কী সরাসরি কাজ করে শর্তাবলী, তাই অন্যান্য ক্ষেত্রগুলি বাছাই করা বিকল্পের উপর ভিত্তি করে এবং এর সাথে উপস্থিত হতে পারে টুইগ-সিনট্যাক্স টেমপ্লেট ইঞ্জিন, যেখানে একটি চেক মত {% if align == "center" %} আপনার মার্কআপ পরিবর্তন করে। উভয় গাইড বিস্তারিত কভার।

নির্বাচনের মতো, আপনার টেমপ্লেটে দেওয়া মানটি বিকল্পের কী, এর শিরোনাম নয়। Choose উপরে যা যোগ করে: বিকল্প প্রতি একটি আইকন, একটি ঐচ্ছিক টগল-অফ আচরণ, এবং প্রান্তিককরণের মতো বিশুদ্ধ CSS পছন্দগুলির জন্য Elementor-এর নির্বাচক প্রক্রিয়ার মধ্যে একটি সরল পথ।

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

• আইকন বোতামের একটি সারি রেন্ডার করে এলিমেন্টর প্যানেলে, আপনি সংজ্ঞায়িত বিকল্প প্রতি একটি।
• একটি চাবি ধরে সংজ্ঞায়িত সেট থেকে, ঠিক একটি বোতাম একবারে সক্রিয়।
• প্রতিটি বিকল্পকে একটি eicon দিয়ে যুক্ত করে, যেমন eicon-text-align-left, তাই পছন্দ এক নজরে পড়া।
• ঐচ্ছিকভাবে টগল বন্ধ: টগল বিকল্পটি চালু থাকলে, সক্রিয় বোতামে ক্লিক করলে এটি আবার অনির্বাচন হয় এবং মানটি খালি হয়ে যায়।
• একটি প্রতিক্রিয়াশীল পতাকা সমর্থন করে এবং নীচে আচ্ছাদিত একটি নির্বাচকের মাধ্যমে সরাসরি CSS লিখতে পারে।

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

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

• ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
• এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। প্লাগইনে নতুন? দেখা ইনস্টলেশন গাইড.
• উইজেট বিল্ডার এডিটরে একটি কাস্টম উইজেট খোলা। আমাদের উদাহরণ হল একটি প্রশংসাসূচক উইজেট যার একটি "উদ্ধৃতি প্রান্তিককরণ" চয়নকারী: বাম, কেন্দ্র, ডান।

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

উইজেট বিল্ডার সম্পাদকে, খুঁজুন বেছে নিন বাম দিকের প্যানেলে ক্ষেত্র, অন্যান্য পছন্দের ক্ষেত্রগুলির সাথে গোষ্ঠীবদ্ধ৷।

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

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

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

আপনার টেমপ্লেট বা একটি নির্বাচকের সাথে চয়ন করুন সংযোগ করুন #

দুটি তারের শৈলী আছে। প্রান্তিককরণ উদাহরণ উভয়ের সাথে কাজ করে।

টেমপ্লেট প্যাটার্নস। টোকেন নির্বাচিত কী প্রিন্ট করে, তাই সিলেক্ট প্যাটার্ন অপরিবর্তিত থাকে। একটি মডিফায়ার ক্লাস আপনার CSS ট্যাবে ভেরিয়েন্ট রাখে:

<blockquote class="quote align--{{ quote_align }}">
  {{ quote_text }}
</blockquote>

সঙ্গে .align--center { text-align: center; } এবং CSS ট্যাবে বন্ধুরা। শর্তগুলিও কাজ করে: {% if quote_align == 'center' %}। নির্বাচনের মতো, কীটির সাথে তুলনা করুন, শিরোনাম কখনই নয়।

নির্বাচক বিকল্প। Choose এলিমেন্টরের নির্বাচক প্রক্রিয়ার মাধ্যমেও CSS লিখতে পারে, টেমপ্লেটটি সম্পূর্ণভাবে এড়িয়ে যায়। আপনি এটির উপর নির্ভর করার আগে একটি জিনিস জানতে হবে: ডিফল্ট সম্পত্তি এলিমেন্টর একটি চয়ন নির্বাচকের জন্য ইনজেকশন দেয় color: {{VALUE}}, যা প্রান্তিককরণের জন্য অকেজো। একটি কাস্টম নির্বাচক এন্ট্রি প্রকৃত সম্পত্তি বানান আছে:

text-align: {{VALUE}};

কীগুলি তখন বৈধ CSS মান হতে হবে (left, center, right ইতিমধ্যে আছে), এবং {{WRAPPER}} এই ধরনের মান নিয়ন্ত্রণের জন্য স্বয়ংক্রিয়ভাবে প্রিপেন্ড করা হয়, তাই আপনি এটি না লিখে শৈলীগুলি আপনার উইজেটের সাথে স্কোপ করা থাকে।

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

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

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

একবারে একটি বোতাম এবং পূর্বরূপ আপডেট ক্লিক করুন। টগল অন করার সাথে, সক্রিয় বোতামে ক্লিক করলে পছন্দটি সাফ হয়ে যায় এবং উইজেটটি আপনার CSS ট্যাব সংজ্ঞায়িত যাই হোক না কেন ফিরে আসে। রেসপন্সিভ অন সহ, ডিভাইস আইকন প্রতিটি ব্রেকপয়েন্টকে তার নিজস্ব বাছাই ধরে রাখতে দেয়।

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

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

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

• এটি দুই, তিন বা চারটি বিকল্পে রাখুন। সাতটি আইকন বোতামের একটি সারি হল একটি পোশাক পরা ড্রপডাউন; পরিবর্তে একটি নির্বাচন ব্যবহার করুন।
• একটি নির্বাচক ব্যবহার করার সময় CSS মানগুলির সাথে কীগুলি মেলে৷। মত কী left এবং center সরাসরি ড্রপ text-align: {{VALUE}} কোন অনুবাদ স্তর ছাড়া।
• কাস্টম নির্বাচকদের মধ্যে প্রকৃত সম্পত্তি সংজ্ঞায়িত করুন। ডিফল্ট ইনজেকশন সম্পত্তি হয় color: {{VALUE}}, যা শুধুমাত্র প্রকৃত রঙ পছন্দ অনুসারে।
• টগল চালু থাকলে খালি মানের জন্য পরিকল্পনা করুন। একটি অনির্বাচিত ক্ষেত্র একটি খালি কী প্রিন্ট করে, তাই align-- ক্লাস এবং শর্তাবলী এটি সহ্য করা উচিত, বা টগল বন্ধ রাখা উচিত।
• শর্তসাপেক্ষে কীগুলির সাথে তুলনা করুন। বিকল্প শিরোনামটি শুধুমাত্র প্যানেল-পাঠ্য এবং এর সাথে মেলে না {% if %}.
• প্রান্তিককরণের জন্য প্রতিক্রিয়াশীল ব্যবহার করুন। সেন্টার-অন-মোবাইল, বাম-অন-ডেস্কটপ দুটির পরিবর্তে একটি নিয়ন্ত্রণ।

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

মোড়ানো #

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