تُظهر البطاقة التي تنقلب أثناء التمرير ضعف المحتوى الموجود في نفس المساحة. ال صندوق الوجه القطعة في الإضافات الرئيسية للعنصر يمنحك مربعًا ذو وجهين: وجه أمامي به رمز وعنوان ووصف، ووجه خلفي يمكن رؤيته بنصه الخاص وزر.
يمكنك اختيار رسم متحرك، وملء كلا الوجهين، وإضافة زر، ثم تصميم كل جانب. هناك أكثر من ثلاثين تأثيرًا للوجه، بدءًا من التلاشي العادي وحتى المكعب ثلاثي الأبعاد الكامل. يمر هذا الدليل عبر كل إعداد في الأداة.
ما تفعله أداة Flipbox #
تقوم الأداة ببناء بطاقة قابلة للطي من وجهين. ال الصندوق الأمامي هو ما يراه الزوار أولاً: أيقونة أو صورة، وعنوان، ووصف. قم بالتمرير فوقها وتنقلب البطاقة إلى الصندوق الخلفي، والتي لها عنوانها الخاص ووصفها وزر يمكن ربطه في أي مكان.
ثلاث علامات تبويب تعمل على كل شيء. محتوى يحمل الرسوم المتحركة والنص الأمامي والخلفي والزر. أسلوب يتعامل مع ارتفاع الصندوق والحدود والألوان والطباعة لكل وجه. متقدم هو التباعد والرؤية المعتادة للعنصر.
قبل أن تبدأ #
- ووردبريس مع العنصر مثبتة ونشطة.
- الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ انظر دليل التثبيت.
- النص والأيقونات لكلا الوجهين، والرابط الخاص بالزر الخلفي.
كيفية إضافة عنصر واجهة المستخدم Flipbox #
في محرر Elementor، افتح عناصر لوحة والبحث عن صندوق الوجه، أو قم بالتمرير إلى قسم الإضافات الرئيسية (تحمل الأدوات شارة MA أرجوانية). اسحبه إلى الصفحة وسيتم تحميله بنموذج أمامي وخلفي يمكنك تحريره.
ضبط نمط الرسوم المتحركة #
افتح ال محتوى علامة التبويب. ال النمط المحدد مسبقًا القسم يحمل اختلاف التصميم و ال أسلوب الرسوم المتحركة، وتحته توجد أقسام الصندوق الأمامي، والصندوق الخلفي، وزر الإجراء.
ال أسلوب الرسوم المتحركة dropdown هو الجزء الممتع. إنها تحمل أكثر من ثلاثين خيارًا، بحيث يمكن لنفس البطاقة أن تقلب أو تتلاشى أو تنزلق أو تكعب في طريقها إلى الوجه الخلفي.
- الوجه الأفقي والقلب العمودي: تقلب البطاقة الكلاسيكية على كل محور.
- مكعب (من أعلى إلى أسفل، من أسفل إلى أعلى، من اليسار، من اليمين): دوران مكعب ثلاثي الأبعاد بين الوجوه.
- 3d الوجه، التلاشي، التلاشي، الانقلاب: يكشف سوفتر عندما تريد شيئًا دقيقًا.
- اتجاهات الشريحة والقطري: ادفع الوجه الخلفي للداخل من الجانب أو الزاوية.
قم بإعداد الصندوق الأمامي #
افتح ال الصندوق الأمامي قسم. هذا هو الوجه الذي يراه الناس قبل أن يحوموا، لذلك يجب أن ينقلب.
- نمط الأيقونة والأيقونة: اختر أيقونة من المكتبة، أو قم بتحويلها إلى صورة.
- العنوان والوصف: العنوان الأمامي والنص، كل منهما مزود بخيار الكتابة باستخدام الذكاء الاصطناعي.
- المحاذاة والعنوان علامة HTML: قم بمحاذاة المحتوى وتعيين مستوى العنوان (H1 إلى H6).
قم بإعداد الصندوق الخلفي #
افتح ال الصندوق الخلفي قسم للوجه الذي ينقلب إلى المنظر. يأخذ نفس مجالات المقدمة، لذلك يمكن أن يؤدي الإعلان التشويقي القصير في المقدمة إلى التفاصيل الحقيقية في الخلف.
- أيقونة: أيقونة منفصلة للوجه الخلفي.
- العنوان والوصف: العنوان الخلفي والنص.
- المحاذاة وعلامة HTML: التخطيط ومستوى العنوان للظهر.
أضف زر الإجراء #
ال زر العمل القسم يعيش على الوجه الخلفي. قم بتعيين الملصق وأين يشير، بحيث يمكن أن يؤدي التمرير مباشرة إلى منتج أو نموذج أو صفحة أخرى.
- نص الزر: التسمية، مثل ابدأ أو تعرف على المزيد.
- رابط إلى: يفتح الزر عنوان URL، مع خيارات رابط Elementor المعتادة.
قم بتصميم البطاقة القابلة للطي #
افتح ال أسلوب علامة التبويب. ال عام يحدد القسم الحدود، والإعداد الأكثر أهمية هنا، هو ارتفاع صندوق الوجه، مما يعطي كلا الوجهين حجمًا واحدًا ثابتًا.
تحت قيادة الجنرال تحصل على الانفصال الصندوق الأمامي و الصندوق الخلفي الأقسام. لكل منها لون خلفيته أو صورته، وألوان العنوان والوصف، والطباعة، ولون الأيقونة، لذلك لا يمكن أن يبدو الوجهان متشابهين إذا أردت.
حالات الاستخدام الشائعة #
- بطاقات الخدمة مع أيقونة في الأمام وتفاصيل بالإضافة إلى زر في الخلف.
- أعضاء الفريق عرض صورة في المقدمة وسيرة ذاتية على الوجه.
- أبرز المنتجات يكشف ذلك عن السعر وزر الشراء عند التمرير.
- شبكات مميزة حيث تنقلب كل بطاقة إلى شرح قصير.
- بلاط المحفظة مع صورة مصغرة أمامية ورابط مشروع في الخلف.
نصائح للعمل مع عنصر واجهة المستخدم Flipbox #
- ضبط ارتفاع ثابت. يحافظ ارتفاع Flip Box على نفس الحجم لكلا الوجهين، لذلك لا تقفز البطاقة عندما تقلب. اتركها غير محددة وسيقوم الوجه الخلفي الأطول بتغيير حجم البطاقة في منتصف التحليق، والتي تبدو بعيدة.
- احتفظ بالنص قصيرًا. ينقلب الظهر بسرعة، لذا فإن الخط الضيق والزر يقرأان بشكل أفضل من الفقرة الكاملة.
- مطابقة الرسوم المتحركة مع الحالة المزاجية. Fade يناسب صفحة هادئة؛ 3D Flip and Cube يناسب البطل الجريء.
- قارن بين الوجهين. لون الخلفية المختلف في الخلف يجعل الوجه واضحًا في لمحة.
- قم دائمًا بربط الزر. الزر الخلفي هو المكافأة، لذا قم بتوجيهها إلى الخطوة التالية.
شاهد الفيديو التعليمي #
تفضل المتابعة على الشاشة؟ يمر برنامج الفيديو التعليمي أدناه عبر عنصر Flipbox من البداية إلى النهاية، موضحًا كيفية عمل أنماط الرسوم المتحركة والوجوه الأمامية والخلفية والتصميم في محرر Elementor.
الأسئلة المتداولة #
ما هي أداة Flipbox في الإضافات الرئيسية؟
إنها أداة Elementor التي تقوم بإنشاء بطاقة ذات وجهين. يُظهر الوجه الأمامي رمزًا وعنوانًا ووصفًا، وعند التمرير يقلب إلى الوجه الخلفي بنصه الخاص وزر. يتم تعيين كل شيء من لوحة Elementor بدون رمز.
كم عدد الرسوم المتحركة القابلة للطي التي تحتوي عليها أداة Flipbox؟
يتضمن القائمة المنسدلة لأسلوب الرسوم المتحركة أكثر من ثلاثين تأثيرًا، مثل Flip Horizontal، وFlip Vertical، وFade، وFade Up، وRollover، و3d Flip، ومتغيرات Cube، واتجاهات الشريحة، وDiagonal. يمكنك اختيار واحدة لكل بطاقة للتحكم في كيفية ظهور الوجه الخلفي.
هل يمكنني إضافة زر إلى البطاقة القابلة للطي؟
نعم. يقوم قسم زر الإجراء في علامة التبويب "المحتوى" بتعيين تسمية الزر ورابطه. يوجد الزر على الوجه الخلفي، بحيث يظهر متى تقلب البطاقة، مما يجعلها مكانًا طبيعيًا لإرسال الزوار إلى منتج أو نموذج.
هل يمكنني استخدام صورة بدلاً من أيقونة في المقدمة؟
نعم. في قسم الصندوق الأمامي، قم بتبديل نمط الأيقونة حتى تتمكن من اختيار صورة بدلاً من رمز المكتبة. تتيح لك علامة التبويب "النمط" أيضًا تعيين صورة خلفية لأي من الوجهين، لذلك من السهل إنشاء بطاقات الوجه التي تقودها الصور.
كيف يمكنني الاحتفاظ بجانبي البطاقة القابلة للطي بنفس الحجم؟
اضبط ارتفاع صندوق الوجه في القسم العام من علامة التبويب "النمط". فهي تمنح كلا الوجهين ارتفاعًا ثابتًا واحدًا، بحيث تظل البطاقة بنفس الحجم قبل وبعد الوجه بدلاً من تغيير حجمها لتناسب محتوى كل جانب.
إلتحاق بالركب #
تقوم أداة Flipbox بتحويل البطاقة المسطحة إلى بطاقة تفاعلية: اختر رسمًا متحركًا، واملأ الوجهين الأمامي والخلفي، واربط الزر، ثم قم بتصميم كل جانب. بالنسبة للعناصر ذات الصلة، راجع أداة صندوق المعلومات و ال القطعة عضو الفريق، تصفح بالكامل عناصر واجهة المستخدم والإضافات الرئيسية، والتحقق من صفحة التسعير لما تتضمنه كل خطة.
