স্লাইডার

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

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

স্লাইডার ক্ষেত্র কি করে #

• এটি এলিমেন্টর প্যানেলে একটি নম্বর বক্স এবং একটি ইউনিট মেনু সহ একটি স্লাইডার দেখায়।
• আপনি সর্বনিম্ন, সর্বোচ্চ এবং ধাপ, প্লাস একটি প্রারম্ভিক মান সেট করুন।
• মান হল একটি সংখ্যা এবং একটি একক একসাথে, যেমন 24 এবং px।
• আপনি এটিকে একটি CSS নির্বাচক সারি দিয়ে আপনার CSS এর সাথে সংযুক্ত করুন, অথবা দুটি টোকেন দিয়ে HTML বা CSS ট্যাবে প্রিন্ট করুন।

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

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

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

কিভাবে একটি স্লাইডার ক্ষেত্র যোগ করতে হয় #

1. যাও মাস্টার অ্যাডঅন > উইজেট নির্মাতা এবং আপনার উইজেট খুলুন।
2. ক্লিক করুন শৈলী ট্যাব করুন এবং একটি বিভাগ যোগ করুন, উদাহরণস্বরূপ “Grid Layout”।
3. টাইপ করা slider বাম দিকে ফিল্ড সার্চ বক্সে।
4. টেনে আনুন স্লাইডার বিভাগে। এর সেটিংস বাম সাইডবারে খোলে।

স্লাইডার ক্ষেত্রের বিকল্পগুলি ব্যাখ্যা করা হয়েছে #

• লেবেল এলিমেন্টরে স্লাইডারের উপরের লেখাটি, উদাহরণস্বরূপ “Card Gap”।
• নাম ক্ষেত্রের অনন্য আইডি এবং এর টোকেন শুরু, তাই card_gap দেয় {{ card_gap.size }}. অক্ষর, সংখ্যা এবং আন্ডারস্কোর শুধুমাত্র।
• বর্ণনা এলিমেন্টরে স্লাইডারের নিচে প্রদর্শিত হয়।
• ন্যূনতম মান, সর্বোচ্চ মান এবং ধাপ পরিসীমা সেট করুন এবং হ্যান্ডেলের প্রতিটি পদক্ষেপ কতদূর যায়। কার্ড গ্যাপ 2 এর ধাপে 0 থেকে 80 ব্যবহার করে।
• ডিফল্ট মান প্রারম্ভিক সংখ্যা এবং ইউনিট, তার নিজস্ব ছোট স্লাইডার এবং ইউনিট মেনু দিয়ে সেট করা হয়।

ন্যূনতম, সর্বোচ্চ এবং ধাপের মানগুলি টাইপ করুন এমনকি যদি বাক্সগুলি ইতিমধ্যেই 0, 100 এবং 1 দেখায়। আপনি যে বাক্সগুলি স্পর্শ করেন না সেগুলি সংরক্ষণ করা হয় না, এবং একটি স্লাইডার যেগুলির মধ্যে একটিও সংরক্ষিত হয়নি তা এলিমেন্টরের রেঞ্জে ফিরে আসে: px এর জন্য 0 থেকে 1000, 0 % এর জন্য 100, এবং em এবং rem এর জন্য 0 থেকে 10। আপনি যখন সেগুলি সেট করেন, তখন প্রতিটি ইউনিটের জন্য একই পরিসর ব্যবহার করা হয়, তাই 0 থেকে 80 em এর পাশাপাশি px-এর ক্ষেত্রে প্রযোজ্য।

কোন সেটিং নেই যার জন্য ইউনিট প্রদর্শিত হবে। সম্পাদকরা px, %, em এবং rem বেছে নিতে পারেন। আরও নিচে, প্রতিক্রিয়াশীল নিয়ন্ত্রণ ডিভাইস আইকন যোগ করে যাতে ডেস্কটপ, ট্যাবলেট এবং মোবাইলের বিভিন্ন মান থাকতে পারে।

সিএসএস নির্বাচকদের সাথে স্লাইডারটি সংযুক্ত করুন #

স্ক্রোল করুন সিএসএস নির্বাচক এবং ক্লিক করুন আইটেম যোগ করুন। নতুন সারি একটি উদাহরণ দিয়ে ভরা আসে (.text-1, .text-2 এবং color: {{VALUE}};), তাই উভয় বাক্স প্রতিস্থাপন করুন:

CSS Selector:   .team-grid
CSS Properties: gap: {{SIZE}}{{UNIT}};

{{SIZE}} সংখ্যা দিয়ে প্রতিস্থাপিত হয় এবং {{UNIT}} নির্বাচিত ইউনিটের সাথে, তাই 24 px হয়ে যায় gap: 24px;. তোমার দরকার নেই {{WRAPPER}} নির্বাচকের মধ্যে কারণ নির্মাতা আপনার জন্য এটি যোগ করে। অন্যান্য উপাদানে একই মান ব্যবহার করতে আরও সারি যোগ করুন।

একক পরিবর্তে এই সারি ব্যবহার করুন নির্বাচক সাইডবারের নীচে বক্স। সেই বাক্সে একটি CSS সম্পত্তির জন্য কোন স্থান নেই, তাই এটি একটি স্লাইডারের জন্য একটি কার্যকরী নিয়ম লিখতে পারে না।

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

আপনি HTML বা CSS ট্যাবে মানটিও প্রিন্ট করতে পারেন। আকার এবং ইউনিট একে অপরের পাশে দুটি টোকেন হিসাবে লিখুন। অবতার সাইজ স্লাইডার অবতারের প্রস্থ এবং উচ্চতা এইভাবে সেট করে:

.team-avatar {
  width: {{ avatar_size.size }}{{ avatar_size.unit }};
  height: {{ avatar_size.size }}{{ avatar_size.unit }};
}

একটি খালি {{ avatar_size }} কিছুই প্রিন্ট করে না। আপনি একটি শর্তে সংখ্যা তুলনা করতে পারেন, উদাহরণস্বরূপ {% if card_gap.size >= 40 %}। যখন প্রতিক্রিয়াশীল নিয়ন্ত্রণ চালু থাকে, তখন একটি CSS নির্বাচক সারি ব্যবহার করুন, যেহেতু Elementor তারপর প্রতিটি ডিভাইসের জন্য একটি পৃথক নিয়ম লেখে।

ক্লিক করুন সেটিংস সংরক্ষণ করুন আপনার কাজ শেষ হলে।

এলিমেন্টরে স্লাইডার নিয়ন্ত্রণ ব্যবহার করুন #

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

হ্যান্ডেলটি টেনে আনুন বা একটি নম্বর টাইপ করুন এবং উইজেটটি সরাসরি আপডেট হয়। px, %, em এবং rem এর মধ্যে স্যুইচ করতে ইউনিট লেবেলে ক্লিক করুন।

এখানে ব্যবধান 48px এবং অবতারগুলি 96px-এ উন্নীত হয়েছে:

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

• কার্ড, কলাম এবং তালিকা আইটেমগুলির মধ্যে ফাঁক।
• একটি ছবি, কার্ড বা বিভাগের প্রস্থ, সর্বোচ্চ-প্রস্থ বা উচ্চতা।
• আইকন, অবতার এবং ব্যাজের আকার।
• একটি উপাদানের জন্য ফন্টের আকার বা লাইনের উচ্চতা।
• সীমানা ব্যাসার্ধ বা সীমানা প্রস্থ যখন সব পক্ষ একটি মান ভাগ করে।

স্লাইডার ক্ষেত্রের সাথে কাজ করার জন্য টিপস #

• সর্বদা মিন, ম্যাক্স এবং স্টেপ টাইপ করুন যাতে স্লাইডারের একটি বুদ্ধিমান পরিসর থাকে।
• এমন একটি পরিসর বেছে নিন যা প্রতিটি ইউনিট সম্পাদকের জন্য উপযুক্ত হতে পারে। 0 থেকে 80 px এর জন্য ঠিক কিন্তু তাদের জন্য খুব বড়।
• CSS ট্যাবে সম্পত্তির জন্য একটি বেস মান রাখুন, যেমন gap: 24px;, তাই কেউ স্লাইডার স্পর্শ করার আগে উইজেটটি ঠিক দেখায়।
• একটি নতুন CSS নির্বাচক সারিতে উদাহরণ পাঠ্য প্রতিস্থাপন করুন। বাম হিসাবে, সারি লক্ষ্য ক্লাস আপনার উইজেট নেই।
• প্যাডিং বা মার্জিনের মতো চার দিকের মানগুলির জন্য, ব্যবহার করুন মাত্রা ক্ষেত্র.

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

মোড়ানো #

স্লাইডার ক্ষেত্র যোগ করুন, মিন, ম্যাক্স এবং স্টেপ টাইপ করুন, একটি ডিফল্ট সেট করুন এবং এটিকে একটি CSS নির্বাচক সারির সাথে সংযুক্ত করুন যেমন gap: {{SIZE}}{{UNIT}};. ব্যবহার করুন .size এবং .unit টোকেন যখন মানটি আপনার HTML বা CSS ট্যাবে থাকে। অন্যান্য সাইজিং নিয়ন্ত্রণের জন্য, দেখুন মাত্রা এবং টাইপোগ্রাফি ক্ষেত্র, এবং চেক মূল্য প্রতিটি পরিকল্পনা অন্তর্ভুক্ত কি জন্য।