صندوق الوجه
ماذا لو كان بإمكان قطعة واحدة من العقارات على صفحتك أن تحكي قصتين؟ مع Master Addons Flipbox Element، يمكنها ذلك. هذه ليست مجرد بطاقة، إنها تجربة ديناميكية ذات وجهين. ابدأ بجانب أمامي مقنع يتميز بأيقونة وعنوان. ثم، عند التمرير، ينقلب بأناقة ليكشف عن أوصاف تفصيلية أو دعوات لاتخاذ إجراء أو معلومات إضافية على الظهر. اختر من بين إعدادات مسبقة متعددة للأسلوب وأكثر من اثنتي عشرة رسوم متحركة سلسة. إنها العناصر المثالية لإبراز الميزات أو عروض الخدمة أو ملفات تعريف الفريق أو المكالمات الإبداعية للعمل التي تفاجئ وتتفاعل.
إعدادات مسبقة متعددة للتصميم وإعدادات مسبقة للرسوم المتحركة
أولاً، اختر مظهرك الأساسي من بين أربعة إعدادات مسبقة للنمط: الافتراضي الكلاسيكي، والصورة الأمامية، والقطري، والأيقونة الأمامية. كل إعداد مسبق يغير التخطيط المرئي الأولي. ثم قم بإضفاء الحيوية عليه عن طريق تحديد نمط الرسوم المتحركة من مكتبة ضخمة. انتقل إلى Flip Horizontal أو Vertical البسيط، أو Flip ثلاثي الأبعاد المتطور، أو Fade السلس، أو الخيارات الإبداعية مثل دورات المكعب، أو Rollover، أو Diagonal. يتيح لك هذا المزيج مطابقة سلوك flipbox بشكل مثالي مع طاقة موقعك، سواء كانت دقيقة أو درامية.
- أربعة أسس للأسلوب: اختر من بين التصميمات الافتراضية والصورة الأمامية والقطرية والأيقونة الأمامية المعدة مسبقًا.
- مكتبة الرسوم المتحركة الشاملة: اختر من بين 15+ رسومًا متحركة بما في ذلك Flip وFade وCube وRollover و3 D Flip.
- التحكم في التأثير: يتم تشغيل الرسوم المتحركة عند التمرير افتراضيًا، مما يخلق تجربة تفاعلية بديهية.
منشئ المحتوى ثنائي الجانب
قم ببناء وجهين كاملين للمحتوى بشكل مستقل. بالنسبة للصندوق الأمامي، أضف رمزًا (اختر الأنماط المكدسة أو المؤطرة)، وعنوانًا قويًا، ووصفًا تشويقيًا قصيرًا. اضبط علامة HTML للمحاذاة والعنوان لتحسين محركات البحث. بالنسبة للصندوق الخلفي، كرر العملية بمحتوى مختلف، قم بتوسيع الوصف، أو إضافة المزيد من التفاصيل، أو ركز بالكامل على الاتصال بالإجراء. يتيح لك هذا النهج المكون من مرحلتين التشويق من الأمام والتسليم من الخلف.
- لوحات المحتوى المستقلة: عناصر تحكم منفصلة تمامًا لمحتوى الصندوق الأمامي والصندوق الخلفي (الأيقونة والعنوان والوصف).
- خيارات نمط الأيقونة: قم بتقديم الرموز مكدسة (صلبة) أو مؤطرة (محاطة) مباشرة من علامة تبويب المحتوى.
- المراسلة الإستراتيجية: استخدم الجزء الأمامي للحصول على فائدة رئيسية والجزء الخلفي للحصول على التفاصيل أو الميزات أو الدليل الاجتماعي.
- التحكم الهيكلي: ضبط المحاذاة (يسار، وسط، يمين) للمحتوى على كل جانب بشكل مستقل.
زر CTA مع التمرير
الصندوق الخلفي ليس فقط للحصول على معلومات، بل هو مخصص للعمل. قم بتضمين زر إجراء واضح مع نص زر قابل للتخصيص (مثل “Buy Now” أو “Learn More”) ورابط. ثم قم بتصميمه إلى حد الكمال. قم بتصميم الحالات العادية وحالات التمرير بشكل منفصل، مع التحكم في لون النص والطباعة ولون الخلفية والحدود ونصف قطر الحدود والحشو. يؤدي هذا إلى تحويل كشف flipbox إلى مسار مباشر للتحويل، كل ذلك دون الحاجة إلى عنصر واجهة مستخدم منفصل.
- الاتصال المباشر للإجراء: أضف زرًا يحتوي على نص ورابط يظهر في المربع الخلفي بعد الوجه.
- تصميم الأزرار الاحترافي: استخدم عناصر التحكم في نصف قطر الحدود والحشو والخلفية لزر مصقول.
الأسئلة المتداولة لFlipbox
ماذا يحدث على الأجهزة المحمولة حيث لا يوجد تحوم؟
عادةً ما يتم تشغيل تفاعل الوجه عن طريق النقر على الأجهزة المحمولة. ينقر المستخدم على الصندوق الأمامي لقلبه إلى الخلف، ويمكنه النقر مرة أخرى لقلبه للخلف. وهذا يجعله يعمل بكامل طاقته وبديهيًا على شاشات اللمس.
هل يمكنني استخدام صورة بدلاً من أيقونة في المقدمة؟
نعم! يُطلق على أحد الإعدادات المسبقة للنمط اسم “Front Image.” سيؤدي تحديد هذا الإعداد المسبق إلى تغيير محدد الأيقونات إلى أداة تحميل الصور، مما يسمح لك باستخدام صورة أو شعار أو رسم باعتباره الصورة المرئية الرئيسية في المربع الأمامي.
هل محتوى flipbox مستجيب؟
قطعاً. سيتم تغيير حجم النص والأيقونات والزر الموجود بالداخل ولفه بشكل مناسب على أحجام شاشات مختلفة. كما أن ارتفاع Flip Box الذي قمت بتعيينه سريع الاستجابة، ولكن يمكنك ضبطه خصيصًا للجوال باستخدام وضع التحرير سريع الاستجابة الخاص بـ Elementor إذا لزم الأمر.
ما هو الاستخدام الحقيقي الجيد لهذا العنصر؟
- صناديق الخدمة: المقدمة: رمز الخدمة واسمها (على سبيل المثال، “Web Design”). الخلف: الوصف و“احصل على زر Quote”.
- ملفات تعريف الفريق: الأمام: الصورة والاسم. العودة: الروابط الحيوية والاجتماعية.
- ميزات المنتج: الأمام: أيقونة الميزة والعنوان. الخلف: المواصفات التفصيلية ورابط “View Product”.
- الإحصائيات: الجبهة: رقم كبير. العودة: ماذا يعني ورابط المصدر.
هل يمكنني ربط flipbox بالكامل بصفحة بدون الزر المنفصل؟
افتراضيًا، يمكنك إضافة رابط إلى الزر فقط. ولكن بمساعدة ملحق رابط الغلاف الخاص بنا، يمكنك ربط صندوق الوجه الداخلي.
كيف أختار الرسوم المتحركة المناسبة؟
فكر في وتيرة موقعك. بالنسبة لمواقع الشركات أو المواقع النظيفة، استخدم Flip Horizontal/Vertical أو Fade. بالنسبة للمواقع الإبداعية أو التقنية أو المحفظة، يمكن أن يضيف 3D Flip أو Cube أو Rollover المزيد من الشخصية. قم بمعاينة بعض الخطوط، فالأفضل يبدو سلسًا ولا يصرف الانتباه عن رسالتك.
عناصر واجهة المستخدم والملحقات الشائعة
إنشاء مواقع متطورة في وقت أقل.
التشكل الزجاجي
إضافات الحاويات
أنماط
ناسخ البريد/الصفحة
