هل تريد إنشاء قائمة ملء الشاشة في Elementor؟ إذا كان الأمر كذلك، فإن هذه المقالة سوف تظهر لك كيف.

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

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

مع Elementor، فمن السهل إنشاء قائمة ملء الشاشة حتى بدون مهارات تقنية متقدمة.

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

إذا كنت لا ترى ما نريد التحدث عنه اليوم ، فتحقق من هذا الفيديو.

كيفية إنشاء قائمة ملء الشاشة في Elementor

طاولة ماتيير


لماذا تختار قائمة ملء الشاشة؟

1. تجربة مستخدم غامرة

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

2. تسليط الضوء على المحتوى

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

3. التنقل الواضح والمريح

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

4. مرونة التصميم

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

5. تحسين التحويل

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

6. القدرة على التكيف مع الهاتف المحمول

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

7. سهولة إدارة المحتوى الديناميكي

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

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


كيفية إنشاء قائمة ملء الشاشة في Elementor

قم بإعداد مساحة العمل الخاصة بك في Elementor

مقدمة للبدء:

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

اقرأ هذا لمعرفة المزيد: Elementor Free vs Elementor Pro: مقارنة تفصيلية بين الميزات

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

ملاحظة : يحتوي Elementor على العشرات من النماذج المنبثقة لتختار من بينها. في هذا البرنامج التعليمي، سنقوم بإنشاء نموذجنا من الصفر.

إضافة قالب القائمة

  • اذهب القوالب -> النوافذ المنبثقة.
  • قم بإنشاء قالب منبثق جديد بالنقر فوق الزر "إضافة قالب جديد".
إنشاء قائمة ملء الشاشة في Elementor

في النافذة المنبثقة التي تظهر:

  • حدد نوع القالب (منبثق)
  • قم بتسمية القالب المنبثق الخاص بك
  • انقر على زر قم بإنشاء قالب
إنشاء قالب Elementor
  • إغلاق النافذة المنبثقة
  • أضف قسمًا جديدًا من خلال النقر على أيقونة "+" واختيار بنية كاملة العرض.
أضف قسمًا جديدًا في النافذة المنبثقة

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

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

تخصيص القائمة

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

إذا أردت، يمكنك تغيير خلفية القسم وتخصيص زر الإغلاق المنبثق. لذلك :

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

تكوين خيارات العرض

  • تكوين الإعدادات لـ الرؤية من القائمة في وضع ملء الشاشة. انتقل إلى إعدادات القسم الذي يحتوي على القائمة وتأكد من أن القسم يشغل كامل عرض وارتفاع الشاشة.
  • ضبط خيارات الانتقال للقائمة. يمكنك اختيار الرسوم المتحركة لإظهار القائمة بملء الشاشة وتختفي بسلاسة.

انظر أيضا: كيفية تعيين موضع مخصص لقائمة الجوال في Elementor

نشر وتكوين شروط العرض

بمجرد الانتهاء من إنشاء القالب المنبثق:

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

اختبار وضبط قائمة ملء الشاشة الخاصة بك

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

اختبار وضبط قائمة ملء الشاشة الخاصة بك

استدعاء القالب المنبثق

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

اقرأ هذا المنشور لمعرفة المزيد عن كيفية ذلك إنشاء رأس مخصص باستخدام Elementor.

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

في هذا البرنامج التعليمي، نستخدم القطعة أيقونة.

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

بعد التخصيص، هذه هي النتيجة التي حصلنا عليها:

كيفية إنشاء قائمة ملء الشاشة في Elementor

الأسئلة الشائعة حول كيفية إنشاء قائمة ملء الشاشة في Elementor

هل يمكنني استخدام قائمة ملء الشاشة في صفحات محددة فقط؟

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

هل من الممكن تخصيص مظهر قائمة الشاشة الكاملة دون مهارات البرمجة؟

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

هل يمكنني استخدام الرسوم المتحركة في قائمة ملء الشاشة؟

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

الموارد ذات الصلة :


وفي الختام

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

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

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

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

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

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

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

يعلقون عليه على موقع Pinterest