تسليط الضوء على البرنامج المساعد Divi: Divi Sensei قبل بعد شريط التمرير

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

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

Divi Sensei قبل وبعد وحدة شريط التمرير

قم بتحميل وتثبيت البرنامج المساعد Divi Sensei قبل وبعد كالمعتاد. ثلاثة ليست هناك إعدادات للذهاب من خلالها. بمجرد تحميل وتنشيط المكون الإضافي ، سترى وحدة جديدة مضافة إلى Divi Builder تسمى Sensei Before و After Slider.

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

دعنا نلقي نظرة على ميزات وخيارات شريط التمرير. بالنسبة لهذه الأمثلة ، أستخدم صورًا من Unsplash.com.

علامة تبويب المحتوى

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

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

علامة تبويب التصميم

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

المنزلق

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

ملصقات

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

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

تراكب

يتم تمكين التراكب بشكل افتراضي. يمكنك تعطيله وضبط اللون وضبط التعتيم. اللون الافتراضي أسود مع عتامة 50٪.

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

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

أمثلة على شريط التمرير Divi Sensei قبل وبعد

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

مقارنة الرسومات

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

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

خدمات قبل وبعد المحفظة

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

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

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

كمرجع ، إليك الصورة مع تحريك المقبض لإظهار المزيد من الصورة التالية.

مقارنة السلعة

في هذا المثال ، أقوم باستبدال صور الشاي الثلاث في تخطيط Tea Shop بـ 3 منزلقات DS B&A. أنا أستخدم ألوانًا من التخطيط للأزرار وعناصر التحكم في شريط التمرير. تم ضبط شريط التمرير الأوسط على الوضع الرأسي فقط ليكون مختلفًا. يستخدم التراكب لونًا من التخطيط مع عتامة منخفضة.

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

مقارنة المواقع

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

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

شراء

يمكنك شراء Divi Sensei Before and After Slider في Divi Marketplace. التكلفة 5 دولارات للاستخدام غير المحدود للموقع وسنة واحدة من الدعم والتحديثات. يشمل هذا السعر ضمان استرداد الأموال لمدة 30 يومًا.

خواطر ختامية

The Divi Sensei Before and After Slider عبارة عن وحدة نمطية بسيطة. على سبيل المثال ، لا يحتوي شريط التمرير على عناصر تحكم في العرض ولا تتضمن التسميات حدودًا وظلال مربعة وتدرجات وما إلى ذلك ، ولكن الإعدادات التي يسهّل بها ملاءمة تصميم كل تخطيط أضفته إليه. بالنسبة للسعر وما يمكن أن يفعله ، يكون مستوى الإعدادات منطقيًا وتمكنت من الحصول على التصميمات التي أردتها بسهولة.

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

نريد أن نسمع منك. هل جربت Divi Sensei قبل وبعد Slider؟ أخبرنا برأيك في التعليقات أدناه.

صورة مميزة عبر Elvetica / shutterstock.com