أداة Elementor Off-Canvas للوحات والقوائم المنزلقة (Pro)
المحتوى خارج اللوحة هو عنصر واجهة مستخدم Master Addons Pro يضع زرًا على الصفحة ويفتح لوحة عندما ينقر عليها الزائر. تعرض اللوحة قالب Elementor محفوظًا، حتى تتمكن من وضع قائمة أو نموذج اتصال أو مرشحات أو عرض ترويجي بداخله وإعادة استخدام نفس القالب في صفحات أخرى. اختر مكان ظهور اللوحة وكيفية تحريكها وكيف يبدو الزر. يقوم الزائرون بإغلاقه باستخدام أيقونة الإغلاق، بالنقر فوق التراكب أو بالضغط على Esc.
لا يحتوي Free Elementor على عنصر واجهة مستخدم غير قابل للتركيب. أضاف Elementor Pro واحدًا في الإصدار 3.22، ويحتاج إلى تشغيل ميزات Flexbox Containers وNested Elements. هذه الأداة هي خيار Master Addons Pro: فهي تفتح أي قالب محفوظ، من أي جانب، خلف زر تقوم بتصميمه مرة واحدة.
كيفية إضافة لوحة خارج القماش في Elementor
أنت بحاجة إلى Elementor ونشط ماستر أدونز برو رخصة.
- اذهب الى القوالب، القوالب المحفوظة، قم بإنشاء قالب، وقم ببناء محتوى اللوحة ونشره.
- تحرير الصفحة، والبحث عن محتوى خارج القماش واسحبه إلى حيث يجب أن يظهر الزر.
- في حدد القالب، اختر القالب الذي قمت بحفظه.
- اختر أ موضع وضبط العرض أو الارتفاع.
- اختر الرسوم المتحركة للمدخل والمدة.
- اضبط عنوان الزر أو الرمز، ثم قم بتصميم الزر والرأس والحاوية في علامة التبويب "النمط".
انظر ال إعدادات المحتوى خارج اللوحة القماشية دليل لكل خيار.
لمحة سريعة عن المحتوى خارج القماش
| تعيين | ماذا يفعل |
|---|---|
| مصدر المحتوى | قالب Elementor محفوظ: صفحة أو قسم أو حاوية (يسرد القائمة المنسدلة كل عنصر في المكتبة باستثناء المجموعات) |
| المواقف | اليمين، اليسار، الأعلى، الأسفل، الأوسط، النسبي (منسدلة أسفل الزر) |
| الرسوم المتحركة المدخل | تتلاشى أو تنزلق أو تنمو؛ يدعم النسبي التلاشي فقط |
| نوع المدخل | يقوم الغلاف بتحريك اللوحة فوق الصفحة؛ يؤدي الدفع إلى نقل الصفحة عبرها. يتم تقديم الدفع للأعلى واليسار واليمين |
| مقاس | العرض بـ px، % أو vw لليسار واليمين والوسطى والنسبي؛ الارتفاع بـ px، % أو vh للأعلى والأسفل والأوسط والنسبي؛ كلاهما لكل جهاز |
| يغلق مع | أيقونة الإغلاق، أو النقر على التراكب، أو مفتاح Esc؛ يعمل أيضًا Enter أو Space على أيقونة الإغلاق المركزة |
| إضافات | فتح افتراضيًا، الرسوم المتحركة المدة بالثواني، عنوان الرأس برأس عكسي، قفل تمرير الصفحة أثناء الفتح، زر تشغيل قابل للأسلوب مع نص أو رمز أو كليهما |
| يفتح من | الزر الخاص بأداة واجهة المستخدم فقط (لا يوجد محدد CSS أو مشغل خارجي) |
| الاحتياجات | Elementor (مجاني أو احترافي) بالإضافة إلى Master Addons Pro |
موضع اللوحة وحجمها والرسوم المتحركة
موضع العروض اليمين واليسار والأعلى والأسفل والوسطى والنسبية. تحصل اللوحات اليسرى واليمنى والوسطى على عرض بـ px أو % أو vw، وتحصل اللوحات العلوية والسفلية والوسطى على ارتفاع بـ px أو % أو vh، كل منها قابل للتعديل لكل جهاز. الرسوم المتحركة المدخل هل Fade أو Slide أو Grow، وFade فقط هو الذي يعمل مع Relative. تحتوي اللوحات اليسرى واليمنى والعلوية أيضًا على نوع المدخل من الغطاء أو الدفع. تعيين مدة الرسوم المتحركة في ثوان، وتشغيل فتح افتراضيا إذا كان يجب أن تبدأ اللوحة مفتوحة.
الغطاء والدفع هما نوعان من أنواع المدخل. مع تغطية اللوحة تنزلق فوق الصفحة والتراكب يخفت ما هو خلفها. مع الدفع، تتحرك الصفحة بأكملها بعرض اللوحة، بحيث يظل المحتوى مرئيًا بجانب القائمة. الدفع متاح للوحات العلوية واليسرى واليمنى؛ الغلاف السفلي والوسطى والنسبي دائمًا.
- لوحة يسارية أو يمينية مع قائمة موقعك للشاشات الصغيرة.
- لوحة علوية لإعلان قصير أو نموذج بحث.
- لوحة وسطية كشرط بسيط لنموذج الاشتراك.
زر الزناد والرأس وتصميم الحاوية
يمكن أن يُظهر زر التشغيل عنوانًا أو رمزًا أو كليهما، مع إعدادات مسافة الأيقونة ومحاذاةها. قم بتصميم لونه ولون الخلفية ولون الحدود العادي والتحليق، بالإضافة إلى ظل الصندوق والطباعة وحجم SVG والحشو ونوع الحدود ونصف قطر الحدود. داخل اللوحة، رأس يقوم القسم بتصميم أيقونة الإغلاق وعنوان الرأس الاختياري، ويقوم الرأس العكسي بتبديل أماكنهما. ال حاوية يقوم القسم بتعيين خلفية اللوحة والحدود والحشوة ولون التراكب ولون شريط التمرير وعرضه.
- زر همبرغر للأيقونات فقط في الرأس.
- زر نص “اتصل بنا” الذي يفتح النموذج.
- لون تراكب ذو علامة تجارية يخفت الصفحة خلف اللوحة.
Elementor Pro Off-Canvas مقابل Master Addons Off-Canvas Content
القائمة غير القماشية هي الاستخدام الأكثر شيوعًا. لا تقوم أداة واجهة المستخدم هذه بإنشاء القائمة نفسها، لذا عليك وضع أداة القائمة في القالب أولاً. إذا كنت بحاجة إلى القائمة فقط، فإن الإضافات الرئيسية قائمة التنقل تحتوي الأداة أيضًا على تخطيط همبرغر بنوع غير قماشي في Pro، والذي يتخطى خطوة القالب. استخدم محتوى Off-Canvas عندما تحتوي اللوحة على أكثر من قائمة، مثل الشعار وتفاصيل الاتصال والروابط الاجتماعية.
| ميزة | Elementor Pro خارج القماش | الإضافات الرئيسية للمحتوى خارج اللوحة القماشية |
|---|---|---|
| سعر | يحتاج العنصر برو | يحتاج إلى إضافات رئيسية برو |
| محتوى اللوحة | مدمج داخل الأداة في وضع التحرير | قالب Elementor محفوظ يمكنك إعادة استخدامه |
| كيف يفتح | أي زر أو رابط باستخدام الإجراء Off-Canvas | زر التشغيل الخاص بالعنصر واجهة المستخدم |
| موضع | البداية الأفقية والرأسية أو المركز أو النهاية | اليمين أو اليسار أو الأعلى أو الأسفل أو الأوسط أو النسبي |
| الرسوم المتحركة | الرسوم المتحركة للدخول والخروج | تتلاشى أو تنزلق أو تنمو مع غطاء أو دفع |
| إغلاق | التراكب وEsc، يمكن إيقاف تشغيل كل منهما؛ يمكن قفل تمرير الصفحة | أغلق الرمز أو انقر فوق التراكب أو Esc |
| رأس مدمج | لا | عنوان الرأس وأيقونة الإغلاق |
| فتح افتراضيا | ليس إعداد القطعة | نعم |
يفوز Elementor Pro عندما يجب أن يفتح أي رابط في الصفحة اللوحة أو عندما تريد خروج الرسوم المتحركة. تتناسب الإضافات الرئيسية عندما يظهر قالب واحد خلف زر جاهز في العديد من الصفحات. للحصول على لوحة بحث، راجع أيضًا يبحث القطعة.
كيفية إنشاء قائمة خارج اللوحة القماشية في Elementor
القائمة غير القماشية هي الاستخدام الأكثر شيوعًا. لا تقوم الأداة بإنشاء القائمة بنفسها، لذا عليك وضع عنصر واجهة المستخدم في القائمة في القالب أولاً.
- قم بإنشاء قالب محفوظ وأضف عنصر واجهة مستخدم القائمة، مثل الإضافات الرئيسية المجانية قائمة التنقل اضبط على تخطيط عمودي.
- نشر القالب.
- في رأسك، أضف محتوى Off-Canvas وحدد هذا القالب.
- اضبط الموضع على اليسار أو اليمين، والعرض على حوالي 320 بكسل، ورسوم الدخول المتحركة على الشريحة.
- قم بإيقاف تشغيل عنوان العرض، وقم بتشغيل أيقونة العرض واختر أيقونة الأشرطة حتى يبدو الزر مثل الهامبرغر.
- استخدم رؤية Elementor سريعة الاستجابة لإظهار هذا الزر فقط على الجهاز اللوحي والهاتف المحمول إذا احتفظ رأس سطح المكتب بقائمته العادية.
الحاجيات ذات الصلة: قائمة التنقل بالنسبة للقائمة الموجودة داخل اللوحة، فإن القائمة الضخمة ملحق لقوائم الرأس الكبيرة، منشئ النوافذ المنبثقة للطبقات الموقوتة أو نية الخروج، علامات التبويب لتبديل المحتوى في مكانه، و شروط العرض لإظهار المشغل على الصفحات المختارة فقط.
قائمة ملء الشاشة في Elementor
قائمة ملء الشاشة هي الموضع الأوسط مع ضبط العرض على 100 فولت في الساعة والارتفاع على 100 فولت في الساعة. ضع قالبًا به قائمة رأسية كبيرة بداخله، واختر مدخل Fade حتى تظهر الطبقة في مكانها، وأعط الحاوية خلفية صلبة حتى لا يظهر أي شيء من خلالها. يوجد رمز الإغلاق في رأس اللوحة، ويغلق مفتاح Esc الطبقة أيضًا.
تفصيل واحد من ورقة الأنماط: يتم وضع حد أقصى للوحات بنسبة 90% من إطار العرض، لذا فإن لوحة 100 فولت في الساعة تترك هامشًا شاملاً. أضف هذه القاعدة إلى CSS المخصص للصفحة لإزالة الغطاء
.jltma-offcanvas-wrap .jltma-offcanvas-content { max-width: 100% !important; max-height: 100% !important; }
يتم إدخال لقطات الشاشة خطوة بخطوة كيفية إنشاء قائمة بملء الشاشة في Elementor.
القائمة الجانبية المنزلقة للخارج (التنقل على الشريط الجانبي)
للحصول على قائمة جانبية، اضبط الموضع على اليسار أو اليمين والعرض في px، وحوالي 320 px للقائمة و400 px للوحة التي تحتوي على تفاصيل الاتصال. اختر الدفع عندما يجب أن تتحرك الصفحة جانبًا وتظل قابلة للقراءة، أو قم بتغطية الوقت الذي يجب أن تجلس فيه اللوحة في الأعلى. يمكن للقالب أن يحمل قائمة التنقل عنصر واجهة مستخدم في تخطيطه الرأسي وشعار وبعض خطوط الاتصال وزر.
يعد الشريط الجانبي الذي يظل مرئيًا طوال الوقت مهمة مختلفة. قم ببناء ذلك باستخدام تخطيط حاوية مكون من عمودين واحتفظ بهذه الأداة للوحة التي تنزلق عند الطلب. ال دليل القائمة الجانبية للعنصر يغطي كلا.
أمثلة على لوحة خارج القماش
افتح كل عرض توضيحي أدناه لرؤية اللوحة تتحرك: لوحة اتصال يمينية، وقائمة يسارية تدفع الصفحة عبرها، ولوحة منسدلة تستخدم الموضع النسبي، وشريط إعلان من الحافة العلوية، وورقة سفلية بها ساعات العمل وقائمة بملء الشاشة مبنية من الموضع الأوسط.
الأسئلة المتداولة للمحتوى خارج اللوحة
هل أداة المحتوى غير القابل للقراءة مجانية؟
رقم المحتوى خارج اللوحة القماشية هو جزء من ماستر أدونز برو. البرنامج المساعد المجاني لا يتضمنه.
كيف يمكنني إضافة محتوى إلى اللوحة غير القماشية؟
قم بإنشاء المحتوى كقالب Elementor محفوظ أولاً، مثل القائمة أو النموذج أو العرض الترويجي. ثم اختر هذا القالب في القائمة المنسدلة "تحديد القالب" الخاصة بعنصر واجهة المستخدم. يمكنك إعادة استخدام قالب واحد في عدة لوحات.
هل يجب أن أستخدم لوحة غير قماشية أو نافذة منبثقة؟
استخدم لوحة غير قماشية للتنقل وللمحتوى الذي يطلبه الزائر بالنقر فوقه، مثل القائمة أو عوامل التصفية أو تفاصيل الاتصال. استخدم نافذة منبثقة للرسائل الموقوتة أو رسائل نية الخروج وللنماذج التي يجب أن تنقطع. يتم تمرير صفحة القفل أثناء الفتح.
كيف يمكنني تغيير سرعة الرسوم المتحركة؟
قم بتعيين مدة الرسوم المتحركة في علامة التبويب المحتوى. القيمة بالثواني، حيث يكون 0.6 هو الإعداد الافتراضي ونطاق من 0 إلى 15. تفتح القيم المنخفضة اللوحة بشكل أسرع. ينطبق الإعداد على كل رسوم متحركة للمدخل وعلى كل من Cover وPush.
لماذا لا تفتح اللوحة غير القماشية الخاصة بي؟
تحقق من ثلاثة أشياء. يجب أن يشير تحديد القالب إلى قالب منشور، وإلا ستقوم اللوحة بطباعة إشعار بدلاً من المحتوى. يجب أن يكون المشغل هو الزر الخاص بالعنصر واجهة المستخدم، لأنه لا يمكن لأي عنصر آخر فتحه. ويجب إيقاف الفتح افتراضيًا إلا إذا كنت تريد فتحه عند التحميل.
هل يمكنني بناء قائمة غير قماشية بها؟
نعم. ضع عنصر واجهة مستخدم القائمة مثل الإضافات الرئيسية قائمة التنقل في القالب المحفوظ، حدده في محتوى Off-Canvas، ثم اضبط الموضع على اليسار أو اليمين واستخدم رمز الشريط للزر. بالنسبة للقائمة وحدها، فإن تخطيط Nav Menu Hamburger في Pro له نوع خاص به خارج اللوحة.
هل يؤدي محتوى اللوحة إلى إبطاء صفحتي؟
يتم عرض القالب في الصفحة عند تحميله، ثم يتم إخفاؤه حتى يتم النقر فوق الزر. تضيف اللوحة التي تحتوي على عدد قليل من عناصر واجهة المستخدم وزنًا قليلًا، ولكن يتم تحميل أشرطة التمرير الثقيلة أو مقاطع الفيديو بداخلها مع الصفحة، لذا حافظ على قوالب اللوحة خفيفة.
هل يمكنني فتح اللوحة من أيقونة الرأس الخاصة بي؟
لا. تفتح اللوحة فقط من الزر الذي تعرضه الأداة، لذلك لا يمكن تشغيل رمز موجود أو رابط قائمة موجود. بالنسبة لقائمة الرأس التي تفتح من أيقونة همبرغر، استخدم تخطيط همبرغر الخاص بأداة قائمة التنقل مع النوع Offcanvas بدلاً من ذلك.
هل هناك أداة مجانية غير قابلة للنسيج لـ Elementor؟
البرنامج المساعد المجاني لـ Elementor لا يحتوي على أي شيء. يتضمن Elementor Pro عنصر واجهة مستخدم Off-Canvas من الإصدار 3.22 عند تشغيل حاويات Flexbox والعناصر المتداخلة. يعد محتوى Off-Canvas جزءًا من Master Addons Pro ويفتح أي قالب محفوظ، وهو ما لا تفعله أداة Pro.
عناصر واجهة المستخدم والملحقات الشائعة
إنشاء مواقع متطورة في وقت أقل.
التشكل الزجاجي
إضافات الحاويات
أنماط
![ملحق Master Addons Post/Page Duplicator لـ Elementor: رابط صف MA Duplicator في قائمة صفحات WordPress لإنشاء صفحة مقصودة - مسودة [مكررة #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
ناسخ البريد/الصفحة
