7 من أفضل ممارسات Divi UX التي يجب أن تضعها في اعتبارك

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

دعنا نذهب اليها!

1. استخدام الرسوم المتحركة الدقيقة

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

انتقل إلى علامة تبويب تصميم عنصر التصميم

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

استخدم كميات صغيرة من كثافة الرسوم المتحركة

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

2. تحسين الاستجابة يدويًا

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

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

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

دعنا نذهب خلال العملية خطوة بخطوة.

تغيير حجم الصفوف

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

• جعل هذا الصف بعرض كامل: نعم
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

إضافة جزء أو مساحة صف

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

• الحشوة اليسرى: 23vw (سطح المكتب) ، 30 بكسل (جهاز لوحي) ، 25 بكسل (هاتف)
• الحشو الأيمن: 23vw (سطح المكتب) ، 30 بكسل (جهاز لوحي) ، 25 بكسل (هاتف)

إضافة مساحة العمود

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

• الحشوة اليمنى للعمود 1: 1vw (سطح المكتب) ، 0vw (الكمبيوتر اللوحي والهاتف)
• العمود 2 ، الحشوة اليسرى: 1vw (سطح المكتب) ، 0vw (الكمبيوتر اللوحي والهاتف)
• الحشوة اليمنى للعمود 2: 1vw (سطح المكتب) ، 0vw (الكمبيوتر اللوحي والهاتف)
• العمود 3 ، الحشوة اليسرى: 1vw (سطح المكتب) ، 0vw (الكمبيوتر اللوحي والهاتف)

تقليل أحجام النص

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

3. استخدام وحدات منفذ العرض بدلاً من وحدات البكسل

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

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

4. تمديد النمط لاتجاه النص

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

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

دعنا نذهب من خلال هذه الخطوات.

افتح أي وحدة نمطية تحتوي على نص

افتح أي وحدة نمطية في صفحتك تحتوي على نص وانتقل إلى إعدادات النص.

انقر بزر الماوس الأيمن فوق خيار اتجاه النص

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

قم بتوسيع اتجاه النص في الاختيار في جميع أنحاء القسم أو الصفحة بأكملها

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

5. التبديل بين وضع Visual Builder و Wireframe

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

وهل تعلم أنه يمكنك فتح شكلي لعنصر التصميم والتبديل بين Visual Builder و Wireframe Mode مع استمرار فتح النموذج؟ يتيح لك ذلك إجراء تغييرات في الواجهة الخلفية لتصميمك ومشاهدة إعدادات التصميم الجديدة الخاصة بك في مكانها وقتما تشاء.

6. استيراد / تصدير تخطيط مباشرة على الصفحة

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

• حفظ التخطيط في مكتبة Divi الخاصة بك
• الذهاب إلى مكتبة Divi الخاصة بك وتصدير ملف JSON
• الذهاب إلى مكتبة Divi الخاصة بموقعك المباشر
• تحميل ملف JSON
• الذهاب إلى صفحة موقع الويب الخاص بك الحية
• تحميل ملف JSON من التنسيقات المحفوظة

بعد ذلك ، يمكنك ببساطة استخدام خيار الاستيراد / التصدير الموجود مباشرة على صفحتك. سيسمح لك ذلك بإنشاء ملف JSON دون الحاجة إلى الوصول إلى مكتبة Divi على الإطلاق.

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

7. استخدام خيار "التصغير" بانتظام للحفاظ على المنظور

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

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

افكار اخيرة

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

صورة مميزة بواسطة aurielaki / shutterstock.com