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

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

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

إعدادات Divi Toolbox العامة

تتم إضافة شاشة خيار Divi Toolbox إلى قائمة لوحة معلومات Divi. يتم تمكين الإعدادات هنا ، ولكن يتم إجراء التعديلات في أداة التخصيص.

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

تؤدي إضافة المزيد من الرموز الاجتماعية إلى فتح حقل يمكنك من خلاله إدخال عنوان URL لـ 9 شبكات اجتماعية أخرى.

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

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

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

إعدادات رأس Divi Toolbox

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

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

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

إعدادات تذييل مربع أدوات Divi

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

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

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

إعدادات Divi Toolbox Mobile

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

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

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

إعدادات مدونة Divi Toolbox

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

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

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

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

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

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

إعدادات وحدات Divi Toolbox

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

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

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

إعدادات إضافات Divi Toolbox

تتضمن علامة التبويب " الإضافات" أدوات التحميل المسبق والنوافذ المنبثقة وخلفية الجسيمات وتأثير الإمالة ثلاثية الأبعاد والتمرير المنظر للوحدات النمطية.

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

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

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

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

ترخيص Divi Toolbox

هناك نوعان من الرخص للاختيار من بينها:

• الترخيص العادي (للاستخدام في مشروع واحد) - 49.00 يورو
• ترخيص ممتد (للاستخدام في مشاريع غير محدودة) - 169.00 يورو

خواطر ختامية

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

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

إذا كنت مهتمًا بإضافة الكثير من التأثيرات الجديدة إلى Divi بأسهل طريقة ممكنة ، فإن Divi Toolbox تستحق المشاهدة.

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

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