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

يعد Next Image Effect Pro مكونًا إضافيًا تابعًا لجهة خارجية لـ Divi يضيف الكثير من تأثيرات تمرير الصور التي تساعد في جذب الانتباه إلى الصور والروابط الخاصة بك. يضيف المكون الإضافي 7 وحدات إلى Divi Builder ، لكل منها مجموعة من التصاميم والتأثيرات الخاصة به. في هذه المقالة ، سنلقي نظرة على Next Image Effect Pro ونرى ما يمكن أن يفعله.

التثبيت التالي Image Effect Pro

شراء وتنزيل البرنامج المساعد من Divi Marketplace. اتبع هذه الخطوات لتثبيته:

1. في لوحة معلومات WordPress ، انتقل إلى الإضافات > إضافة جديد
2. قم بتحميل البرنامج المساعد من جهاز الكمبيوتر الخاص بك
3. انقر فوق التثبيت الآن
4. بمجرد تثبيت المكون الإضافي ، انقر فوق تنشيط

بعد ذلك ، ستحتاج إلى تنشيط الترخيص. انتقل إلى الإضافات > ترخيص Image Effect Pro . أدخل مفتاح الترخيص الخاص بك واحفظ التغييرات.

وحدات تأثير الصورة التالية

يضيف Image Effect Pro مجموعة من الوحدات النمطية إلى Divi Builder تتضمن مجموعات نمطية من الصور والنصوص. يضيفون المئات من تأثيرات التمرير ومجموعات الاتجاهات. تتضمن خيارات أنماط النص عناصر تحكم مستقلة للعناوين ونص التركيز والمحتوى وخلفياتها.

تشمل الوحدات:

• تحوم الصورة الدائرية
• مربع تحوم الصورة
• تأثير رمز الصورة
• تأثير الصورة الضخم
• الحد الأدنى من التمرير فوق الصورة
• انتقل إلى الصورة التالية
• Ultimate Image Hover

تحوم الصورة الدائرية

يتكون Circular Image Hover من قسمين رئيسيين: الصورة والنص (محتوى التمرير). لقد أضفت صورة مستطيلة. يعرض الصورة في شكلها الأصلي ولكن بعد ذلك يجعلها دائرية. إذا كانت الصورة مربعة ، فستكون هذه دائرة كاملة.

تتضمن إعدادات التصميم الخاصة بالصورة موضع ظل الصندوق والقوة واللون.

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

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

لها 19 تأثير تحوم مع 4 خيارات اتجاه لكل تأثير. هذا هو التأثير 1. للتأثيرات طرق مختلفة لنقل الصورة إلى الخارج ونقل المحتوى إلى الداخل. وهي تشمل التكبير / التصغير والتقليب والشرائح وغير ذلك الكثير.

مربع تحوم الصورة

يشتمل مربع تمرير الصورة أيضًا على الصورة ذات المحتوى التمرير. لا يغير شكل الصورة.

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

يحتوي على 13 تأثير تحوم مختلف بما في ذلك التقلبات والشرائح والتلاشي والتكبير / التصغير وما إلى ذلك. العديد من التأثيرات تضيف خيارات للاتجاهات. هذا هو التأثير 1.

تأثير رمز الصورة

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

ما يميز هذا هو الرموز. يمكنك إضافة 4 أيقونات مختلفة وفتحها في نفس النافذة أو في نافذة جديدة.

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

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

تأثير الصورة الضخم

Mega Image Effect هي بطاقة أخرى ذات وجهين بها صورة من جانب ومحتوى على الجانب الآخر. يعرض الجانب الأمامي الصورة كالمعتاد.

يعرض الجزء الخلفي من البطاقة المحتوى كالمعتاد ويتضمن تعديلات الخط والخلفية. ما يميزه هو القدرة على إضافة زر.

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

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

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

هذا المثال هو تحويم الصورة اليسرى المتوازية ، وتأثير تكبير النص ، وتأخير نص صغير.

الحد الأدنى من التمرير فوق الصورة

الحد الأدنى من تأثير الصورة هو أبسط وحدة في المجموعة. يعرض صورة مع تأثيرات تحوم.

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

هذا المثال هو Scale Out Rotate. يتم تصغير الصورة وتدويرها قليلاً في حالتها الطبيعية. عند التمرير ، يتم تكبير الصورة وتدويرها إلى حالتها الطبيعية.

هذا هو طمس. يتم تعتيم الصورة حتى تحوم فوقها ، ثم يتم إلغاء تشويشها ببطء حتى تصبح حادة.

هذا وامض. تومض سلسلة من الومضات البيضاء فوق الصورة ثم تختفي وأنت تحوم فوقها.

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

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

يمكنك أيضًا ضبط التراكب. عيّن لونًا خالصًا أو تدرجًا لونيًا. يتضمن أيضًا أنواع التدرج والضوابط القياسية.

يتيح لك موضع الخلفية عرض الجزء العلوي أو السفلي من الصورة.

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

Ultimate Image Hover

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

عند التمرير ، يتم تفتيح التراكب وكشف النص.

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

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

هذا هو التأثير 4. يعرض الصورة في مربع ويضيف حدًا حول الداخل يتداخل مع النهايات.

هذا هو تأثير 5. يقوم بتغميق التراكب ويضيف حدًا حول داخل الصورة ويعرض الصورة في مربع.

يضع التأثير 6 العنوان ونص التركيز في الأعلى مع وجود سطر تحته والمحتوى في الأسفل.

يحافظ التأثير 8 على الحجم المستطيل الكبير ويضيف حدًا رفيعًا.

هذا هو التأثير 10. عند التمرير ، يتم تكبير الصورة ، ويصبح الخط x ويظهر التدرج اللوني.

مثال على تأثير الصورة التالية

للحصول على مثال بسيط ، إليك نظرة على تخطيط Divi Home Renovation مع إضافة وحدة Ultimate Image Hover لإنشاء CTA. لقد أضفته إلى يسار الصورة واستخدمت الألوان من التخطيط.

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

شراء Next Image Effect Pro

يتوفر Next Image Effect Pro في Divi Marketplace مقابل 49 دولارًا. يتضمن استخدامًا غير محدود لموقع الويب ، وضمان استرداد الأموال لمدة 30 يومًا ، وسنة واحدة من الدعم والتحديثات.

خواطر ختامية

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

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

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