এলিমেন্টরে কীভাবে একটি রেস্তোরাঁর মেগা মেনু তৈরি করবেন (ফ্রি স্টেপ-বাই-স্টেপ গাইড)

একটি রেস্তোরাঁর মেগা মেনু হল একটি বিস্তৃত ড্রপডাউন প্যানেল যা আপনার সম্পূর্ণ খাবারের মেনু, খাদ্যতালিকাগত তথ্য, খোলার সময় এবং একটি বুকিং বোতামকে একাধিক ক্লিকের পিছনে পুঁতে রাখার পরিবর্তে এক জায়গায় রাখে। ডিনাররা খাবার, দাম, ঘন্টা এবং বুক করার উপায় দেখতে চায়। সাধারণত ফোনে। প্রায়শই আপনার এবং অন্য কোথাও সিদ্ধান্ত নেওয়ার সময়।

এই গাইডটি ফ্রি এলিমেন্টর এবং ফ্রি দিয়ে একটি তৈরি করে মাস্টার অ্যাডনস মেগা মেনু। কোন Elementor Pro প্রয়োজন নেই। এখানে সমাপ্ত ফলাফল। হোভারিং “Dishes” বিভাগ, মূল্য, খাদ্যতালিকাগত ট্যাগ, আজকের রাতের বিশেষ, এবং একটি রিজার্ভ একটি টেবিল বোতাম সহ সম্পূর্ণ রেস্তোরাঁর মেনু খোলে:

আপনি যদি রেস্তোরাঁর মেগা মেনু শৈলী পছন্দ করেন তবে আপনি এটি ডাউনলোড করতে পারেন এবং মাস্টার অ্যাডঅন উইজেট বিল্ডারে আমদানি করতে পারেন। তারপর আপনি সহজেই আপনার প্রয়োজনের উপর ভিত্তি করে পাঠ্যের রঙ, চিত্র, ইউআরএল ইত্যাদি কাস্টমাইজ করতে পারেন এবং আপনার রেস্তোরাঁর ওয়েবসাইটে আপনার মেগা মেনুতে এটি ব্যবহার করতে পারেন।

রেস্টুরেন্ট মেগা মেনু ডাউনলোড করুন

একটি রেস্টুরেন্ট মেগা মেনু কি থাকা উচিত

কিছু তৈরি করার আগে, প্যানেলে কী স্থান অর্জন করবে তা নির্ধারণ করুন। এই গাইডে আমরা যে লেআউটটি তৈরি করি তাতে চারটি জোন রয়েছে এবং সেগুলি প্রায় প্রতিটি রেস্তোরাঁকে কভার করে:

কি বাদ দিতে হবে: আপনার সম্পূর্ণ গল্প, প্রেস উল্লেখ, এবং সামাজিক ফিড সম্পর্কে। যারা অন্তর্গত ফুটার। একটি নেভিগেশন প্যানেল হল লোকেদের কোথাও নিয়ে যাওয়ার জন্য, পুরো গল্প বলার জন্য নয়।

আপনি এই জন্য Elementor প্রো প্রয়োজন?

না। Elementor এর নিজস্ব মেগা মেনু উইজেট Elementor Pro এর ভিতরে বসে, কিন্তু নীচের বিনামূল্যের রুটটি সাবস্ক্রিপশন ছাড়াই একই প্যানেল তৈরি করে।

একটি একক-অবস্থান রেস্তোরাঁর জন্য বছরে কয়েকবার তার মেনু আপডেট করার জন্য, বিনামূল্যের এক্সটেনশন যথেষ্ট। একটি বৃহত্তর মাল্টি-লোকেশন গ্রুপ বেশ কয়েকটি সম্পাদককে জাগলিং করে এখনও প্রো-এর বিস্তৃত টুলসেট থেকে মূল্য পেতে পারে, তবে এটি পুরো সাইটের সিদ্ধান্ত, বিশেষভাবে মেগা মেনু সম্পর্কে নয়। এলিমেন্টর এখানে এর প্রো মেগা মেনু ওয়ার্কফ্লো নথিভুক্ত করে আপনি যদি এটি সরাসরি তুলনা করতে চান।

আপনার যা প্রয়োজন

• এলিমেন্টর (ফ্রি সংস্করণ ঠিক আছে)
• এলিমেন্টরের জন্য মাস্টার অ্যাডঅন, ইনস্টল এবং সক্রিয়
• আপনার মেনু বিভাগগুলির জন্য ইতিমধ্যেই তৈরি করা পৃষ্ঠাগুলি (তারা আপাতত স্থানধারক হতে পারে)৷

ধাপ 1: মেগা মেনু এক্সটেনশন সক্ষম করুন

মাস্টার অ্যাডঅন প্রতিটি উইজেট এবং এক্সটেনশনকে টগলের পিছনে রাখে যাতে অব্যবহৃতগুলি কখনই লোড হয় না। যাও মাস্টার অ্যাডঅন → সেটিংস, খুলুন এক্সটেনশন ট্যাব, এবং খুঁজুন মেগা মেনু ডিসপ্লে গ্রুপে। এর টগল চালু করুন এবং ক্লিক করুন পরিবর্তন সংরক্ষণ করুন। আপনি যদি টগলটি দেখতে না পান তবে আপনি সম্ভবত একটি পুরানো প্লাগইন সংস্করণে আছেন, তাই প্রথমে আপডেট করুন৷।

ধাপ 2: ওয়ার্ডপ্রেস মেনু গঠন করুন এবং মেগা মেনু চালু করুন

যাও চেহারা → মেনু এবং কোন নকশা স্পর্শ করার আগে কঙ্কাল তৈরি করুন। এই বিল্ডে মেনুটিকে পাঁচটি আইটেম সহ প্রধান মেনু বলা হয়: বাড়ি, খাবার, আমাদের সম্পর্কে, ব্লগ, অ্যাকাউন্ট। "ডিশেস" হল সেই আইটেম যা মেগা প্যানেল পায়।

প্রথমে কাঠামোটি পান। মেগা প্যানেলটি একটি মেনু আইটেমের সাথে সংযুক্ত, তাই পরে পুনর্বিন্যাস করার অর্থ ডিজাইনের কাজ পুনরায় করা।

এক্সটেনশন সক্রিয় সহ, ক মাস্টার অ্যাডনস মেগা মেনু মেনু স্ক্রিনের বাম কলামে বক্সটি প্রদর্শিত হবে। তার সুইচ মেগা মেনু সক্ষম করুন টগল অন। যে মুহূর্তে আপনি করবেন, একটি বেগুনি মাস্টার মেগা প্রতিটি মেনু আইটেমের পাশে ব্যাজ দেখায়। সেই ব্যাজটি যেখানে প্রতিটি আইটেমের মেগা মেনু বিকল্পগুলি লাইভ থাকে৷।

ধাপ 3: আপনার খাবারের আইটেমের জন্য মেগা মেনু চালু করুন

ক্লিক করুন মাস্টার মেগা "dishes” আইটেমে ব্যাজ। একটি সেটিংস পপআপ চারটি ট্যাবের সাথে খোলে: বিষয়বস্তু, সেটিংস, আইকন এবং ব্যাজ৷।

1. উপর বিষয়বস্তু ট্যাব, ফ্লিপ করুন মেগামেনু সক্ষম হ্যাঁ এ স্যুইচ করুন। মেগামেনু বিষয়বস্তু সম্পাদনা বোতামটি আলোকিত হয়।
2. উপর সেটিংস ট্যাব, প্যানেলের আকার এবং আচরণ সেট করুন। আমরা ব্যবহার করেছি কাস্টম প্রস্থ 1000px এ, একটি ডিশ গ্রিড এবং একটি বৈশিষ্ট্যযুক্ত কার্ডের জন্য যথেষ্ট প্রশস্ত। আপনার ডিজাইনের পুরো স্ক্রীনের প্রয়োজন হলে সম্পূর্ণ প্রস্থও রয়েছে।
3. সেট মোবাইল মেনু বিল্ডার কন্টেন্ট, ট্রিগার প্রভাব ঘোরাঘুরি করতে, এবং উত্তরণ বিবর্ণ। আইকন এবং ব্যাজ ট্যাবগুলি ঐচ্ছিক অতিরিক্ত (উদাহরণস্বরূপ, একটি মৌসুমী মেনুতে একটি "নতুন" ব্যাজ)।
4. ক্লিক করুন সংরক্ষণ করুন.

আপনি সেটিংস ট্যাব থেকে মেগা মেনু প্রস্থ কনফিগার করুন: সম্পূর্ণ প্রস্থ, ডিফল্ট, বা আমাদের 1000px এর মতো একটি কাস্টম প্রস্থ। একই ট্যাবে মোবাইল মেনু উৎস, ট্রিগার ইফেক্ট (হোভার বা ক্লিক), ট্রানজিশন অ্যানিমেশন এবং মেনু লেবেল এবং বর্ণনার জন্য টগল রয়েছে:

ধাপ 4: এলিমেন্টরে প্যানেল ডিজাইন করুন

কন্টেন্ট ট্যাবে ফিরে ক্লিক করুন মেগামেনু বিষয়বস্তু সম্পাদনা করুন। প্যানেলটি সাধারণ এলিমেন্টর এডিটরে খোলে, তাই আপনি এটিকে অন্য যেকোনো পৃষ্ঠার মতো ডিজাইন করেন। উপরের টেবিল থেকে চারটি জোন তৈরি করুন:

• হেডার ফালা: রেস্তোরাঁর নাম এবং একটি ছোট রান্নাঘরের নোট ("রান্নাঘর খোলা রাত 11:00 টা পর্যন্ত · কাঠের চুলা প্রতিদিন 4 টায় ফায়ার করা হয়")। নোটটি নিঃশব্দে উত্তর দেয় "তারা কি খুলছে?" প্রশ্নের উত্তর দেয় কেউ ঘন্টার পর ঘন্টা শিকার না করে।
• বিভাগ সাইডবার: স্টার্টার, পাস্তা এবং রিসোটো, কাঠ-চালিত পিৎজা, মেইন এবং গ্রিল, ডেজার্ট, ওয়াইন এবং পানীয়, প্রতিটিতে একটি ডিশ গণনা রয়েছে।
• ডিশ গ্রিড: নাম, এক-লাইনের বিবরণ, মূল্য, এবং ট্যাগ যেমন নিরামিষ, মশলাদার, বা শেফের বাছাই। ট্যাগগুলি একটি পৃথক কলাম ছাড়াই খাদ্যতালিকাগত ফিল্টারিং পরিচালনা করে।
• বৈশিষ্ট্যযুক্ত কার্ড এবং অ্যাকশন ফুটার: আজ রাতের ছবি এবং দামের সাথে বিশেষ, ক একটি টেবিল বোতাম সংরক্ষণ করুন, খোলার সময় এবং ঠিকানা, এবং একটি "সম্পূর্ণ মেনু (পিডিএফ) ডাউনলোড করুন" লিঙ্ক। আপনি যদি কাঠামোগত খোলার সময় দেখাতে চান, তাহলে ব্যবসার সময় উইজেট তাদের এক জায়গায় সম্পাদনাযোগ্য রাখে।

প্রতিটি খাবারের নাম, মূল্য এবং ট্যাগ বাম দিকের এলিমেন্টর প্যানেল থেকে সম্পাদনাযোগ্য থাকে। মেনু পরে আপডেট করা একটি বিষয়বস্তু সম্পাদনা, একটি নকশা কাজ নয়। আপনার কাজ শেষ হলে টেমপ্লেটটি প্রকাশ করুন এবং সম্পাদকটি বন্ধ করুন।

ধাপ 5: আপনার হেডারে মেনু রাখুন

মেগা মেনুতে থাকার জন্য একটি হেডার প্রয়োজন। যদি আপনার থিমের শিরোনামটি ইতিমধ্যেই প্রধান মেনু প্রদর্শন করে তবে আপনি এই ধাপটি এড়িয়ে যেতে পারেন, কিন্তু মাস্টার অ্যাডঅন দিয়ে হেডার তৈরি করা সবকিছু এক সম্পাদকে রাখে। দ্য থিম নির্মাতা বিনামূল্যে, Elementor Pro এর বিপরীতে।

1. যাও মাস্টার অ্যাডঅন → থিম বিল্ডার এবং ক্লিক করুন নতুন টেমপ্লেট যোগ করুন.
2. টেমপ্লেট টাইপ সেট করুন হেডার, সুইচ সক্রিয়করণ চালু, এবং অধীনে শর্ত নির্বাচন করুন অন্তর্ভুক্ত করুন → সমগ্র সাইট.
3. ক্লিক করুন Elementor দিয়ে সম্পাদনা করুন.

হেডার টেমপ্লেটের ভিতরে, টেনে আনুন নেভিগেশন মেনু উইজেট এবং বাছাই প্রধান মেনু মেনু নির্বাচনের অধীনে। লেআউটটিকে অনুভূমিক-এ সেট করুন এবং আপনার হেডার ডিজাইনের জন্য এটিকে সারিবদ্ধ করুন। "Dishes”" আইটেমটি স্বয়ংক্রিয়ভাবে এর সাথে এর মেগা প্যানেল বহন করে।

ধাপ 6: হোভার করুন এবং ফলাফল পরীক্ষা করুন

শিরোনাম প্রকাশ করুন এবং আপনার সাইট খুলুন। হোভার "ডিশেস" এবং সম্পূর্ণ রেস্তোরাঁর মেনুটি পৃষ্ঠার উপরে নেমে গেছে: বাম দিকে বিভাগ, মাঝখানে দাম সহ খাবার, আজকের রাতের বিশেষ এবং ডানদিকে একটি টেবিল বোতাম সংরক্ষণ করুন।

ডিশের সংখ্যা এবং লিঙ্কগুলি আচরণ করছে তা নিশ্চিত করতে প্রতিটি বিভাগে ক্লিক করুন, তারপরে এটির পিছনের পৃষ্ঠার বিপরীতে প্যানেলটি পরীক্ষা করুন। একটি অন্ধকার নায়কের উপরে একটি অন্ধকার প্যানেলের একটি সীমানা বা ছায়া প্রয়োজন যাতে এর প্রান্তগুলি দৃশ্যমান থাকে।

ধাপ 7: এটি দ্রুত রাখুন

মেনু চিত্রগুলি আপনার সাইটের প্রতিটি পৃষ্ঠায় লোড হয়, তাই একটি অসতর্ক মেগা মেনু পুরো রেস্তোরাঁর ওয়েবসাইটকে ধীর করে দেয়। ধীরগতির রেস্তোরাঁ সাইটগুলি ডিনার হারায় যারা মোবাইল ডেটাতে বিকল্পগুলির তুলনা করছে৷।

• প্যানেলে একটি ছবি ব্যবহার করুন (বিশিষ্ট বিশেষ), গ্যালারি নয়।
• এটি সংকুচিত করুন এবং WebP পরিবেশন করুন; এটি আসলে যে স্থান দখল করে তার আকার দিন।
• বাস্তব alt টেক্সট লিখুন (“wood-fired margherita pizza”)। এটি অ্যাক্সেসযোগ্যতা এবং চিত্র অনুসন্ধানে সহায়তা করে।
• আপনার সামগ্রিক পরীক্ষা করুন এলিমেন্টর পৃষ্ঠার গতি মেনু যোগ করার পরে, আগে না।

ধাপ 8: এটি ফোনে কাজ করুন

বেশিরভাগ রেস্তোরাঁর ট্র্যাফিক মোবাইল, প্রায়শই বাইরে দাঁড়িয়ে থাকা লোকেরা ভিতরে আসবে কিনা তা সিদ্ধান্ত নেয়। এই কারণেই আমরা সেট করি মোবাইল মেনু বিল্ডার কন্টেন্টকে ধাপ 3-এ ফেরত দিন। আপনার ডিজাইন করা একই প্যানেলটি একটি বেয়ার লিঙ্ক তালিকার পরিবর্তে ফোন লেআউট পরিবেশন করে। একটি প্রশস্ত প্যানেল এখনও সুন্দরভাবে ভেঙে পড়তে হবে:

• মোবাইলে বিশেষের ছবি লুকান, একটি টেবিল বোতাম রিজার্ভ রাখুন। এলিমেন্টরের প্রতিক্রিয়াশীল দৃশ্যমানতা নিয়ন্ত্রণ উপাদান প্রতি এটি পরিচালনা করে।
• স্ট্যাকিং অর্ডারে প্রথমে বিভাগ লিঙ্কগুলি রাখুন; যে ফোন দর্শকদের জন্য এসেছেন কি।
• দীর্ঘ স্ক্রলিং ছাড়াই "একটি টেবিল সংরক্ষণ করুন" বোতামটি পৌঁছানো যায়।
• একটি বাস্তব ফোনে পরীক্ষা করুন। সম্পাদক পূর্বরূপ স্পর্শ আচরণ আনুমানিক; এটা পুনরুত্পাদন করে না।

যদি ডিফল্ট ট্যাবলেট ব্রেকপয়েন্ট আপনার প্যানেলটি বিশ্রীভাবে কাটে, তাহলে বিনামূল্যের সাথে আপনার নিজস্ব সেট করুন কাস্টম ব্রেকপয়েন্ট এক্সটেনশন.

ঐচ্ছিক: স্বয়ংক্রিয়ভাবে মৌসুমী আইটেম দেখান

রেস্তোরাঁগুলি ক্রমাগত সময়-সীমাবদ্ধ অফারগুলি চালায়: মধ্যাহ্নভোজের বিশেষ, উত্সব মেনু, আনন্দের সময়। বিনামূল্যে সঙ্গে ডিসপ্লে কন্ডিশন এক্সটেনশন আপনি একটি প্যানেল উপাদানে একটি তারিখ পরিসীমা বা সপ্তাহের দিনের নিয়ম সেট করতে পারেন যাতে ক্রিসমাস মেনু লিঙ্কটি ডিসেম্বরে প্রদর্শিত হয় এবং জানুয়ারিতে নিজেকে সরিয়ে দেয়, মধ্যরাতে কেউ সাইটটি সম্পাদনা না করে।

প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী

সম্পর্কিত পড়া

• বিনামূল্যের জন্য এলিমেন্টর থিম নির্মাতা
• কিভাবে বিনামূল্যে এলিমেন্টরে একটি পপআপ যোগ করবেন
• ব্যবসার সময় উইজেট