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

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

وحدة Divi Next Blurb

بمجرد تحميل وتنشيط Divi Next Blurb ، تتم إضافة وحدة جديدة إلى Divi Builder تسمى Next Blurb. لن تضطر إلى إعداد أي شيء. إنه جاهز للاستخدام.

علامة التبويب Divi Next Blurb Content

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

وضع نص العنوان المسبق أعلى العنوان بينما يضع عنوان المشاركة النص أسفل العنوان. يمكنك تغيير علامة العنوان لكل منها.

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

قم بتضمين زر بتصميم الزر القياسي.

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

علامة التبويب Divi Next Blurb Design

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

الصورة الدعاية التالية

تتيح لك إعدادات الصورة تحديد موضع الصورة وضبط الحدود. هذا المثال يضع الصورة في أسفل اليسار.

هذا واحد يضع الصورة في الوسط الأيمن. لقد أضفت حدًا وغيرت لونه. لقد أضفت أيضًا ظل الصندوق.

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

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

Next أيقونة Blurb

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

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

التالي تأثيرات التحويم الدعاية

يتضمن تأثير التمرير خيارًا ثنائي الأبعاد وإمالة. يوفر الخيار ثنائي الأبعاد 16 تأثيرًا للاختيار من بينها.

يوضح هذا المثال تأثير التمرير النبضي.

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

يضيف هذا المثال المزيد من الوهج والمنظور. هناك العديد من الطرق لتخصيص الإمالة.

نص الدعاية التالية

يحتوي نص العنوان على إعدادات للنص السابق والعنوان والنص المنشور. تتضمن جميع الإعدادات التي تتوقعها للنص. لقد قمت بتعديل كل مجموعات النص الثلاث في هذا المثال.

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

أزرار الدعاية التالية

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

يتضمن Button Hover الكثير من التعديلات بما في ذلك 2D والخلفية والسكتة الدماغية والأيقونة. تتضمن الإعدادات ثنائية الأبعاد الكثير من تأثيرات التمرير.

يتضمن Button Hover الكثير من التعديلات بما في ذلك 2D والخلفية والسكتة الدماغية والأيقونة. تحتوي الإعدادات ثنائية الأبعاد على الكثير من تأثيرات التمرير. يتضمن تأثير الخلفية مجموعة أخرى من التأثيرات. هذا يظهر الزر على تحوم.

يضيف Stroke تعديلات الخلفية والحدود بالإضافة إلى العديد من تأثيرات التمرير. يضيف هذا المثال حدًا حول الداخل ويغير الألوان.

يضيف الرمز أيضًا الكثير من تأثيرات التمرير التي ستؤثر فقط على الرمز عند التمرير.

دفي التالي مثال واحد

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

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

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

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

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

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

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

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

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

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

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

دفي التالي ديفي المثال الثاني

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

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

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

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

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

إليك كيف تبدو الدلالات التالية داخل التخطيط.

سعر Divi Next Blurb ومكان الشراء

لدى Divi Next Blurb ثلاثة تراخيص متاحة:

• ترخيص واحد - 25.00 دولارًا
• ترخيص غير محدود - 49.00 دولار
• ترخيص مدى الحياة - 99.00 دولارًا

يمكنك شرائه من موقع المطور.

خواطر ختامية

Divi Next Blurb هي وحدة نمطية مثيرة للاهتمام لـ Divi. لقد خدشت السطح فقط لما يمكنه فعله وما يمكن تصميمه به. لديها الكثير من الإعدادات والتعديلات أكثر مما كنت أتوقع. كل عنصر تقريبًا له إعدادات حدوده ومسافاته وظلاله.

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

أنا أحب Divi Next Blurb كثيرًا. إذا كنت مهتمًا بوحدة blurb سهلة الاستخدام تقوم بأكثر من وحدة Divi القياسية ، فإن Divi Next Blurb تستحق المشاهدة.

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

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