মাস্টার অ্যাডঅন দ্বারা কাস্টম এলিমেন্টর ব্রেকপয়েন্ট সেটআপ এবং কনফিগারেশন #
বিনামূল্যে Elementor জন্য কাস্টম ব্রেকপয়েন্ট মাস্টার অ্যাডনস থেকে প্লাগইন (3টি কাস্টম ব্রেকপয়েন্ট বিনামূল্যে, মাস্টার অ্যাডনস প্রো সহ সীমাহীন) আপনাকে তৈরি করতে দেয় সম্পূর্ণরূপে প্রতিক্রিয়াশীল ওয়েবসাইট লেআউট এলিমেন্টরের অন্তর্নির্মিত ডিভাইস ভিউয়ের বাইরে স্ক্রিনের আকারের জন্য অপ্টিমাইজ করা হয়েছে। এটি যেকোনো ডিভাইস জুড়ে একটি সামঞ্জস্যপূর্ণ এবং উচ্চ-মানের ব্যবহারকারীর অভিজ্ঞতা নিশ্চিত করে।
কাস্টম এলিমেন্টর ব্রেকপয়েন্ট ব্যবহার করে, আপনি করতে পারেন:
- প্রয়োজন অনুযায়ী যতগুলি কাস্টম ব্রেকপয়েন্ট (স্ক্রীন প্রস্থ) যোগ করুন (মাস্টার অ্যাডনস প্রো সহ সীমাহীন)।
- ছোট মোবাইল, বড় ট্যাবলেট বা কাস্টম স্ক্রিনের আকারের মতো ডিভাইসগুলির জন্য নির্দিষ্ট লেআউট, ফন্টের আকার, ব্যবধান এবং প্রান্তিককরণ সংজ্ঞায়িত করুন।
- সুনির্দিষ্ট পিক্সেল প্রস্থে এলিমেন্টরের ডিফল্ট প্রতিক্রিয়াশীল আচরণকে ওভাররাইড করুন।
কাস্টম এলিমেন্টর ব্রেকপয়েন্ট কি? #
কাস্টম এলিমেন্টর ব্রেকপয়েন্টগুলি অতিরিক্ত, ব্যবহারকারী-সংজ্ঞায়িত স্ক্রীন প্রস্থ যা আপনার লেআউটকে এলিমেন্টরের অন্তর্নির্মিত ভিউ কভার করে না। এলিমেন্টরের সাতটি ডিভাইস ভিউ রয়েছে (মোবাইল পোর্ট্রেট, মোবাইল ল্যান্ডস্কেপ, ট্যাবলেট পোর্ট্রেট, ট্যাবলেট ল্যান্ডস্কেপ, ল্যাপটপ, ডেস্কটপ এবং ওয়াইডস্ক্রিন)। একটি কাস্টম ব্রেকপয়েন্ট আপনার বেছে নেওয়া সঠিক সর্বোচ্চ প্রস্থে আরেকটি যোগ করে, উদাহরণস্বরূপ একটি 600px ছোট-মোবাইল ভিউ। মাস্টার অ্যাডনস ফ্রি প্ল্যানে 3টি পর্যন্ত কাস্টম ব্রেকপয়েন্ট এবং প্রো-এর সাথে সীমাহীন ব্রেকপয়েন্ট যোগ করে, যা আপনাকে কোড স্পর্শ না করেই প্রতিক্রিয়াশীল ডিজাইনের উপর সুনির্দিষ্ট নিয়ন্ত্রণ দেয়।
সুতরাং, আসুন দেখি কিভাবে এই বৈশিষ্ট্যটি সেট আপ এবং কনফিগার করতে হয়।
কাস্টম এলিমেন্টর ব্রেকপয়েন্ট সেট আপ করা হচ্ছে #
দ্রুত উত্তর: থেকে কাস্টম ব্রেকপয়েন্ট এক্সটেনশন ইনস্টল করুন মাস্টার অ্যাডঅন > এক্সটেনশন, নতুন খুলুন ব্রেকপয়েন্ট মাস্টার অ্যাডঅন মেনুর অধীনে পৃষ্ঠা, তারপর একটি লিখুন সর্বোচ্চ প্রস্থ প্রতিটি ডিভাইসের আকারের জন্য পিক্সেলে আপনি লক্ষ্য করতে চান (উদাহরণস্বরূপ, ছোট মোবাইলের জন্য 600px)।
আপনার কাস্টম ব্রেকপয়েন্ট ইনস্টল এবং সংজ্ঞায়িত করতে এই পদক্ষেপগুলি অনুসরণ করুন৷।
ধাপ 1: এক্সটেনশন ইনস্টল এবং সক্রিয় করুন #
- নেভিগেট করুন মাস্টার অ্যাডনস আপনার ওয়ার্ডপ্রেস ড্যাশবোর্ডে মেনু।
- যাও এক্সটেনশন ট্যাব।
- খুঁজে "কাস্টম ব্রেকপয়েন্টস" বিকল্প এবং আপনার ওয়েবসাইটে এটি ইনস্টল এবং সক্রিয় করতে ডাউনলোড বোতামে ক্লিক করুন।
ধাপ 2: ব্রেকপয়েন্ট সেটিংস অ্যাক্সেস করুন #
- ওয়ার্ডপ্রেস ড্যাশবোর্ডে, হোভার ওভার মাস্টার অ্যাডনস মেনু।
- শিরোনাম একটি নতুন মেনু আইটেম “ব্রেকপয়েন্টস” প্রদর্শিত হবে। এটিতে ক্লিক করুন। এটি আপনাকে কাস্টম ব্রেকপয়েন্ট ইনপুট পৃষ্ঠায় পুনঃনির্দেশিত করবে।
ধাপ 3: কাস্টম ব্রেকপয়েন্ট যোগ করুন #
ব্রেকপয়েন্ট ইনপুট পৃষ্ঠায়, আপনি আপনার সক্রিয় এলিমেন্টর ব্রেকপয়েন্ট এবং তাদের পিক্সেল রেঞ্জ দেখতে পাবেন।
একটি নতুন কাস্টম ব্রেকপয়েন্ট যোগ করতে, শুধুমাত্র সেট করতে ইনপুট ক্ষেত্র ব্যবহার করুন সর্বোচ্চ প্রস্থ (পিক্সেলে)।
উদাহরণস্বরূপ, ছোট মোবাইল ডিভাইস লক্ষ্য করতে, লিখুন 600px সর্বাধিক প্রস্থ হিসাবে।
সংরক্ষণ করার পরে, সিস্টেমটি স্বয়ংক্রিয়ভাবে পরবর্তী ডিফল্ট ব্রেকপয়েন্টের জন্য মিন-প্রস্থ সামঞ্জস্য করবে। উপরের উদাহরণে, "ছোট মোবাইল" ব্রেকপয়েন্ট সমস্ত স্ক্রিনে প্রযোজ্য হবে৷ 600px এর কম বা সমান, যখন ডিফল্ট “Mobile” ব্রেকপয়েন্ট শুরু হবে 601px এবং ট্যাবলেট ব্রেকপয়েন্টের ন্যূনতম প্রস্থে শেষ করুন।
আপনি এই পৃষ্ঠা থেকে প্রয়োজন অনুযায়ী ব্রেকপয়েন্ট যোগ বা সরাতে পারেন।
কাস্টম এলিমেন্টর ব্রেকপয়েন্ট ব্যবহার করে #
একবার মাস্টার অ্যাডঅন সেটিংসে কনফিগার করা হলে, কাস্টম ব্রেকপয়েন্টগুলি সরাসরি এলিমেন্টর পৃষ্ঠা সম্পাদকে উপলব্ধ হয়।
ধাপ 1: এলিমেন্টরে প্রতিক্রিয়াশীল মোড খুলুন #
যেকোনো পেজে গিয়ে ক্লিক করুন “Elementor দিয়ে সম্পাদনা করুন.” ক্লিক করুন প্রতিক্রিয়াশীল মোড প্যানেলের নীচে বাম দিকে আইকন (সাধারণত একটি মনিটর এবং ফোন আইকন)।
ধাপ 2: একটি কাস্টম ব্রেকপয়েন্ট নির্বাচন করুন #
উপরের বারটি আপনার তৈরি করা কাস্টমগুলি সহ সমস্ত উপলব্ধ ব্রেকপয়েন্ট প্রদর্শন করবে (যেমন, "ছোট মোবাইল")।
আপনার উপর ক্লিক করুন কাস্টম ব্রেকপয়েন্ট সেই নির্দিষ্ট স্ক্রীন আকারে সম্পাদকের দৃশ্য পরিবর্তন করতে।
ধাপ 3: কাস্টম শৈলী প্রয়োগ করুন #
যেকোনো উপাদান নির্বাচন করুন (যেমন, একটি শিরোনাম উইজেট)।
উপাদান এর যান শৈলী ট্যাব।
ক্লিক করুন প্রতিক্রিয়াশীল আইকন (ডেস্কটপ মনিটর) যেকোনো স্টাইল সেটিং এর পাশে, যেমন টাইপোগ্রাফি > আকার বা বিষয়বস্তু > প্রান্তিককরণ.
সেই ব্রেকপয়েন্টের জন্য একটি নির্দিষ্ট মান সংজ্ঞায়িত করুন (যেমন, ফন্টের আকার সেট করুন 20px)। এই মানটি তখনই প্রযোজ্য হবে যখন ব্রাউজারের প্রস্থ সেই কাস্টম ব্রেকপয়েন্টের জন্য নির্ধারিত সীমার মধ্যে থাকে।
ধাপ 4: সংরক্ষণ করুন এবং পূর্বরূপ দেখুন #
একবার আপনি সমস্ত প্রয়োজনীয় ব্রেকপয়েন্টের জন্য আপনার প্রতিক্রিয়াশীল শৈলীগুলি সংজ্ঞায়িত করার পরে, ক্লিক করুন হালনাগাদ পাতা সংরক্ষণ করতে।
পৃষ্ঠাটি লাইভ প্রিভিউ করুন এবং আপনার কাস্টম ব্রেকপয়েন্টগুলি আপনার সংজ্ঞায়িত অনন্য শৈলীগুলিকে ট্রিগার করতে দেখতে আপনার ব্রাউজার উইন্ডোর আকার পরিবর্তন করুন৷।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #
এলিমেন্টরে আমি কতগুলি কাস্টম ব্রেকপয়েন্ট যোগ করতে পারি?
মাস্টার অ্যাডনস ফ্রি প্ল্যানে 3টি পর্যন্ত কাস্টম ব্রেকপয়েন্ট এবং এর সাথে সীমাহীন ব্রেকপয়েন্ট যোগ করে মাস্টার অ্যাডনস প্রো। প্রতিটি ব্রেকপয়েন্ট হল একটি অতিরিক্ত সর্বোচ্চ-প্রস্থ স্ক্রীন সাইজ যা এলিমেন্টরের অন্তর্নির্মিত ডিভাইস ভিউগুলির উপরে স্তরযুক্ত সম্পূর্ণরূপে প্রতিক্রিয়াশীল লেআউট.
আমি কিভাবে Elementor এ একটি কাস্টম ব্রেকপয়েন্ট যোগ করব?
মাস্টার অ্যাডনস এক্সটেনশন ট্যাব থেকে কাস্টম ব্রেকপয়েন্ট এক্সটেনশন ইনস্টল করুন, মাস্টার অ্যাডনস মেনুর অধীনে নতুন ব্রেকপয়েন্ট পৃষ্ঠা খুলুন এবং পিক্সেলে একটি সর্বোচ্চ-প্রস্থ লিখুন 1 উদাহরণস্বরূপ ছোট মোবাইলের জন্য 600px। আপনি সংরক্ষণ করার পরে, নতুন ব্রেকপয়েন্ট এলিমেন্টরের প্রতিক্রিয়াশীল মোডে উপস্থিত হবে যা শৈলীর জন্য প্রস্তুত।
কাস্টম ব্রেকপয়েন্টের জন্য কি Elementor Pro প্রয়োজন?
না। কাস্টম ব্রেকপয়েন্ট হল a মাস্টার অ্যাডঅন প্লাগইন, একটি Elementor Pro বৈশিষ্ট্য নয়। বিনামূল্যের কাস্টম ব্রেকপয়েন্ট প্লাগইন আপনাকে 3টি পর্যন্ত কাস্টম ব্রেকপয়েন্ট দেয় এবং শুধুমাত্র উচ্চ সীমার জন্য মাস্টার অ্যাডঅন প্রো প্রয়োজন।
আমাকে কি প্রতিটি ব্রেকপয়েন্টের জন্য একটি মিনিট-প্রস্থ সেট করতে হবে?
না। আপনি শুধুমাত্র সর্বোচ্চ-প্রস্থ লিখুন। মাস্টার অ্যাডঅনগুলি স্বয়ংক্রিয়ভাবে পরবর্তী ব্রেকপয়েন্টের মিন-প্রস্থ সামঞ্জস্য করে যাতে রেঞ্জগুলি কখনই ওভারল্যাপ না হয় উদাহরণস্বরূপ, একটি 600px ছোট-মোবাইল ব্রেকপয়েন্ট ডিফল্ট মোবাইল ভিউ 601px থেকে শুরু করে।
কাস্টম ব্রেকপয়েন্ট কি আমার ওয়েবসাইটকে ধীর করে দেয়?
না। ব্রেকপয়েন্টগুলি শুধুমাত্র স্ট্যান্ডার্ড CSS মিডিয়া কোয়েরি যোগ করে, যেগুলি হালকা ওজনের, এবং আপনি যে স্টাইলগুলি সেট করেছেন তা এলিমেন্টরের অন্তর্নির্মিত প্রতিক্রিয়াশীল শৈলীগুলির মতোই লোড হয়৷ সাধারণ অনুসরণ এলিমেন্টর গতির সর্বোত্তম অনুশীলন আপনি কতগুলি ব্রেকপয়েন্ট ব্যবহার করুন না কেন পৃষ্ঠাটি দ্রুত রাখে।
Elementor এর অন্তর্নির্মিত ব্রেকপয়েন্ট এবং একটি লাইভ ডেমোর সাথে তুলনা করার জন্য, দেখুন কাস্টম ব্রেকপয়েন্ট প্লাগইন পৃষ্ঠা.
