تسليط الضوء على برنامج Divi Plugin - وحدة Tilt Blurb Divi

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

ما هي وحدة Tilt Blurb؟

Tilt Blurb Module هو مكون إضافي تابع لجهة خارجية من Hadworm يضيف وحدة دعاية جديدة إلى Divi Builder (لكل من Divi و Extra) التي تضيف تأثيرات إمالة مثيرة للاهتمام ، مما يخلق مظهرًا ثلاثي الأبعاد. في تمييز المكون الإضافي هذا ، سنلقي نظرة على الوحدة ونرى ما يمكن أن تفعله. لقد عرضت بعض الصور المتحركة ولكن معظمها سيكون صورًا نظرًا لأحجام ملفات gif. تم أخذ صور الأمثلة من موقع Unsplash.com ومن WordPress.org.

تثبيت وحدة Tilt Blurb Divi

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

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

تتضمن الوحدة علامات التبويب القياسية بالإضافة إلى علامة جديدة:

• المحتوى - نص ، رابط ، صورة وأيقونة ، خلفية ، تسمية المسؤول
• إعدادات الإمالة - إعدادات الإمالة وخلفية الإمالة وطبقات الإمالة
• التصميم - الصورة والأيقونة والنص ونص الرأس والنص الأساسي والحدود والتحجيم والتباعد
• متقدم - معرف CSS وفئاته و CSS المخصص والرسوم المتحركة والرؤية

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

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

مثال مع الإعدادات الافتراضية

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

الحجم مع الصورة

يؤدي هذا إلى تغيير حجم الدعاية المغلوطة باستخدام صورة مخفية وتوسيط المحتوى.

إمالة حجم الدعاية مع صورتين مع محتوى عائم

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

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

مقدار الإمالة

يتيح لك شريط تمرير مقدار الإمالة التحكم في مدى إمالة الصورة. الإعداد الافتراضي هو 20. هذا يستخدم 100.

إمالة المنظور

إمالة المنظور يعمق المنظور. كلما انخفض الرقم كلما كان المنظور أعمق. الافتراضي هو 1000. هذا المثال هو 200.

مقياس الإمالة

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

سرعة الميل

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

إمالة للخلف

يغير Tilt Reverse اتجاه الإمالة. عادةً ما يتحرك الميل بعيدًا عن الماوس. يعمل الوضع العكسي على إمالة الصورة باتجاه الماوس.

الوهج المائل

يضيف Tilt Glare تأثير الوهج الذي يتبع الماوس. كمية الوهج قابلة للتعديل. الصورة أعلاه تستخدم .8 وهو الإعداد الافتراضي. هذا رائع لإنشاء تأثيرات ضوئية.

نصف قطر الحدود

يغير Border Radius شكل الحد. القيمة الافتراضية هي 40. يتم تعيين هذا على 100 ، وهو الحد الأقصى للمبلغ.

إمالة الخلفية

يتيح لك Tilt Background تعيين لون الخلفية وتأثيرات الحدود.

إمالة الخلفية

أحد الآثار الجانبية لـ Tilt Background Color هو أنه يخلق توهجًا لطيفًا حول الصورة.

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

إمالة المسافة الخلفية

تعمل خاصية Tilt Background Distance على ضبط مسافة الظل. يتم ضبطه على -50 افتراضيًا. يستخدم هذا المثال -25.

يستخدم هذا المثال مسافة خلفية مائلة تبلغ 0 وعتامة 0.3 ، مما يؤدي إلى إنشاء تراكب فوق الخلفية.

إمالة حجم الخلفية / المقياس

Milt Background Size / Scale يغير مسافة خلفية الإمالة. الافتراضي هو 1.04. هذا هو 1.2.

طبقات الميل

يطبق Tilt Layers نفس الصورة مرارًا وتكرارًا كطبقات متعددة ، مما يؤدي إلى إنشاء تأثير ثلاثي الأبعاد ثابت. يمكنه استخدام صورة أو لون خلفية ويمكنك ضبط عمق الطبقة. لقد قمت بتطبيق الصورة أعلاه بعمق 50 طبقة.

الصورة التي قدمتها تُرى هنا على أنها الحدود. لقد قمت بتعديل مقدار الإمالة لتسهيل الرؤية.

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

يستخدم هذا عمق طبقة 10.

يستخدم هذا المثال كلاً من خلفية الإمالة وطبقات الإمالة.

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

ها هو الشعار بدون لون طبقة. من الصعب رؤية الجانبين.

الترخيص والدعم والتوثيق

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

افكار اخيرة

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

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

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