ثورة المنزلق: الدليل النهائي

يعد Slider Revolution حرفيًا أحد أكثر إضافات WordPress شيوعًا اليوم. مع أكثر من 400 ألف عملية بيع ومتوسط ​​تقييم 4.75 ، أثبت البرنامج المساعد فعاليته وعظمته.

Revolution Slider: ما الذي يجعل المكون الإضافي رائعًا للغاية

تم تطوير Slider Revolution بواسطة Themepunch. هذا المكون الإضافي هو منشئ لإنشاء محتوى ثري وديناميكي لصفحات الويب. ينصب التركيز على "ديناميكي" ، حيث يتيح لك إنشاء شرائح مثيرة تضيف الحركة إلى الصفحات.

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

• أشرطة تمرير الصور ودواراتها
• المشاركات المميزة المتزلجون
• يغذي وسائل التواصل الاجتماعي
• معارض الوسائط
• كتل بطل والصفحات الأولى

الأسباب التي تجعلك تستخدم Slider Revolution مع موقع الويب الخاص بك

لا يمكنك أن تخطئ في Slider Revolution. يعد المكون الإضافي الشامل المزود بأدوات سهلة الاستخدام حلاً مثاليًا لإنشاء منزلقات جميلة ، وإليك الأسباب.

حزمة البرنامج المساعد

اليوم ، تأتي كل سمة WordPress تقريبًا مع مكون إضافي Slider Revolution. عادةً ما تتضمن حزمة السمات الإصدار المجاني من المكون الإضافي. يقتصر المكون الإضافي المجمع على الميزات الأساسية للغاية ، ولكن لا يزال من الملائم جدًا الحصول على السمة مع منشئ شريط التمرير.

ومع ذلك ، إذا كنت ترغب في الوصول إلى الكثير من ميزات المكون الإضافي ، فلديك خيار شراء المكون الإضافي المستقل. سيكلفك الترخيص العادي 29 دولارًا ويمكنك الحصول عليه من سوق Codecanyon.

للحصول على الترخيص الممتد ، سيتعين عليك دفع حوالي 150 دولارًا ، والحصول على دعم فني لمدة عام مقابل 9 دولارات فقط.

نعم ، يمكن أن يكلفك المكون الإضافي بعض المال ، ولكن لا يزال بإمكانك إنشاء أشرطة تمرير رائعة حتى مع الترخيص العادي للمكون الإضافي.

القوالب

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

ما عليك سوى استيراد النموذج الذي اخترته والبدء في إنشائه على الفور.

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

محرر مرئي

تم تزويد Slider Revolution بمحرر WYSIWYG المذهل الذي يجعل من السهل جدًا إنشاء وتعديل قوالب التمرير. يجد العديد من مالكي مواقع الويب صعوبة في كتابة أكواد معقدة أو تعيين فريق منفصل لهذه المهمة. بفضل محرر شريط التمرير ، يمكنك توفير وقتك والاستمتاع بميزة السحب والإفلات لإنشاء شرائح رائعة.

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

أداء عالي السرعة

تم ترميز Slider Revolution بشكل جيد ليتم تحميله بسرعة. تم تحسين جميع جوانب أشرطة التمرير ، وهي تستخدم خيارات تصحيح أخطاء متقدمة لمعالجة أي مشكلات ، وتحميل الملفات الأساسية تلقائيًا ، والموازنة مع الميزات المستخدمة. كما أنها تستخدم التحميل البطيء الذكي وهي مُحسّنة لتحسين محركات البحث.

تخطيطات مستجيبة

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

Slider Revolution ليست مجرد شريط تمرير بسيط. المكون الإضافي جاهز للاستجابة ، لذا مهما كانت الشرائح التي تنشئها ، يمكنك التأكد من تحسينها لأي جهاز سيتم استخدامها عليه.

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

تخصيص الخيارات

ميزة أخرى للمكوِّن الإضافي Slider Revolution هي خيارات التخصيص المتنوعة. يمكنك ضبط تأخيرات الشرائح واختيار أسهم التنقل وخلفيات اختلاف المنظر وإضافة طبقات وسائط وإدراج أزرار وتعيين خطوط مخصصة وإضافة هوامش وغيرها الكثير.

يسمح لك المكون الإضافي Slider Revolution بتخصيص أي شيء. لتوفير الوقت ، يمكنك حفظ الإعدادات المسبقة لاستخدامها لاحقًا في انتقالات الشرائح وأنماط الخطوط والرسوم المتحركة للطبقة.

ملحقات ثورة المنزلق

هل تريد أن تجعل أشرطة التمرير أكثر تعقيدًا وتنوعًا باستخدام تأثيرات الانتقال والرسوم المتحركة؟

يمكنك الذهاب! يدعم Slider أنواع مختلفة من المحتوى ، مثل منشورات المدونات والمنشورات الحالية ، ويسمح لك باستخدام الخلاصات من منصات التواصل الاجتماعي مثل Twitter و Facebook و Vimeo و YouTube و Instagram. يمكنك إضافة الروابط ومقاطع الفيديو والصور والنص في أي وقت من الأوقات. بمساعدة ميزة الاختلافات ، يمكنك إنشاء شريحة غنية بالميزات ومليئة بالمعلومات يمكن للزوار استخدامها.

حماية

يعد الأمان أحد أهم الجوانب عندما يتعلق الأمر بالمواقع الإلكترونية. قد تسمع أن هناك ضعفًا في الحرب تأثر بـ Slider Revolution قبل بضع سنوات. منذ ذلك الوقت ، زاد Themepunch من حماية البرنامج ويستخدم الآن مؤسسة تابعة لجهة خارجية لمراجعة مشكلات البرنامج المساعد بانتظام. لذلك يمكنك التأكد من أن المكون الإضافي آمن للغاية.

دعم فني

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

مصادر المحتوى

يتعامل البرنامج المساعد بنجاح مع إنشاء أشرطة التمرير لمصادر المحتوى المختلفة. سواء كان منتج WooCommerce أو منشورًا شائعًا ، فإن Slider Revolution لديه الأدوات.

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

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

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

تثبيت البرنامج المساعد والإعداد الأساسي

يقوم العديد من مطوري السمات بتضمين Slider Revolution في حزمة السمات.

إذا كنت قد اشتريت أحد سمات WordPress المتميزة من StylemixThemes ، فلن تضطر إلى تثبيت المكون الإضافي يدويًا. سيتم تثبيت Slider Revolution تلقائيًا مع استيراد العرض التوضيحي.

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

سوف تحتاج إلى شراء البرنامج المساعد. قم بتسجيل الدخول إلى حساب Envato الخاص بك وقم بعملية الشراء. بعد ذلك قم بتنزيل الملف - حدد خيار التنزيل لـ "ملف WordPress القابل للتثبيت فقط".

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

تهانينا ، أنت جاهز تمامًا ويمكنك البدء في إنشاء شريط التمرير الأول!

كيفية تحديث Slider Revolution

يقوم Themepunch بإصدار تحديثات منتظمة للمكوِّن الإضافي المنزلق. لتحديثه ، افتح Slider Revolution من لوحة القيادة الخاصة بك واتبع علامة تبويب التحديثات. في هذه الصفحة يمكنك العثور على قسم صغير بعنوان "تحديثات البرنامج المساعد". يُحدد هنا إصدار المكون الإضافي المثبت حاليًا على موقع الويب الخاص بك والإصدار المتاح للتحديث.

أيضًا ، يمكنك استخدام الطريقة القياسية والانتقال إلى Dashboard> Updates وتثبيت الإصدار الجديد من المكون الإضافي من هناك.

ثورة المنزلق: الشروع في العمل

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

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

العلاقة بين الوحدات والشرائح والطبقات

الوحدات النمطية هي حاويات للشرائح وهي حاويات للطبقات.

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

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

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

كيفية استخدام Slider Revolution: Global settings

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

إذا قمت بالنقر فوق Slider Revolution من لوحة القيادة الخاصة بك ، فستتمكن من فتح شاشة الإعداد الخاصة بالمكون الإضافي.

شاشة الإعداد

في الجزء العلوي من الشاشة ، يمكنك العثور على علامة التبويب مع الخيارات التالية:

الوحدات ، التحديثات ، التنشيط ، الأخبار ، Globals ، الأسئلة الشائعة ، الدعم.

في هذه المرحلة ، سنعمل مع الاثنين فقط: الوحدات النمطية - لإنشاء واحدة جديدة ، و Globals - لإلقاء نظرة على إعدادات البرنامج المساعد العالمية.

الاعدادات العامة

سنبدأ مع غلوبالس . تنقسم الإعدادات العامة بشكل أساسي إلى عدة أقسام من:

• عام
• نقاط توقف شبكة التخطيط الافتراضي
• الخطوط
• متنوع

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

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

في قسم نقطة توقف شبكة التخطيط الافتراضي ، يمكنك تعيين العرض بالبكسل لأنواع مختلفة من الأجهزة: سطح المكتب ، والكمبيوتر المحمول ، والكمبيوتر اللوحي ، والجوال.

طالما أن لكل جهاز حجمه الخاص ، أدخل العرض الدقيق لكل نوع لضمان العرض الصحيح لشريط التمرير.

• يبلغ عرض شاشات سطح المكتب القياسية 1920 بكسل.
• أجهزة الكمبيوتر المحمول ، والتي تشمل جميع أجهزة الكمبيوتر المحمولة وأجهزة MacBooks والأجهزة اللوحية ذات الاتجاه الأفقي ، يبلغ عرضها حوالي 1600 بكسل.
• لا يزيد عرض الأجهزة اللوحية ذات الاتجاه الرأسي عن 778 بكسل (استنادًا إلى جهاز iPad).
• والأجهزة المحمولة. يعد هذا جزءًا مهمًا ، حيث يتم في الوقت الحاضر إنشاء أكثر من نصف حركة المرور على الإنترنت من خلال الأجهزة المحمولة ولن يكون ذلك مرضيًا إذا لم يتمكن المستخدمون من رؤية أشرطة التمرير على موقع الويب الخاص بك بشكل صحيح. ومع ذلك ، قد يكون هذا محيرًا ، والسبب في ذلك هو أن الهواتف الذكية الحديثة لها أحجام مختلفة تمامًا. نقترح عليك استخدام الرقم ، بحيث لا يزيد عن 500 بكسل.

الشيء الثاني الذي قد ترغب في التحكم فيه هو الوصول إلى شريط التمرير. يتيح لك خيار الإذن رفض الوصول إلى المكون الإضافي للمستخدمين الآخرين باستثناء المسؤولين والمحررين.

الآن يمكنك البدء في بناء المنزلقات الخاصة بك! هناك ثلاثة خيارات يمكنك استخدامها. يمكنك البدء من نقطة الصفر وإنشاء شريط تمرير جديد ، ويمكنك تصدير ملف من قوالب Slider Revolution أو استيراد عينة من أشرطة التمرير المضمنة في السمة الخاصة بك.

في مقالتنا ، سنراجع الخيار الأول ونبني منزلقًا جديدًا من البداية. سيسمح لنا هذا باستكشاف المزيد من إمكانيات البرنامج المساعد.

إنشاء شريط تمرير جديد

الآن عندما ننتهي من بعض الإعدادات الأساسية ، يمكننا المتابعة لإنشاء شريحة جديدة. افتح إعدادات Slider Revolution وانقر على New Blank Module.

سيُعرض عليك الذهاب من خلال الدليل السريع. انقر فوق دليل البدء إذا كنت ترغب في الحصول على درس قصير. أو قم بإنهاء الدليل لتخطي هذه الخطوة.

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

خيارات عامة

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

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

بعد ذلك ، يمكننا تخصيص النوع وطبقة سطح المكتب وارتفاعها وعرضها. توجد هذه الإعدادات ضمن علامة التبويب التخطيط.

بالنسبة للنوع ، لديك ثلاثة خيارات للاختيار من بينها:

• شريط التمرير - عدة شرائح متحركة يتم تدويرها لعرضها واحدة تلو الأخرى.
• مشهد - شريحة واحدة يمكن استخدامها كوحدة محتوى.
• دائري - العديد من الشرائح مع رؤية متعددة في نفس الوقت.

الإعداد التالي الذي نحتاج إلى تحديده هو التحجيم. هناك أيضًا ثلاثة خيارات متاحة:

تلقائي - هذه هي المعلمة الافتراضية التي تمد شريط التمرير إلى عرض الحاوية الرئيسية كما هو محدد بواسطة قالب WordPress الخاص بك.

العرض الكامل - يمتد خيار منزلق كامل العرض من اليسار إلى اليمين (ما زلت بحاجة إلى تحديد الارتفاع)

ملء الشاشة - لشرائح التمرير الكبيرة التي تملأ الشاشة بأكملها ، بغض النظر عن حجم المتصفح أو الجهاز.

باستخدام المكون الإضافي Slider Revolution ، يمكنك تحريك كل جزء من الصفحة على موقع الويب. يرجى مراعاة ، عند القيام بذلك ، سيتم زيادة وزن صفحتك ، وبالتالي ، سيستغرق تحميل صفحتك مزيدًا من الوقت. نتيجة لذلك ، قد يؤثر ذلك سلبًا على تصنيف مُحسنات محركات البحث.

إعدادات تغيير الحجم

يعمل تغيير الحجم الكلاسيكي أو الخطي على التأكد من ضغط شريط التمرير وفقًا لذلك بعد تكوين إعدادات حجم الشاشة الرئيسية (على سبيل المثال ، سيتم ضغط شريط التمرير 1000 × 400 بكسل إلى شريط تمرير 500 × 200 بكسل مع الخطوط والصور وعناصر شريط التمرير الأخرى).

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

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

مدى استجابة الشرائح

المضي قدما. لم ننتهي من الاستجابة بعد. يوجد حجم منطقة طبقة حيث يمكنك تحديد عرض المتصفح.

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

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

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

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

نظرة فاحصة على الخيارات

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

لم نكن نمزح عندما قلنا أن Slider Revolution لديها الكثير من الخيارات. هناك عدد كبير جدًا من العناصر التي يجب تغطيتها ، فلنصفها جميعًا قليلاً ثم نراجع العناصر الأكثر أهمية بطريقة أكثر تفصيلاً.

1. خيارات عامة

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

بشكل عام ، تسمح لك الخيارات العامة بإعداد ما يلي:

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

• الافتراضيات - نقترح هنا التركيز على معلمة واحدة مهمة - مدة الشريحة (المدة التي ستستغرقها كل شريحة).
• عام - يتضمن هذا القسم إعدادات عرض الشرائح للتدوير التلقائي ، والتوقف عند التمرير ، وتكرار الشرائح ، واختيار الشريحة الأولى المعينة. هنا أيضًا يمكنك إخفاء شريط التمرير أو تعطيله على الهاتف المحمول أو تحت عروض البكسل المحددة.
• عند التمرير - يتيح هذا الخيار للمستخدمين تحديد تأثيرات التمرير مثل اختلاف المنظر ، والأعماق ثلاثية الأبعاد ، والخط الزمني ، والتلاشي ، والتمويه ، والتدرج الرمادي والمزيد. جميع التأثيرات تأتي مع إعدادات قابلة للتخصيص.
• Spinner - أو أداة التحميل المسبق ، ويحتوي المكون الإضافي على 15 خيارًا من خيارات الدوار للاختيار من بينها.
• تتيح لك الخيارات المتقدمة تمكين التحميل البطيء أو تحديد صورة احتياطية أو تبسيط شريط التمرير على المتصفحات القديمة.
• CSS / jQuery - هنا يمكنك إضافة التعليمات البرمجية المخصصة الخاصة بك إلى أشرطة التمرير. لاحظ أنه من الأفضل استخدام هذا من قبل محترفين أو مستخدمين على دراية بمفهوم البرمجة والتشفير.
• كمشروط - هذا الخيار المحدد مطلوب في حالة رغبتك في إنشاء شريط تمرير يظهر كنافذة منبثقة أو مربع ضوئي ويوفر لك خيارات لموضع شريط التمرير ولون الغلاف والرمز القصير لاستخدامه عند إدراج شريط التمرير الشرطي في الصفحات.
• الجلد - يقدم الجلد الإعداد المسبق الذي يمكنك إنشاؤه وتعيينه لطبقات النص (يحدد لون التمييز والعنوان ونص المحتوى).

الوظائف الإضافية - ستجد هنا الوظائف الإضافية (ملاحظة - لا تتوفر الإضافات إلا إذا اشتريت ترخيص شريط التمرير الخاص بك).

2. خيارات التنقل

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

تتضمن جميع الخيارات سهولة تخصيص الإعدادات للموضع / المحاذاة ، والتحجيم ، والرؤية والتصميم العام / الإعدادات المسبقة.

تتضمن عناصر التنقل ما يلي:

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

3. خيارات الشرائح

يرتبط الجزء التالي من الإعدادات بخيارات الشريحة.

• الخلفية: اختر الخلفية للشريحة الخاصة بك. اختر من بين الصور الشفافة والملونة (يمكنك إضافة تدرج) أو صورة أو صورة خارجية أو مقطع فيديو (YouTube أو Video أو HTML5).
• الصورة المصغرة: حدد الصورة المصغرة المرئية بواسطة المسؤول والصورة المصغرة المستخدمة للتنقل.
• الرسوم المتحركة: اختر حركة الانتقال للشرائح الخاصة بك.
• المرشحات - 22 من المرشحات المختلفة لإضافتها إلى الشرائح الخاصة بك.
• التقدم - يسمح بتخصيص طول الشريحة والإيقاف المؤقت والرؤية على الشريحة.
• نشر القواعد - تحكم في ما إذا كانت شريحتك قد تم نشرها أو عدم نشرها.
• العلامات والارتباط - تساعد في إضافة فئة مخصصة ومعرف وبيانات HTML لشريحتك بالإضافة إلى ارتباط.
• المعلمات - أضف ما يصل إلى 10 معلمات مخصصة لاستخدامها في الشرائح والتنقل.
• Loop Layers - إدارة إعدادات الحلقة إذا كان شريط التمرير الخاص بك يحتوي على شريحة واحدة فقط.
• عند التمرير - قم بتخصيص اختلاف المنظر وتأثيرات التمرير لكل شريحة.

إضافة شرائح جديدة

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

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

ما عليك سوى تحديد الخيار Colored من القائمة المنسدلة Type في لوحة Source ، ثم النقر فوق الزر BG Color لاختيار اللون الخاص بك. إذا كنت تريد استخدام الفيديو ، فما عليك سوى إضافة المصدر.

إضافة طبقة جديدة للشريحة

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

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

خيارات الطبقة: كيفية الاستخدام

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

عندما تريد إضافة طبقة صورة إلى شريحتك ، ما عليك سوى النقر فوق "صورة" في القائمة المنسدلة " إضافة طبقة ". ثم قم بتحميل الصورة المطلوبة.

بجوار الإطار ، ستجد العديد من خيارات الطبقة (المحتوى ، النمط ، الحجم والموضع ، إلخ).

يعرض محتوى الطبقة بعض المعلومات الأساسية حول الطبقة. يمكنك ضبط التحميل البطيء وتغيير نوع المصدر.

باستخدام خيارات نمط الطبقة ، ستتمكن من إضافة خلفية ملونة.

الخيار التالي هو التباعد . يساعدنا التباعد في تحريك الطبقة من أعلى إلى أسفل ومن اليسار إلى اليمين ومن أسفل إلى أعلى ومن اليسار إلى اليمين. تم تمييزها بالحرف "M".

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

بعد ذلك ، يمكنك ضبط الموضع باستخدام Vertical Offset من خيارات Aligned Position. العب مع المعلمات X و Y لتحريك الطبقة الخاصة بك على الشريحة.

خيارات الطبقة المتقدمة

تتيح لك خيارات النمط المتقدمة تدوير طبقة أفقيًا وعموديًا ومركزياً وتتيح لك إضافة الظلال إلى الطبقات.

خيارات طبقة الرسوم المتحركة

الرسوم المتحركة هي الخيار الرئيسي في Slider Revolution. الفكرة الرئيسية للمكوِّن الإضافي هي إضافة عناصر متحركة إلى موقعك بدلاً من المرئيات الثابتة القياسية.

تضيف خيارات الرسوم المتحركة حركة إلى الشرائح ، باستخدام هذا الإجراء ، يمكنك تحريك الشرائح وتعيين الرسوم المتحركة للظهور والخروج.

يوجد سطرين لخيارات الظهور والخروج: IN و OUT.

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

يُستخدم القسم أدناه في مدة الرسوم المتحركة وتخفيف الرسوم المتحركة ولتحديد بدء الرسوم المتحركة . تحدد Duration المدة التي تستغرقها الرسوم المتحركة حتى تنتهي ، ويحدد خيار Start المدة الزمنية التي ستبدأ بعدها الرسوم المتحركة بمجرد تحميل الشريحة. يحدد التيسير السرعة التي ستتقدم بها الحركة.

الجدول الزمني للرسوم المتحركة

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

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

تأكد من تعيين قيم مختلفة لطبقة مختلفة ، بحيث لا تظهر مرة واحدة وتبدو فوضوية.

الآن ، دعونا نلقي نظرة فاحصة على خيارات الجدول الزمني

1. عرض القائمة

يمكن استخدام هذه الرموز لإخفاء الطبقات أو إظهارها وإخفاء أو إظهار الصفوف بناءً على المحاذاة الرأسية. فقط مسؤول الموقع لديه حق الوصول إلى هذه الخيارات.

2. مدة الجدول الزمني
يتم تحديد المدة الإجمالية للمخطط الزمني في Module General Options> Defaults. أيضًا ، يمكن ضبطه بشكل فردي في خيارات الشرائح> التقدم.

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

3. معاينة الجدول الزمني

من أجل معاينة المخطط الزمني ، تحتاج إلى النقر فوق أيقونة التشغيل أو ببساطة سحب الكتلة الخاملة.

4. إعادة تسمية الطبقات

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

5. طبقات z-index / ترتيب التراص

لتعيين ترتيب z-index / التكديس ، تحتاج فقط إلى سحب الطبقات في المخطط الزمني.

6. الرسوم المتحركة

لكل طبقة ، هناك رسوم متحركة داخلية وخارجية ورسوم متحركة إضافية للإطار الرئيسي. يتم عرض جميع الرسوم المتحركة في الجدول الزمني.

اسحب قالب حركة لضبط نقطة بداية الرسم المتحرك في المخطط الزمني. وقم بتحرير مدة الرسوم المتحركة عن طريق سحب نقطة نهاية الكتلة

خيارات حلقة الطبقة

تتيح لك علامة التبويب Loop إنشاء رسوم متحركة متكررة. يمكنك اختيار نوع الرسم المتحرك ، وتحديد سرعة الحلقة والتخفيف ، وتعيين وقت بدء الحلقة ووقت انتهائها.

هناك 8 أنواع يمكنك الاختيار من بينها: مخصص ، حلقات بندول ، حلقات تأثير ، موجة ، اهتزازات ، تدوير ، انزلاق وتحوم ، ونبض. لكل حركة حلقة مجموعة خيارات خاصة بها.

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

يتيح لك Effect Loops الاختيار من بين عدة خيارات - Grayscale و Blink و Flattern و Lithing. تبدو جميع التأثيرات بشكل مختلف ، لذلك نوصيك بالاطلاع على كل خيار لاختيار الخيار الأفضل لك.

تجعل الرسوم المتحركة الموجة طبقتك تدور في حركة مشابهة للموجة. يدور حول محور خارج الطبقة. يمكنك تعيين Rotation X و Y Point لتحديد موضع المحور الذي ستدور حوله الطبقة ، و Start Angle لتحديد موضع بدء الرسم المتحرك ونصف قطر لمدار الدوران.

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

تجعل الحلقة الدورية الطبقة تدور حول نقطة المحور المحددة. ستدور الطبقة وتشكل دائرة كاملة إذا اخترت العنصر الأول من القائمة المنسدلة للتدوير - عنصر التدوير.

لجعل الطبقة تتحرك من اليسار إلى اليمين ، ومن اليمين إلى اليسار ، ومن الأعلى إلى الأسفل ، بشكل مائل ، يمكنك استخدام الرسوم المتحركة Slide and Hover. يمكنك تعيين موضع البداية والنهاية للرسوم المتحركة.

تعمل الرسوم المتحركة النبضية على تكبير الطبقة وتصغيرها باستمرار. حدد Zoom Start و Zoom End. القيم الافتراضية هنا هي 1 لكل من البداية والنهاية. هذا يعني أن الطبقة ستبقى بنسبة 100٪ من حجمها. بمعنى آخر ، لن يتم تحريكه. إذا قمت بإدخال 0.5 في Zoom Start ، فستبدأ طبقتك بنسبة 50٪ من حجمها والتكبير إلى 100٪ من حجمها ، ثم تعود إلى 50٪ ، إلخ.

خيارات تحوم الطبقة

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

إضافة تأثيرات التحويم في Slider Revolution

أولاً ، تحتاج إلى تشغيل تحوم الطبقة. حدد الطبقة التي تريد إضافة التأثير إليها ، وانقر فوق Hover ضمن Layer Options. انقر فوق ممكّن لتشغيله.

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

إعدادات التمرير

أول شيء يمكنك تعيينه هنا هو المؤشر. في القائمة المنسدلة ، يمكنك العثور على خيارات مختلفة للمؤشر. يؤدي الوضع التلقائي والافتراضي نفس الوظائف ولن يعكسا أي اختلاف. يحدد Crosshair و Pointer شكل مؤشر الماوس على الشاشة.

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

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

تحوم الرسوم المتحركة

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

أيضًا ، يمكنك تعيين التخفيف من أجل الانتقال. لديك العديد من الخيارات للاختيار من بينها.

منقي

إلى الطبقة الخاصة بك ، يمكنك إضافة عامل تصفية. بمعنى آخر ، يمكنك طمس القيثارة إلى حد معين. يتم التعبير عن الخيار بالبكسل. كلما زادت القيمة ، "زاد سمك" التعتيم.

أسلوب

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

في خيارات طبقة التمرير

في خيارات التمرير ، تجعل من الممكن تحريك الشريحة عند تمرير الماوس. There are three options – Parallax , Timeline Scroll Based , and Filter Effect Scroll Based .

Layer Action Options

Actions make your layers interactive. For example, you can make a layer open a link when a user clicks on it.

Click on the Action icon to choose the type of action you need. The first dropdown is where you can choose the type of action that you would like to occur . There are a lot of options here: Link Actions, Slide Actions, Layer Actions, Media Actions, and Fullscreen Actions. Your chance is full depends on you and your goals, whether you want the layer to open the link or to switch the slide.

After you made a choice of what action to add, you need to set this particular option. For example, we are going to add a link. Select the option of Simple Link, and on the new screen, you will be offered to enter some parameters such as the URL itself, selecting the interaction and action type, and more.

Layer Visibility Options

If you want your layer to be visible on all devices , then make sure the switches shown in the image below are all turned ON under the Visibility section . The first one is for desktop, the second one is for laptops and horizontally oriented tablets, the third one is for vertically oriented tablets, and the last one is for mobile phones.

If you don't want your slider to be shown on some devices, simply turn off this option.

Text layer

After we review most of the options that we need for the layer setup, let's move to the other type of layer and try to add some text to our slide.

There are two options to choose from Quick Style heading or content. The main difference between them is pre-styled options.

Let's just point out some primary options you need to set for the text layer. They are the following:

• In the Content section, we add our text, and aligned it.
• In Style changed the font and its size, weight, line-height
• Customized the Size & Pos to change the location of the layer within the slider
• In Animation, we add some effects and speed for our text.

When adding a text layer there will appear a black box. You need to enter your text there. Everything you change will be visible in your work-frame.

Moving on to the Style tab. By default the font style that is applied to the text is Roboto. Choose the font family you prefer from the dropdown. Make sure that you selected the text layer before you start editing it.

Besides choosing a font family, you can also determine the font-size, line-height, font-weight, and letter spacing here as well. All these options adjust the look and feel of the text. So take your time to set it up and play around with these options to find the best combination.

Next, choose the color for your text. You can use the color picker and find the color that suits your page and slide perfectly. After that, you can save the change and see how the slider looks on your page.

If everything is good, you can move to the next step which defines the horizontal and vertical alignment of the text layer. For instance, you would like to have your text layer start 300px from the left edge of the screen, and 100px from the top. According to this, the horizontal alignment will be set to left, and vertical alignment to top. Fill in the X and Y fields respectively and save the changes to check how the text looks.

For customizing options you can use the same options we went through during the image layer setup. You can add animations, define visibility, create actions, etc.

You can also input HTML code into your text layer field. Thanks to this option, you can insert different shortcodes and create your own HTML elements using text layers.

كيفية إنشاء تأثير اختلاف المنظر باستخدام ثورة المنزلق

المنظر هو أحد التأثيرات الأكثر شيوعًا التي تجعل موقع الويب أكثر إثارة للإعجاب وديناميكية. ربما تكون قد رأيت الكثير من مواقع الويب والمواضيع المدمجة مع هذا التأثير المحدد. والآن سنعرض كيف يمكنك بناء واحدة بنفسك باستخدام المكون الإضافي Slider Revolution.

ما هو المنظر؟

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

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

خلق المنظر في ثورة المنزلق

قم أولاً بتشغيل المنظر . انتقل إلى الخيارات العامة للوحدة النمطية> عند التمرير> الميزات القائمة على التمرير> المنظر وقم بتحويل مفتاح Parallax Enabled إلى On .

هناك الكثير من قيم العمق المختلفة التي يقدمها المكون الإضافي. حدد الأفضل بالنسبة لك. يمكنك أيضًا إدخال القيم الخاصة بك.

إضافة Parallax إلى صور الخلفية

لإضافة تأثير المنظر إلى صورة الخلفية الخاصة بك ، انتقل إلى خيارات الشريحة> عند التمرير> إعدادات المنظر والثلاثي الأبعاد ، واختر العمق المفضل من القائمة المنسدلة.

هناك قواعد صارمة عند اختيار العمق. من الأفضل تجربة قيم مختلفة ومعرفة أيهما يعمل بشكل أفضل مع شريط التمرير. تؤثر الأعماق المختلفة بشكل مباشر وتخلق تأثيرات مختلفة. لهذا السبب نوصيك بتجربتهم لرؤية النتيجة.

إضافة اختلاف المنظر إلى الطبقات

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

حدد طبقتك ، انتقل إلى خيارات الطبقة> عند التمرير> علامة التبويب المنظر وثلاثية الأبعاد ، واختر مستوى العمق المطلوب.

نتيجة لذلك ، ستحصل على طبقة بها اختلاف المنظر الذي يتم تنشيطه على حركة الماوس.

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

إضافة طبقة زر

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

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

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

بمجرد اختيار النمط ، يمكنك تغيير الإعدادات المتقدمة وتخصيص مظهره. يمكن العثور على جميع الإعدادات ضمن علامة التبويب خيارات الطبقة.

يمكنك تغيير المظهر الأولي للزر وتغيير النص وتغيير عرضه عند التمرير وإعداد الرسوم المتحركة.

كيفية جعل شريط التمرير مستجيبًا

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

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

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

يمكنك الآن اختيار الجهاز الذي ترغب في محاكاته من القائمة المنسدلة. قم بتشغيل الجهاز الذي تريد التحقق من عرض شريط التمرير. الأجهزة المتاحة هي: سطح المكتب ، الكمبيوتر المحمول ، الجهاز اللوحي ، الهاتف المحمول.

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

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

أخيرًا ، احفظ شريط التمرير الخاص بك ، وتحقق من كيف يبدو حيًا.

إضافة شريط التمرير إلى الصفحة

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

أو إذا قمت بفتح Slider Revolution من لوحة القيادة الخاصة بك. ابحث عن الوحدة النمطية الحالية وحدد الخيار تضمين.

في النافذة المنبثقة ، حدد خيار الصفحات والمنشورات وانسخ الرمز القصير.

يجب أن يبدو الرمز القصير مثل [rev_slider alias = "title"] [/ rev_slider] مع "العنوان" استنادًا إلى الاسم المستعار الذي أعطيته شريط التمرير.

عرض شريط التمرير مع Elementor

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

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

كيفية تصدير أشرطة التمرير

لتصدير شريط التمرير ، انتقل إلى Slider Revolution بالنقر فوق علامة التبويب ذات الصلة من قائمة لوحة القيادة. سيتم عرض جميع أشرطة التمرير التي قمت بإنشائها أو استيرادها هناك.

حرك الماوس فوق الصورة المصغرة للوحدة التي تريد تصديرها. انقر فوق السهم الصغير في الزاوية اليمنى السفلية. من بين جميع الخيارات التي ظهرت ، حدد تصدير وانقر عليها.

سترى مربع حوار التأكيد الذي سيعلمك بأن التصدير قد يستغرق بعض الوقت. انقر فوق "نعم ، تصدير شريط التمرير" وسيبدأ التنزيل. عند انتهاء التنزيل ، سيكون لديك ملف مضغوط من شريط التمرير.

ليستنتج

تقريبًا جميع السمات التي طورتها StylemixThemes تتضمن المكون الإضافي Slider Revolution في الحزمة. نحن نحب هذا البرنامج القوي الذي يمنحنا فرصة لجعل مواقع الويب أكثر جاذبية وجاذبية وتفاعلية.

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