একটি স্ট্যান্ডার্ড ড্রপডাউন লিঙ্কগুলির একটি পাতলা তালিকা দেখায়। একটি মেগা মেনু একটি প্রশস্ত প্যানেল খোলে যা একবারে আপনার সাইটের একটি সম্পূর্ণ বিভাগ উপস্থাপন করে: গোষ্ঠীবদ্ধ লিঙ্ক কলাম, ছবি, আইকন, এমনকি একটি কল টু অ্যাকশন। দ্য মেগা মেনু মধ্যে এক্সটেনশন এলিমেন্টরের জন্য মাস্টার অ্যাডঅন এই প্যানেলগুলির মধ্যে একটিকে যেকোনো ওয়ার্ডপ্রেস মেনু আইটেমের সাথে সংযুক্ত করে, এবং আপনি প্যানেলটিকে সাধারণ এলিমেন্টর সম্পাদকে নিজেই ডিজাইন করেন, যাতে আপনি একটি পৃষ্ঠায় যা কিছু তৈরি করতে পারেন তা আপনার নেভিগেশনের ভিতরে থাকতে পারে। একটি দ্রুত ওভারভিউ এবং ডেমো জন্য, দেখুন ফ্রি এলিমেন্টর মেগা মেনু নির্মাতা পৃষ্ঠা।
এখানে ডেমো থেকে সমাপ্ত ফলাফল রয়েছে: হোভারিং প্রোডাক্টস গ্রুপ করা লিঙ্ক এবং একটি বৈশিষ্ট্যযুক্ত চিত্র সহ একটি তিন-কলামের প্যানেল খোলে।
মেগা মেনু এক্সটেনশন কি করে #
একবার সক্রিয় হয়ে গেলে, আপনার ওয়ার্ডপ্রেস মেনুতে প্রতিটি আইটেম একটি মেগা মেনু কনফিগারেশন পপআপ পায় চেহারা → মেনু। একটি আইটেমের জন্য এটি চালু করুন এবং সেই আইটেমের ড্রপডাউন একটি এলিমেন্টর টেমপ্লেটে পরিণত হয়। এক্সটেনশন পরিচালনা করে:
- প্রতি-আইটেম প্যানেল: শুধুমাত্র প্রয়োজনীয় আইটেমগুলিতে মেগা প্যানেল সক্ষম করুন; বাকি সাধারণ লিঙ্ক থাকুন।
- ভিজ্যুয়াল প্যানেল ডিজাইন: ড্রপডাউন বিষয়বস্তু আপনার পছন্দের যেকোনো উইজেট ব্যবহার করে এলিমেন্টর এডিটর দিয়ে তৈরি করা হয়েছে।
- মেগা মেনু প্রস্থ: একটি সঠিক পিক্সেল মান সহ ডিফল্ট, সম্পূর্ণ প্রস্থ বা কাস্টম প্রস্থ।
- ট্রিগার প্রভাব: হোভারে বা ক্লিকে প্যানেল খুলুন।
- রূপান্তর: প্যানেল কীভাবে অ্যানিমেট করে তা চয়ন করুন, ডেমোতে বিবর্ণ।
- মোবাইল মেনু: টগল মেনুতে বিল্ডার সামগ্রী দেখানো সহ ফোনগুলি কী পাবে তা নির্ধারণ করুন৷।
- ব্যাজ এবং আইকন: মেনু আইটেম লেবেলে একটি হাইলাইট ব্যাজ সংযুক্ত করুন (বিনামূল্যে), অথবা নিজস্ব রঙ (প্রো) সহ একটি আইকন।
আপনি শুরু করার আগে #
- ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়; বিনামূল্যে সংস্করণ যথেষ্ট।
- এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। প্লাগইনে নতুন? অনুসরণ কর ইনস্টলেশন গাইড প্রথম।
- একটি ওয়ার্ডপ্রেস মেনু ইতিমধ্যে অধীনে তৈরি করা হয়েছে চেহারা → মেনু, এমনকি একটি রুক্ষ এক; আপনি পরে এটি পরিমার্জন করতে পারেন।
দ্রষ্টব্য: আপনি পৃষ্ঠা শৈলী বিকল্প থেকে আপনার মেগা মেনুর পটভূমি নিয়ন্ত্রণ করতে পারেন। পৃষ্ঠা শৈলী বিকল্পে পটভূমির রঙ, চিত্র বা আপনি যা পছন্দ করেন তা রাখতে ভুলবেন না। ডিফল্টরূপে এটি একটি সাদা পটভূমি সেট করা হবে। কিন্তু আপনি এই সেটিং থেকে আপনার ব্যাকগ্রাউন্ড কাস্টমাইজেশন করতে পারেন। একবার দেখে নিন 1
ধাপ 1: মেগা মেনু এক্সটেনশন সক্ষম করুন #
আপনার ওয়ার্ডপ্রেস ড্যাশবোর্ড থেকে, যান মাস্টার অ্যাডনস এবং খুলুন এক্সটেনশন ট্যাব। মেগা মেনু বসে উইজেট প্রদর্শন করুন দল। এর টগলে ক্লিক করুন যাতে এটি বেগুনি হয়ে যায়, তারপর আঘাত করুন পরিবর্তন সংরক্ষণ করুন এবং সবুজ “সেটিংস সফলভাবে সংরক্ষিত" নোটিশের জন্য অপেক্ষা করুন৷ মাস্টার অ্যাডনস ডিফল্টরূপে সবকিছু বন্ধ করে পাঠায় যাতে আপনার সাইট শুধুমাত্র আপনি যা ব্যবহার করেন তা লোড করে। যদি নতুন বিকল্পটি এখনই অ্যাডমিনে প্রদর্শিত না হয়, তাহলে পৃষ্ঠাটি হার্ড-রিফ্রেশ করুন (Cmd/Ctrl + Shift + R); ক্যাশিং প্লাগইনগুলি এক মিনিটের জন্য পুরানো অ্যাডমিন মেনুতে ধরে রাখে।
ধাপ 2: আপনার মেনুর জন্য মেগা মেনু চালু করুন #
খোলা চেহারা → মেনু. একটি নতুন মাস্টার অ্যাডনস মেগা মেনু বাক্স মেনু আইটেম তালিকা উপরে প্রদর্শিত হবে। সুইচ মেগা মেনু সক্ষম করুন সবুজ "মেগা মেনু সংরক্ষিত" নিশ্চিতকরণের জন্য অপেক্ষা করুন। মেনু কাঠামোর প্রতিটি আইটেম এখন একটি বেগুনি বহন করে মাস্টার মেগা ব্যাজ, যার অর্থ এটি একটি প্যানেল হোস্ট করতে পারে।
ধাপ 3: একটি মেনু আইটেম প্যানেল সক্রিয় করুন #
একটি শীর্ষ-স্তরের আইটেম ঘোরান, সাধারণত পণ্য বা পরিষেবার মতো বিস্তৃত কিছু, এবং এর মেগা মেনু সেটিংস খুলুন। পপআপের মধ্যে বিষয়বস্তু ট্যাব, ফ্লিপ মেগামেনু সক্ষম প্রতি হ্যাঁ. দ্য মেগামেনু বিষয়বস্তু সম্পাদনা করুন বোতাম প্রদর্শিত হবে; এটি এই আইটেমের প্যানেলের জন্য এলিমেন্টর সম্পাদক খোলে। আঘাত সংরক্ষণ করুন আপনার কাজ শেষ হলে পপআপে।
শুধুমাত্র সেই আইটেমগুলিতে প্যানেল সক্ষম করুন যেগুলির জন্য সত্যিকারের স্থান প্রয়োজন৷ একটি একক যোগাযোগ লিঙ্কে একটি মেগা মেনু দর্শকদের একটি গন্তব্যের জন্য কঠোর পরিশ্রম করে।
ধাপ 4: এলিমেন্টরে প্যানেল ডিজাইন করুন #
ক্লিক করুন মেগামেনু বিষয়বস্তু সম্পাদনা করুন এবং পরিচিত এলিমেন্টর সম্পাদক ক্যানভাস হিসাবে প্যানেলের সাথে খোলে। ডেমো তিনটি কলাম তৈরি করে: রেকর্ড এবং বিশ্লেষণ শিরোনামের অধীনে লিঙ্কগুলির দুটি গ্রুপ, এবং একটি চিত্র কলাম যাতে প্যানেলটি পাঠ্যের প্রাচীর না হয়। লেআউট প্রস্তুত হলে টেমপ্লেটটি প্রকাশ করুন; একটি খসড়া টেমপ্লেট লাইভ মেনুতে রেন্ডার করবে না, যা অন্য যেকোনো কিছুর চেয়ে বেশি লোকেদের ট্রিপ করে।
আপনার প্রতিষ্ঠানের চার্টের পরিবর্তে গ্রাহকরা কীভাবে চিন্তা করেন তার দ্বারা গ্রুপ লিঙ্ক, এবং প্রতিটি কলামকে পাঁচ থেকে সাতটি লিঙ্কে ক্যাপ করুন; যে অতীত, স্ক্যানিং ধসে পড়ে। একটি কলামকে লিঙ্কের বাইরে একটি কাজ দিন, যেমন একটি বৈশিষ্ট্যযুক্ত পণ্য বা একটি কল টু অ্যাকশন। এবং ছবিগুলিকে সংকুচিত রাখুন, কারণ প্যানেলটি সাইটের প্রতিটি পৃষ্ঠায় লোড হয়, শুধুমাত্র একটি নয়।
ধাপ 5: প্রস্থ, ট্রিগার এবং রূপান্তর সেট করুন #
আইটেম পপআপ ফিরে, সেটিংস প্যানেল কীভাবে আচরণ করে তা ট্যাব নিয়ন্ত্রণ করে:
- মেগা মেনু প্রস্থ: ডিফল্ট মেনুর সাথে মেলে, সম্পূর্ণ প্রস্থ প্রান্ত থেকে প্রান্তে প্রসারিত করে, কাস্টম প্রস্থ একটি সঠিক পিক্সেল মান নেয় যেমন 800px।
- মোবাইল মেনু: ফোন কি পায়; নির্মাতা সামগ্রী মোবাইল টগল মেনুর ভিতরে একই ডিজাইন করা প্যানেল দেখায়।
- ট্রিগার প্রভাব: হোভার মাউস-ওভারে প্যানেল খোলে; আপনি যদি ইচ্ছাকৃতভাবে খুলতে চান তবে ক্লিক করতে স্যুইচ করুন।
- রূপান্তর: প্রবেশদ্বার অ্যানিমেশন, ডেমোতে বিবর্ণ।
- মেনু লেবেল দেখান /বর্ণনা দেখান (প্রো): আইটেমটিতে ঐচ্ছিক লেবেল এবং বর্ণনা পাঠ্য।
দ্য ব্যাজ একই পপআপের ট্যাব একটি হাইলাইট ব্যাজ সংযুক্ত করে, একটি নতুন বা বিক্রয় এন্ট্রি চিহ্নিত করার জন্য দরকারী। দ্য আইকন ট্যাব, একটি আইকন এবং আইকন রঙের জন্য, মাস্টার অ্যাডঅন প্রো প্রয়োজন।
ধাপ 6: আপনার হেডারে মেনু রাখুন #
যদি আপনার থিম ইতিমধ্যেই ওয়ার্ডপ্রেস মেনু রেন্ডার করে, মেগা মেনু অবিলম্বে কাজ করে। সম্পূর্ণ হেডার নিয়ন্ত্রণের জন্য, বিনামূল্যে দিয়ে একটি তৈরি করুন মাস্টার অ্যাডঅন থিম বিল্ডার: একটি হেডার টেমপ্লেট তৈরি করুন, ড্রপ করুন Nav মেনু উইজেট, এবং আপনার মেগা প্যানেল বহন করে এমন মেনু নির্বাচন করুন। উইজেটের সাধারণ বিভাগে লেআউট, প্রান্তিককরণ এবং ব্রেকপয়েন্ট যেখানে মেনুটি ভেঙে পড়ে তা কভার করে।
মোবাইল ভিউ চেক করুন #
প্রকাশের আগে এলিমেন্টর সম্পাদককে মোবাইল প্রিভিউতে স্যুইচ করুন। মেনুটি হ্যামবার্গার টগলের পিছনে ভেঙে পড়ে এবং লিঙ্কগুলি উল্লম্বভাবে স্ট্যাক করে। এখানে প্যানেলের প্রকৃত উচ্চতা পরীক্ষা করুন; একটি চার-কলামের প্যানেল যা 1440px এ তীক্ষ্ণ দেখায় তা একটি ফোনে একটি অন্তহীন স্ক্রলে পরিণত হতে পারে। যদি এটি দীর্ঘ হয়, এলিমেন্টরের প্রতিক্রিয়াশীল দৃশ্যমানতা নিয়ন্ত্রণের সাথে আলংকারিক চিত্রগুলি লুকান এবং লিঙ্কগুলি রাখুন৷ তারপর একটি প্রকৃত ফোনে পরীক্ষা করুন, যেহেতু পূর্বরূপ স্পর্শ আচরণের আনুমানিক কিন্তু এটি পুনরুত্পাদন করে না।
পৃষ্ঠায় ফলাফল #
সম্পূর্ণ প্রস্থ নির্বাচন করা হলে, প্রকাশিত প্যানেলটি পুরো ভিউপোর্ট প্রান্ত থেকে প্রান্তে বিস্তৃত হয়; এই পৃষ্ঠার শীর্ষে বক্সযুক্ত সংস্করণ তুলনা করার জন্য ডিফল্ট প্রস্থ দেখায়। যেভাবেই হোক, আইটেমটি ঘোরানো আপনার বেছে নেওয়া ট্রানজিশনের সাথে ডিজাইন করা টেমপ্লেটটি খোলে।
যেখানে একটি মেগা মেনু ভালো কাজ করে #
- দোকান। দোকানের অধীনে একটি প্যানেলে পণ্যের বিভাগ, বেস্টসেলার এবং একটি প্রচার চিত্র।
- এজেন্সি এবং পরিষেবা ব্যবসা। একটি বৈশিষ্ট্যযুক্ত কেস স্টাডি সহ ফলাফল অনুসারে গোষ্ঠীবদ্ধ পরিষেবাগুলি৷।
- প্রকাশক এবং ব্লগ। প্যানেলে টানা সর্বশেষ পোস্ট সহ বিষয় হাব।
- SaaS সাইট। নেস্টেড ড্রপডাউনের পরিবর্তে বৈশিষ্ট্য, সমাধান এবং সংস্থানগুলি পাশাপাশি সংগঠিত।
- বিশ্ববিদ্যালয় এবং সংস্থা। বিভাগ এবং দ্রুত লিঙ্ক যা অন্যথায় তিনটি স্তর গভীরে কবর দেবে।
সমস্যা সমাধান #
- মেগা মেনু প্রদর্শিত হয় না। এক্সটেনশন টগল চালু আছে তা নিশ্চিত করুন, মেনু আইটেমটিতে মেগামেনু সক্ষম হ্যাঁ সেট করা আছে এবং প্যানেল টেমপ্লেটটি খসড়া হিসাবে সংরক্ষিত না হয়ে প্রকাশিত হয়েছে। তারপর আপনার ক্যাশে সাফ করুন।
- প্যানেল প্রদর্শিত হয় কিন্তু স্টাইল করা হয় না। সাধারণত একটি ক্যাশে স্টাইলশীট। আপনার পৃষ্ঠার ক্যাশে এবং যেকোনো CDN পরিষ্কার করুন, তারপর হার্ড-রিলোড করুন।
- প্যানেল কাটা বা লুকানো হয়। একটি অভিভাবক পাত্রে ওভারফ্লো লুকানো বা একটি কম z-সূচক আছে। হেডারের z-সূচক বাড়ান এবং হেডার কন্টেইনারের ওভারফ্লো সেটিং চেক করুন।
- ডেস্কটপে কাজ করে, মোবাইলে ভাঙা। প্রায় সবসময় টগল এলাকা। Nav মেনু উইজেটের মোবাইল সেটিংস যাচাই করুন এবং নিশ্চিত করুন যে কিছুই ট্যাপ টার্গেটকে ওভারলে করে না।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #
আমি কিভাবে Pro ছাড়া Elementor এ একটি মেগা মেনু যোগ করব?
মাস্টার অ্যাডঅন এক্সটেনশন ট্যাবে মেগা মেনু এক্সটেনশন সক্ষম করুন, উপস্থিতি → মেনুর অধীনে মেগা মেনু সক্ষম করুন স্যুইচ করুন, আপনি যে আইটেমটি চান তাতে মেগামেনু সক্ষম হ্যাঁ সেট করুন এবং মেগামেনু সামগ্রী সম্পাদনা করুন দিয়ে প্যানেলটি ডিজাইন করুন৷ Elementor Pro এর প্রয়োজন নেই।
মেগা মেনু এক্সটেনশন কি বিনামূল্যে?
হ্যাঁ। এক্সটেনশন ট্যাবের ডিসপ্লে উইজেট গ্রুপে এলিমেন্টরের জন্য মাস্টার অ্যাডঅন-এর বিনামূল্যের সংস্করণ সহ মেগা মেনু পাঠানো হয়। দ্য মূল্য পৃষ্ঠা প্রো প্ল্যানগুলি কী যোগ করে তা কভার করে৷।
প্যানেল পূর্ণ প্রস্থ হতে পারে?
হ্যাঁ। আইটেম পপআপের সেটিংস ট্যাব ডিফল্ট, সম্পূর্ণ প্রস্থ এবং কাস্টম প্রস্থ অফার করে। কাস্টম প্রস্থ একটি সঠিক পিক্সেল মান নেয়, যেমন 800px, যখন আপনি প্যানেলটি পৃষ্ঠার চেয়ে সংকীর্ণ করতে চান।
আমি ড্রপডাউন প্যানেলের ভিতরে কী রাখতে পারি?
এলিমেন্টর যে কোনো কিছু তৈরি করতে পারে: শিরোনাম উইজেট, আইকন তালিকা, ছবি, বোতাম, ফর্ম। প্যানেলটি একটি নিয়মিত এলিমেন্টর টেমপ্লেট, তাই একটি পৃষ্ঠায় উপলব্ধ প্রতিটি উইজেট মেনুতে উপলব্ধ।
মেগা মেনু মোবাইলে কেমন আচরণ করে?
মেনুটি হ্যামবার্গার টগলের পিছনে ভেঙে পড়ে এবং লিঙ্কগুলি উল্লম্বভাবে স্ট্যাক করে। মোবাইল মেনু সেটিং নিয়ন্ত্রণ করে যে ফোনগুলি টগলের ভিতরে ডিজাইন করা বিল্ডার সামগ্রী পায় কিনা এবং এলিমেন্টরের প্রতিক্রিয়াশীল নিয়ন্ত্রণগুলি আপনাকে ছোট স্ক্রিনে ভারী প্যানেল উপাদানগুলিকে লুকিয়ে রাখতে দেয়৷।
মোড়ানো #
দ্য মেগা মেনু এক্সটেনশন একটি প্লেইন ওয়ার্ডপ্রেস মেনুকে তিনটি চাল দিয়ে ডিজাইন করা নেভিগেশনে পরিণত করে: এক্সটেনশনটি টগল করুন, একটি আইটেমের প্যানেল সক্ষম করুন এবং এলিমেন্টরে ড্রপডাউন তৈরি করুন৷ প্রস্থ, ট্রিগার, ট্রানজিশন, ব্যাজ এবং (প্রো সহ) আইকনগুলি আইটেম পপআপ থেকে সেট করা আছে এবং এটি বিনামূল্যের সাথে পেয়ার করা হয়েছে৷ থিম নির্মাতা এবং Nav মেনু উইজেট এলিমেন্টর প্রো ছাড়া আপনাকে একটি সম্পূর্ণ কাস্টম হেডার দেয়। এর সম্পূর্ণ সেট মাস্টার অ্যাডঅন উইজেট এবং এক্সটেনশন এক পৃষ্ঠা দূরে।
