اليوم نحن متحمسون لتقديم خيارات Divi Sticky ، وهي ميزة جديدة تمامًا تتيح لك لصق أي عنصر في أعلى أو أسفل إطار عرض المتصفح أثناء التمرير لأعلى ولأسفل الصفحة. يتيح لك ذلك إنشاء رؤوس وقوائم وأزرار ثابتة والاحتفاظ بالمعلومات المهمة الأخرى في العرض أثناء التمرير ، مثل العبارات التي تحث المستخدم على اتخاذ إجراء أو نماذج الاشتراك العائمة. ولكن هذا في الحقيقة مجرد خدش لسطح ما يمكن أن تفعله خيارات Divi Sticky .
تقدم خيارات Divi Sticky أكثر بكثير من مجرد تحديد المواقع الثابتة. هذا نظام متقدم يسمح بالتفاعل الفريد المستند إلى التمرير وتعديل النمط اللاصق. يمكنك اختيار متى وأين تصبح العناصر ثابتة بناءً على الاتجاه الذي يقوم الزائر بالتمرير فيه وموضع العنصر على الصفحة. لديك أيضًا سيطرة كاملة على النمط اللاصق لأي عنصر ، مما يسمح بانتقالات التصميم اللزجة!
دورة كيفية إنشاء موقع على شبكة الإنترنت بدون مهارات برمجة
في هذا البرنامج التعليمي “كيفية إنشاء موقع ويب” ، سأوضح لك كيفية إنشاء موقع ويب جميل مكون من 5 صفحات خطوة بخطوة باستخدام WordPress وموضوع Divi القوي و Divi Visual Builder
أمثلة الخيار اللاصق
هناك الكثير الذي يمكنك القيام به باستخدام خيارات Divi اللاصقة الجديدة. قبل أن ندخل في التفاصيل ، ألق نظرة على بعض هذه العروض التوضيحية المذهلة التي أنشأها فريق التصميم لدينا. قم بالتمرير لأعلى ولأسفل الصفحة بأكملها للحصول على التأثير الكامل!
التمسك بأعلى أو أسفل أو كليهما
استخدام الخيارات اللاصقة سهل. ما عليك سوى الانتقال إلى Advanced> Scroll Effects> Sticky Position والاختيار من بين الخيارات الثابتة المتاحة:
التمسك بالأعلى
سيؤدي هذا إلى لصق العنصر بأعلى إطار عرض المتصفح أثناء التمرير لأسفل. بمجرد أن يصل الجزء العلوي من العنصر إلى الجزء العلوي من إطار عرض المتصفح ، فإنه سيتمسك بالأعلى ويبقى هناك أثناء التمرير. يعمل هذا بشكل رائع مع قوائم العناوين الثابتة ، كما هو موضح أدناه.
التمسك بأسفل
سيؤدي هذا إلى لصق العنصر بأسفل إطار عرض المتصفح أثناء التمرير لأعلى. بمجرد أن يصل الجزء السفلي من العنصر إلى الجزء السفلي من إطار عرض المتصفح ، فإنه سيتمسك بالجزء السفلي ويظل هناك أثناء التمرير. يعمل هذا بشكل رائع مع نماذج optin العائمة أو العبارات التي تحث المستخدم على اتخاذ إجراء ، كما هو موضح أدناه.
التمسك بالأعلى والأسفل
سيؤدي هذا إلى لصق العنصر في الجزء العلوي من إطار عرض المتصفح أثناء التمرير لأسفل مرورًا بالعنصر ، وسيؤدي ذلك إلى تمسك العنصر بأسفل منفذ عرض المتصفح أثناء التمرير لأعلى مرورًا بالعنصر.
تعديل النمط اللاصق والانتقال
يمكنك أيضًا إعطاء العناصر اللاصقة تصميمًا فريدًا ، حيث تتألق الخيارات اللاصقة حقًا. بمجرد تمكين الخيارات اللاصقة لعنصر ما ، تحصل جميع إعدادات التصميم على خيارات تصميم الحالة اللاصقة الجديدة. هذا يعني أنه يمكن أن يكون للعناصر نمطين مختلفين: نمط قياسي ونمط مثبت. بمجرد أن يصبح العنصر لزجًا ، سينتقل التصميم من نمطه القياسي إلى نمطه اللاصق.
على سبيل المثال ، في الفيديو أدناه ، قمت بتمكين تحرير نمط العصا لخيار لون خلفية القائمة. بعد ذلك ، قمت بتعيين لون خلفية برتقالي للنمط اللاصق ولون خلفية شفاف للنمط القياسي. عندما أقوم بالتمرير لأسفل وتصبح القائمة لزجة ، ينتقل لون الخلفية إلى اللون البرتقالي. يضمن لون الخلفية البرتقالي هذا أن تظل روابط القائمة قابلة للقراءة أثناء التمرير عبر مجموعة متنوعة من العناصر المختلفة.
لتمكين ضبط النمط اللاصق ، انقر فوق الرمز اللاصق الجديد فوق أي إعداد تصميم. يمكنك بعد ذلك ضبط النمط القياسي والأسلوب اللاصق بشكل مستقل. بمجرد أن يصبح العنصر لزجًا ، سيفترض أسلوبه اللزج. على سبيل المثال ، يمكنك نقل لون خلفية الرأس اللاصق من شفاف إلى صلب. يمكنك تقليل ارتفاع الحالة اللاصقة للقائمة بحيث تتقلص وتشغل مساحة أقل أثناء التمرير. ليس هناك حد لما يمكنك القيام به لأنه يمكن تعديل كل إعداد تصميم لمنح العناصر اللاصقة أنماطًا فريدة تمامًا.
تطبيق الحدود اللاصقة
يمكنك أيضًا إعطاء العناصر اللاصقة حدًا لزجًا. خارج الحدود اللاصقة ، لن تظل العناصر لزجة بعد الآن. على سبيل المثال ، في الفيديو أدناه ، قمت بتعيين القسم الأصلي كحد ثابت لقائمة الشريط الجانبي العائم. هذا يعني أنه سيصبح لزجًا عندما تصل القائمة إلى الجزء العلوي من إطار عرض المتصفح ، ولكنها ستتوقف عن الالتصاق عندما أخرج من القسم الرئيسي. هذه القائمة اللاصقة ذات صلة فقط بالعناصر الموجودة في هذا القسم ، لذا فإن تعيين حدود لاصقة أمر منطقي.
الخيارات الثابتة متاحة اليوم
تفتح خيارات Divi Sticky الجديدة العديد من الاحتمالات الجديدة لمواقع Divi. فهو لا يتيح لك إنشاء مجموعة كبيرة من الرؤوس والقوائم اللاصقة بسهولة فحسب ، بل يمكن أيضًا دمج العناصر اللاصقة بطرق إبداعية لإنشاء بعض التصميمات الجديدة المثيرة للاهتمام حقًا. تتوفر خيارات Divi Sticky اليوم ، لذا قم بتنزيل Divi واصطحبها في جولة. أخبرنا برأيك في التعليقات ولا تنسَ التحقق مرة أخرى الأسبوع المقبل للحصول على المزيد من ميزات Divi الرائعة في طريقك.
ملاحظة المحرر: ظهرت نسخة من هذه المقالة في الأصل على elegantthemes .
