هل تريد إضافة تراكبات flipbox وتأثيرات تحوم الصور إلى موقع ووردبريس الخاص بك؟
حتى إذا كنت تستخدم سمة ووردبريس عالية الجودة ، فقد تشعر أنك مقيد بخيارات التخصيص. تضيف Flipboxes وتحركات الصور تأثيرات متحركة لافتة للنظر إلى موقعك.
في هذه المقالة ، سنوضح لك كيفية إضافة تراكبات مربعات الوجه وتحركات الصور إلى موقع ووردبريس الخاص بك.
كيفية إنشاء تراكبات flipbox وتحوم في ووردبريس
الصندوق القلاب هو صندوق ينقلب عندما تضع الماوس فوقه. يمكنك إضافة تأثير حركة التمرير هذا إلى أقسام معينة من موقع الويب الخاص بك بما في ذلك مربعات النص والصور.
Flipbox Demo الرسوم المتحركة
يأتي المصطلح من ميزة “انعكاس” الفريدة التي تحدث عندما يحوم الماوس فوق الصورة. يمكنك التحكم في كيفية قلب الصورة ، جنبًا إلى جنب مع المعلومات وتصميم جانبي الصورة.
إذا كان موقع الويب الخاص بك ثابتًا نسبيًا ، فيمكنك استخدام تأثير flipbox لجعله أكثر تفاعلية.
على سبيل المثال ، يمكنك إضافة flipbox مع تمرير الصورة إلى صفحة تسعير المنتج. بهذه الطريقة عندما يحوم المستخدمون فوق مستويات التسعير الخاصة بك ، سيظهر السعر.
أو ، إذا كنت مستقلاً ، يمكنك إضافة شعارات الشركة التي عملت بها مع هذا الوجه والارتباط بكل مشروع.
في حين أن هذه التأثيرات المتحركة يمكن أن تعزز تجربة مستخدم موقع الويب الخاص بك ، فمن المهم عدم المبالغة في ذلك.
فكر في تأثير flipbox مثل إضافة التوابل إلى وجبة. إنه موجود لتحسين النكهات والمكونات الحالية ، ولكنه أكثر من اللازم وسوف يفسد الطبق.
ومع ذلك ، دعنا نلقي نظرة على كيفية إضافة تراكبات flipbox وتأثيرات تمرير الصور إلى مدونة ووردبريس أو موقع الويب الخاص بك .
يمكنك إضافة flipboxes وتأثيرات التمرير إلى موقع ووردبريس الخاص بك باستخدام العديد من الطرق مثل منشئ الصفحة Elementor ، أو إضافة CSS مخصص .
ومع ذلك ، فإن الأسلوب الذي نوصي به هو استخدام المكون الإضافي Flipbox – Awesomes Flip Boxes Image Overlay . هذا البرنامج المساعد مرن وسهل الاستخدام. إنه أفضل مكون إضافي لبرنامج ووردبريس و flipbox وتحويم الصور.
يوفر لك الإصدار المجاني من البرنامج المساعد السرعة والبساطة. بمجرد تثبيت المكون الإضافي ، يمكنك إضافة مربعات قلب جيدة المظهر إلى موقعك بسرعة.
إذا كنت بحاجة إلى المزيد من خيارات التخصيص ، فقد ترغب في الترقية إلى الإصدار المتميز من المكون الإضافي. يتيح لك هذا التحكم في ألوان الصناديق المتحركة الخاصة بك وإضافة CSS مخصص.
قد تجد أن القوالب الحالية تبدو رائعة بالفعل عند إضافتها إلى موقعك ، وفي هذه الحالة ، ليست هناك حاجة للترقية.
أول شيء عليك القيام به هو تثبيت وتفعيل المكون الإضافي Flipbox – Awesomes Flip Boxes Image Overlay . لمزيد من التفاصيل ، راجع دليلنا خطوة بخطوة حول كيفية تثبيت مكون ووردبريس الإضافي .
بمجرد تثبيت المكون الإضافي وتنشيطه ، يمكنك إنشاء صندوق flipbox الأول الخاص بك بالانتقال إلى Flip Box »إنشاء جديد .
قم بإنشاء flipbox جديد
هذا يعرض مجموعة كاملة من القوالب.
إذا لم تكن هذه كافية ، فيمكنك النقر فوق خيار القائمة “استيراد القوالب” لمزيد من القوالب التي يمكنك استخدامها.
استيراد قالب flipbox
مع الإصدار المجاني من البرنامج المساعد ، هناك 5 قوالب مختلفة للاختيار من بينها ، بالإضافة إلى 10 قوالب أخرى يمكنك استيرادها.
لاستيراد قالب جديد قابل للتخصيص ، انقر فوق الزر “استيراد” بجوار رقم النمط.
Flipbox انقر فوق زر الاستيراد
حان الوقت الآن لتحديد القالب الخاص بك والبدء في تخصيصه.
تحتاج إلى النقر فوق “إنشاء نمط” لتحميل أول تصميم لصندوق flipbox الخاص بك.
سيؤدي هذا إلى إظهار قائمة منبثقة حيث يمكنك تسمية flipbox الخاص بك واختيار التخطيط الذي تريد تخصيصه.
اختر ما تريد تخصيصه flipbox
تتطابق خيارات “التخطيطات” الأول والثاني والثالث مع الصناديق المتحركة الفردية في التخطيط. انقر فوق “حفظ” بمجرد قيامك باختياراتك.
من المهم الإشارة إلى أن التصميم النهائي الخاص بك سيتطابق بشكل وثيق مع قالب flipbox ، لذلك من الأفضل اختيار قالب يشبه الطريقة التي تريد أن يظهر بها على موقع الويب الخاص بك.
هناك ثلاث علامات تبويب رئيسية ستستخدمها لتغيير مظهر flipbox ، “عام” ، و “أمامي” ، و “الواجهة الخلفية”.
قائمة الإعدادات العامة Flipbox
في كل علامة من علامات التبويب هذه ، يمكنك تغيير الخطوط والحشو والهوامش. لكننا نعتقد أن الخيارات الافتراضية تبدو رائعة بالفعل.
بعد ذلك ، سنقوم بتغيير النص على جانبي flipbox.
مرر مؤشر الماوس فوق flipbox في أسفل الشاشة وانقر فوق “تحرير”.
معاينة Flipbox تحرير النص
سيظهر هذا نافذة منبثقة تتيح لك تغيير النص الأمامي والنص الخلفي وصورة الخلفية.
لتغيير العنوان ، قم بتحرير مربع النص “العنوان الأمامي” ومربع “رمز الخط:” إذا كنت تريد عرض رمز مختلف.
تغيير العنوان الأمامي ورمز flipbox
إذا كنت ترغب في إضافة صورة خلفية ، فانقر فوق “تحميل صورة” على يمين خيار “الصورة الأمامية”.
بعد ذلك ، قم بتحميل صورة جديدة أو حدد صورة من مكتبة الوسائط الموجودة لديك.
قم بتحميل صورة الخلفية الأمامية لـ flipbox
بعد ذلك ، ستتبع نفس سلسلة الخطوات للجزء الخلفي من flipbox ضمن “إعدادات الواجهة الخلفية”.
هنا يمكنك تغيير العنوان والنص الذي يظهر عندما تنقلب البطاقة.
تغيير نص الواجهة الخلفية
يمكنك أيضًا تغيير حقلي “نص الزر الخلفي” و “الارتباط”.
تعمل هذه على تغيير نص الزر والمكان الذي سيذهب إليه المستخدمون عند النقر فوقه.
إضافة زر flipbox الخلفي والرابط
أخيرًا ، انقر فوق “تحميل الآن” لتغيير صورة الخلفية على الجزء الخلفي من flipbox.
كما هو مذكور أعلاه ، يمكنك إما تحميل صورة أو اختيار واحدة من مكتبة الوسائط الخاصة بك.
تحميل صورة الخلفية الخلفية
بمجرد الانتهاء من التحرير ، تأكد من النقر فوق الزر “إرسال” لحفظ التغييرات.
ستلاحظ أن تغييراتك الجديدة ستظهر في نافذة “معاينة” على الفور.
إذا كنت ترغب في إنشاء صف كامل من flipboxes ، فانقر فوق رمز “+” في مربع التعريف “Add New Flip Boxes”.
أضف صفًا من الصناديق المتحركة
سيظهر هذا مربعًا منبثقًا مشابهًا للصندوق أعلاه والذي يتيح لك تخصيص flipbox الثاني.
لقد قمت الآن بإنشاء وتخصيص flipboxes ، لذا حان الوقت لإضافتها إلى موقع ووردبريس الخاص بك .
أسهل طريقة للقيام بذلك هي استخدام الرمز المختصر المرفق . على الجانب الأيمن من شاشتك ، يوجد مربع تعريف يسمى “Shortcode” ، انسخ الرمز القصير الذي يشبه الصورة أدناه.
نسخ الرمز القصير flipbox
بعد ذلك ، انتقل إلى صفحة أو نشر حيث تريد إضافة flipbox والصق الرمز القصير الخاص بك.
ثم ، انقر فوق “نشر” أو “تحديث” إذا كانت مشاركتك نشطة بالفعل.
لصق الرمز القصير flipbox
سيتم الآن عرض flipboxes الجديد على موقعك.
لاحظ أنه أثناء تغيير حجم نافذة المتصفح ، يتم ضبط أجهزة flipboxes نظرًا لأنها تستجيب بنسبة 100٪.
عرض Flipbox Live ووردبريس
يتضمن هذا المكون الإضافي أيضًا عنصر واجهة مستخدم flipbox يمكنك إضافته إلى أي منطقة عنصر واجهة مستخدم يدعمها قالبك .
للقيام بذلك ، انتقل إلى Appearance »Widgets وابحث عن الأداة التي تحمل اسم” Flipbox – Awesomes Flip Boxes Image Overlay “.
إضافة أداة flipbox
ثم يمكنك سحب الأداة وإفلاتها في موقعك المفضل.
أخيرًا ، أدخل معرف النمط ، والذي يمكن العثور عليه في قائمة البرنامج المساعد Flipbox الرئيسية ، وانقر فوق “حفظ”.
معرف عنصر واجهة Flipbox
كنا نأمل أن تساعدك هذه المقالة في تعلم كيفية إضافة تراكبات flipbox وتحوم إلى موقع ووردبريس الخاص بك. قد ترغب أيضًا في الاطلاع على دليلنا حول تحسين الصور لـ SEO ، ودليل استكشاف الأخطاء وإصلاحها الخاص بنا حول إصلاح مشكلات صور ووردبريس الشائعة .
نأمل أن تساعدك هذه المقالة في تعلم كيفية تغيير نظام ألوان الادمن في الووردبريس. قد ترغب أيضًا في رؤية مختارات حول الإضافات (بلجن) في الووردبريس ودليلنا حول كيفية اختيار أفضل شركات حجز النطاقات والاستضافات وكيفية التعامل معها.
إذا أعجبك هذا المقال ، فيرجى الاشتراك في قناتنا على اليوتيوب لدروس فيديو في الووردبريس. ويمكنك أيضًا أن تجدنا على فيسبوك وتويتير وانستجرام وتيكتوك، لطفاً لا تنسى متابعتنا، فنحن نسعد برؤيتك..
