স্লাইডার

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

স্লাইডার ক্ষেত্র সমর্থন করে শর্তাবলী প্রতিটি নিয়ন্ত্রণের মতো, এবং যেহেতু এর মান সংখ্যাসূচক, টুইগ-সিনট্যাক্স টেমপ্লেট ইঞ্জিন আপনি মত তুলনা সঙ্গে এটি শাখা যাক {% if columns >= 3 %}। উভয় গাইড সেটআপ এবং সীমাবদ্ধতা কভার করে।

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

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

• একটি পরিসীমা স্লাইডার রেন্ডার করে একটি টেনে আনা যায় এমন হ্যান্ডেল এবং এর পাশে একটি সংখ্যাসূচক ইনপুট সহ, এলিমেন্টরের নেটিভ স্লাইডার নিয়ন্ত্রণের সাথে মিলে যায়।
• একটি ইউনিট সুইচার অফার করে আপনি যখন একাধিক ইউনিটের অনুমতি দেন, তাই একই নিয়ন্ত্রণ px, %, বা em-এ কাজ করতে পারে।
• একটি আকার এবং একটি ইউনিট একসাথে সংরক্ষণ করে একটি মান হিসাবে আপনার CSS প্যানেল ডট নোটেশন সহ পড়ে।
• প্রতিক্রিয়াশীল মান সমর্থন করে, ব্যবহারকারীদের ডিভাইস আইকন থেকে ডিভাইস প্রতি একটি ভিন্ন আকার সেট করতে দেওয়া।
• গতিশীল মান গ্রহণ করে এবং CSS প্যানেলের বিকল্প হিসাবে Elementor এর নির্বাচক প্রক্রিয়ার মাধ্যমে CSS লিখতে পারে।

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

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

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

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

উইজেট বিল্ডার এডিটরে, বাম দিকে ফিল্ড প্যানেলটি স্ক্রোল করুন যতক্ষণ না আপনি এটি খুঁজে পান স্লাইডার ক্ষেত্র, অন্যান্য CSS-মান ক্ষেত্র যেমন মাত্রার সাথে তালিকাভুক্ত।

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

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

• লেবেল: এলিমেন্টরে নিয়ন্ত্রণের পাশের পাঠ্য, উদাহরণস্বরূপ “Card Gap”।
• নাম: আপনার CSS যে অনন্য শনাক্তকারীকে বোঝায়, শুধুমাত্র অক্ষর, সংখ্যা এবং আন্ডারস্কোর, উদাহরণস্বরূপ my_gap.
• ডিফল্ট: প্রারম্ভিক মান, একটি আকার এবং একটি ইউনিট হিসাবে সংরক্ষিত।
• সর্বনিম্ন, সর্বোচ্চ, ধাপ: হ্যান্ডেলটি যে পরিসরটি কভার করে এবং প্রতিটি ড্র্যাগ বৃদ্ধি কতদূর চলে। একটি ফাঁক নিয়ন্ত্রণ 1 এর ধাপে 0 থেকে 100 চলতে পারে।
• আকার ইউনিট: ব্যবহারকারী যে ইউনিটগুলির মধ্যে স্যুইচ করতে পারে, যেমন px, %, এবং em। একটি ইউনিট সুইচার লুকিয়ে রাখে; বেশ কিছু এটা দেখায়।
• প্রতিক্রিয়াশীল: ডিভাইস আইকন যোগ করে যাতে প্রতিটি ব্রেকপয়েন্ট তার নিজস্ব মান রাখে।
• গতিশীল এবং নির্বাচক: ডায়নামিক ট্যাগ সমর্থন, এবং এলিমেন্টরের নির্বাচক প্রক্রিয়া নীচে আচ্ছাদিত।
• বর্ণনা, শো লেবেল, বিভাজক, এবং শর্তাবলী প্রতিটি ক্ষেত্রে বহন করে একই প্রদর্শন বিকল্প।

আপনার CSS এর সাথে স্লাইডার সংযুক্ত করুন #

একটি স্লাইডারের মান দুটি কী সহ একটি অ্যারে: size এবং unit। ফিল্ডের নাম মুদ্রণ করা তার নিজস্ব আউটপুট কিছুই নয়, কারণ মুদ্রণের জন্য কোন একক মান নেই। CSS প্যানেলে, সর্বদা ডট নোটেশন সহ উভয় অংশ লিখুন:

.team-row {
  gap: {{ my_gap.size }}{{ my_gap.unit }};
}

px নির্বাচিত রেন্ডার সহ 24 এর মান gap: 24px;। ইউনিট সুইচারকে % এ পরিবর্তন করুন এবং একই নিয়ম হয়ে যায় gap: 24%; টেমপ্লেট স্পর্শ ছাড়া।

সতর্ক থেকো: {{ my_gap }} তার নিজস্ব প্রিন্ট একটি খালি স্ট্রিং। যদি আপনার নিয়ম হিসাবে রেন্ডার করে gap: ; এবং লেআউট নিয়ন্ত্রণ উপেক্ষা করে, অনুপস্থিত .size এবং .unit প্রায় সবসময় কেন। একই নীরবতা একটি পুনঃনামকরণ অনুসরণ করে: ক্ষেত্রের নাম পরে পরিবর্তন করুন এবং পুরানো টোকেনগুলি রেন্ডার করতে থাকে, শুধুমাত্র তাদের মধ্যে কিছুই নেই, তাই একই বৈঠকে CSS প্যানেল আপডেট করুন।

নির্বাচকদের বিকল্প #

স্লাইডারগুলি এলিমেন্টরের নির্বাচক প্রক্রিয়ার সাথেও কাজ করে, যা CSS প্যানেলের মধ্য দিয়ে যাওয়ার পরিবর্তে আপনার জন্য CSS লেখে। একটি স্লাইডারের জন্য, এলিমেন্টর একটি সম্পূর্ণ ঘোষণার পরিবর্তে একটি খালি মান ইনজেক্ট করে, তাই নির্মাতার প্লেইন সিলেক্টর ফিল্ড একা ব্যবহারযোগ্য নিয়ম তৈরি করে না। একটি কাস্টম নির্বাচক এন্ট্রি সম্পূর্ণ সম্পত্তি বহন করতে হবে, Elementor এর নিজস্ব স্থানধারক ব্যবহার করে:

'{{WRAPPER}} .team-row' => 'gap: {{SIZE}}{{UNIT}};'

বেশিরভাগ উইজেটের জন্য CSS প্যানেল টোকেন হল সহজ রুট; আপনি যখন এলিমেন্টর আউটপুট পরিচালনা করতে চান তখন নির্বাচক এন্ট্রির জন্য পৌঁছান।

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

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

হ্যান্ডেলটি টেনে আনুন বা একটি নম্বর টাইপ করুন এবং পূর্বরূপটি অবিলম্বে অনুসরণ করে। রেসপন্সিভ চালু থাকলে, ডিভাইস আইকন ডেস্কটপ, ট্যাবলেট এবং মোবাইল মানগুলির মধ্যে নিয়ন্ত্রণ পরিবর্তন করে, তাই একই ক্ষেত্র থেকে ফোনে একটি 40px ডেস্কটপ ফাঁক 16px-এ সঙ্কুচিত হতে পারে।

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

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

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

• সর্বদা উভয় অংশ মুদ্রণ। {{ my_gap.size }}{{ my_gap.unit }} পুরো সংযোগ হয়; বেয়ার ফিল্ডের নাম আপনাকে একটি খালি স্ট্রিং দেয়।
• মিন, ম্যাক্স এবং স্টেপকে প্রপার্টিতে মেলে। 1 ধাপে একটি 0,100 পরিসীমা একটি ফাঁক উপযুক্ত; একটি ব্যাসার্ধ নিয়ন্ত্রণ শুধুমাত্র 0 pi50 প্রয়োজন হতে পারে।
• শুধুমাত্র একক অফার যে অর্থপূর্ণ। একটি px-শুধু নিয়ন্ত্রণ একটির চেয়ে পরিষ্কার যেখানে % ভাঙা লেআউট তৈরি করে।
• CSS প্যানেল কাঠামোতে একটি ফলব্যাক রাখুন। নিয়মটি লিখুন যাতে উইজেটটি এখনও প্রথম ড্রপের ডিফল্ট মানতে সুন্দরভাবে লেখে।
• লেআউট মানগুলির জন্য প্রতিক্রিয়াশীল চালু করুন। ফাঁক এবং প্রস্থ প্রায় সবসময় একটি কঠোর মোবাইল সেটিং প্রয়োজন।
• নির্বাচক ক্ষেত্রের চেয়ে CSS প্যানেল টোকেন পছন্দ করুন। প্লেইন সিলেক্টর ফিল্ড স্লাইডারের জন্য শুধুমাত্র একটি বেয়ার মান ইনজেক্ট করে, যা সম্পূর্ণ ঘোষণা নয়।

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

মোড়ানো #

উইজেট বিল্ডার স্লাইডার ক্ষেত্রটি আপনার উইজেটের যেকোনো একক CSS দৈর্ঘ্যকে একটি নিয়ন্ত্রণে পরিণত করে যা সম্পাদক টেনে আনতে পারে: ক্ষেত্রের নাম দিন, পরিসর আবদ্ধ করুন এবং মুদ্রণ করুন {{ name.size }}{{ name.unit }} CSS প্যানেলে। এটা স্বাভাবিকভাবে সঙ্গে জোড়া মাত্রা ক্ষেত্র যখন একটি উইজেটের একক মানের পাশাপাশি চার-পার্শ্বযুক্ত ব্যবধানের প্রয়োজন হয়। বাকি অন্বেষণ মাস্টার অ্যাডঅন উইজেট এবং এক্সটেনশন, এবং দেখুন মূল্য পৃষ্ঠা প্রতিটি পরিকল্পনা অন্তর্ভুক্ত কি জন্য।