স্লাইড-আউট প্যানেল এবং মেনু (প্রো) এর জন্য এলিমেন্টর অফ-ক্যানভাস উইজেট
অফ-ক্যানভাস কন্টেন্ট হল একটি মাস্টার অ্যাডনস প্রো উইজেট যা পৃষ্ঠায় একটি বোতাম রাখে এবং যখন একজন দর্শক এটিতে ক্লিক করে তখন একটি প্যানেল খোলে। প্যানেলটি একটি সংরক্ষিত এলিমেন্টর টেমপ্লেট দেখায়, যাতে আপনি এটির ভিতরে একটি মেনু, একটি পরিচিতি ফর্ম, ফিল্টার বা একটি প্রচার রাখতে পারেন এবং অন্যান্য পৃষ্ঠাগুলিতে একই টেমপ্লেটটি পুনরায় ব্যবহার করতে পারেন৷ প্যানেলটি কোথায় প্রদর্শিত হবে, এটি কীভাবে অ্যানিমেট হবে এবং বোতামটি কেমন দেখাচ্ছে তা চয়ন করুন৷ দর্শকরা ওভারলে ক্লিক করে বা Esc টিপে ক্লোজ আইকন দিয়ে এটি বন্ধ করে।
ফ্রি এলিমেন্টরের কোনো অফ-ক্যানভাস উইজেট নেই। Elementor Pro সংস্করণ 3.22-এ একটি যোগ করেছে এবং এটির জন্য ফ্লেক্সবক্স কন্টেইনার এবং নেস্টেড এলিমেন্ট বৈশিষ্ট্যগুলি চালু করা প্রয়োজন৷ এই উইজেটটি হল মাস্টার অ্যাডনস প্রো বিকল্প: এটি যেকোন সংরক্ষিত টেমপ্লেট খোলে, যেকোনো দিক থেকে, একটি বোতামের পিছনে আপনি একবার স্টাইল করেন।
এলিমেন্টরে একটি অফ-ক্যানভাস প্যানেল কীভাবে যুক্ত করবেন
আপনি Elementor এবং একটি সক্রিয় প্রয়োজন মাস্টার অ্যাডনস প্রো লাইসেন্স।
- যাও টেমপ্লেট, সংরক্ষিত টেমপ্লেট, একটি টেমপ্লেট তৈরি করুন, প্যানেলের বিষয়বস্তু তৈরি করুন এবং এটি প্রকাশ করুন।
- পৃষ্ঠাটি সম্পাদনা করুন, অনুসন্ধান করুন অফ-ক্যানভাস সামগ্রী এবং বোতামটি যেখানে উপস্থিত হওয়া উচিত সেখানে টেনে আনুন।
- মধ্যে টেমপ্লেট নির্বাচন করুন, আপনার সংরক্ষিত টেমপ্লেট চয়ন করুন।
- একটি বাছাই অবস্থান এবং প্রস্থ বা উচ্চতা সেট করুন।
- একটি প্রবেশ অ্যানিমেশন এবং সময়কাল চয়ন করুন।
- শিরোনাম বা আইকন বোতামটি সেট করুন, তারপর স্টাইল ট্যাবে বোতাম, হেডার এবং ধারকটি স্টাইল করুন।
দেখুন অফ-ক্যানভাস সামগ্রী সেটিংস প্রতিটি বিকল্পের জন্য গাইড।
এক নজরে অফ-ক্যানভাস সামগ্রী
| সেটিং | এটা কি করে |
|---|---|
| বিষয়বস্তুর উৎস | একটি সংরক্ষিত এলিমেন্টর টেমপ্লেট: পৃষ্ঠা, বিভাগ বা ধারক (ড্রপডাউন কিট ছাড়া প্রতিটি লাইব্রেরি আইটেম তালিকাভুক্ত করে) |
| পদ | ডান, বাম, উপরে, নীচে, মধ্য, আপেক্ষিক (বোতামের নীচে একটি ড্রপডাউন) |
| প্রবেশদ্বার অ্যানিমেশন | ফেইড, স্লাইড বা গ্রো; আপেক্ষিক সমর্থন শুধুমাত্র ফেইড |
| প্রবেশের ধরন | কভার পৃষ্ঠার উপর প্যানেল স্লাইড; পুশ পৃষ্ঠাটি জুড়ে নিয়ে যায়। উপরের, বাম এবং ডানের জন্য পুশ দেওয়া হয় |
| আকার | বাম, ডান, মধ্য এবং আপেক্ষিক জন্য px, % বা vw-এ প্রস্থ; শীর্ষ, নীচে, মধ্য এবং আপেক্ষিক জন্য px, % বা vh-এ উচ্চতা; উভয় ডিভাইস প্রতি |
| সঙ্গে বন্ধ | ক্লোজ আইকন, ওভারলেতে একটি ক্লিক বা Esc কী; ফোকাসড ক্লোজ আইকনে এন্টার বা স্পেসও কাজ করে |
| অতিরিক্ত | ডিফল্টরূপে খুলুন, সেকেন্ডে অ্যানিমেশনের সময়কাল, বিপরীত শিরোনাম সহ হেডার শিরোনাম, খোলার সময় পৃষ্ঠা স্ক্রোল লক, পাঠ্য, আইকন বা উভয় সহ একটি স্টাইলযোগ্য ট্রিগার বোতাম |
| থেকে খোলে | শুধুমাত্র উইজেটের নিজস্ব বোতাম (কোন CSS নির্বাচক বা বাহ্যিক ট্রিগার নেই) |
| চাহিদা | এলিমেন্টর (ফ্রি বা প্রো) প্লাস মাস্টার অ্যাডনস প্রো |
প্যানেলের অবস্থান, আকার এবং অ্যানিমেশন
অবস্থান ডান, বাম, উপরে, নীচে, মধ্য এবং আপেক্ষিক অফার করে। বাম, ডান এবং মধ্য প্যানেলগুলি px, % বা vw-এ একটি প্রস্থ পায় এবং শীর্ষ, নীচে এবং মধ্য প্যানেলগুলি px, % বা vh-এ উচ্চতা পায়, প্রতিটি ডিভাইস প্রতি সামঞ্জস্যযোগ্য। প্রবেশ অ্যানিমেশন ফেইড, স্লাইড বা গ্রো, এবং শুধুমাত্র ফেইড রিলেটিভের সাথে কাজ করে। বাম, ডান এবং শীর্ষ প্যানেল এছাড়াও একটি আছে প্রবেশের ধরন কভার বা পুশ। সেট অ্যানিমেশন সময়কাল সেকেন্ডের মধ্যে, এবং চালু করুন ডিফল্টরূপে খুলুন যদি প্যানেল খোলা শুরু করা উচিত।
কভার এবং পুশ হল দুটি প্রবেশের ধরন। কভারের সাথে প্যানেলটি পৃষ্ঠার উপর স্লাইড করে এবং ওভারলে এর পিছনে যা আছে তা ম্লান করে দেয়। পুশের সাথে পুরো পৃষ্ঠাটি প্যানেলের প্রস্থ দ্বারা জুড়ে চলে, তাই বিষয়বস্তু মেনুর পাশে দৃশ্যমান থাকে। পুশ শীর্ষ, বাম এবং ডান প্যানেলের জন্য উপলব্ধ; নীচে, মধ্য এবং আপেক্ষিক সবসময় আবরণ।
- ছোট পর্দার জন্য আপনার সাইট মেনু সহ একটি বাম বা ডান প্যানেল।
- একটি সংক্ষিপ্ত ঘোষণা বা অনুসন্ধান ফর্মের জন্য একটি শীর্ষ প্যানেল৷।
- একটি সাইনআপ ফর্মের জন্য একটি সাধারণ মডেল হিসাবে একটি মধ্যম প্যানেল৷।
ট্রিগার বোতাম, হেডার এবং কন্টেইনার স্টাইলিং
ট্রিগার বোতামটি আইকন দূরত্ব এবং সারিবদ্ধ সেটিংস সহ একটি শিরোনাম, একটি আইকন বা উভয়ই দেখাতে পারে। সাধারণ এবং হোভারের জন্য এর রঙ, পটভূমির রঙ এবং বর্ডার কালার, প্লাস বক্স শ্যাডো, টাইপোগ্রাফি, এসভিজি সাইজ, প্যাডিং, বর্ডার টাইপ এবং বর্ডার রেডিয়াস স্টাইল করুন। প্যানেলের ভিতরে, হেডার বিভাগটি ক্লোজ আইকন এবং ঐচ্ছিক শিরোনাম শিরোনাম স্টাইল করে এবং বিপরীত শিরোনাম তাদের স্থান অদলবদল করে। দ্য ধারক বিভাগটি প্যানেলের পটভূমি, সীমানা, প্যাডিং, ওভারলে রঙ এবং স্ক্রলবারের রঙ এবং প্রস্থ সেট করে।
- হেডারে একটি আইকন-শুধু হ্যামবার্গার বোতাম।
- একটি “আমাদের সাথে যোগাযোগ করুন" পাঠ্য বোতাম যা একটি ফর্ম খোলে৷।
- একটি ব্র্যান্ডেড ওভারলে রঙ যা প্যানেলের পিছনের পৃষ্ঠাটিকে ম্লান করে দেয়।
এলিমেন্টর প্রো অফ-ক্যানভাস বনাম মাস্টার অ্যাডঅন অফ-ক্যানভাস সামগ্রী
একটি অফ-ক্যানভাস মেনু সবচেয়ে সাধারণ ব্যবহার। এই উইজেটটি নিজেই মেনু তৈরি করে না, তাই আপনি প্রথমে একটি টেমপ্লেটে একটি মেনু উইজেট রাখুন। আপনার যদি শুধুমাত্র মেনুর প্রয়োজন হয়, মাস্টার অ্যাডঅন নেভি মেনু উইজেটে প্রো-তে অফ-ক্যানভাস টাইপ সহ একটি হ্যামবার্গার লেআউট রয়েছে, যা টেমপ্লেট ধাপটি এড়িয়ে যায়। অফ-ক্যানভাস সামগ্রী ব্যবহার করুন যখন প্যানেলে একটি মেনু যেমন লোগো, যোগাযোগের বিবরণ এবং সামাজিক লিঙ্কগুলির চেয়ে বেশি রাখা উচিত।
| বৈশিষ্ট্য | এলিমেন্টর প্রো অফ-ক্যানভাস | মাস্টার অ্যাডঅন অফ-ক্যানভাস সামগ্রী |
|---|---|---|
| দাম | এলিমেন্টর প্রো প্রয়োজন | মাস্টার অ্যাডনস প্রো প্রয়োজন |
| প্যানেল বিষয়বস্তু | এডিটিং মোডে উইজেটের ভিতরে তৈরি | একটি সংরক্ষিত এলিমেন্টর টেমপ্লেট আপনি পুনরায় ব্যবহার করতে পারেন |
| এটা কিভাবে খোলে | অফ-ক্যানভাস অ্যাকশন ব্যবহার করে যেকোনো বোতাম বা লিঙ্ক | উইজেটের নিজস্ব ট্রিগার বোতাম |
| অবস্থান | অনুভূমিক এবং উল্লম্ব শুরু, কেন্দ্র বা শেষ | ডান, বাম, উপরে, নীচে, মধ্য বা আপেক্ষিক |
| অ্যানিমেশন | প্রবেশ এবং প্রস্থান অ্যানিমেশন | কভার বা পুশ সহ ফেইড, স্লাইড বা গ্রো |
| বন্ধ | ওভারলে এবং Esc, প্রতিটি বন্ধ করা যেতে পারে; পৃষ্ঠা স্ক্রোল লক করতে পারেন | আইকন, ওভারলে ক্লিক বা Esc বন্ধ করুন |
| অন্তর্নির্মিত হেডার | না | হেডার শিরোনাম এবং বন্ধ আইকন |
| ডিফল্টরূপে খুলুন | একটি উইজেট সেটিং নয় | হ্যাঁ |
এলিমেন্টর প্রো জয়ী হয় যখন পৃষ্ঠার যেকোনো লিঙ্ক প্যানেল খুলবে বা আপনি যখন অ্যানিমেশন থেকে প্রস্থান করতে চান। অনেক পৃষ্ঠায় একটি রেডিমেড বোতামের পিছনে একটি টেমপ্লেট উপস্থিত হলে মাস্টার অ্যাডঅনগুলি ফিট হয়৷ একটি অনুসন্ধান প্যানেলের জন্য, এছাড়াও দেখুন অনুসন্ধান উইজেট।
এলিমেন্টরে কীভাবে একটি অফ-ক্যানভাস মেনু তৈরি করবেন
একটি অফ-ক্যানভাস মেনু সবচেয়ে সাধারণ ব্যবহার। উইজেট নিজেই মেনু তৈরি করে না, তাই আপনি প্রথমে একটি টেমপ্লেটে একটি মেনু উইজেট রাখুন।
- একটি সংরক্ষিত টেমপ্লেট তৈরি করুন এবং একটি মেনু উইজেট যোগ করুন, যেমন বিনামূল্যের মাস্টার অ্যাডঅন নেভি মেনু একটি উল্লম্ব বিন্যাসে সেট করুন।
- টেমপ্লেট প্রকাশ করুন।
- আপনার হেডারে, অফ-ক্যানভাস সামগ্রী যোগ করুন এবং সেই টেমপ্লেটটি নির্বাচন করুন।
- বাম বা ডানে অবস্থান সেট করুন, প্রস্থ প্রায় 320px এবং প্রবেশদ্বার অ্যানিমেশন স্লাইড করুন।
- শো শিরোনাম বন্ধ করুন, আইকন দেখান চালু করুন এবং একটি বার আইকন চয়ন করুন যাতে বোতামটি হ্যামবার্গারের মতো দেখায়।
- শুধুমাত্র ট্যাবলেট এবং মোবাইলে এই বোতামটি দেখানোর জন্য Elementor এর প্রতিক্রিয়াশীল দৃশ্যমানতা ব্যবহার করুন যদি ডেস্কটপ হেডার তার স্বাভাবিক মেনু রাখে।
সম্পর্কিত উইজেট: নেভি মেনু প্যানেলের ভিতরে মেনুর জন্য, মেগা মেনু বড় হেডার মেনুর জন্য এক্সটেনশন, পপআপ নির্মাতা সময়মত বা প্রস্থান-উদ্দেশ্য স্তরের জন্য, ট্যাব জায়গায় বিষয়বস্তু স্যুইচ করার জন্য, এবং প্রদর্শন শর্তাবলী শুধুমাত্র নির্বাচিত পৃষ্ঠাগুলিতে ট্রিগার দেখানোর জন্য।
এলিমেন্টরে ফুল-স্ক্রিন মেনু
একটি পূর্ণ-স্ক্রীন মেনু হল মধ্যম অবস্থান যার প্রস্থ 100vw এবং উচ্চতা 100vh সেট করা হয়। এটির ভিতরে একটি বড় উল্লম্ব মেনু সহ একটি টেমপ্লেট রাখুন, ফেইড এন্ট্রান্সটি বেছে নিন যাতে স্তরটি জায়গায় উপস্থিত হয় এবং ধারকটিকে একটি শক্ত পটভূমি দিন যাতে কিছুই দেখা না যায়। ক্লোজ আইকনটি প্যানেল হেডারে বসে এবং Esc কী স্তরটিকেও বন্ধ করে দেয়।
স্টাইলশীট থেকে একটি বিশদ: প্যানেলগুলি ভিউপোর্টের 90% এ ক্যাপ করা হয়েছে, তাই একটি 100vw বাই 100vh প্যানেল সর্বত্র একটি মার্জিন ছেড়ে যায়। ক্যাপটি সরাতে পৃষ্ঠার কাস্টম CSS-এ এই নিয়মটি যোগ করুন:
.jltma-offcanvas-wrap .jltma-offcanvas-content { max-width: 100% !important; max-height: 100% !important; }
স্ক্রিনশট সহ ধাপে ধাপে রয়েছে এলিমেন্টরে কীভাবে একটি পূর্ণ-স্ক্রীন মেনু তৈরি করবেন.
স্লাইড-আউট সাইড মেনু (সাইডবার নেভিগেশন)
একটি পাশের মেনুর জন্য, বাম বা ডানে অবস্থান এবং px-এ প্রস্থ সেট করুন, একটি মেনুর জন্য প্রায় 320 px এবং যোগাযোগের বিবরণ সহ একটি প্যানেলের জন্য 400 px। পৃষ্ঠাটি কখন সরে যাবে এবং পঠনযোগ্য থাকবে তা পুশ চয়ন করুন, বা প্যানেলটি উপরে বসলে কভার করুন। টেমপ্লেট ধরে রাখতে পারে নেভি মেনু উইজেট এর উল্লম্ব বিন্যাসে, একটি লোগো, কয়েকটি যোগাযোগ লাইন এবং একটি বোতাম।
একটি সাইডবার যা সব সময় দৃশ্যমান থাকে একটি ভিন্ন কাজ। একটি দুই-কলামের কন্টেইনার লেআউট দিয়ে এটি তৈরি করুন এবং অনুরোধে স্লাইড করা প্যানেলের জন্য এই উইজেটটি রাখুন। দ্য এলিমেন্টর সাইড মেনু গাইড উভয় কভার।
অফ-ক্যানভাস প্যানেলের উদাহরণ
প্যানেল সরানো দেখতে নীচের প্রতিটি ডেমো খুলুন: একটি ডান-হাতের যোগাযোগ প্যানেল, একটি বাম-হাতের মেনু যা পৃষ্ঠাটিকে জুড়ে দেয়, একটি ড্রপডাউন প্যানেল যা আপেক্ষিক অবস্থান ব্যবহার করে, উপরের প্রান্ত থেকে একটি ঘোষণা বার, খোলার সাথে একটি নীচের শীট ঘন্টা, এবং মধ্যম অবস্থান থেকে নির্মিত একটি পূর্ণ-স্ক্রীন মেনু।
অফ-ক্যানভাস সামগ্রীর জন্য প্রায়শই জিজ্ঞাসিত প্রশ্ন
অফ-ক্যানভাস কন্টেন্ট উইজেট কি বিনামূল্যে?
না। অফ-ক্যানভাস বিষয়বস্তু এর অংশ মাস্টার অ্যাডনস প্রো। বিনামূল্যে প্লাগইন এটি অন্তর্ভুক্ত করে না।
আমি কিভাবে অফ-ক্যানভাস প্যানেলে বিষয়বস্তু যোগ করব?
প্রথমে একটি সংরক্ষিত এলিমেন্টর টেমপ্লেট হিসাবে বিষয়বস্তু তৈরি করুন, যেমন একটি মেনু, ফর্ম বা প্রচার৷ তারপর উইজেটের সিলেক্ট টেমপ্লেট ড্রপডাউনে সেই টেমপ্লেটটি বেছে নিন। আপনি বিভিন্ন প্যানেলে একটি টেমপ্লেট পুনরায় ব্যবহার করতে পারেন।
আমার কি অফ-ক্যানভাস প্যানেল বা পপআপ ব্যবহার করা উচিত?
নেভিগেশনের জন্য একটি অফ-ক্যানভাস প্যানেল ব্যবহার করুন এবং একজন দর্শক ক্লিক করে যে বিষয়বস্তু চান, যেমন একটি মেনু, ফিল্টার বা যোগাযোগের বিবরণ। সময়মত বা প্রস্থান-উদ্দেশ্য বার্তাগুলির জন্য এবং যে ফর্মগুলিকে বাধা দেওয়া উচিত তার জন্য একটি পপআপ ব্যবহার করুন৷ খোলার সময় উভয় লক পৃষ্ঠা স্ক্রোল।
আমি কিভাবে অ্যানিমেশন গতি পরিবর্তন করব?
বিষয়বস্তু ট্যাবে অ্যানিমেশনের সময়কাল সেট করুন। মানটি সেকেন্ডে, ডিফল্ট হিসাবে 0.6 এবং 0 থেকে 15 পর্যন্ত একটি পরিসর। নিম্ন মানগুলি প্যানেলটি দ্রুত খোলে। সেটিং প্রতিটি প্রবেশদ্বার অ্যানিমেশন এবং কভার এবং পুশ উভয় ক্ষেত্রেই প্রযোজ্য।
কেন আমার অফ-ক্যানভাস প্যানেল খোলে না?
তিনটি জিনিস পরীক্ষা করুন। টেমপ্লেট নির্বাচন করুন একটি প্রকাশিত টেমপ্লেটের দিকে নির্দেশ করতে হবে, অন্যথায় প্যানেল বিষয়বস্তুর পরিবর্তে একটি বিজ্ঞপ্তি প্রিন্ট করে। ট্রিগারটি অবশ্যই উইজেটের নিজস্ব বোতাম হতে হবে, কারণ অন্য কোনো উপাদান এটি খুলতে পারে না। এবং ডিফল্টরূপে খুলুন বন্ধ হওয়া উচিত যদি না আপনি এটি লোডে খুলতে চান।
আমি কি এটি দিয়ে একটি অফ-ক্যানভাস মেনু তৈরি করতে পারি?
হ্যাঁ। একটি মেনু উইজেট রাখুন যেমন মাস্টার অ্যাডঅন নেভি মেনু একটি সংরক্ষিত টেমপ্লেটে, অফ-ক্যানভাস সামগ্রীতে এটি নির্বাচন করুন, বাম বা ডানে অবস্থান সেট করুন এবং বোতামের জন্য একটি বার আইকন ব্যবহার করুন৷ শুধুমাত্র একটি মেনুর জন্য, প্রো-তে Nav মেনু হ্যামবার্গার লেআউটের নিজস্ব অফ-ক্যানভাস টাইপ রয়েছে।
প্যানেলের বিষয়বস্তু কি আমার পৃষ্ঠার গতি কমিয়ে দেয়?
টেমপ্লেটটি লোড হওয়ার সময় পৃষ্ঠায় রেন্ডার করা হয়, তারপর বোতামটি ক্লিক না করা পর্যন্ত লুকানো হয়। কয়েকটি উইজেট সহ একটি প্যানেল সামান্য ওজন যোগ করে, তবে এর ভিতরে ভারী স্লাইডার বা ভিডিওগুলি পৃষ্ঠার সাথে লোড হয়, তাই প্যানেল টেমপ্লেটগুলি হালকা রাখুন৷।
আমি কি আমার নিজের হেডার আইকন থেকে প্যানেল খুলতে পারি?
না। প্যানেলটি শুধুমাত্র উইজেট রেন্ডার করা বোতাম থেকে খোলে, তাই একটি বিদ্যমান আইকন বা মেনু লিঙ্ক এটিকে ট্রিগার করতে পারে না। হ্যামবার্গার আইকন থেকে খোলে হেডার মেনুর জন্য, পরিবর্তে অফক্যানভাস টাইপ সহ Nav মেনু উইজেটের হ্যামবার্গার লেআউট ব্যবহার করুন।
Elementor এর জন্য একটি বিনামূল্যের অফ-ক্যানভাস উইজেট আছে কি?
Elementor এর বিনামূল্যের প্লাগইন নেই। Elementor Pro সংস্করণ 3.22 থেকে একটি অফ-ক্যানভাস উইজেট অন্তর্ভুক্ত করে যখন ফ্লেক্সবক্স কন্টেইনার এবং নেস্টেড উপাদানগুলি চালু থাকে। অফ-ক্যানভাস বিষয়বস্তু মাস্টার অ্যাডনস প্রো-এর অংশ এবং যে কোনও সংরক্ষিত টেমপ্লেট খোলে, যা প্রো উইজেট করে না।
ট্রেন্ডিং এলিমেন্টর উইজেট এবং এক্সটেনশন
কম সময়ে অত্যাধুনিক ওয়েবসাইট তৈরি করুন।
গ্লাসমরফিজম
ধারক অতিরিক্ত
নিদর্শন
![এলিমেন্টরের জন্য মাস্টার অ্যাডঅন পোস্ট/পেজ ডুপ্লিকেটর এক্সটেনশন: ওয়ার্ডপ্রেস পেজ লিস্টে এমএ ডুপ্লিকেটর সারি লিঙ্ক একটি ল্যান্ডিং পেজ তৈরি করে - [ডুপ্লিকেটেড #128] ড্রাফ্ট](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
পোস্ট/পেজ ডুপ্লিকেটর
