أداة Elementor Flip Box مع الرسوم المتحركة لبطاقة Hover Flip
Flipbox عبارة عن أداة صندوق الوجه Master Addons لـ Elementor، دون الحاجة إلى Elementor Pro. يُظهر الوجه الأمامي رمزًا أو صورة بعنوان ونص قصير، وعند التمرير، تتحول البطاقة إلى الوجه الخلفي بمزيد من التفاصيل وزر الإجراء. تأتي الأداة مع تصميمات الأيقونة الافتراضية والأمامية و6 رسوم متحركة: Flip Horizontal وFlip Vertical وFade وFlip Box وFlip Box Fade وFade Up. ماستر أدونز برو يضيف تصميمات Front Image وDiagonal و16 رسمًا متحركًا إضافيًا، بما في ذلك Cube وRollover و3 D Flip، ليصبح المجموع 22. يحتوي Elementor نفسه على صندوق قابل للطي فقط في Elementor Pro.
اختلافات التصميم والرسوم المتحركة الوجه
اختلاف التصميم يضبط التخطيط الأمامي: يأتي الرمز الافتراضي والأيقونة الأمامية مع الأداة والصورة الأمامية والاحتياجات القطرية الاحترافية. أسلوب الرسوم المتحركة يضبط كيفية دوران البطاقة. متضمنة: Flip Horizontal، Flip Vertical، Fade، Flip Box، Flip Box Fade وFade Up. يضيف Pro أربعة اتجاهات مكعبة، Fade Hideback، Fade Up Hideback، أربعة اتجاهات شرائح، شريحتين قطريتين، Fade In Out، Nananana، Rollover و3 D Flip، والتي لها إعداد الاتجاه الخاص بها.
- إجمالي 22 رسمًا متحركًا: 6 متضمنة و16 مع Pro.
- يتم تشغيل الوجه على التمرير على سطح المكتب والنقر على شاشات اللمس.
- استخدم رسمًا متحركًا واحدًا لكل قسم حتى يبدو صف البطاقات متسقًا.
منشئ المحتوى ثنائي الجانب
ال الصندوق الأمامي و الصندوق الخلفي لكل منها رمز خاص بها مع عرض افتراضي أو مكدس أو مؤطر وشكل دائرة أو مربع وعنوان ووصف ومحاذاة وعلامة عنوان. إبقاء الجزء الأمامي قصيرًا، مثل اسم الخدمة، واستخدام الجزء الخلفي للشرح. في علامة التبويب "النمط"، يحصل كل وجه على ألوان الخلفية والعنوان والوصف والطباعة وألوان الأيقونات والحدود الخاصة به.
- محتوى وتصميم منفصل لكل وجه.
- عنوان HTML العلامة على كلا الوجهين، لذلك تحافظ شبكة البطاقات على ترتيب عنوان نظيف.
- أ ارتفاع صندوق الوجه الإعداد بشكل عام يحافظ على كلا الوجهين بنفس الحجم.
زر CTA مع التمرير
ال زر العمل يظهر على الوجه الخلفي مع زر النص والرابط الخاص بك. قم بتصميمه بشكل عادي وتمريره باستخدام لون النص والخلفية والحدود ونصف قطر الحدود والحشوة، بالإضافة إلى الطباعة. الزر هو الرابط الوحيد داخل الأداة. لجعل البطاقة بأكملها قابلة للنقر عليها، أضف رابط الغلاف امتداد إلى القطعة.
- استخدم تسمية محددة مثل “See Pricing” عندما يكون هذا هو المكان الذي يذهب إليه الرابط.
- تخطي الزر الموجود على بطاقات المعلومات البحتة.
- إذا كنت تستخدم رابط المجمع، قم بتوجيه الزر إلى نفس الصفحة.
Flipbox في لمحة
يسرد الجدول ما تفعله الأداة اليوم، اقرأ من مصدر البرنامج المساعد في الإصدار 3.2.6.
| عنصر | صندوق الوجه |
|---|---|
| اختلافات التصميم | 4: تم تضمين الرمز الافتراضي والأمامي؛ الصورة الأمامية والقطرية مع Pro |
| الرسوم المتحركة | 22: 6 متضمنة (Flip Horizontal، Flip Vertical، Fade، Flip Box، Flip Box Fade، Fade Up) و16 مع Pro (أربعة اتجاهات مكعبة، اثنان من Hideback Fades، أربع شرائح، شريحتان قطريتان، Fade In Out، Nananana، Rollover، 3 د الوجه) |
| المحتوى الأمامي والخلفي | أيقونة أو صورة (صورة بتصميم Pro Front Image)، وعنوان بعلامة HTML الخاصة به، ووصف ومحاذاة على كل وجه |
| نمط الأيقونة | افتراضي، مكدس أو مؤطر، على شكل دائرة أو مربع |
| الزناد | قم بالتمرير على سطح المكتب، ثم اضغط أولاً على شاشات اللمس. لا يوجد مشغل نقر |
| رابط الصندوق بأكمله | لا. يحمل زر الرجوع الرابط؛ يجعل ملحق رابط المجمع البطاقة بأكملها قابلة للنقر عليها |
| التحكم في الارتفاع | نعم، ارتفاع الصندوق القابل للطي في الأسلوب، عام |
| وضع دائري | لا |
| 3D اتجاه الوجه | 4 اتجاهات على الرسوم المتحركة Pro 3D Flip |
| الاحتياجات | إضافات Elementor وMaster. Pro للتصميمين الإضافيين والرسوم المتحركة الـ 16 الإضافية |
Elementor Pro Flip Box مقابل Master Addons Flipbox
يحتوي Elementor Pro على أداة Flip Box الخاصة به. إذا كنت تدفع ثمنها بالفعل، فقد لا تحتاج إلى واحدة أخرى. وإليك كيفية المقارنة بين الاثنين.
| ميزة | صندوق Elementor Pro Flip Box | الإضافات الرئيسية Flipbox |
|---|---|---|
| سعر | يحتاج العنصر برو | الإضافات الرئيسية؛ المزيد من التصاميم والرسوم المتحركة في Pro |
| تأثيرات الوجه | الوجه، الانزلاق، الدفع، التكبير، التصغير والتلاشي، مع الاتجاه والعمق ثلاثي الأبعاد | 6 منها تتضمن رسومًا متحركة، 22 منها مع Pro، بما في ذلك Cube وRollover و3 D Flip |
| الزناد | تحوم | يحوم؛ اضغط أولاً على شاشات اللمس |
| الرسم الأمامي | لا شيء، صورة أو أيقونة | أيقونة، أو صورة بتصميم Pro Front Image |
| رابط البطاقة بالكامل | تطبيق الرابط على: الصندوق الكامل أو الزر فقط | الزر فقط، أو البطاقة بأكملها مع ملحق Wrapper Link |
| زر | نعم | نعم، مع التصميم العادي والتحويم |
يعد Elementor Pro أبسط إذا كنت تريد إنشاء رابط كامل. يعمل Master Addons على Elementor بدون Pro ويوفر المزيد من خيارات الرسوم المتحركة مع Pro الخاص به. للحصول على بطاقة ثابتة لا تحتوي على أي شيء مخفي، استخدم صندوق المعلومات القطعة.
بطاقة الوجه CSS أو أداة صندوق الوجه؟
البطاقة القابلة للطي هي نفس الصندوق القابل للطي: وجه أمامي يدور إلى وجه خلفي. يمكنك كتابة واحدة يدويًا تحتوي على حوالي 40 سطرًا من CSS باستخدام المنظور، ونمط التحويل: الحفاظ على ثلاثي الأبعاد ورؤية الوجه الخلفي: مخفية، وإسقاطها في عنصر واجهة مستخدم HTML. يعد هذا المسار مناسبًا لبطاقة واحدة في الصفحة التي تتحكم فيها.
يحتوي إصدار CSS على ثلاث مشكلات متكررة. لا تحتوي شاشات اللمس على أي تحوم، لذلك لا تنقلب البطاقة أبدًا إلا إذا قمت بإضافة معالج النقر. يحتاج كلا الوجهين إلى ارتفاع ثابت أو تقفز البطاقة أثناء دورانها. وكل تغيير في اللون أو النص أو الرمز يعني تحرير التعليمات البرمجية مرة أخرى، غالبًا داخل حقل CSS مخصص يحتاج إلى Elementor Pro. تتعامل أداة Flipbox مع النقر والارتفاع والتصميم من لوحة المحرر، وتمنحك زر الوجه الخلفي و22 رسمًا متحركًا وتنوعًا في التصميم لكل بطاقة دون لمس الرمز.
أفكار ونصائح Flip Box
يحافظ الصندوق القابل للطي على الشبكة نظيفة بينما لا يزال يحمل التفاصيل، لأن الوصف موجود خلف البطاقة بدلاً من أسفلها. إنها تعمل بشكل جيد مع شبكات الخدمة، وبطاقات الفريق التي تحتوي على صورة في الأمام وسيرة ذاتية في الخلف، وتتميز بالبلاطات والبطاقات الإحصائية التي تنقلب إلى ما يعنيه الرقم.
- ضبط ارتفاع صندوق الوجه. بدونها، يقوم الوجه الخلفي الأطول بتغيير حجم البطاقة أثناء دورانها وقفز الصف.
- اجعل الوجوه تبدو مختلفة. اللون الموجود في الأمام ولون علامتك التجارية في الخلف يجعل الوجه واضحًا.
- خطة للهواتف. لا تحتوي شاشات اللمس على أي تحوم، لذا تنقلب البطاقة عند النقر ويحتاج الزر إلى نقرة ثانية. اختبار على هاتف حقيقي.
- احتفظ بالتفاصيل الأساسية في المقدمة. يجب ألا تكون الأسعار وأرقام الهواتف وروابط الحجز مباشرة على الوجه الخلفي فقط.
- الحد من الحركة. يقرأ صف أو صفين من الصناديق القابلة للطي في كل صفحة أفضل من ستة رسوم متحركة مختلفة.
أمثلة على صندوق الوجه
كل عرض توضيحي أدناه عبارة عن صفحة مباشرة تم إنشاؤها باستخدام الأداة. تمت تسمية الرسوم المتحركة وتنوع التصميم حتى تتمكن من إعادة بناء أي منها من اللوحة.
الوجه العمودي
- بطاقات تحليلات SaaS: التصميم الافتراضي، ثلاث بطاقات إحصائية داكنة تتحول إلى وصف الخطة.
- شبكة بطاقة المعدات: التصميم الافتراضي، ستة بلاطات للمنتج في شبكة من صفين.
- الإحصائيات وشبكة الأنواع: التصميم الافتراضي، رقم في الأمام والمعنى في الخلف.
- بطاقات المنتج القوس: تصميم افتراضي على شكل قوس مستدير على الوجه الأمامي.
الوجه الأفقي
- بلاط الخدمة الأيقوني فقط: تصميم أيقونة أمامية، وأربعة أيقونات مؤطرة تتحول إلى دعاية قصيرة للخدمة.
- بلاط خدمة بينتو: بطاقات الأيقونة الافتراضية والأمامية المختلطة في تخطيط بينتو.
- بطاقات الانضباط متداخلة: التصميم الافتراضي، ثلاث بطاقات معوضة عن بعضها البعض.
- الحد الأدنى من بلاطات الأيقونات: تصميم أيقونة أمامية، ثلاثة بلاطات داكنة مع أيقونة واحدة لكل منها.
تتلاشى
- بطاقات السفر ذات الصورة الأمامية: تصميم الصورة الأمامية (Pro)، وصورة في الأمام وتفاصيل الرحلة في الخلف.
- صفوف الفصول المرقمة: التصميم الافتراضي، صفوف واسعة تتلاشى إلى ملخص الفصل.
- صفوف دفتر تشغيل الجدول الزمني: التصميم الافتراضي، بطاقات الخطوات التي تتلاشى مع التعليمات.
الوجه مربع ومكعب
- عرض العلامة التجارية الدائرية: الرسوم المتحركة لصندوق الوجه على بطاقات مستديرة.
- بلاط قطري: تصميم قطري (Pro) مع الرسوم المتحركة المكعبة اليسرى واليمنى (Pro).
- تأثيرات التحويل المتقدمة: بطاقات Flipbox مدمجة مع ملحق Transforms.
3d الوجه والشرائح
- بطاقات منتجات القهوة: رسوم متحركة ثلاثية الأبعاد (Pro)، انزلق من اليمين إلى اليسار.
- عرض الوسائط التفاعلية: 3D Flip (Pro) باتجاه مختلف على كل بطاقة.
- بطاقات أيقونة متعددة: الشرائح من اليسار إلى اليمين، ومن اليمين إلى اليسار، ومن الأعلى إلى الأسفل (Pro) في صف واحد.
التمديد والقطري والتلاشي
- بطاقات فئة الصالة الرياضية المظلمة: الرسوم المتحركة المتدحرجة (Pro) على موضوع مظلم.
- بلاط أيقونة الباستيل: تصميم أيقونة أمامية مع الرسوم المتحركة القطرية من الأسفل إلى الأعلى (Pro).
- بطاقات التدرج الخلفية: الرسوم المتحركة Fade In Out (Pro) إلى وجه خلفي متدرج.
كيفية إضافة مربع الوجه في العنصر
أنت بحاجة إلى Elementor والمكون الإضافي Master Addons من WordPress.org.
- تأكد من تشغيل Flipbox تحت الإضافات الرئيسية والأدوات.
- في محرر Elementor، ابحث عن صندوق الوجه واسحبه إلى الحاوية.
- اختر شكلًا مختلفًا للتصميم وأسلوبًا للرسوم المتحركة، ثم قم بتمرير البطاقة لمعاينتها.
- املأ الصندوق الأمامي والصندوق الخلفي: الرمز والعنوان والوصف وعلامة العنوان.
- أضف نص زر الإجراء والرابط.
- في الأسلوب، عام، مجموعة ارتفاع صندوق الوجه لذلك لا يتم تغيير حجم البطاقة في منتصف الوجه، ثم قم بتصميم كل وجه.
للحصول على تأثيرات ثلاثية الأبعاد، اقرأ كيفية إنشاء رسوم متحركة ثلاثية الأبعاد لـ Elementor Flipbox. كل إعداد في إعدادات القطعة Flipbox.
يقترن Flipbox مع عدد قليل من عناصر واجهة المستخدم الرئيسية الأخرى: صندوق المعلومات للبطاقة التي لا تنقلب أبدًا، زر الإبداع للحصول على دعوة للعمل ضمن الشبكة، تأثيرات تحوم الصورة للحصول على صورة تكشف عن تسمية توضيحية بدلاً من الوجه الخلفي، عضو الفريق لبطاقات الأشخاص ذات الروابط الاجتماعية، و تبديل المحتوى عندما يجب أن يتم الكشف عند النقر بدلاً من التحويم.
الأسئلة المتداولة لFlipbox
كيف يعمل الصندوق القابل للطي على الهواتف؟
لا تحتوي شاشات اللمس على أي تحوم، لذا تنقلب البطاقة عند النقر عليها. يحتاج زر الوجه الخلفي إلى نقرة خاصة به بعد الوجه. احتفظ بالمعلومات التي يجب رؤيتها في المقدمة واختبرها على جهاز حقيقي.
هل يمكنني استخدام صورة بدلاً من أيقونة في المقدمة؟
نعم، مع اختلاف تصميم الصورة الأمامية، وهو خيار Master Addons Pro. بخلاف ذلك، استخدم رمزًا في المقدمة أو قم بتعيين صورة خلفية للوجه في علامة التبويب "النمط".
هل أحتاج إلى Master Addons Pro لعنصر واجهة المستخدم Flipbox؟
يأتي No. Flipbox مزودًا بالمكون الإضافي Master Addons مع تصميمات الأيقونات الافتراضية والأمامية و6 رسوم متحركة. يضيف Master Addons Pro تصميمين إضافيين و16 رسمًا متحركًا إضافيًا.
هل يقلب الصندوق عند النقر؟
لا. تنقلب الأداة عند التمرير، وعلى شاشات اللمس، تقلب النقرة الأولى البطاقة. لا يوجد مشغل نقر على سطح المكتب. بالنسبة للوحة التي تفتح عند النقر، استخدم تبديل المحتوى القطعة أو منشئ النوافذ المنبثقة يظهر فجأة.
هل البطاقة القابلة للطي هي نفس الصندوق القابل للطي؟
نعم. بطاقة Flip هي الاسم التعليمي لـ CSS لنفس التأثير: وجه أمامي يدور إلى وجه خلفي. تقوم أداة Flipbox بإنشاء بطاقة قابلة للطي من لوحة المحرر، مع التعامل مع الارتفاع والنقر على شاشات اللمس وزر الوجه الخلفي لك.
هل يحتوي Elementor على عنصر واجهة مستخدم لصندوق الوجه؟
يحتوي Elementor Pro فقط على واحد. لا يحتوي Elementor بدون Pro على ذلك، لذا فأنت بحاجة إلى إضافة مثل عنصر واجهة المستخدم Flipbox هذا.
هل يمكنني ربط flipbox بالكامل بصفحة بدون الزر المنفصل؟
الأداة تربط الزر فقط. لجعل البطاقة بأكملها قابلة للنقر عليها، قم بتشغيل رابط الغلاف قم بالامتداد وإضافة الرابط إلى عنصر واجهة المستخدم Flipbox.
كم عدد الرسوم المتحركة الوجه هناك؟
22 في المجموع. Flip Horizontal، Flip Vertical، Fade، Flip Box، Flip Box Fade وFade Up تأتي مع الأداة. أما الـ 16 الأخرى، بما في ذلك Cube وRollover و3 D Flip، فهي تحتاج إلى Master Addons Pro.
هل يمكنني وضع صناديق الوجه في دائري؟
ليس مع إعداد مدمج. لا تحتوي الأداة على وضع دائري. احفظ صندوق الوجه كقالب وأظهره في صورة دائري أو شبكة حلقية، أو ضع البطاقات في حاوية تغليف بدلاً من ذلك.
ما الفرق عن Elementor Pro Flip Box؟
يحتوي Elementor Pro على ستة تأثيرات مع الاتجاه والعمق ثلاثي الأبعاد، وهو خيار ارتباط كامل الصندوق ويحتاج إلى خطة Elementor Pro. يعمل Flipbox على Elementor بدون Pro، ويحتوي على 6 رسوم متحركة مضمنة و22 مع Master Addons Pro، وتصميمين للأيقونات أو الصور، ويربط البطاقة بأكملها من خلال ملحق Wrapper Link.
عناصر واجهة المستخدم والملحقات الشائعة
إنشاء مواقع متطورة في وقت أقل.
التشكل الزجاجي
إضافات الحاويات
أنماط
![ملحق 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)
ناسخ البريد/الصفحة
