بعض المحتوى يكسب مكانًا في الصفحة. أما الباقي، أو القائمة، أو قائمة الأسئلة الشائعة، أو نموذج الاتصال، فمن الأفضل أن يتم حذفه حتى يطلبه شخص ما. ال أداة المحتوى خارج القماش في ماستر أدونز برو يخفي أي قالب Elementor خلف زر ويحركه من جانب الشاشة أو أعلىها أو أسفلها عند نقر الزوار.
يمكنك اختيار قالب محفوظ، ووضع زر التشغيل، واختيار كيفية دخول اللوحة. يتبع هذا الدليل عنصر واجهة المستخدم من لوحة العناصر إلى لوحة الأسئلة الشائعة القابلة للانزلاق للخارج على الصفحة المباشرة.
ما تفعله أداة المحتوى غير القماشي #
تضع الأداة زر تشغيل على صفحتك وتربطه بلوحة مخفية. محتوى اللوحة هو أي قالب من مكتبة Elementor الخاصة بك، لذا فإن قائمة الهاتف المحمول أو الأسئلة الشائعة الضخمة أو ملخص سلة التسوق أو نموذج الاشتراك كلها تعمل بنفس الطريقة. عندما ينقر الزائر على الزر، تنزلق اللوحة أو تتلاشى فوق الصفحة مع تراكب خافت خلفها وأيقونة إغلاق في رأسها.
كل شيء يحدث في عنصر واجهة مستخدم واحد: المشغل، واللوحة، والرسوم المتحركة، والتصميم. لا يوجد مكون إضافي منبثق منفصل، ولا توجد رموز مختصرة للقالب.
قبل أن تبدأ #
- ووردبريس مع العنصر مثبتة ونشطة.
- ماستر أدونز برو تم تثبيته بترخيص نشط، نظرًا لأن محتوى Off-Canvas هو عنصر واجهة مستخدم Pro. جديد في البرنامج المساعد؟ انظر ال دليل التثبيت.
- قالب Elementor محفوظ لإظهاره داخل اللوحة. قم ببناء واحد ضمن القوالب في لوحة المعلومات الخاصة بك أولاً؛ يستخدم العرض التوضيحي هنا قسم الأسئلة الشائعة الجاهز.
كيفية إضافة عنصر واجهة المستخدم للمحتوى خارج اللوحة القماشية #
في محرر Elementor، ابحث في عناصر لوحة ل محتوى خارج القماش، أو قم بالتمرير إلى قسم الإضافات الرئيسية، واسحبه إلى الصفحة. يظهر زر تشغيل أزرق يسمى انقر هنا على اللوحة القماشية. تظل اللوحة نفسها مخفية حتى تختار القالب وتفتحه.
اختر القالب وقم بإعداد اللوحة #
ال محتوى يحتوي القسم على الإعدادات الأساسية للوحة.
- حدد القالب: قالب العنصر الذي تعرضه اللوحة. يظهر أي قسم أو قالب صفحة محفوظ في هذه القائمة المنسدلة.
- عنوان الرأس والعنوان: قم بتشغيل رأس اللوحة واكتب التسمية الخاصة بها، مثل “Explore FAQ”. أيقونة الإغلاق موجودة في نفس الرأس.
- موضع: من أي حافة تأتي اللوحة. المزيد عن هذا أدناه.
- عرض: ما مدى عرض اللوحة بـ px، % أو vw، 300px افتراضيًا. تستخدم اللوحات من الأعلى أو الأسفل أ ارتفاع التحكم في px أو % أو vh بدلاً من ذلك.
- رسوم الدخول ونوع المدخل: كيف تصل اللوحة. تتلاشى أو تنزلق أو تنمو للرسوم المتحركة أو تغطي أو تضغط من أجل النوع. يضع الغلاف اللوحة فوق الصفحة؛ يدفع الدفع الصفحة جانبًا لإفساح المجال.
- مدة الرسوم المتحركة: سرعة الدخول بالثواني 0.6 افتراضيًا.
- فتح افتراضيا: ابدأ الصفحة واللوحة مفتوحة بالفعل. مفيد أثناء التصميم، حيث يمكنك تصميم اللوحة دون النقر فوق المشغل بعد كل تغيير.
تكوين زر التشغيل #
ال زر المجموعة في نفس علامة التبويب تتحكم في المشغل. إظهار العنوان و عنوان تعيين التسمية؛ يعيد العرض التوضيحي تسميته من انقر هنا إلى السؤال المتكرر. محاذاة ضع الزر يسارًا أو وسطًا أو يمينًا في عموده.
إظهار الأيقونة يضيف أيقونة بجانب الملصق، و حدد أيقونة يفتح مكتبة أيقونات Elementor حتى تتمكن من الاختيار من Font Awesome أو أي مجموعة أيقونات قمت بتثبيتها. مسافة الأيقونة يضبط الفجوة بين الرمز والنص.
اختر المكان الذي تنزلق منه اللوحة #
ال موضع يقدم Dropdown ستة خيارات: اليمين واليسار والأعلى والأسفل والوسطى والنسبي.
اليمين واليسار هما لوحات الأدراج الكلاسيكية. اختر واحدة ويقوم المحرر بمعاينتها على الفور: تنزلق اللوحة مع القالب بالداخل، والرأس في الأعلى، وأيقونة الإغلاق جاهزة.
يقوم الجزء العلوي والسفلي بتبديل عنصر التحكم في العرض بـ ارتفاع شريط التمرير يقاس بارتفاع إطار العرض. يعمل الشريط العلوي بسرعة 30 فولت مثل درج الإعلانات النحيف.
الأوسط يتوسط اللوحة مثل مشروط. يقوم النسبي بتثبيت اللوحة على زر التشغيل نفسه، باستخدام مسافة التحكم في الفجوة، مما يحول الأداة إلى كشف بأسلوب منسدل. ملاحظة واحدة من اللوحة نفسها: الرسوم المتحركة Fade فقط هي التي تعمل مع الموضع النسبي.
اضبط العرض والرسوم المتحركة للمدخل #
بالعودة إلى الوضع الجانبي، يقوم العرض التوضيحي بتوسيع اللوحة إلى 500 بكسل ويقوم بتبديل الرسوم المتحركة المدخل للانزلاق مع نوع المدخل على الدفع. مع الدفع، ينتقل محتوى الصفحة مع دخول اللوحة بدلاً من تغطيتها. حافظ على المدة حوالي نصف ثانية؛ يبدأ الأبطأ في الشعور بالانتظار.
نمط اللوحة #
ال أسلوب تحتوي علامة التبويب على ثلاثة أقسام: زر, رأس، و حاوية.
زر #
أنماط المشغل: الخلفية، ولون النص، والطباعة، والحدود، والحشوة، مع الحالات العادية والتحويم. يحول العرض التوضيحي اللون الأزرق الافتراضي إلى لون بحري داكن يطابق الصفحة.
رأس #
أنماط الشريط في الجزء العلوي من اللوحة المفتوحة.
- رأس عكسي: قم بتبديل العنوان وإغلاق جوانب الأيقونة، بحيث تتحرك علامة X من اليمين إلى اليسار.
- الحشو: مساحة حول محتوى الرأس.
- أيقونة الإغلاق: اللون والخلفية ولون الحدود وحجم الخط وحجم الصندوق والحدود للزر X. حافظ على حجم الصندوق عند 24 أو أكثر إذا كان جمهورك يستخدم الهواتف في الغالب؛ من السهل تفويت هدف النقر بـ 12 بكسل.
حاوية #
أنماط جسم اللوحة وما يحيط بها.
- لون الخلفية، لون الحدود، ظل الصندوق، نوع الحدود، نصف قطر الحدود، الحشو: سطح اللوحة نفسها.
- لون خلفية التراكب: اللون الموجود على بقية الصفحة أثناء فتح اللوحة. تراكب داكن يسحب التركيز إلى اللوحة.
- شريط التمرير: لون وعرض شريط التمرير للألواح الأطول من الشاشة.
النتيجة على الصفحة #
في الصفحة المباشرة، يوجد الزر في المكان الذي وضعته فيه. تقوم النقرة بتحريك اللوحة من الحافة المختارة، وتعتيم الصفحة خلفها، وإظهار القالب الخاص بك مع الرأس وأيقونة الإغلاق في الأعلى. يقوم الزائرون بإغلاقه باستخدام علامة X، عن طريق النقر فوق التراكب أو بالضغط على Esc.
حالات الاستخدام الشائعة #
- القوائم المتنقلة والثانوية ينزلق من الجانب دون ازدحام الرأس.
- الأسئلة الشائعة ولوحات المساعدة مثل العرض التوضيحي، احتفظ بالإجابات بنقرة واحدة على الصفحات المقصودة.
- نماذج الاتصال أو الاقتباس يتم فتح ذلك فوق الصفحة بدلاً من العيش على صفحة منفصلة.
- أدراج العربة والحساب على صفحات المتجر، باستخدام عربة التسوق أو أداة الحساب من WooCommerce أو مكون إضافي آخر.
- أشرطة الإعلان من الحافة العلوية باستخدام الموضع العلوي بارتفاع صغير.
نصائح للحصول على لوحة أفضل خارج القماش #
- قم ببناء القالب أولاً. تسرد الأداة القوالب المحفوظة فقط، لذا قم بتصميم محتوى اللوحة ضمن القوالب قبل سحب الأداة للداخل.
- مطابقة العرض للمحتوى. 300 بكسل تناسب القائمة؛ تتنفس النماذج وقوائم الأسئلة الشائعة بشكل أفضل حوالي 450 إلى 500.
- استخدم الدفع باعتدال. يبدو الأمر ملفتًا للنظر، لكن تغيير الصفحة بأكملها قد يبدو متقلبًا عند المحتوى الطويل. الغلاف ذو التراكب الداكن هو الإعداد الافتراضي الأكثر هدوءًا.
- تذكر القاعدة النسبية. تعمل الرسوم المتحركة Fade فقط عند تعيين الموضع على Relative.
- تحقق من اللوحة على الهاتف المحمول. لوحة 500 بكسل أوسع من العديد من الهواتف؛ قم بتعيين عرض أصغر لنقطة توقف الهاتف المحمول باستخدام عنصر التحكم سريع الاستجابة.
الأسئلة المتداولة #
ما هي أداة المحتوى غير القابل للتطبيق في الإضافات الرئيسية؟
إنها أداة Elementor التي تخفي قالبًا محفوظًا خلف زر التشغيل وتقوم بتمريره كلوحة عند النقر عليه. فهو يتعامل مع الزر وموضع اللوحة والرسوم المتحركة للمدخل والتراكب وأيقونة الإغلاق في عنصر واجهة مستخدم واحد.
هل يمكنني إظهار أي قالب Elementor في اللوحة؟
نعم. يسرد القائمة المنسدلة "تحديد القالب" كل قالب محفوظ في مكتبة Elementor الخاصة بك. يتم تحميل القوائم وأقسام الأسئلة الشائعة والنماذج والتخطيطات المخصصة الكاملة داخل اللوحة تمامًا كما هو مصمم.
ما هي الاتجاهات التي يمكن فتح اللوحة منها؟
تتوفر ستة مواضع: اليمين، واليسار، والأعلى، والأسفل، والوسطى، والنسبي. تستخدم اللوحات الجانبية العرض، وتستخدم اللوحات العلوية والسفلية ارتفاع إطار العرض، وتقوم اللوحة النسبية بتثبيت اللوحة على زر التشغيل مع التحكم في المسافة.
ما الفرق بين الغطاء والدفع؟
يقوم الغلاف بتحريك اللوحة فوق الصفحة بينما يؤدي التراكب إلى تعتيم الخلفية. يؤدي الدفع إلى تحريك محتوى الصفحة جانبًا لإفساح المجال للوحة. الغلاف هو الإعداد الافتراضي الأكثر أمانًا؛ يعد الدفع أكثر دراماتيكية ولكنه يغير التخطيط بأكمله.
هل يمكن فتح اللوحة غير القماشية تلقائيًا؟
نعم. قم بتشغيل فتح افتراضيًا في إعدادات المحتوى وتبدأ اللوحة في الفتح عند تحميل الصفحة. يمكن للزوار إغلاقه برمز الإغلاق عن طريق النقر على التراكب أو باستخدام مفتاح Esc، وإعادة فتحه باستخدام زر التشغيل.
إلتحاق بالركب #
تقوم أداة Off-Canvas Content بتحويل أي قالب محفوظ إلى لوحة منزلقة للخارج: اختر القالب، ثم ضع زر التشغيل، واختر الحافة والرسوم المتحركة، وقم بتصميم كل شيء بدءًا من الزر وحتى شريط التمرير. يقترن بشكل طبيعي مع قائمة التنقل أداة للتنقل عبر الهاتف المحمول ومع عناصر واجهة المستخدم النموذجية للوحات النقر للاتصال. تصفح المجموعة الكاملة من عناصر واجهة المستخدم والإضافات الرئيسية لمعرفة ما يتم شحنه أيضًا في الصندوق، راجع صفحة عناصر واجهة المستخدم للمحتوى خارج اللوحة للحصول على العروض التوضيحية والمقارنة مع أداة Elementor Pro Off-Canvas، وتحقق من صفحة التسعير للخطط الاحترافية.
