هل يحتاج زوار موقعك إلى التمرير فوق قائمة منسدلة غير ملائمة ، على أمل اختيار الخيار الصحيح؟ فأنت بحاجة إلى قائمة ضخمة. في هذا البرنامج التعليمي ، سنوضح لك كيفية إنشاء قائمة ووردبريس الضخمة المخصصة الخاصة بك باستخدام Elementor و Crocoblock.
هل تبحث عن طريقة سهلة لإنشاء قائمة ووردبريس الضخمة؟
القوائم الضخمة هي قوائم كبيرة قابلة للتوسيع حيث يكون كل شيء مرئيًا في وقت واحد
– لا يحتاج الزوار إلى المرور فوق قائمة منسدلة غير ملائمة لمحاولة اختيار الخيار الصحيح أو البحث في التذييل الخاص بك للعثور على ما يبحثون عنه.
نظرًا لأن القوائم الضخمة مفيدة جدًا ، فهي خيار عالمي جدًا على العديد من مواقع الويب الناجحة ، من الكبيرة متاجر التجارة الإلكترونية مثل Amazon و Walmart للناشرين الكبار مثل NBC News والعديد من المواقع الأخرى – قد يكون موقعك أيضًا بنهاية هذا المنشور.
ومع ذلك ، لا يدعم ووردبريس القوائم الضخمة افتراضيًا. لذلك ، ما لم يكن السمة الخاصة بك تحتوي بالفعل على ميزة القائمة الضخمة المضمنة الخاصة بها (والتي عادة ما تكون محدودة على أي حال) ، فلا يمكنك الاستفادة من أسلوب التصميم المفيد هذا. لهذا السبب نحن هنا للمساعدة.
في هذا البرنامج التعليمي ، سنوضح لك كيف يمكنك إنشاء الخاصة بك ووردبريس مخصص القائمة الضخمة باستخدام العنصر و Crocoblock’s JetMenu. ستتمكن من تخصيص كل جزء من قائمتك الضخمة باستخدام واجهة Elementor المرئية ويمكنك حتى استخدام ظروف العرض لإظهار قوائم ضخمة مختلفة في أجزاء مختلفة من موقعك.
الأهم من ذلك ، أنك ستتمكن أيضًا من التحكم في السلوك المتجاوب ، بما في ذلك خيار استخدام قوائم أو قوالب مختلفة لزوار سطح المكتب مقابل مستخدمي الأجهزة المحمولة.
تعد القوائم الضخمة خيارًا رائعًا لمجموعة متنوعة من مواقع ووردبريس. على حد تعبير خبراء تجربة المستخدم القائمة على البحث ، Nielsen Norman Group، “القوائم الضخمة تعمل بشكل جيد للتنقل في الموقع … إنها اختيار تصميم ممتاز لاستيعاب عدد كبير من الخيارات أو للكشف عن صفحات الموقع ذات المستوى الأدنى في لمحة.”
هذا ملخص جيد جدًا – توفر القوائم الضخمة خيارًا سهل الاستخدام لإبراز محتوى أعمق على موقعك.
لديك فقط مساحة كبيرة في المستوى الأعلى قائمة الإبحار. إذا حاولت احتواء أكثر من ستة عناصر تنقل عالية المستوى أو نحو ذلك ، فستبدأ قائمتك في الشعور بالفوضى والارتباك. ومع ذلك ، من المحتمل أن يكون لديك أكثر من ست صفحات مهمة على موقعك ، لذا تمنحك القائمة الضخمة طريقة سهلة الاستخدام لتظل من السهل على زوارك العثور على تلك الصفحات الأخرى.
أحد المجالات التي يستخدم فيها كل موقع تقريبًا قائمة ضخمة هي التجارة الإلكترونية. محلات نشطةتحتوي على جميع أنواع الفئات ذات المستوى الأدنى والتي من المهم عرضها للزوار. تتيح لك القائمة الضخمة القيام بذلك بضربة واحدة:
التجارة الإلكترونية الضخمة القائمة على سبيل المثال
هذه ترقية ضخمة من الطريقة “القديمة” لعمل الأشياء ، والتي كانت تقوم ببناء قوائم مكدسة مع الكثير من القوائم الفرعية. هذا يتطلب من الزائر أن يكون “طائرًا” رئيسيًا وخطأ واحد سيعيده إلى البداية:
القوائم المكدسة مع القوائم الفرعية على سبيل المثال
مثال على الطريقة “الخاطئة” لعرض الكثير من خيارات القائمة
إليك بعض الأمثلة على متاجر التجارة الإلكترونية الكبيرة التي تستخدم قوائم ضخمة:
وول مارت ميجا القائمة
وول مارت
قائمة etsy-Mega
إيتسي
القوائم الضخمة ليست فقط لمتاجر التجارة الإلكترونية ، على الرغم من ذلك. يُعد هذا التكتيك خيارًا رائعًا لأي نوع من مواقع الويب حيث تحتاج إلى جعل الكثير من المعلومات ذات المستوى الأدنى في متناول زوارك.
على سبيل المثال ، مواقع الويب الإخبارية ، والمجلات ، وناشري المحتوى ، والشركات ، وما إلى ذلك ، فيما يلي بعض الأمثلة على الطرق المتنوعة التي تدمج بها المواقع المختلفة القوائم الضخمة في تصميماتها:
الولايات المتحدة الأمريكية اليوم ميجا القائمة
الولايات المتحدة الأمريكية اليوم
الصرخة الضخمة القائمة
عواء
قائمة تيلدا ميجا
تيلدا
قائمة duvine الضخمة
دوفين
قائمة الكوازار الضخمة
كوازار
بناء قائمة أفضل مع Elementor
لنذهب
يمنحك Elementor ملف منشئ السحب والإفلات المرئيمع كل إمكانيات التصميم التي تحتاجها لإنشاء قائمة الطعام الضخمة الخاصة بك. ومع ذلك ، لإضافة الوظيفة الفعلية لتحقيق تأثير القائمة الضخم (بخلاف التصميم فقط) ، ستحتاج إلى مساعدة من جهة خارجية إضافية.
على وجه التحديد ، ما تحتاجه JetMenu من Crocoblock، وهو مدرج في قاعدة بيانات الوظائف الإضافية Elementor الخاصة بنا. في حين أن هناك مكونات إضافية أخرى يمكنها إضافة وظائف قائمة ضخمة إلى Elementor ، فإن JetMenu يجعل من السهل الإعداد ويتضمن واجهة سهلة الاستخدام.
كما يقدم المزايا التالية:
إنه مصمم لـ Elementor لذا فهو متوافق مع جميع عناصر واجهة المستخدم والميزات الأخرى لـ Elementor. يمكنك أيضًا تضمين محتوى ديناميكي ، مثل قائمة بأحدث منشورات المدونة أو المنتجات.
يمكنك تصميم كل شيء باستخدام واجهة Elementor المألوفة – ليست هناك حاجة لاستخدام التعليمات البرمجية أو تعلم واجهة جديدة.
يمكنك استخدام قوائم مختلفة لزوار سطح المكتب مقابل زوار الجوال. ستحصل أيضًا على خيارات أخرى خاصة بالجوال للتحكم في سلوك القائمة الضخمة لزوار الجوال.
بالنسبة لبقية المنشور ، سنركز على توضيح كيفية إعداد قائمة ووردبريس الضخمة باستخدام Elementor و JetMenu خطوة بخطوة
إليك العملية الأساسية لإنشاء قائمة ضخمة باستخدام Elementor و JetMenu:
قم بإعداد القائمة الخاصة بك ( المظهر ← القوائم ).
قم بتمكين JetMenu واختر عنصر القائمة الذي تريد فتح قائمة ميجا.
صمم قائمتك الضخمة باستخدام Elementor.
اعرض القائمة الضخمة الخاصة بك في قالب Header باستخدام Elementor Theme Builder وعناصر واجهة JetMenu الضخمة.
سنأخذك خلال كل شيء خطوة بخطوة.
للبدء ، تأكد من تثبيت المكونات الإضافية التالية:
العنصر
إليمينتور برو – أنت بحاجة إلى هذا لإنشاء قالب رأس مخصص باستخدام Theme Builder.
JetMenu – يمكنك شراء المكون الإضافي JetMenu فقط مقابل 24 دولارًا للاستخدام على موقع واحد أو يمكنك شراء حزمة من جميع المكونات الإضافية Crocoblock مقابل 130 دولارًا.
للبدء ، تحتاج إلى إعداد قائمتك الأساسية باستخدام إعدادات قائمة ووردبريس العادية. للوصول إلى هذه الإعدادات ، انتقل إلى المظهر ← القوائم .
إذا لم تكن قد أنشأت بالفعل قائمة لموقعك ، فستحتاج إلى التأكد من أنك قمت بإعداد هيكل القائمة. في الخطوة التالية ، ستتمكن من تحويل عنصر أو أكثر من عناصر القائمة ذات المستوى الأعلى إلى قائمة ضخمة عندما يحوم المستخدم فوقها:
elementor-mega-menu-1-set-up-menu-architecture
على سبيل المثال ، يمكنك أن ترى أن هناك عنصر قائمة لـ “Shop”. في الخطوة التالية ، ستتمكن من القيام بذلك بحيث تتوسع القائمة الضخمة عندما يحوم المستخدم فوق عنصر قائمة التسوق.
بمجرد أن تصبح راضيًا عن هيكل القائمة (أو إذا قمت بالفعل بإعداد هيكل القائمة) ، يمكنك الانتقال إلى الخطوة التالية.
بعد ذلك، استخدم التبديل في إعدادات المواقع JetMenu ل تمكين JetMenu عن الموقع الحالي تحت القائمة الأولية الإعدادات.
بمجرد تمكين JetMenu ، يمكنك التمرير فوق عنصر القائمة الذي تريد تشغيل قائمة ميجا والنقر فوق الزر JetMenu :
elementor-mega-menu-2-enable-jetmeu
يجب أن يؤدي النقر فوق الزر JetMenu إلى فتح نافذة منبثقة.
في النافذة المنبثقة ، تأكد من ضبط تمكين القائمة الفرعية Mega على تفعيل وحفظ التغييرات:
elementor-mega-menu-3-enable-mega-submenu
هذا هو الإعداد الوحيد الذي يجب تهيئته ، ولكن هناك إعدادات اختيارية أخرى قد ترغب في وضعها في الاعتبار. ستتيح لك هذه الإعدادات الأخرى:
قم بتغيير موضع القائمة الضخمة بالنسبة لعنصر القائمة.
قم بتعيين عرض قائمة ميجا مخصص.
أضف أيقونات أو شارات.
ضبط المساحة المتروكة المخصصة لعنصر القائمة.
إذا لم تكن متأكدًا من كيفية تأثير إعداد معين على القائمة الضخمة الخاصة بك ، فيمكنك دائمًا العودة إلى هذه الإعدادات لاحقًا بمجرد أن تتعرف على شكل القائمة الضخمة الخاصة بك بالإعدادات الافتراضية.
بعد ذلك ، انقر فوق الزر Edit Mega Menu Item Item لتشغيل واجهة Elementor. ستفتح الواجهة في نافذة منبثقة ، لكنها نفس واجهة Elementor العادية بخلاف ذلك.
الآن ، يمكنك إنشاء تصميم للقائمة الضخمة نفسها. هذا هو المحتوى الذي سيظهر أسفل عنصر القائمة عندما يقوم المستخدم بتمرير الماوس فوقه.
إن كيفية إنشاء هذا التصميم أمر متروك لك تمامًا. إذا لم تكن لديك فكرة من أين تبدأ ، يمكنك البدء بإنشاء قسم بتخطيط من عمودين أو ثلاثة أعمدة.
هنا ، قمنا بإنشاء تصميم وهمي بسيط من ثلاثة أعمدة لتوضيح كيف يمكنك القيام بذلك:
elementor-mega-menu-5-design-mega-menu. العنصر-ميجا-القائمة-5-تصميم-ميجا-القائمة
لإعطائك فكرة عن كيفية ظهور هذا التصميم في النهاية في الواجهة الأمامية ، إليك مثال على القائمة الضخمة الحقيقية التي يتم تشغيلها عند التمرير:
elementor-mega-menu-6-front-end-mega-menu
مرة أخرى ، هذا عادل موضوع مرحباوبعض المحتوى الوهمي البسيط بخلفية رمادية لتوضيح المفهوم. ولكن يمكنك أن ترى أن القائمة الضخمة تعرض بشكل أساسي القسم فقط ، ولكن في تخطيط مضمّن.
مع وضع ذلك في الاعتبار ، لا تتردد في استخدام أي عناصر واجهة مستخدم Elementor في تصميمك. يمكنك حتى إحضار محتوى ديناميكي.
على سبيل المثال ، يمكنك استخدام أداة المشاركات لعرض أحدث منشورات المدونة تلقائيًا في القائمة الضخمة. يمكنك أيضًا تضمين نموذج اتصال وخرائط وما إلى ذلك.
تأكد من حفظ التصميم الخاص بك عند الانتهاء. يمكنك إغلاق النافذة المنبثقة بالنقر فوق “X” في الزاوية العلوية اليمنى (قد يكون من الصعب رؤية الرمز ، ولكن يجب أن يكون هناك).
في هذه المرحلة ، تكون قد انتهيت تقريبًا. الخطوة الأخيرة هي إنشاء قالب رأس باستخدام Elementor Theme Builder بحيث يمكنك تشغيل القائمة الضخمة بشكل صحيح.
للقيام بذلك ، انتقل إلى Templates → Theme Builder لفتح Elementor Theme Builder. ثم قم بإنشاء قالب رأس جديد:
عنصر-ميجا-menu-7-theme-builder-create-header
يمكنك إما الاختيار من أحد قوالب الرأس المبنية مسبقًا أو تصميم قالب خاص بك من البداية.
ومع ذلك ، بدلاً من استخدام عنصر واجهة مستخدم Elementor Nav Menu المدمج كما تفعل عادةً ، فأنت بحاجة إلى إضافة عنصر واجهة مستخدم JetMenu’s Mega Menu (أو عنصر واجهة مستخدم Vertical Mega Menu إذا كنت تريد جعله عموديًا بدلاً من أفقيًا). سترى هذه العناصر في قسم JetElements من الشريط الجانبي Elementor أو يمكنك البحث عنها بالاسم.
في إعدادات عنصر واجهة المستخدم Mega Menu ، يمكنك اختيار القائمة التي أنشأتها في الخطوة رقم 1 لزوار سطح المكتب.
يمكنك استخدام نفس القائمة لزوار الجوال أو لديك أيضًا خيار اختيار قائمة منفصلة لزوار الجوال. لاستخدام القوائم المنفصلة ، ستحتاج إلى إنشاء قائمة أخرى فقط لزوار الهاتف المحمول في واجهة المظهر ← القوائم :
عنصر-القائمة-ميجا -8-ميجا-القائمة-القطعة
يمكنك أيضًا استخدام الإعدادات الأخرى لعنصر واجهة المستخدم Mega Menu للتحكم في تخطيط الهاتف المحمول وخيارات التصميم العام والأسلوب والتخطيط.
في إعدادات Mobile Layout ، تحصل على الكثير من الخيارات لتكوين سلوك الهاتف المحمول مثل:
ما إذا كان سيتم إخراج القائمة الضخمة أو القائمة المنسدلة أو دفع محتوى آخر.
موقف الحاوية.
ما إذا كان سيتم إغلاق القائمة الضخمة بعد التنقل.
إلخ.
elementor-mega-menu-9-mobile-layout
وهذا كل شيء! بمجرد نشر قالب العنوان الخاص بك ، سيتم نشر القائمة الضخمة الجديدة الخاصة بك.
إذا كان موقعك يحتوي على الكثير من المحتوى / الفئات التي تحتاج إلى تقديمها للزوار ، فإن القائمة الضخمة هي أفضل طريقة لجعل عناصر التنقل هذه قابلة للوصول مع الحفاظ على موقعك نظيفًا وسهل الاستخدام. لهذا السبب سترى القوائم الضخمة المستخدمة من قبل العديد من مواقع الويب المختلفة.
لا يجعل ووردبريس من السهل إنشاء قائمة ضخمة افتراضيًا. ولكن مع Elementor و Crocoblock ، يمكنك الحصول على القدرة على إنشاء قوائمك الضخمة المخصصة باستخدام واجهة السحب والإفلات المرئية من Elementor.
قم بإنشاء أول قائمة ضخمة لك اليوم وقم بتحسين التنقل في موقع ووردبريس الخاص بك. للبدء،تثبيت Elementor و إليمينتور برو واحصل على نسختك من JetMenu.
هل لا يزال لديك أي أسئلة حول كيفية إنشاء قائمة ووردبريس الضخمة باستخدام Elementor و Crocoblock؟
