تسليط الضوء على البرنامج المساعد Divi - كثافة الصورة

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

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

في تسليط الضوء على هذا المكون الإضافي ، سنلقي نظرة على ما يمكن أن يفعله المكون الإضافي. الصور مأخوذة من Unsplash.com.

التثبيت والإعدادات

يضيف المكون الإضافي وحدة نمطية إلى Divi Builder. لتثبيت الوحدة ، ما عليك سوى تحميل البرنامج المساعد وتنشيطه. استخدم Divi Builder كالمعتاد وضع وحدة Image Intense في مخططك. يمكن استخدامه بدلاً من وحدة الصورة.

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

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

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

أمثلة - تشغيل الصورة بشكل مكثف

لمعرفة ما يمكن القيام به ، قمت بإنشاء العديد من التخطيطات وإضافة العديد من وحدات Image Intense النمطية. إليك نظرة على بعض الرسوم المتحركة والميزات.

الرسوم المتحركة ومقاسات الصور

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

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

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

الصورة في المنتصف تستخدم نمط دوالا .

يمكنك أن ترى في هذه الصورة تحرك الإطار إلى أسفل الصورة ويعرض الرسالة الآن.

تستخدم الصورة الموجودة في المنتصف نمط تراكب ماديسون .

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

وضع المزج

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

الصورة في المنتصف تستخدم وضع المزج المختلط المسمى Hard Light .

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

العتامة

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

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

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

يستخدم هذا الشخص صورة كبيرة تبلغ 1024 × 1024 مع عدم وجود اقتصاص وشفافية صورة تبلغ 0.4. يستخدم كلا عنواني التراكب علامات HTML. أنا أستخدم العلامات للقوة والتشديد والكسر. إنها تستخدم أسلوب تحويم بورتلاند .

لقد قمت بتعيين عتامة التمرير على 1 حتى يتم الكشف عن الصورة بالكامل عند التمرير.

إضافة تدرج مخصص

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

إليك نظرة على التدرج اللوني باستخدام نمط تراكب ماديسون .

تعرض الصورة الموجودة على اليسار تراكبًا قبل التمرير.

عند التمرير ، تتم إزالة التراكب لإظهار الصورة. هذا واحد يستخدم أسلوب Hanoi hover.

تبادل الصور

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

بعد ذلك ، عيّن مستوى التعتيم بحيث تظهر صورة واحدة بدون تحويم وتظهر الصورة الأخرى عند التمرير. الشخص الذي يظهر عند التمرير سيعرض أيضًا رسالة.

لقد اخترت هذه الصورة كصورة الخلفية وقمت بتعيين صورة الوحدة على عتامة 0.

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

مزج الصور

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

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

ها هي الصورة عند التمرير. يمكن أيضًا تعديل التعتيم لإظهار كليهما ولكن يمكن أن يكون أحدهما أكثر وضوحًا.

إضافة روابط إلى نص

يمكن إضافة الروابط إلى نص التسمية التوضيحية. يتم ذلك عن طريق وضع رمز قصير زائف مع النص متبوعًا بعنوان URL. يتم توفير الرمز المختصر في وصف الحقل حتى تتمكن من نسخه ولصقه. سيستخدم سمات href و target و class.

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

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

أزرار

يمكنك إضافة زر إلى الصورة لإنشاء دعوة للعمل.

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

تستخدم الصورة الموجودة على اليسار تدرجًا رأسيًا بين درجتين من اللون الأسود: الأول بدرجة عتامة 65٪ والثاني بنسبة عتامة بنسبة 19٪ (19٪! أعلم ... مرحبًا بك!).

تعد التراكبات والأزرار والتدرجات اللونية رائعة لإنشاء CTA's.

السعر والترخيص والتوثيق

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

يتم توفير الوثائق على موقع الويب وتتضمن أمثلة ومنطقة عرض حيث يمكنك رؤية التأثيرات مباشرة. يتم توفير الدعم من خلال نظام تذاكر الدعم.

افكار اخيرة

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

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

نريد أن نسمع منك! هل استخدمت Image Intense؟ أخبرنا عن تجربتك في التعليقات أدناه!

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