تبديل القائمة

كيفية إنشاء قائمة ضخمة باستخدام Beaver Builder (طريقتان)

نشرت: 2022-11-11

حفظ قوالب منشئ الصفحات وأصول التصميم على السحابة! ابدأ في Assistant.Pro

How to create a Mega Menu using Beaver Builder
  • بيفر بيلدر

كيفية إنشاء قائمة ضخمة باستخدام Beaver Builder (طريقتان)

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

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

جدول المحتويات

  • نظرة عامة على القوائم الضخمة
  • متى تستخدم قائمة ميجا لموقع الويب الخاص بك
  • كيفية إنشاء قائمة ضخمة باستخدام Beaver Builder (طريقتان)
  • 1. مع موضوع Beaver Builder
  • 2. مع ملحق قائمة Beaver Builder Mega
  • استنتاج

نظرة عامة على القوائم الضخمة

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

باستخدام قائمة ضخمة ، يمكن للزوار عرض أي من صفحاتك واختيارها بسرعة وسهولة:

مثال على قائمة ضخمة على موقع للتجارة الإلكترونية

هناك العديد من الفوائد لاختيار قائمة ضخمة بدلاً من مجموعة من القوائم المنسدلة المختلفة. يمكن أن تكون عملية وملفتة للنظر .

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

مثال على قائمة ضخمة بالصور

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

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

متى تستخدم قائمة ميجا لموقع الويب الخاص بك

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

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

في الواقع ، قد يرغب أي موقع به الكثير من المحتوى لعرضه في الاستفادة من المساحة والمؤسسة التي يوفرها. على سبيل المثال ، قد تجدها مواقع الأخبار والمجلات وناشري المحتوى والمدونات الكبيرة مفيدة:

مثال على موقع إخباري يستخدم قائمة ضخمة

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

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

مثال على قائمة ضخمة تحتوي على أيقونات

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

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

كيفية إنشاء قائمة ضخمة باستخدام Beaver Builder (طريقتان)

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

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

1. قائمة بيفر منشئ موضوع ميجا

الطريقة الأولى لإنشاء قائمة ضخمة هي باستخدام Beaver Builder Theme. يسمح لك بتحويل القوائم المنسدلة القياسية إلى قوائم ضخمة.

قد ترغب في مشاهدة هذا الفيديو التعليمي الذي يشرح كيف:

للبدء ، قم بتنزيل وتثبيت Beaver Builder Theme:

موضوع بيفر منشئ

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

بعد ذلك ، انتقل إلى المظهر > القوائم في لوحة معلومات WordPress الخاصة بك:

قائمة مظهر WordPress

في الزاوية العلوية اليمنى ، انقر فوق خيارات الشاشة وتأكد من تحديد مربع فئات CSS :

حدد علامة تبويب خيارات الشاشة فئات CSS

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

قوائم مظهر قائمة Beaver Builder الضخمة

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

بعد ذلك ، انقر فوق السهم لأسفل لتوسيع عنصر القائمة. في حقل فئات CSS ، أدخل "القائمة الضخمة":

Beaver Builder theme mega menu CSS Class Mega-menu

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

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

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

أخيرًا ، يمكنك عرض وتحرير القائمة الضخمة الخاصة بك عن طريق النقر فوق إدارة باستخدام المعاينة المباشرة :

إدارة القائمة الضخمة مع المعاينة الحية

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

بعد ذلك ، انقر فوق " نشر " في أعلى الصفحة لحفظ تغييراتك. لاحظ أنك قد تحتاج إلى تحديث الصفحة لمشاهدة التغييرات:

مثال على القائمة الضخمة لموضوع Beaver Builder

2. مع ملحق قائمة Beaver Builder Mega

بدلاً من ذلك ، يمكنك شراء ملحق قائمة Beaver Builder Mega لإنشاء قائمة أكثر تعقيدًا وتخصيصًا. ستحتاج أيضًا إلى أن يكون لديك المكون الإضافي منشئ صفحات Beaver Builder والمكوِّن الإضافي Beaver Themer مثبتًا على موقع WordPress الخاص بك لهذه الطريقة.

قد ترغب في مشاهدة هذا الفيديو التعليمي الذي يشرح خطوة بخطوة كيفية إنشاء قائمة ضخمة باستخدام هذه الطريقة:

قم بإنشاء صف محفوظ لكل عنصر قائمة ميجا

أولاً ، ستحتاج إلى إنشاء صف محفوظ لكل عنصر قائمة ضخم. للقيام بذلك ، توجه إلى Beaver Builder > Saved Rows :

الصفوف المحفوظة من Beaver Builder

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

يضيف Beaver Builder صفًا محفوظًا جديدًا

في النافذة التالية ، انقر فوق Launch Beaver Builder لفتح المحرر. الآن ، من خلال أداة إنشاء الصفحات ، يمكنك تعديل صفك وتخصيصه بسهولة. على سبيل المثال ، يمكنك تطبيق الألوان والخلفيات. بالإضافة إلى ذلك ، يمكنك جعل صفوفك كاملة العرض أو العرض الثابت ، وإضافة أي وحدات تريدها:

إنشاء قائمة المحمول

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

أدخل اسمًا لقائمتك ، ثم انقر فوق إنشاء قائمة :

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

Beaver Builder Mega Menu إضافة عناصر القائمة

بمجرد إضافة كافة عناصر قائمة هاتفك المحمول ، انقر فوق حفظ القائمة .

قم بإنشاء قائمة منفصلة لكل عنصر قائمة منسدلة

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

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

Beaver Builder إضافة قائمة منسدلة جديدة

انقر فوق حفظ القائمة عند الانتهاء.

أضف قائمة ميجا إلى بيفر ثيمير

بعد ذلك ، يمكنك إضافة القائمة الضخمة إلى تخطيط Beaver Themer الخاص بك كرأس.

للقيام بذلك ، انتقل إلى Beaver Builder > Themer Layouts > Add New . امنح التخطيط عنوانًا ، وحدد Themer Layout لنوعك ، واختر Header كتخطيطك. ثم ، انقر فوق Add Themer Layout :

يضيف Beaver Builder رأسًا جديدًا تخطيط Beaver Themer

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

ثم ، انقر فوق Launch Beaver Builder لفتح المحرر:

تحرير تخطيط القائمة الضخمة بيفر ثيمير

قم بالوصول إلى الوحدات النمطية الخاصة بك كالمعتاد من خلال النقر على رمز الجمع ( + ). إذا قمت بتثبيت المكون الإضافي للقائمة الضخم بنجاح ، فسترى الآن وحدة Mega Menu ، والتي يمكنك سحبها إلى تخطيط العنوان الخاص بك:

وحدة قائمة Beaver Builder الضخمة

أضف عناصر القائمة إلى قائمة ميجا

في علامة التبويب عام ، يمكنك إضافة عناصر القائمة عن طريق الضغط على إضافة عناصر قائمة :

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

إذا كنت تريد تحديد القائمة المنسدلة About Us التي أنشأتها مسبقًا ، فحدد القائمة المنسدلة كنوع التنقل الخاص بك. بعد ذلك ، ضمن القائمة القياسية ، ابحث عن قائمة التنقل التي أنشأتها مسبقًا (القائمة المنسدلة> نبذة عنا ):

بخلاف ذلك ، اختر Mega Menu كنوع التنقل الخاص بك ، وحدد Saved Row الذي قمت بإنشائه في بداية هذا البرنامج التعليمي:

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

اختر قائمة الهاتف المحمول

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

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

نمط القائمة الضخمة

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

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

بعد ذلك ، مرر مؤشر الماوس فوق القائمة الضخمة لرؤيتها أثناء العمل:

استنتاج

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

للتلخيص ، إليك طريقتان يمكنك من خلالهما إنشاء قائمة ضخمة باستخدام Beaver Builder:

  1. باستخدام Beaver Builder Theme ، يمكنك إنشاء قائمة يدويًا في WordPress.
  2. مع قائمة Beaver Builder Mega Menu والمكونات الإضافية Beaver Themer Addon ، يمكنك بسهولة إنشاء قوائم ضخمة ومخصصة ومعقدة.

أسئلة ذات صلة

هل أحتاج إلى Beaver Themer لاستخدام الملحق Mega Menu Addon؟

كقاعدة عامة ، تم تصميم ملحق قائمة Beaver Builder Mega للعمل مع Beaver Themer. ومع ذلك ، إذا سمح لك المظهر الحالي بإدخال رمز قصير (أو عنصر واجهة مستخدم) في الموقع الذي تريد ظهور القائمة الضخمة فيه ، فقد يعمل هناك أيضًا.

هل تم تحسين قوائم Beaver Builder Mega للجوال؟

يحتوي المكون الإضافي Beaver Builder Mega Menu على قائمة سريعة الاستجابة للأجهزة المحمولة مع تأثير قابل للتخصيص خارج القماش. إذا كنت تريد التحكم في ما إذا كانت القائمة الضخمة تظهر على الأجهزة الصغيرة أو المتوسطة (مثل الأجهزة اللوحية) ، فيمكنك الانتقال إلى الإعدادات العامة لـ Beaver Builder وتغيير نقاط التوقف.