كيفية إنشاء Mega Menu مع Elementor؟ باستخدام قائمة التنقل!

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

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

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

لماذا إنشاء قائمة ميجا باستخدام Elementor؟

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

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

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

كيفية إنشاء قائمة ضخمة باستخدام Elementor باستخدام Nav Menu

لإنشاء قائمة Mega مع Elementor ، نوصيك باستخدام Nav Menu. إنه حل Elementor Mega Menu المتاح مجانًا. ولكن قبل أن تتمكن من استخدامه ، تحتاج إلى إعداد تصميم قائمة بسيط يمكنك دمجه مع قائمة التنقل.

قم بإنشاء قائمة

لنبدأ بعملية إنشاء القائمة الصحيحة لموقعك على الويب. أولاً ، افتح لوحة تحكم مسؤول WordPress وانتقل إلى المظهر> القوائم .

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

بعد ذلك ، قم بتسمية قائمة Mega الخاصة بك وانقر فوق الزر "إنشاء قائمة".

قد يُطلب منك موقع القائمة ، ولكن نظرًا لأننا سنستخدم قائمة Elementor Mega ، فلا تقم بإعداد أي موقع قائمة. يمكنك أيضًا إزالة أي قائمة من مواقع القائمة من علامة تبويب مواقع القائمة.

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

في الوقت الحالي ، لنقم بإنشاء قائمة تسوق ضخمة بسيطة مع منتجات WooCommerce وصفحات WooCommerce المهمة فقط.

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

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

الآن بعد أن قمنا بإعداد قائمتنا الأساسية ، دعنا نمضي قدمًا ونحفظها بالنقر فوق زر القائمة حفظ .

إعداد قائمة التنقل لـ Elementor

الآن بعد أن أضفنا القائمة ، حان الوقت لبدء إنشاء قائمة Mega في Elementor. للقيام بذلك ، دعنا ننشئ نموذجًا جديدًا. انتقل إلى لوحة تحكم مسؤول WordPress> القوالب> إضافة قالب جديد . ثم حدد نوع القالب كرأس ، وقم بتسميته وانقر فوق إنشاء قالب.

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

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

الآن ، تحت التخطيط ، سيتعين عليك اختيار القائمة التي تريد استخدامها لقائمة Elementor Mega. استخدم خيار القائمة وحدد القائمة التي أنشأتها للتو للأداة. وهذا يجب أن يحدد قائمتك. ومع ذلك ، هناك الكثير الذي يمكنك القيام به باستخدام Elementor و Nav Menu.

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

تخصيص قائمة ميجا الخاصة بك مع Elementor

سيؤدي النقر فوق قائمة Mega على Elementor إلى نقلك على الفور إلى خيارات التخصيص الخاصة بها على الشريط الجانبي الأيسر. دعنا نمضي قدمًا ونغير بعض الخيارات.

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

يمكنك أيضًا اختيار رموز مختلفة لمؤشرات القائمة الفرعية.

تحسين قائمة Mega الخاصة بك للجوال باستخدام Elementor

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

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

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

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

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

الكلمات الأخيرة

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

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

لذا ، لتلخيص العملية ، دعنا نلاحظ الأشياء التي تحتاج إلى القيام بها لإعداد قائمة Elementor mega:

• قم بإنشاء وتخصيص قائمة WordPress الخاصة بك
• قم بإنشاء قالب رأس وأضف عنصر واجهة المستخدم Mega Menu إليه
• تخصيص عنصر واجهة المستخدم لقائمة ميجا
• أضف شروط العرض إلى قالب الرأس الخاص بك وقم بنشره

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

إذا كنت قد بدأت للتو بقوائم ضخمة ، فإن Nav Menu يعد خيارًا ممتازًا. ومع ذلك ، إذا كنت تريد المزيد من الوظائف المتقدمة ، فنحن نوصي بـ QuadMenu. يضيف كل الميزات التي تحصل عليها مع قائمة التنقل مع المزيد من خيارات التخصيص. كل شيء بدءًا من الخيارات المحددة المتعلقة بالجوال وحتى الألوان الكاملة وتخصيص الخلفية والعناصر والأيقونات الإضافية التي يمكنك إضافتها إلى موقع الويب الخاص بك. وبالمثل ، تقدم المكونات الإضافية الأخرى مثل قائمة Clever Mega المزيد من الخيارات لتضمين عناصر المتجر وجعل موقع الويب الخاص بك أكثر مصاحبة.

لمزيد من أدوات Elementor ، يمكنك التحقق من مقالتنا حول أفضل المكونات الإضافية لـ Elementor لـ WordPress.

هل أنشأت قائمة Elementor Mega باستخدام قائمة التنقل؟ ما هي الطرق الأخرى التي تستخدمها؟ واسمحوا لنا أن نعرف في قسم التعليقات أدناه!