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