أسهل طريقة لإضافة شريط التمرير قبل وبعد إلى موقع الويب الخاص بك

تُستخدم الصور السابقة واللاحقة على نطاق واسع لأغراض التسويق في مجموعة واسعة جدًا من الصناعات . لا توجد كلمات يمكن أن تصف تأثير عملية معينة بشكل أفضل من الصورة التي تظهر بدقة كيف بدا شخص ما أو شيء ما قبل وبعد هذه العملية. حتى في الأعمال التي لا تدور حول المنتجات التي تظهر آثارها ، من الممكن استخدام هذه الميزة بطريقة فكاهية.

لنفترض أنك تدير مطعمًا - يمكنك إظهار كيف ينظر الشخص قبل تناول الطعام في قصرك ومدى سعادته بتذوق الأطباق الشهية. الاحتمالات قبل وبعد عروض شريط التمرير من حيث تصوير فوائد ومزايا منتجاتك / خدماتك لا حدود لها . الأمر كله متروك لخيالك.

تمامًا مثل إضافة تأثير المنظر إلى صفحاتك يجعل موقع الويب الخاص بك يبدو حديثًا ، يجعل شريط التمرير قبل وبعد ذلك من الصعب نسيانه لأن الصور تخبرنا بأكثر من 1000 كلمة.

بالإضافة إلى ذلك ، يمكنك إضافة هذه الميزة إلى موقع الويب الخاص بك بالكامل مجانًا ، وكل ذلك بنفسك. في هذه المقالة ، سنوضح لك كيفية إنشاء شريط تمرير قبل وبعد باستخدام البرنامج المساعد المجاني المجاني Qi Addons for Elementor .

ترقبوا قراءة المزيد حول:

• الإضافة قبل وبعد شريط التمرير باستخدام Qi Addons for Elementor
• استكشاف الخيارات المتقدمة

الإضافة قبل وبعد شريط التمرير باستخدام Qi Addons for Elementor

Qi Addons for Elementor هي أداة مجانية بديهية تسمح لك بإضافة مجموعة واسعة من العناصر الرائعة إلى موقع الويب الخاص بك دون عناء. يأتي بواجهة عملية للغاية وسهلة الاستخدام ، وسيجد كل من المستخدمين الجدد والمتقدمين أنه سهل الاستخدام. ما يميز Qi بشكل خاص هو حقيقة أنه بالإضافة إلى العديد من الميزات المفيدة ، فإنه يوفر لك أيضًا اندفاعة من الأناقة المعاصرة.

لا تختلف عملية تثبيت QI Addons for Elementor عن أي تثبيت آخر للمكونات الإضافية. إذا كان لديك أي أسئلة حول هذا الموضوع ، فتأكد من مراجعة الرابط الذي قدمناه أعلاه ، ويمكنك أيضًا الكتابة إلينا في قسم التعليقات.

نظرًا لأن هذا مكون إضافي Elementor ، فتأكد من التبديل إلى محرر Elementor عند إنشاء منشور جديد . سيتم عرض جميع عناصر واجهة مستخدم Qi Addons بدقة في قائمة العناصر الموجودة على اليسار . ببساطة قم بالتمرير لأسفل القائمة للعثور عليهم.

توفر عنصر واجهة مستخدم Before and After Slider طريقة بسيطة وفعالة لإظهار صورتين في نفس الإطار . ابحث عنها في قائمة الشريط الجانبي على اليسار ، عن طريق كتابة اسم الأداة في حقل البحث أو عن طريق تصفح الأدوات في القائمة.

لإضافة شريط التمرير قبل / بعد المقارنة ، اسحب عنصر Elementor وأفلته في المكان المطلوب. عند إضافة عنصر واجهة المستخدم ، ستكون جميع الإعدادات على الجانب الأيسر وداخل علامتي التبويب "المحتوى" و "النمط" توجد جميع الخيارات المتعلقة بشريط التمرير .

الآن ، تحتاج إلى إضافة الصور قبل وبعد إلى شريط التمرير . أولاً ، نقوم بإضافة الصورة السابقة - قم بالمرور فوق حقل الصورة وسيظهر خيار اختيار صورة أو فقط انقر فوق أيقونة علامة الجمع الصغيرة في منتصف الحقل.

يمكنك اختيار صورة من مكتبة الوسائط أو تحميل صورة إلى مكتبة الوسائط الخاصة بك إذا لزم الأمر . ما عليك سوى سحب الصورة المحددة وإفلاتها في مكتبة الوسائط إذا لم تكن موجودة بالفعل ، ثم حددها واخترها.

بعد إدراج الصور المرغوبة ، يمكنك الاستمرار في تخصيص شريط التمرير قبل / بعد عن طريق تغيير النص الذي سيتم عرضه في الدائرة في منتصف شريط التمرير . يمكنك كتابة تعليمات هنا ، أو رسالة أكثر جاذبية ، الأمر متروك لك ولأسلوب موقع الويب الخاص بك. يمكنك أيضًا اختيار ما إذا كنت تريد محاذاة النص رأسيًا أو أفقيًا.

إذا كنت ترغب في ضبط مكان ظهور الحد بين الصورة السابقة واللاحقة على شريط التمرير ، يمكنك إدخال قيمة الإزاحة المطلوبة في الحقل . القيمة الافتراضية هي 50٪ مما يعني أن الحد الافتراضي يقع في منتصف الصورة. هذا ما يمكن أن يبدو عليه شريط التمرير إذا قمت بضبط الإزاحة:

الآن ، حان الوقت لمزيد من الضبط الدقيق لشريط التمرير قبل وبعد. دعنا نرى ما يمكنك تخصيصه أيضًا لجعل شريط التمرير يبدو تمامًا كما تريد. انقر فوق علامة التبويب "النمط" لاستكشاف المزيد من الخيارات .

إذا كنت تريد تحريك المقبض الدائري من وسط الصورة ، فما عليك سوى استخدام شريط التمرير لضبط قيمة Hand Top Offset . سترى على الفور تغييرات مباشرة حتى تتمكن بسهولة من تحديد أفضل ما يناسبك. ستقوم أيضًا بضبط حجم الدائرة بنفس الطريقة ، وكذلك الحد بين الإصدار قبل / بعد الإصدار من الصورة .

يمكنك أيضًا النقر فوق Nabdle Text Color لإنشاء ظل اللون الخاص بك للنص في الدائرة ، وكذلك اختيار خط النص بنفس الطريقة . أخيرًا ، يمكنك أيضًا تخصيص لون الدائرة بنفس الطريقة.

استكشاف الخيارات المتقدمة

في علامة التبويب خيارات متقدمة ، ستجد المزيد من الخيارات لجعل شريط التمرير أكثر جاذبية وجاذبية. هذه الخيارات ليست حصرية لهذه الأداة فقط ، فهي خيارات Elementor الافتراضية التي يمكنك استخدامها لتحرير أدوات أخرى على الصفحة أيضًا.

دعنا نوضح بعضًا من أكثرها إثارة للاهتمام. لا تتردد في اختبار جميع الخيارات ، حيث سترى جميع التغييرات التي تجريها مباشرة ، حتى تتمكن على الفور من معرفة ما يفعله كل خيار في شريط التمرير وما إذا كان يعمل من أجلك.

إذا فتحت قائمة خيارات متقدمة ، فسترى خيارات ضبط الهامش والحشو . ستلاحظ رمز كمبيوتر محمول صغيرًا بجوار كل خيار يسمح لك بتعيين قيم مختلفة للهامش والحشو على أجهزة مختلفة - كمبيوتر محمول أو جهاز لوحي أو هاتف محمول.

تعد تأثيرات الحركة مثيرة للاهتمام بشكل خاص ولديك خيار واسع بالفعل لأكثر من 35 مؤثرًا للحركة للاختيار من بينها. لديك أيضًا إمكانية تعيين رسوم متحركة مختلفة لتظهر على أجهزة مختلفة . بعد اختيار نوع الرسوم المتحركة ، يمكنك أيضًا ضبط مدتها وتأخيرها إذا وجدت ذلك ضروريًا.

انقر الآن على علامة التبويب التحويل لاكتشاف المزيد من التأثيرات التي يمكنك استخدامها . من التدوير إلى الانحراف والتقليب الأفقي والرأسي ، هناك العديد من الأشياء التي يمكنك القيام بها لتغيير عرض شريط التمرير.

في علامة التبويب "الحدود" ، ستجد خيارات تسمح لك بتزيين عنصر التحكم عن طريق إضافة حدود صورة الظل بالألوان التي تحددها . يمكنك أيضًا اختيار إضافة تأثير ظل حول مربع الشريحة وتعيين إخراج تأثير الظل.

الخيارات الموجودة في علامة التبويب Mask سهلة الاستخدام للغاية. يمكنك هنا تعيين شريط التمرير ليتم عرضه بأشكال مختلفة - دائرة ، زهرة ، رسم تخطيطي ، مثلث ، فقاعة ، مسدس ، أو حتى إضافة شكل مخصص. من الممكن أيضًا ضبط حجم وموضع الشكل المحدد.

انتبه بشكل خاص إلى علامة تبويب الاستجابة ، حيث يمكنك اختيار شريط التمرير حتى لا يتم عرضه على الأجهزة المحددة .

هذا ما يبدو عليه شريط التمرير على الصفحة بعد أن قمنا بتعديله وفقًا لاحتياجاتنا:

ختاماً

كما ترى ، فإن إضافة شريط التمرير قبل وبعد على صفحاتك ليس علمًا صارخًا. يمكنك الآن إطلاق العنان لخيالك وإنشاء تمثيل مرئي مثير للإعجاب للتأثيرات التي قد ينتجها عملك أو منتجاتك أو خدماتك. في حال كان لديك سؤال أو تعليق أو استفسار من أي نوع ، فلا تتردد في التواصل معنا في أي وقت.

نأمل أن تكون هذه المقالة مفيدة. إذا أعجبك ذلك ، فلا تتردد في الاطلاع على بعض هذه المقالات أيضًا!

• كيفية تخصيص نموذج الاتصال الخاص بك 7 نمط الطريق السهل
• كيفية تمييز النص في WordPress بالطريقة السهلة
• كيفية إنشاء انسياب خطوة باستخدام عنصر واجهة استخدام عملية Elementor