বিষয়বস্তুর সারণী
এলিমেন্টরের বিনামূল্যের সংস্করণ আপনাকে বেশিরভাগ টিউটোরিয়ালের চেয়ে বেশি ব্রেকপয়েন্ট দেয়: মোট সাতটি ডিভাইস ভিউ, প্রতিটিতে একটি সম্পাদনাযোগ্য পিক্সেল প্রস্থ, সমস্ত সাইট সেটিংস থেকে চালু করা হয়েছে। কোন প্রো লাইসেন্সের প্রয়োজন নেই। যেখানে নেটিভ সিস্টেম স্টপ হয় সেই সাতটি নির্দিষ্ট স্লটে। যদি আপনার ডিজাইনের একটি অষ্টম ভিউ বা ডিভাইসের প্রস্থের প্রয়োজন হয় যার নামযুক্ত স্লটগুলি ম্যাপ করে না, সেই ব্যবধানটিই বিনামূল্যে কাস্টম ব্রেকপয়েন্ট এক্সটেনশন মাস্টার অ্যাডনস হ্যান্ডেল থেকে। এটি প্রতিক্রিয়াশীল কাজের স্টাইলিং অর্ধেক কভার করে, যখন একটি এক্সটেনশন মত প্রদর্শন শর্তাবলী কোন বিভাগগুলি কোন ডিভাইসে আদৌ দেখাবে তা নির্ধারণ করে।
নীচে: এলিমেন্টর ফ্রি আসলে কী অন্তর্ভুক্ত করে (তিনটির বেশি ভিউ, পুরানো পোস্ট যাই দাবি করুক না কেন), কীভাবে অতিরিক্ত নেটিভ ব্রেকপয়েন্ট সক্রিয় করবেন এবং কীভাবে উপরে সত্যিকারের কাস্টম ব্রেকপয়েন্ট যোগ করবেন। সেই শেষ অংশটি 3টি ব্রেকপয়েন্ট পর্যন্ত বিনামূল্যে, মাস্টার অ্যাডনস প্রো-এর সাথে সীমাহীন।
এলিমেন্টর ফ্রি আসলে আপনাকে কী ব্রেকপয়েন্ট দেয়
প্রথমত, পৌরাণিক কাহিনী যা মারা যাবে না: এলিমেন্টরের অতিরিক্ত ব্রেকপয়েন্টগুলি এলিমেন্টর প্রো-এর পিছনে লক করা নেই। অনেক নিবন্ধ এখনও তারা বলে। যেহেতু এলিমেন্টর 3.4 অতিরিক্ত কাস্টম ব্রেকপয়েন্ট বৈশিষ্ট্য পাঠানো হয়েছে, বিনামূল্যে সংস্করণ সাতটি ডিভাইস ভিউ সমর্থন করে:
- মোবাইল পোর্ট্রেট: ডিফল্টরূপে 767px পর্যন্ত (সর্বদা সক্রিয়)
- মোবাইল ল্যান্ডস্কেপ: 880px পর্যন্ত
- ট্যাবলেট প্রতিকৃতি: 1024px পর্যন্ত (সর্বদা সক্রিয়)
- ট্যাবলেট ল্যান্ডস্কেপ: 1200px পর্যন্ত
- ল্যাপটপ: 1366px পর্যন্ত
- ডেস্কটপ: বেস ভিউ অন্য সব শাখা থেকে
- ওয়াইডস্ক্রিন: 2400px এবং তার বেশি (সেটের এক মিনিট-প্রস্থ ব্রেকপয়েন্ট)
এই পিক্সেল মানগুলির প্রতিটি সম্পাদনাযোগ্য। সাইট সেটিংস খুলুন, ট্যাবলেট পোর্ট্রেট কাটঅফ 1024px থেকে 900px এ পরিবর্তন করুন, সংরক্ষণ করুন, সম্পন্ন করুন। এলিমেন্টরের বিকাশকারী ডকুমেন্টেশন আপনি যদি মেকানিক্স চান তাহলে নীচে সর্বাধিক-প্রস্থের যুক্তি ব্যাখ্যা করে।
তাহলে ফ্রি সংস্করণ কি করতে পারে না? দুই জিনিস। আপনি একটি অষ্টম ব্রেকপয়েন্ট যোগ করতে পারবেন না, এবং আপনি নামযুক্ত স্লটের বাইরে পা রাখতে পারবেন না: ছয়টি অতিরিক্ত ভিউয়ের নির্দিষ্ট ভূমিকা রয়েছে এবং একবার সেগুলি ব্যবহার হয়ে গেলে, নেটিভ সিস্টেম পূর্ণ হয়ে যায়। সেই সিলিংটিই একটি ডেডিকেটেড ব্রেকপয়েন্ট প্লাগইন বিদ্যমান থাকার কারণ।
কিভাবে Elementor এর অতিরিক্ত ব্রেকপয়েন্ট সক্রিয় করবেন (বিনামূল্যে, কোন প্লাগইন নেই)
কিছু ইনস্টল করার আগে, Elementor ইতিমধ্যে আপনাকে যা দেয় তা চালু করুন। প্রায় এক মিনিট সময় লাগে:
- Elementor দিয়ে যেকোনো পৃষ্ঠা খুলুন এবং প্যানেলের উপরের-বাম কোণে হ্যামবার্গার মেনুতে ক্লিক করুন, তারপর নির্বাচন করুন সাইট সেটিংস.
- যাও লেআউট → ব্রেকপয়েন্ট.
- ক্লিক করুন সক্রিয় ব্রেকপয়েন্ট ক্ষেত্র এবং আপনি চান ভিউ যোগ করুন: মোবাইল ল্যান্ডস্কেপ, ট্যাবলেট ল্যান্ডস্কেপ, ল্যাপটপ, ওয়াইডস্ক্রিন।
- ডিফল্ট আপনার ডিজাইনের সাথে মেলে না তাহলে প্রতিটি ব্রেকপয়েন্টের অধীনে পিক্সেল মান সামঞ্জস্য করুন।
- আঘাত করা পরিবর্তন সংরক্ষণ করুন। Elementor তার CSS পুনরুত্পাদন করে এবং নতুন ভিউ রেসপন্সিভ মোডে উপস্থিত হয়।
যদি সাতটি ভিউ আপনার প্রকল্পকে কভার করে, এখানে থামুন। আপনি কিছুই ব্যয় করেননি এবং কিছুই ইনস্টল করেননি। আপনার যদি এর চেয়ে বেশি ভিউ বা ব্রেকপয়েন্টের প্রয়োজন হয় তবে নামযুক্ত স্লটগুলি প্রকাশ করতে পারে না তা পড়তে থাকুন।
এলিমেন্টরের সাতের বাইরে কাস্টম ব্রেকপয়েন্ট কীভাবে যোগ করবেন
এলিমেন্টরের সিলিং পেরিয়ে বিনামূল্যের রুট Elementor জন্য কাস্টম ব্রেকপয়েন্ট, মাস্টার অ্যাডনস দল দ্বারা নির্মিত একটি প্লাগইন। এটি এলিমেন্টরের পাশে নিজে থেকে চলে, অন্য কোন প্লাগইনের প্রয়োজন নেই। এটি সঙ্গে জোড়া মাস্টার অ্যাডনস আপনি যদি এটি ইতিমধ্যেই চালান, তাই আপনি আপনার উইজেটগুলির মতো একই ড্যাশবোর্ড থেকে ব্রেকপয়েন্টগুলি পরিচালনা করুন৷ বিনামূল্যের সংস্করণ প্রতিটি ডিভাইসের প্রস্থের উপর সঠিক পিক্সেল নিয়ন্ত্রণ সহ 3টি কাস্টম ব্রেকপয়েন্ট যোগ করে; মাস্টার অ্যাডনস প্রো ক্যাপটি সম্পূর্ণরূপে সরিয়ে দেয়।
ধাপ 1: প্লাগইন ইনস্টল করুন
আপনার ওয়ার্ডপ্রেস ড্যাশবোর্ডে, যান প্লাগইন → নতুন যোগ করুন এবং "Elementor এর জন্য কাস্টম ব্রেকপয়েন্ট" অনুসন্ধান করুন। এটি ইনস্টল এবং সক্রিয় করুন। আপনি যদি ইতিমধ্যেই মাস্টার অ্যাডঅন ব্যবহার করেন, আপনি মাস্টার অ্যাডঅন ড্যাশবোর্ডের এক্সটেনশন ট্যাব থেকে এটি চালু করতে পারেন; উভয় রুট একই সেটিংস পৃষ্ঠায় শেষ হয়।
ধাপ 2: ব্রেকপয়েন্ট পৃষ্ঠা খুলুন
আপনার ড্যাশবোর্ড মেনুতে একটি নতুন ব্রেকপয়েন্ট আইটেম উপস্থিত হয়। ক্লিক করুন। পৃষ্ঠাটি আপনার বর্তমানে সক্রিয় ব্রেকপয়েন্টগুলিকে তাদের রেঞ্জের সাথে তালিকাভুক্ত করে, আপনি Elementor-এর সাইট সেটিংসে যা কনফিগার করেছেন তার সাথে মিলে যায় এবং আপনাকে উপরে একটি নতুন ডিভাইস যোগ করার বিকল্প দেয়।
ধাপ 3: সর্বাধিক-প্রস্থ সহ একটি ব্রেকপয়েন্ট যোগ করুন
ডিভাইসটির নাম দিন এবং পিক্সেলে এর সর্বোচ্চ-প্রস্থ লিখুন। ছোট ফোন টার্গেট করতে, 600 টাইপ করুন এবং সংরক্ষণ করুন। প্লাগইনটি আপনার জন্য প্রতিবেশী ডিভাইসের সর্বনিম্ন-প্রস্থ সামঞ্জস্য করে, যাতে রেঞ্জগুলি কখনই ওভারল্যাপ না হয়: আপনার নতুন ছোট মোবাইল ভিউ 600px পর্যন্ত স্ক্রীন কভার করে এবং পরবর্তী ভিউ 601px থেকে শুরু হয়। বিনামূল্যের সংস্করণে আপনি এই কাস্টম ব্রেকপয়েন্টগুলির মধ্যে 3টি পর্যন্ত যোগ করতে পারেন; মাস্টার অ্যাডনস প্রো ব্যবহারকারীরা সীমাহীন ব্রেকপয়েন্ট এবং আমদানি/রপ্তানি পান।
ধাপ 4: এলিমেন্টরে নতুন ভিউ স্টাইল করুন
Elementor দিয়ে যেকোনো পৃষ্ঠা সম্পাদনা করুন এবং প্যানেলের নীচে প্রতিক্রিয়াশীল-মোড আইকনে ক্লিক করুন। আপনার কাস্টম ভিউ এখন ডিফল্টের পাশে ডিভাইস বারে বসে। এটি নির্বাচন করুন, একটি উপাদান চয়ন করুন এবং ফন্টের আকার, প্যাডিং বা কলাম গণনার মতো মান সেট করুন যা শুধুমাত্র সেই পিক্সেল পরিসরের মধ্যে প্রযোজ্য। আপডেটে ক্লিক করুন, তারপর স্টাইল ট্রিগার দেখতে আপনার ব্রাউজারের আকার পরিবর্তন করুন। ডিভাইস প্রতি স্টাইলিং এর গভীর ওয়াকথ্রু জন্য, আমাদের গাইড দেখুন এলিমেন্টর ব্রেকপয়েন্ট সহ প্রতিক্রিয়াশীল ডিজাইন.
বিনামূল্যে বনাম প্রো: প্রতিটি বিকল্প আপনাকে কতগুলি ব্রেকপয়েন্ট দেয়
যেকোন প্লাগইন ছবিতে প্রবেশ করার আগে এলিমেন্টর আপনাকে কী দেয় তা সহ এখানে তুলনা করা হল:
| বিকল্প | খরচ | আপনি কি পেতে | সীমা |
|---|---|---|---|
| এলিমেন্টর ফ্রি (নেটিভ) | বিনামূল্যে | 7টি নামযুক্ত ডিভাইস ভিউ, প্রতিটিতে একটি সম্পাদনাযোগ্য পিক্সেল প্রস্থ | 7 এর নির্দিষ্ট সেট, কোন নতুন স্লট নেই |
| এলিমেন্টরের জন্য কাস্টম ব্রেকপয়েন্ট (বিনামূল্যে) | বিনামূল্যে | আপনার নিজের নাম এবং সঠিক প্রস্থ সহ কাস্টম ব্রেকপয়েন্ট | 3টি কাস্টম ব্রেকপয়েন্ট |
| মাস্টার অ্যাডনস প্রো | পরিশোধিত | উপরের সবকিছু, প্লাস আমদানি এবং রপ্তানি | সীমাহীন |
বেশিরভাগ সাইটের জন্য, এলিমেন্টরের সাতটি ভিউ এবং 3টি কাস্টম স্তর প্রতিটি বাস্তব ব্যবধানকে কভার করে: একটি ছোট-ফোন ভিউ, একটি বিজোড় ট্যাবলেট প্রস্থ, একটি কিয়স্ক ডিসপ্লে৷ ক্লায়েন্ট ডিভাইসের তালিকা জাগলিং এজেন্সিগুলি হল যারা ফ্রি ক্যাপটি আঘাত করে এবং তারাই প্রো জন্য হয়। আপনি যদি এটিতে থাকাকালীন বিকল্পগুলির বিরুদ্ধে পুরো প্লাগইনটিকে ওজন করেন তবে আমাদের মাস্টার অ্যাডঅন বনাম আলটিমেট অ্যাডঅন তুলনা বিস্তৃত বৈশিষ্ট্য ম্যাচ আপ কভার।
যখন একটি কাস্টম ব্রেকপয়েন্ট আসলে একটি লেআউট ঠিক করে
একটি কাস্টম ব্রেকপয়েন্ট যোগ করার যোগ্য যখন একটি লেআউট দুটি বিদ্যমান দৃশ্যের মধ্যে ব্যবধানে ভেঙে যায়। ক্লাসিক কেস একটি 3-কলাম গ্রিড। এটি 1025px এর উপরে ডেস্কটপে ঠিক দেখায়। এলিমেন্টর 1024px ট্যাবলেট ভিউতে এটিকে 2 কলামে নামিয়ে দেয়। ল্যান্ডস্কেপে রাখা একটি বড় ট্যাবলেটে, একই 1024px ভিউ একটি প্রশস্ত খালি কলাম ছেড়ে যায় এবং স্থান নষ্ট করে।
992px এ একটি ব্রেকপয়েন্ট যোগ করুন, গ্রিডটিকে সেখানে 3টি কলামে সেট করুন এবং লেআউটটি অনুমান করার পরিবর্তে ডিভাইসের সাথে ফিট করে। একই পদক্ষেপটি একটি ছোট-ফোন দৃশ্যের জন্য কাজ করে যেখানে আপনি ফন্টের আকার এবং বোতাম প্যাডিংকে বাম্প আপ করেন যা 400px এর নিচে সঙ্কুচিত দেখায়, একটি পরিসর এমনকি এলিমেন্টরের মোবাইল পোর্ট্রেট ভিউকে এক বালতি হিসাবে বিবেচনা করা হয়।
ব্রেকপয়েন্টগুলি শর্তসাপেক্ষ প্রদর্শনের সাথেও ভাল যুক্ত হয়। যদি একটি বিভাগ শুধুমাত্র বড় স্ক্রিনে বোঝা যায়, একটি কাস্টম ব্রেকপয়েন্ট তার স্টাইলিং নিয়ন্ত্রণ করে প্রদর্শন শর্তাবলী এটি আদৌ প্রদর্শিত হবে কিনা তা নিয়ন্ত্রণ করে। দুটি একই প্রতিক্রিয়াশীল সমস্যার বিভিন্ন অর্ধেক সমাধান করে।
কাস্টম ব্রেকপয়েন্ট কি আপনার সাইটের গতি কমিয়ে দেয়?
মুষ্টিমেয় ব্রেকপয়েন্ট আপনার সাইটকে কোনোভাবেই ধীর করবে না একজন দর্শক লক্ষ্য করেন। প্রত্যেকে একটি স্ট্যান্ডার্ড CSS মিডিয়া ক্যোয়ারী যোগ করে এবং আপনি যে স্টাইলগুলি সেট করেন তা এলিমেন্টরের অন্তর্নির্মিত প্রতিক্রিয়াশীল শৈলীর মতোই লোড হয়। যোগ করা CSS একটি সাধারণ পৃষ্ঠার ওজনের পাশে ছোট।
সম্পাদক একটি ভিন্ন গল্প। প্রতিটি অতিরিক্ত ব্রেকপয়েন্ট মানে আরও একটি প্রতিক্রিয়াশীল প্যানেল এলিমেন্টরকে রেন্ডার করতে হবে, তাই 10 বা তার বেশি স্ট্যাক করা সম্পাদনা স্ক্রীনকে ভারী বোধ করতে পারে। আপনি আসলে স্টাইল করবেন শুধুমাত্র ভিউ যোগ করুন। মোট পাঁচ বা ছয়টি, ডিফল্ট অন্তর্ভুক্ত, প্রায় প্রতিটি প্রকল্পের জন্য প্রচুর। যদি গতি আপনার বিস্তৃত উদ্বেগ হয়, আমাদের গাইড কিভাবে Elementor ওয়েবসাইট গতি বাড়ানো যায় লোডের সময়ে আসলে প্রদর্শিত ফিক্সগুলিকে কভার করে৷।
যখন একটি কাস্টম ব্রেকপয়েন্ট যোগ করবেন না
কাস্টম ব্রেকপয়েন্ট প্রতিটি প্রতিক্রিয়াশীল বাগের জন্য একটি সমাধান নয়, এবং প্রথমে একটিতে পৌঁছানো প্রায়শই ভুল কল। যদি একটি একক উপাদান একটি স্ক্রীন আকারে খারাপ আচরণ করে, একটি লক্ষ্যযুক্ত নিয়ম কাস্টম সিএসএস সাধারণত একটি সম্পূর্ণ নতুন ডিভাইস স্তরের চেয়ে পরিষ্কার হয় যার পরে সর্বত্র স্টাইলিং প্রয়োজন।
এটি এড়িয়ে যাওয়ার জন্য আরও দুটি ক্ষেত্রে। যদি Elementor-এর সুপ্ত নেটিভ ভিউগুলির একটি সক্রিয় করা, বা সাইট সেটিংসে একটি ডিফল্ট পিক্সেল মান নাজ করা, সমস্যাটি সমাধান করে, পরিবর্তে এটি করুন; এটির কোন খরচ নেই এবং সম্পাদককে হালকা রাখে। এবং যদি সমস্যাটি সত্যিই হয় যে কোন বিষয়বস্তুটি কোন ডিভাইসে দেখায় তার পরিবর্তে এটি কীভাবে স্টাইল করা হয়েছে, এটি প্রদর্শনের অবস্থার জন্য একটি কাজ, অন্য ব্রেকপয়েন্ট নয়।
কাস্টম ব্রেকপয়েন্টগুলি মাস্টার অ্যাডঅন টুলকিটের বাকি অংশের পাশাপাশি বসে, বিনামূল্যের এক্সটেনশন থেকে থিম নির্মাতা, সমস্ত ফাঁক বন্ধ করার জন্য নির্মিত Elementor পাতা খোলা।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী
Elementor বিনামূল্যে কাস্টম ব্রেকপয়েন্ট আছে?
হ্যাঁ, বেশিরভাগ লোকের ধারণার চেয়ে বেশি। এলিমেন্টর ফ্রিতে সাতটি ডিভাইস ভিউ রয়েছে: মোবাইল পোর্ট্রেট, মোবাইল ল্যান্ডস্কেপ, ট্যাবলেট পোর্ট্রেট, ট্যাবলেট ল্যান্ডস্কেপ, ল্যাপটপ, ডেস্কটপ এবং ওয়াইডস্ক্রিন। আপনি সাইট সেটিংস → লেআউট → ব্রেকপয়েন্টে অতিরিক্তগুলি সক্রিয় করেন এবং প্রতিটি পিক্সেল মান সম্পাদনা করতে পারেন। ফ্রি এলিমেন্টর যা করতে পারে না তা হল সেই সাতটি নামযুক্ত স্লটের বাইরে ব্রেকপয়েন্ট যোগ করা; এর জন্য আপনার এলিমেন্টর প্লাগইনের জন্য বিনামূল্যে কাস্টম ব্রেকপয়েন্ট প্রয়োজন।
আমি কিভাবে Elementor এ একটি কাস্টম ব্রেকপয়েন্ট যোগ করব?
অন্তর্নির্মিত দৃশ্যগুলির জন্য, সাইট সেটিংস → লেআউট → ব্রেকপয়েন্টগুলি খুলুন, সক্রিয় ব্রেকপয়েন্ট ক্ষেত্রে আপনি যে দৃশ্যগুলি চান তা যোগ করুন এবং তাদের প্রস্থ সামঞ্জস্য করুন৷ Elementor এর সাতের বাইরে ব্রেকপয়েন্টের জন্য, Elementor প্লাগইনের জন্য বিনামূল্যে কাস্টম ব্রেকপয়েন্ট ইনস্টল করুন, এর ব্রেকপয়েন্ট পৃষ্ঠা খুলুন এবং একটি ডিভাইসের নাম এবং পিক্সেলে সর্বোচ্চ-প্রস্থ লিখুন, উদাহরণস্বরূপ ছোট ফোনের জন্য 600৷ নতুন ভিউ তখন এলিমেন্টর রেসপন্সিভ মোডে প্রদর্শিত হবে যা স্টাইলের জন্য প্রস্তুত।
এলিমেন্টরে আপনার কতগুলি ব্রেকপয়েন্ট থাকতে পারে?
এলিমেন্টর ফ্রি এবং প্রো উভয়ই সাতটি নেটিভ ডিভাইস ভিউতে টপ আউট। এলিমেন্টর প্লাগইনের জন্য কাস্টম ব্রেকপয়েন্ট বিনামূল্যে এর উপরে 3টি সত্যিকারের কাস্টম ব্রেকপয়েন্ট যোগ করে এবং মাস্টার অ্যাডনস প্রো সীমাহীন ব্রেকপয়েন্টের জন্য ক্যাপটি সরিয়ে দেয়।
কাস্টম ব্রেকপয়েন্টের জন্য কি Elementor Pro প্রয়োজন?
না, উভয় ক্ষেত্রেই। এলিমেন্টরের নিজস্ব অতিরিক্ত ব্রেকপয়েন্ট (মোবাইল ল্যান্ডস্কেপ, ট্যাবলেট ল্যান্ডস্কেপ, ল্যাপটপ, ওয়াইডস্ক্রিন) ফ্রি সংস্করণে পাঠানো হয় এবং এলিমেন্টর প্লাগইনের জন্য কাস্টম ব্রেকপয়েন্টগুলিও বিনামূল্যে। কোনো এলিমেন্টর প্রো লাইসেন্স কোথাও জড়িত নেই; শুধুমাত্র সীমাহীন কাস্টম ব্রেকপয়েন্ট মাস্টার অ্যাডনস প্রো-এর জন্য কল করে।
কাস্টম ব্রেকপয়েন্ট প্লাগইন কাজ করার জন্য মাস্টার অ্যাডঅন প্রয়োজন?
না। এটি শুধুমাত্র Elementor ইনস্টল সহ একটি স্বতন্ত্র প্লাগইন হিসাবে কাজ করে। আপনি যদি উভয়ই চালান তবে এটি মাস্টার অ্যাডনগুলির সাথেও সংহত হয়, তাই আপনি আপনার উইজেট এবং এক্সটেনশনগুলির মতো একই ড্যাশবোর্ড থেকে ব্রেকপয়েন্টগুলি পরিচালনা করেন এবং মাস্টার অ্যাডনস প্রো সীমাহীন ব্রেকপয়েন্টগুলিকে আনলক করে৷।
কাস্টম ব্রেকপয়েন্ট কি আমার ওয়েবসাইটকে ধীর করে দেয়?
না। প্রতিটি ব্রেকপয়েন্ট শুধুমাত্র একটি লাইটওয়েট CSS মিডিয়া ক্যোয়ারী যোগ করে এবং স্টাইলগুলি এলিমেন্টরের অন্তর্নির্মিত প্রতিক্রিয়াশীল শৈলীর মতো লোড হয়। অনেক ব্রেকপয়েন্ট স্ট্যাক করা সম্পাদককে ভারী বোধ করতে পারে, তাই শুধুমাত্র সেই ভিউ যোগ করুন যা আপনি আসলে স্টাইল করবেন।
সম্পর্কিত পড়া
