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