تخطيطات الشبكة مرتبة، ويمكن أن تصبح مرتبة مملة. صورة تميل خارج عمودها، أو بطاقة تنمو قليلاً تحت المؤشر: تحويلات صغيرة مثل هذه تفصل صفحة مصممة عن صفحة مكدسة. ال يحول تمديد في الإضافات الرئيسية للعنصر يضع مجموعة أدوات تحويل CSS الكاملة على كل عنصر: الترجمة والتدوير والقياس والانحراف والقلب، مع إعدادات منفصلة للحالات العادية وحالات التمرير.
ما يفعله ملحق التحويلات #
بمجرد التمكين، يحصل كل عنصر عنصر على يحول القسم تحته متقدم علامة التبويب. الوجه تمكين التحويلات تظهر إلى نعم وستة عناصر تحكم، يطبق كل منها تحويل CSS على العنصر دون لمس تدفق التخطيط الفعلي
- يترجم: حرك العنصر على طول المحورين X وY، بالنسبة المئوية لحجمه.
- يدور: قم بتدويرها بأي زاوية.
- مقياس: تكبيرها أو تقليصها على كل محور بشكل مستقل.
- انحراف: قم بتمريره للحصول على مظهر ديناميكي قطري.
- الوجه الأفقي / الوجه العمودي: قم بنسخها بنقرة واحدة.
ال عادي و تحوم تحتوي علامات التبويب على قيم منفصلة، بحيث يمكن للعنصر أن يبقى في وضع السكون ويتحول عندما يهبط المؤشر عليه، مع مدة انتقال تتحكم فيها.
قبل أن تبدأ #
- ووردبريس مع العنصر مثبتة ونشطة.
- الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ اتبع دليل التثبيت أولاً.
- يعد Transforms امتدادًا مجانيًا، لذا لا يلزم الحصول على ترخيص Pro.
كيفية تمكين امتداد التحويلات #
من لوحة تحكم WordPress الخاصة بك، انتقل إلى الإضافات الرئيسية وافتح ملحقات علامة التبويب. التحويلات موجودة في الحاجيات الرسوم المتحركة مجموعة مع شارة ساخنة، بين الرسوم المتحركة المدخل وكشف. انقر فوق التبديل الخاص به حتى يتحول إلى اللون الأرجواني، ثم اضغط حفظ التغييرات وانتظر حتى يتم حفظ إعدادات “ الخضراء بنجاح في إشعار”.
افتح لوحة التحويلات على أحد العناصر #
حدد العنصر في محرر Elementor، وعنصر واجهة مستخدم الصورة في العرض التوضيحي، وافتح متقدم علامة التبويب. توسيع يحول قسم يحمل شارة MA الأرجوانية والمفتاح تمكين التحويلات إلى نعم. تظهر عناصر التحكم الستة في التحويل ضمن علامتي التبويب "عادي" و"تحوم"، ويتم فتح كل منها برمز القلم الرصاص الخاص بها.
نقل وتوسيع نطاق العنصر #
انقر فوق القلم الرصاص بجانب يترجم ويتم فتح شريطين منزلقين: Translate X وTranslate Y. يدفع العرض التوضيحي الصورة 71 على المحور X، وينزلق نحو حافة القسم الموجود على اللوحة القماشية أثناء تحرك شريط التمرير. القيم مرتبطة بحجم العنصر، ولكل محور إعداد الاستجابة الخاص به لكل جهاز.
ال مقياس التحكم يعمل بنفس الطريقة. يؤدي ضبط المقياس X على 1.4 في العرض التوضيحي إلى توسيع الصورة إلى ما هو أبعد من عمودها، مما يؤدي إلى تداخل حدود القسم لنوع الاختراق الذي لا يمكن أن يفعله تأطير شبكة عادية. اترك المقياس Y فارغًا ويتبع X، أو اضبط كليهما للتمدد المستقل.
تدوير وانحراف العمل بنفس الطريقة. افتح عنصر التحكم، واسحب شريط التمرير، وستظهر اللوحة القماشية الزاوية أثناء التنقل.
إضافة تحويل تحوم #
التبديل إلى تحوم تنطبق علامة التبويب ونفس عناصر التحكم فقط أثناء وجود المؤشر على العنصر، بالإضافة إلى إضافتين: الوجه الأفقي و الوجه العمودي تصبح نعم/لا مفاتيح، و مدة الانتقال (مللي ثانية) يتحكم شريط التمرير في مدى سرعة تحريك التغيير. يقوم العرض التوضيحي بتشغيل Flip Horizontal مع انتقال 400 مللي ثانية، بحيث تعكس الصورة نفسها بسلاسة عند التمرير وتلتقط للخلف عندما يغادر المؤشر.
النتيجة على الصفحة #
نشر والتحقق من الواجهة الأمامية. يتم إزاحة الصورة وتوسيعها بعد عمودها تمامًا كما تم ترتيبها في المحرر، ويتم تحريكها لتشغيل الوجه بسهولة 400 مللي ثانية. التحويلات عبارة عن CSS خالص، لذلك لا يتم إعادة تدفق أي أحمال إضافية والتخطيط حول العنصر أبدًا.
شيء واحد يجب تذكره: التحويلات مرئية فقط. لا يزال العنصر يحتل مكانه الأصلي في التخطيط، لذلك يمكن للعنصر المترجم بشكل كبير أن يتداخل مع جيرانه. هذه هي النقطة عادةً، ولكن تحقق من الجهاز اللوحي والهاتف المحمول، حيث يغطي نفس الإزاحة جزءًا أكبر من الشاشة.
حيث يكتسب المتحولون مكانهم #
- صور الاختراق. الصورة التي تم تحجيمها وتحريكها إلى ما بعد حافة العمود تعطي عمقًا لقسم البطل.
- تحوم ردود الفعل. تُقرأ البطاقات التي ترفع المؤشر أو تميل أو تنمو قليلاً تحت المؤشر على أنها قابلة للنقر عليها.
- لهجات استدارة. تقع الشارات والطوابع والملصقات بشكل طبيعي بزاوية طفيفة.
- أقسام منحرفة. بضع درجات من الانحراف على المقسم أو الزر تكسر رتابة المستطيل.
- الأصول المعكوسة. اقلب سهمًا واحدًا أو رسمًا توضيحيًا بدلاً من تصدير صورة ثانية.
فيديو تعليمي #
شاهد كل عنصر تحكم أثناء العمل، بدءًا من تمكين الامتداد وحتى التمرير على الصفحة المنشورة.
الأسئلة المتداولة #
كيف يمكنني تدوير أو قياس عنصر في Elementor؟
قم بتمكين ملحق التحويلات في علامة التبويب "امتدادات الإضافات الرئيسية"، وحدد العنصر، وافتح التحويلات ضمن علامة التبويب "متقدم". قم بتشغيل التحويلات الممكّنة، ثم استخدم عنصر التحكم "تدوير" أو "توسيع النطاق"؛ تقوم اللوحة بمعاينة التغيير مباشرة أثناء سحب شريط التمرير.
هل يمكنني تطبيق تحويل مختلف على التحويم؟
نعم. تحتوي اللوحة على علامتي تبويب عاديين وتحوم منفصلين. قم بتعيين قيم الراحة في الوضع العادي، وقيم التمرير في الوضع المتحرك، واستخدم شريط تمرير مدة الانتقال للتحكم في مدى سرعة تحريك العنصر بين الحالتين.
هل تؤدي التحويلات إلى كسر تخطيط صفحتي؟
لا. تحويلات CSS مرئية فقط، لذلك يحتفظ العنصر بمساحته الأصلية في التخطيط ولا يتدفق المحتوى المحيط أبدًا. يمكن للعنصر المحول أن يتداخل مع العناصر المجاورة حسب التصميم، لذا فإن معاينة الجهاز اللوحي والهاتف المحمول لتأكيد الإزاحات لا تزال تبدو صحيحة.
ما هي التحويلات التي يتضمنها الامتداد؟
ترجمة X وY، والتدوير، والمقياس X وY، والانحراف، والقلب الأفقي، والقلب العمودي، كل منها متاح في كل من الحالات العادية وحالات التحويم. كل عنصر تحكم سريع الاستجابة، لذلك يمكن أن تختلف القيم لكل جهاز.
هل ملحق التحويلات مجاني؟
نعم. تأتي التحويلات مع الإصدار المجاني من Master Addons for Elementor، في مجموعة Animation Widgets في علامة التبويب Extensions. تغطي صفحة التسعير ما تضيفه خطط Pro.
إلتحاق بالركب #
يمنحك ملحق Transforms مجموعة أدوات تحويل CSS داخل لوحة Elementor: تحريك أي شيء وتدويره وقياسه وانحرافه وقلبه، مع تضمين حالات التحليق والانتقالات السلسة. ابدأ بصورة فرعية واحدة أو رفع تحوم واحد وقم بالبناء من هناك. يقترن بشكل طبيعي مع ملحق مدخل الرسوم المتحركة للعناصر التي تصل في الحركة، والتشكيلة الكاملة من عناصر واجهة المستخدم والإضافات الرئيسية يغطي الباقي.
