كيفية إنشاء قائمة مطاعم ضخمة في Elementor (دليل مجاني خطوة بخطوة)

قائمة المطاعم الضخمة عبارة عن لوحة منسدلة واسعة تضع قائمة الطعام بأكملها والمعلومات الغذائية وساعات العمل وزر الحجز في مكان واحد بدلاً من دفنها خلف عدة نقرات. يصل رواد المطعم وهم يريدون رؤية الطعام والأسعار وساعات العمل وطريقة الحجز. عادة على الهاتف. في كثير من الأحيان أثناء الاختيار بينك وبين مكان آخر.

يقوم هذا الدليل بإنشاء دليل باستخدام Elementor المجاني والمجاني إضافات رئيسية قائمة ميجا. ليست هناك حاجة إلى Elementor Pro. هذه هي النتيجة النهائية. يفتح Hovering “Dishes” قائمة المطاعم الكاملة مع الفئات والأسعار والعلامات الغذائية الخاصة بالليلة وزر حجز الطاولة

إذا كنت تحب نمط القائمة الضخمة للمطعم، فيمكنك تنزيله واستيراده في أداة إنشاء عناصر واجهة المستخدم للإضافات الرئيسية. ثم يمكنك بسهولة تخصيص لون النص والصورة وعنوان URL وما إلى ذلك بناءً على احتياجاتك واستخدامه في القائمة الضخمة على موقع المطعم الخاص بك.

قم بتنزيل قائمة المطاعم الضخمة

ما يجب أن تحتويه القائمة الضخمة للمطعم

قبل بناء أي شيء، قرر ما الذي يكسب مكانًا في اللوحة. يحتوي التصميم الذي نبنيه في هذا الدليل على أربع مناطق، وهي تغطي كل مطعم تقريبًا

ما يجب تركه: قصتك الكاملة، والإشارات الصحفية، والخلاصات الاجتماعية. هؤلاء ينتمون التذييل. لوحة التنقل مخصصة لإيصال الأشخاص إلى مكان ما، وليس لسرد القصة بأكملها.

هل تحتاج إلى Elementor Pro لهذا؟

توجد أداة القائمة الضخمة الخاصة بـ No. Elementor داخل Elementor Pro، لكن المسار المجاني أدناه ينشئ نفس اللوحة بدون اشتراك.

بالنسبة لمطعم ذو موقع واحد يقوم بتحديث قائمته عدة مرات في السنة، فإن الامتداد المجاني يكفي. قد تستمر مجموعة أكبر متعددة المواقع تتنقل بين العديد من المحررين في الحصول على قيمة من مجموعة أدوات Pro الأوسع، ولكن هذا قرار بشأن الموقع بأكمله، وليس بشأن القائمة الضخمة على وجه التحديد. العنصر يوثق سير عمل قائمة Pro mega الخاصة به هنا إذا كنت تريد مقارنتها مباشرة.

ما تحتاجه

• العنصر (الإصدار المجاني جيد)
• الإضافات الرئيسية للعنصرمثبتة ونشطة
• الصفحات التي تم إنشاؤها بالفعل لأقسام القائمة الخاصة بك (يمكن أن تكون عناصر نائبة في الوقت الحالي)

الخطوة 1: تمكين ملحق القائمة الضخمة

تحتفظ Master Addons بكل عنصر واجهة مستخدم وملحق خلف مفتاح التبديل حتى لا يتم تحميل العناصر غير المستخدمة أبدًا. انتقل إلى الإضافات الرئيسية → الإعدادات، افتح ملحقات علامة التبويب، والعثور القائمة الضخمة في مجموعة العرض. اقلب مفتاح التبديل الخاص به وانقر حفظ التغييرات. إذا لم تشاهد التبديل، فمن المحتمل أنك تستخدم إصدارًا قديمًا من البرنامج المساعد، لذا قم بالتحديث أولاً.

الخطوة 2: قم ببناء قائمة WordPress وتشغيل القائمة الضخمة

اذهب الى المظهر → القوائم وقم ببناء الهيكل العظمي قبل لمس أي تصميم. في هذا البناء تسمى القائمة القائمة الرئيسية مع خمسة عناصر: الصفحة الرئيسية، الأطباق، من نحن، المدونة، الحساب. “Dishes” هو العنصر الذي يحصل على اللوحة الضخمة.

احصل على الهيكل الصحيح أولاً. يتم إرفاق اللوحة الضخمة بعنصر القائمة، لذا فإن إعادة الترتيب بعد ذلك تعني إعادة أعمال التصميم.

مع الامتداد النشط، أ إضافات رئيسية قائمة ميجا يظهر المربع في العمود الأيسر من شاشة القوائم. تبديلها تمكين القائمة الضخمة تبديل على. في اللحظة التي تفعل فيها ذلك، اللون الأرجواني ماستر ميجا تظهر الشارة بجوار كل عنصر في القائمة. هذه الشارة هي المكان الذي توجد فيه خيارات القائمة الضخمة لكل عنصر.

الخطوة 3: قم بتشغيل القائمة الضخمة لعنصر أطباقك

انقر فوق ماستر ميجا شارة على عنصر “Dishes”. يتم فتح النافذة المنبثقة للإعدادات بأربع علامات تبويب: المحتوى والإعدادات والأيقونة والشارة.

1. على ال محتوى علامة التبويب، اقلب تمكين ميجامينو التبديل إلى نعم. يضيء زر تحرير محتوى Megamenu.
2. على ال إعدادات علامة التبويب، اضبط حجم اللوحة وسلوكها. استخدمنا عرض مخصص بسعر 1000 بكسل، عريض بما يكفي لشبكة الأطباق بالإضافة إلى بطاقة مميزة. العرض الكامل موجود أيضًا إذا كان تصميمك يحتاج إلى الشاشة بأكملها.
3. تعيين قائمة الجوال إلى محتوى البناء، تأثير الزناد للتحليق، و الانتقال إلى تتلاشى. تعد علامات التبويب "الأيقونات" و"الشارة" من الإضافات الاختيارية (شارة “New” في القائمة الموسمية، على سبيل المثال).
4. انقر يحفظ.

يمكنك تكوين عرض القائمة الضخمة من علامة التبويب الإعدادات: العرض الكامل أو الافتراضي أو العرض المخصص مثل 1000px. تحتوي علامة التبويب نفسها على مصدر القائمة المتنقلة، وتأثير المشغل (التمرير أو النقر)، والرسوم المتحركة للانتقال، والتبديل لتسمية القائمة ووصفها

الخطوة 4: تصميم اللوحة في العنصر

مرة أخرى في علامة التبويب المحتوى، انقر فوق تحرير محتوى Megamenu. تفتح اللوحة في محرر Elementor العادي، فتصممها مثل أي صفحة أخرى. قم ببناء المناطق الأربع من الجدول أعلاه

• شريط الرأس: اسم المطعم بالإضافة إلى ملاحظة مطبخ قصيرة (مطبخ “ مفتوح حتى الساعة 11:00 مساءً · فرن خشبي يعمل يوميًا في الساعة 4”). تجيب المذكرة بهدوء على سؤال “هل يفتحون؟” دون أن يصطاد أحد لساعات.
• الشريط الجانبي للفئة: المقبلات، المعكرونة والريسوتو، البيتزا المطهوة على الحطب، الأطباق الرئيسية والمشويات، الحلويات، النبيذ والمشروبات، كل منها يحتوي على عدد الأطباق.
• شبكة الطبق: الاسم والوصف المكون من سطر واحد والسعر والعلامات مثل اختيار نباتي أو حار أو شيف. تتعامل العلامات مع التصفية الغذائية بدون عمود منفصل.
• بطاقة مميزة وتذييل الحركة: الليلة خاصة مع الصورة والسعر، أ احجز زر الجدول، ساعات العمل والعنوان، ورابط “Download القائمة الكاملة (PDF)”. إذا كنت تفضل إظهار أوقات العمل المنظمة، فإن القطعة ساعات العمل يبقيها قابلة للتحرير في مكان واحد.

يظل كل اسم طبق وسعر وعلامة قابلة للتحرير من لوحة Elementor الموجودة على اليسار. يعد تحديث القائمة لاحقًا بمثابة تحرير محتوى، وليس مهمة تصميم. انشر القالب عند الانتهاء وأغلق المحرر.

الخطوة 5: ضع القائمة في رأسك

تحتاج القائمة الضخمة إلى رأس للعيش فيه. إذا كان رأس السمة الخاصة بك يعرض القائمة الرئيسية بالفعل، فيمكنك تخطي هذه الخطوة، ولكن إنشاء الرأس باستخدام Master Addons يحتفظ بكل شيء في محرر واحد. منشئ السمات مجاني، على عكس Elementor Pro.

1. اذهب الى الإضافات الرئيسية → منشئ الموضوع وانقر إضافة قالب جديد.
2. اضبط نوع القالب على رأس، التبديل التنشيط في، وتحت الشروط اختر تضمين → الموقع بأكمله.
3. انقر تحرير باستخدام العنصر.

داخل قالب الرأس، اسحب إلى قائمة التنقل القطعة واختيار القائمة الرئيسية ضمن القائمة المحددة. اضبط التخطيط على الوضع الأفقي وقم بمحاذاته حسب ما يتطلبه تصميم الرأس. يحمل عنصر “Dishes” اللوحة الضخمة الخاصة به تلقائيًا.

الخطوة 6: قم بالتمرير والتحقق من النتيجة

انشر الرأس وافتح موقعك. قم بالتمرير على موقع “Dishes” وستنزل قائمة المطعم الكاملة على الصفحة: الفئات على اليسار، والأطباق التي تحتوي على الأسعار في المنتصف، وأطباق الليلة الخاصة، وزر حجز طاولة على اليمين.

انقر فوق كل فئة للتأكد من أن عدد الأطباق والروابط تتصرف، ثم تحقق من اللوحة مقابل الصفحة الموجودة خلفها. تحتاج اللوحة الداكنة فوق البطل المظلم إلى حدود أو ظل بحيث تظل حوافه مرئية.

الخطوة 7: حافظ على سرعته

يتم تحميل صور القائمة على كل صفحة من صفحات موقعك، لذا فإن القائمة الضخمة المهملة تؤدي إلى إبطاء موقع المطعم بأكمله. تفقد مواقع المطاعم البطيئة رواد المطعم الذين يقارنون الخيارات على بيانات الهاتف المحمول.

• استخدم صورة واحدة في اللوحة (العرض الخاص المميز)، وليس في المعرض.
• اضغط عليه وقدم WebP؛ قم بقياسه إلى المساحة التي يشغلها بالفعل.
• اكتب نصًا بديلًا حقيقيًا (“wood-fired margherita Pizza”). فهو يساعد على إمكانية الوصول والبحث عن الصور.
• تحقق من عموما الخاص بك سرعة صفحة العنصر بعد إضافة القائمة، وليس قبل ذلك.

الخطوة 8: اجعلها تعمل على الهواتف

معظم حركة المرور في المطاعم تكون متنقلة، وغالبًا ما تكون من الأشخاص الذين يقفون بالخارج ويقررون ما إذا كانوا سيدخلون أم لا. ولهذا السبب قمنا بالتعيين قائمة الجوال إلى محتوى البناء مرة أخرى في الخطوة 3. نفس اللوحة التي صممتها تخدم تخطيط الهاتف بدلاً من قائمة الروابط المجردة. لا يزال يتعين على اللوحة العريضة أن تنهار برشاقة

• قم بإخفاء الصورة الخاصة على الهاتف المحمول، واحتفظ بزر حجز الجدول. تتعامل عناصر التحكم في الرؤية سريعة الاستجابة الخاصة بـ Elementor مع هذا لكل عنصر.
• ضع روابط الفئة أولاً في ترتيب التراص؛ هذا هو الغرض الذي جاء من أجله زوار الهاتف.
• حافظ على إمكانية الوصول إلى زر Table” الخاص بـ “Reserve دون تمرير طويل.
• اختبار على هاتف حقيقي. معاينة المحرر تقارب سلوك اللمس؛ لا يعيد إنتاجه.

إذا كانت نقطة توقف الجهاز اللوحي الافتراضية تقطع اللوحة الخاصة بك بشكل غير ملائم، فقم بتعيين اللوحة الخاصة بك مجانًا تمديد نقاط التوقف المخصصة.

اختياري: عرض العناصر الموسمية تلقائيًا

تقدم المطاعم عروضًا محددة زمنيًا باستمرار: عروض الغداء الخاصة، وقوائم الأعياد، والساعة السعيدة. مع مجانا تمديد شروط العرض يمكنك تعيين نطاق زمني أو قاعدة يوم من الأسبوع على عنصر اللوحة بحيث يظهر رابط قائمة عيد الميلاد في ديسمبر ويزيل نفسه في يناير، مع عدم قيام أحد بتحرير الموقع في منتصف الليل.

الأسئلة المتداولة

القراءة ذات الصلة

• منشئ سمات Elementor مجانًا
• كيفية إضافة نافذة منبثقة في Elementor مجانًا
• القطعة ساعات العمل